Compare commits
53 Commits
595c457bc1
...
8c53dffd51
Author | SHA1 | Date |
---|---|---|
teutat3s | 8c53dffd51 | |
Francesco | 02f7c4b291 | |
Joaquín Sánchez | 9da77637b2 | |
Joaquín Sánchez | 62f70250d5 | |
Joaquín Sánchez | 873c62e9ef | |
Emanuel Pina | b1ff1e6277 | |
TAKAHASHI Shuuji | f644148844 | |
Joaquín Sánchez | 3120bbb77f | |
renovate[bot] | 6cbe65c9d8 | |
qezwan | 1c908363cb | |
Jafar Farganlooj | c01a15c930 | |
nonnullish | 0c15aa55d8 | |
Joaquín Sánchez | 9f04e17e57 | |
Joaquín Sánchez | 308b50cbad | |
TAKAHASHI Shuuji | e44833b18a | |
Joaquín Sánchez | 0fa87f71a4 | |
Emanuel Pina | edfbe2c3ed | |
Joaquín Sánchez | 70c7e93919 | |
TAKAHASHI Shuuji | 95e466146d | |
Joaquín Sánchez | efec212a9f | |
Kevin Pliester | 1844af0a41 | |
Joaquín Sánchez | 72b80d4984 | |
Francesco | 6dc5a68c80 | |
TAKAHASHI Shuuji | 310b32c123 | |
Joaquín Sánchez | 748dd5e19f | |
Joaquín Sánchez | c00d6f7bf8 | |
Joaquín Sánchez | fc5d248094 | |
Joaquín Sánchez | 6f20ce5bba | |
TAKAHASHI Shuuji | edcc8741bf | |
renovate[bot] | 3584151fab | |
Joaquín Sánchez | efb6967e6a | |
Joaquín Sánchez | eddbb1eee9 | |
Joaquín Sánchez | 6b40319723 | |
Joaquín Sánchez | 913e2892f7 | |
renovate[bot] | a3c5272e07 | |
Joaquín Sánchez | 55037f04cd | |
patak | 1fefb6e5b6 | |
patak | 3769176eaa | |
TAKAHASHI Shuuji | 082650d458 | |
Joaquín Sánchez | 36004a7eba | |
Joaquín Sánchez | 81ef8ff9aa | |
Joaquín Sánchez | da163903b1 | |
patak | ccfa7a8d10 | |
Xabi | b9394c2fa5 | |
Yudai Nishiyama | 1954c34628 | |
patak | 9f005a0a59 | |
TAKAHASHI Shuuji | bf0c562794 | |
renovate[bot] | 54fe0c1ab9 | |
Shinigami | 1bbc2eca24 | |
renovate[bot] | dcc1b74824 | |
ocavue | 8eb6b2378a | |
lazzzis | 40415f34a4 | |
Emanuel Pina | be4752ee0c |
|
@ -1,15 +0,0 @@
|
||||||
*.css
|
|
||||||
*.png
|
|
||||||
*.ico
|
|
||||||
*.toml
|
|
||||||
*.patch
|
|
||||||
*.txt
|
|
||||||
Dockerfile
|
|
||||||
public/
|
|
||||||
public-dev/
|
|
||||||
public-staging/
|
|
||||||
https-dev-config/localhost.crt
|
|
||||||
https-dev-config/localhost.key
|
|
||||||
Dockerfile
|
|
||||||
elk-translation-status.json
|
|
||||||
docs/translation-status.json
|
|
19
.eslintrc
19
.eslintrc
|
@ -1,19 +0,0 @@
|
||||||
{
|
|
||||||
"extends": "@antfu",
|
|
||||||
"ignorePatterns": ["!pages/public"],
|
|
||||||
"overrides": [
|
|
||||||
{
|
|
||||||
"files": ["locales/**.json"],
|
|
||||||
"rules": {
|
|
||||||
"jsonc/sort-keys": "error"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"rules": {
|
|
||||||
"vue/no-restricted-syntax":["error", {
|
|
||||||
"selector": "VElement[name='a']",
|
|
||||||
"message": "Use NuxtLink instead."
|
|
||||||
}],
|
|
||||||
"n/prefer-global/process": "off"
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -0,0 +1 @@
|
||||||
|
* text=auto eol=lf
|
|
@ -2,4 +2,4 @@
|
||||||
name: 🚀 New feature proposal
|
name: 🚀 New feature proposal
|
||||||
about: Propose a new feature
|
about: Propose a new feature
|
||||||
labels: 's: pending triage'
|
labels: 's: pending triage'
|
||||||
---
|
---
|
||||||
|
|
|
@ -21,7 +21,7 @@ jobs:
|
||||||
- run: corepack enable
|
- run: corepack enable
|
||||||
- uses: actions/setup-node@v4
|
- uses: actions/setup-node@v4
|
||||||
with:
|
with:
|
||||||
node-version: 18
|
node-version: 20
|
||||||
cache: pnpm
|
cache: pnpm
|
||||||
|
|
||||||
- name: 📦 Install dependencies
|
- name: 📦 Install dependencies
|
||||||
|
|
|
@ -5,10 +5,6 @@
|
||||||
"unmute",
|
"unmute",
|
||||||
"unstorage"
|
"unstorage"
|
||||||
],
|
],
|
||||||
"editor.codeActionsOnSave": {
|
|
||||||
"source.fixAll.eslint": true
|
|
||||||
},
|
|
||||||
"editor.formatOnSave": false,
|
|
||||||
"files.associations": {
|
"files.associations": {
|
||||||
"*.css": "postcss"
|
"*.css": "postcss"
|
||||||
},
|
},
|
||||||
|
@ -23,7 +19,44 @@
|
||||||
"i18n-ally.preferredDelimiter": "_",
|
"i18n-ally.preferredDelimiter": "_",
|
||||||
"i18n-ally.sortKeys": true,
|
"i18n-ally.sortKeys": true,
|
||||||
"i18n-ally.sourceLanguage": "en",
|
"i18n-ally.sourceLanguage": "en",
|
||||||
|
|
||||||
|
// Enable the ESlint flat config support
|
||||||
|
"eslint.experimental.useFlatConfig": true,
|
||||||
|
|
||||||
|
// Disable the default formatter, use eslint instead
|
||||||
"prettier.enable": false,
|
"prettier.enable": false,
|
||||||
"volar.completion.preferredTagNameCase": "pascal",
|
"editor.formatOnSave": false,
|
||||||
"volar.completion.preferredAttrNameCase": "kebab"
|
|
||||||
|
// Auto fix
|
||||||
|
"editor.codeActionsOnSave": {
|
||||||
|
"source.fixAll": "explicit",
|
||||||
|
"source.organizeImports": "never"
|
||||||
|
},
|
||||||
|
|
||||||
|
// Silent the stylistic rules in you IDE, but still auto fix them
|
||||||
|
"eslint.rules.customizations": [
|
||||||
|
{ "rule": "style/*", "severity": "off" },
|
||||||
|
{ "rule": "*-indent", "severity": "off" },
|
||||||
|
{ "rule": "*-spacing", "severity": "off" },
|
||||||
|
{ "rule": "*-spaces", "severity": "off" },
|
||||||
|
{ "rule": "*-order", "severity": "off" },
|
||||||
|
{ "rule": "*-dangle", "severity": "off" },
|
||||||
|
{ "rule": "*-newline", "severity": "off" },
|
||||||
|
{ "rule": "*quotes", "severity": "off" },
|
||||||
|
{ "rule": "*semi", "severity": "off" }
|
||||||
|
],
|
||||||
|
|
||||||
|
// Enable eslint for all supported languages
|
||||||
|
"eslint.validate": [
|
||||||
|
"javascript",
|
||||||
|
"javascriptreact",
|
||||||
|
"typescript",
|
||||||
|
"typescriptreact",
|
||||||
|
"vue",
|
||||||
|
"html",
|
||||||
|
"markdown",
|
||||||
|
"json",
|
||||||
|
"jsonc",
|
||||||
|
"yaml"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,7 +8,7 @@ For guidelines on contributing to the documentation, refer to the [docs README](
|
||||||
|
|
||||||
### Online
|
### Online
|
||||||
|
|
||||||
You can use [StackBlitz Codeflow](https://stackblitz.com/codeflow) to fix bugs or implement features. You'll also see a Codeflow button on PRs to review them without a local setup. Once the elk repo has been cloned in Codeflow, the dev server will start automatically and print the URL to open the App. You should receive a prompt in the bottom-right suggesting to open it in the Editor or in another Tab. To learn more, check out the [Codeflow docs](https://developer.stackblitz.com/codeflow/what-is-codeflow).
|
You can use [StackBlitz Codeflow](https://stackblitz.com/codeflow) to fix bugs or implement features. You'll also see a Codeflow button on PRs to review them without a local setup. Once the elk repo has been cloned in Codeflow, the dev server will start automatically and print the URL to open the App. You should receive a prompt in the bottom-right suggesting to open it in the Editor or in another Tab. To learn more, check out the [Codeflow docs](https://developer.stackblitz.com/codeflow/what-is-codeflow).
|
||||||
|
|
||||||
[![Open in Codeflow](https://developer.stackblitz.com/img/open_in_codeflow.svg)](https://pr.new/elk-zone/elk)
|
[![Open in Codeflow](https://developer.stackblitz.com/img/open_in_codeflow.svg)](https://pr.new/elk-zone/elk)
|
||||||
|
|
||||||
|
@ -21,7 +21,6 @@ To develop and test the Elk package:
|
||||||
2. Ensure using the latest Node.js (16.x).
|
2. Ensure using the latest Node.js (16.x).
|
||||||
If you have [nvm](https://github.com/nvm-sh/nvm), you can run `nvm i` to install the required version.
|
If you have [nvm](https://github.com/nvm-sh/nvm), you can run `nvm i` to install the required version.
|
||||||
|
|
||||||
|
|
||||||
3. The package manager used to install and link dependencies must be [pnpm](https://pnpm.io/) v7. To use it you must first enable [Corepack](https://github.com/nodejs/corepack) by running `corepack enable`. (Note: on Linux in a standard Node 16+ environment, you should follow the instructions to install via Node's `corepack` rather than using the `curl` command)
|
3. The package manager used to install and link dependencies must be [pnpm](https://pnpm.io/) v7. To use it you must first enable [Corepack](https://github.com/nodejs/corepack) by running `corepack enable`. (Note: on Linux in a standard Node 16+ environment, you should follow the instructions to install via Node's `corepack` rather than using the `curl` command)
|
||||||
|
|
||||||
4. Check out a branch where you can work and commit your changes:
|
4. Check out a branch where you can work and commit your changes:
|
||||||
|
|
13
README.md
13
README.md
|
@ -39,8 +39,8 @@ The Elk team maintains a deployment at:
|
||||||
|
|
||||||
### Self-Host Docker Deployment
|
### Self-Host Docker Deployment
|
||||||
|
|
||||||
In order to host Elk yourself you can use the provided Dockerfile to build a container with elk. Be aware, that Elk only loads properly if the connection is done via SSL/TLS. The Docker container itself does not provide any SSL/TLS handling. You'll have to add this bit yourself.
|
In order to host Elk yourself you can use the provided Dockerfile to build a container with elk. Be aware, that Elk only loads properly if the connection is done via SSL/TLS. The Docker container itself does not provide any SSL/TLS handling. You'll have to add this bit yourself.
|
||||||
One could put Elk behind popular reverse proxies with SSL Handling like Traefik, NGINX etc.
|
One could put Elk behind popular reverse proxies with SSL Handling like Traefik, NGINX etc.
|
||||||
|
|
||||||
1. checkout source ```git clone https://github.com/elk-zone/elk.git```
|
1. checkout source ```git clone https://github.com/elk-zone/elk.git```
|
||||||
1. got into new source dir: ```cd elk```
|
1. got into new source dir: ```cd elk```
|
||||||
|
@ -52,7 +52,6 @@ One could put Elk behind popular reverse proxies with SSL Handling like Traefik,
|
||||||
> [!NOTE]
|
> [!NOTE]
|
||||||
> The provided Dockerfile creates a container which will eventually run Elk as non-root user and create a persistent named Docker volume upon first start (if that volume does not yet exist). This volume is always created with root permission. Failing to change the permissions of ```/elk/data``` inside this volume to UID:GID 911 (as specified for Elk in the Dockerfile) will prevent Elk from storing it's config for user accounts. You either have to fix the permission in the created named volume, or mount a directory with the correct permission to ```/elk/data``` into the container.
|
> The provided Dockerfile creates a container which will eventually run Elk as non-root user and create a persistent named Docker volume upon first start (if that volume does not yet exist). This volume is always created with root permission. Failing to change the permissions of ```/elk/data``` inside this volume to UID:GID 911 (as specified for Elk in the Dockerfile) will prevent Elk from storing it's config for user accounts. You either have to fix the permission in the created named volume, or mount a directory with the correct permission to ```/elk/data``` into the container.
|
||||||
|
|
||||||
|
|
||||||
### Ecosystem
|
### Ecosystem
|
||||||
|
|
||||||
These are known deployments using Elk as an alternative Web client for Mastodon servers or as a base for other projects in the fediverse:
|
These are known deployments using Elk as an alternative Web client for Mastodon servers or as a base for other projects in the fediverse:
|
||||||
|
@ -107,7 +106,7 @@ We're really excited that you're interested in contributing to Elk! Before submi
|
||||||
|
|
||||||
### Online
|
### Online
|
||||||
|
|
||||||
You can use [StackBlitz Codeflow](https://stackblitz.com/codeflow) to fix bugs or implement features. You'll also see a Codeflow button on PRs to review them without a local setup. Once the elk repo has been cloned in Codeflow, the dev server will start automatically and print the URL to open the App. You should receive a prompt in the bottom-right suggesting to open it in the Editor or in another Tab. To learn more, check out the [Codeflow docs](https://developer.stackblitz.com/codeflow/what-is-codeflow).
|
You can use [StackBlitz Codeflow](https://stackblitz.com/codeflow) to fix bugs or implement features. You'll also see a Codeflow button on PRs to review them without a local setup. Once the elk repo has been cloned in Codeflow, the dev server will start automatically and print the URL to open the App. You should receive a prompt in the bottom-right suggesting to open it in the Editor or in another Tab. To learn more, check out the [Codeflow docs](https://developer.stackblitz.com/codeflow/what-is-codeflow).
|
||||||
|
|
||||||
[![Open in Codeflow](https://developer.stackblitz.com/img/open_in_codeflow.svg)](https://pr.new/elk-zone/elk)
|
[![Open in Codeflow](https://developer.stackblitz.com/img/open_in_codeflow.svg)](https://pr.new/elk-zone/elk)
|
||||||
|
|
||||||
|
@ -152,14 +151,14 @@ You can consult the [PWA documentation](https://docs.elk.zone/pwa) to learn more
|
||||||
- [UnoCSS](https://uno.antfu.me/) - The instant on-demand atomic CSS engine
|
- [UnoCSS](https://uno.antfu.me/) - The instant on-demand atomic CSS engine
|
||||||
- [Iconify](https://github.com/iconify/icon-sets#iconify-icon-sets-in-json-format) - Iconify icon sets in JSON format
|
- [Iconify](https://github.com/iconify/icon-sets#iconify-icon-sets-in-json-format) - Iconify icon sets in JSON format
|
||||||
- [Masto.js](https://neet.github.io/masto.js) - Mastodon API client in TypeScript
|
- [Masto.js](https://neet.github.io/masto.js) - Mastodon API client in TypeScript
|
||||||
- [shikiji](https://shikiji.netlify.app/) - A beautiful and powerful syntax highlighter
|
- [shiki](https://shiki.style/) - A beautiful yet powerful syntax highlighter
|
||||||
- [vite-plugin-pwa](https://github.com/vite-pwa/vite-plugin-pwa) - Prompt for update, Web Push Notifications and Web Share Target API
|
- [vite-plugin-pwa](https://github.com/vite-pwa/vite-plugin-pwa) - Prompt for update, Web Push Notifications and Web Share Target API
|
||||||
|
|
||||||
## 👨💻 Contributors
|
## 👨💻 Contributors
|
||||||
|
|
||||||
<a href="https://github.com/elk-zone/elk/graphs/contributors">
|
<a href="https://github.com/elk-zone/elk/graphs/contributors">
|
||||||
<img src="https://contrib.rocks/image?repo=elk-zone/elk" />
|
<img src="https://contrib.rocks/image?repo=elk-zone/elk" />
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
## 📄 License
|
## 📄 License
|
||||||
|
|
||||||
|
|
2
app.vue
2
app.vue
|
@ -4,7 +4,7 @@ provideGlobalCommands()
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
|
||||||
if (process.server && !route.path.startsWith('/settings')) {
|
if (import.meta.server && !route.path.startsWith('/settings')) {
|
||||||
const url = useRequestURL()
|
const url = useRequestURL()
|
||||||
|
|
||||||
useHead({
|
useHead({
|
||||||
|
|
|
@ -6,8 +6,8 @@ defineProps<{
|
||||||
square?: boolean
|
square?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const loaded = $ref(false)
|
const loaded = ref(false)
|
||||||
const error = $ref(false)
|
const error = ref(false)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -5,7 +5,7 @@ defineOptions({
|
||||||
inheritAttrs: false,
|
inheritAttrs: false,
|
||||||
})
|
})
|
||||||
|
|
||||||
const { account, as = 'div' } = $defineProps<{
|
const { account, as = 'div' } = defineProps<{
|
||||||
account: mastodon.v1.Account
|
account: mastodon.v1.Account
|
||||||
as?: string
|
as?: string
|
||||||
}>()
|
}>()
|
||||||
|
|
|
@ -10,35 +10,35 @@ const { account, command, context, ...props } = defineProps<{
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
const isSelf = $(useSelfAccount(() => account))
|
const isSelf = useSelfAccount(() => account)
|
||||||
const enable = $computed(() => !isSelf && currentUser.value)
|
const enable = computed(() => !isSelf.value && currentUser.value)
|
||||||
const relationship = $computed(() => props.relationship || useRelationship(account).value)
|
const relationship = computed(() => props.relationship || useRelationship(account).value)
|
||||||
|
|
||||||
const { client } = $(useMasto())
|
const { client } = useMasto()
|
||||||
|
|
||||||
async function unblock() {
|
async function unblock() {
|
||||||
relationship!.blocking = false
|
relationship.value!.blocking = false
|
||||||
try {
|
try {
|
||||||
const newRel = await client.v1.accounts.$select(account.id).unblock()
|
const newRel = await client.value.v1.accounts.$select(account.id).unblock()
|
||||||
Object.assign(relationship!, newRel)
|
Object.assign(relationship!, newRel)
|
||||||
}
|
}
|
||||||
catch (err) {
|
catch (err) {
|
||||||
console.error(err)
|
console.error(err)
|
||||||
// TODO error handling
|
// TODO error handling
|
||||||
relationship!.blocking = true
|
relationship.value!.blocking = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function unmute() {
|
async function unmute() {
|
||||||
relationship!.muting = false
|
relationship.value!.muting = false
|
||||||
try {
|
try {
|
||||||
const newRel = await client.v1.accounts.$select(account.id).unmute()
|
const newRel = await client.value.v1.accounts.$select(account.id).unmute()
|
||||||
Object.assign(relationship!, newRel)
|
Object.assign(relationship!, newRel)
|
||||||
}
|
}
|
||||||
catch (err) {
|
catch (err) {
|
||||||
console.error(err)
|
console.error(err)
|
||||||
// TODO error handling
|
// TODO error handling
|
||||||
relationship!.muting = true
|
relationship.value!.muting = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -46,21 +46,21 @@ useCommand({
|
||||||
scope: 'Actions',
|
scope: 'Actions',
|
||||||
order: -2,
|
order: -2,
|
||||||
visible: () => command && enable,
|
visible: () => command && enable,
|
||||||
name: () => `${relationship?.following ? t('account.unfollow') : t('account.follow')} ${getShortHandle(account)}`,
|
name: () => `${relationship.value?.following ? t('account.unfollow') : t('account.follow')} ${getShortHandle(account)}`,
|
||||||
icon: 'i-ri:star-line',
|
icon: 'i-ri:star-line',
|
||||||
onActivate: () => toggleFollowAccount(relationship!, account),
|
onActivate: () => toggleFollowAccount(relationship.value!, account),
|
||||||
})
|
})
|
||||||
|
|
||||||
const buttonStyle = $computed(() => {
|
const buttonStyle = computed(() => {
|
||||||
if (relationship?.blocking)
|
if (relationship.value?.blocking)
|
||||||
return 'text-inverted bg-red border-red'
|
return 'text-inverted bg-red border-red'
|
||||||
|
|
||||||
if (relationship?.muting)
|
if (relationship.value?.muting)
|
||||||
return 'text-base bg-card border-base'
|
return 'text-base bg-card border-base'
|
||||||
|
|
||||||
// If following, use a label style with a strong border for Mutuals
|
// If following, use a label style with a strong border for Mutuals
|
||||||
if (relationship ? relationship.following : context === 'following')
|
if (relationship.value ? relationship.value.following : context === 'following')
|
||||||
return `text-base ${relationship?.followedBy ? 'border-strong' : 'border-base'}`
|
return `text-base ${relationship.value?.followedBy ? 'border-strong' : 'border-base'}`
|
||||||
|
|
||||||
// If not following, use a button style
|
// If not following, use a button style
|
||||||
return 'text-inverted bg-primary border-primary'
|
return 'text-inverted bg-primary border-primary'
|
||||||
|
|
|
@ -5,32 +5,32 @@ const { account, ...props } = defineProps<{
|
||||||
account: mastodon.v1.Account
|
account: mastodon.v1.Account
|
||||||
relationship?: mastodon.v1.Relationship
|
relationship?: mastodon.v1.Relationship
|
||||||
}>()
|
}>()
|
||||||
const relationship = $computed(() => props.relationship || useRelationship(account).value)
|
const relationship = computed(() => props.relationship || useRelationship(account).value)
|
||||||
const { client } = $(useMasto())
|
const { client } = useMasto()
|
||||||
|
|
||||||
async function authorizeFollowRequest() {
|
async function authorizeFollowRequest() {
|
||||||
relationship!.requestedBy = false
|
relationship.value!.requestedBy = false
|
||||||
relationship!.followedBy = true
|
relationship.value!.followedBy = true
|
||||||
try {
|
try {
|
||||||
const newRel = await client.v1.followRequests.$select(account.id).authorize()
|
const newRel = await client.value.v1.followRequests.$select(account.id).authorize()
|
||||||
Object.assign(relationship!, newRel)
|
Object.assign(relationship!, newRel)
|
||||||
}
|
}
|
||||||
catch (err) {
|
catch (err) {
|
||||||
console.error(err)
|
console.error(err)
|
||||||
relationship!.requestedBy = true
|
relationship.value!.requestedBy = true
|
||||||
relationship!.followedBy = false
|
relationship.value!.followedBy = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function rejectFollowRequest() {
|
async function rejectFollowRequest() {
|
||||||
relationship!.requestedBy = false
|
relationship.value!.requestedBy = false
|
||||||
try {
|
try {
|
||||||
const newRel = await client.v1.followRequests.$select(account.id).reject()
|
const newRel = await client.value.v1.followRequests.$select(account.id).reject()
|
||||||
Object.assign(relationship!, newRel)
|
Object.assign(relationship!, newRel)
|
||||||
}
|
}
|
||||||
catch (err) {
|
catch (err) {
|
||||||
console.error(err)
|
console.error(err)
|
||||||
relationship!.requestedBy = true
|
relationship.value!.requestedBy = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -5,7 +5,7 @@ const { account } = defineProps<{
|
||||||
account: mastodon.v1.Account
|
account: mastodon.v1.Account
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const serverName = $computed(() => getServerName(account))
|
const serverName = computed(() => getServerName(account))
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -6,22 +6,22 @@ const { account } = defineProps<{
|
||||||
command?: boolean
|
command?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const { client } = $(useMasto())
|
const { client } = useMasto()
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
|
||||||
const createdAt = $(useFormattedDateTime(() => account.createdAt, {
|
const createdAt = useFormattedDateTime(() => account.createdAt, {
|
||||||
month: 'long',
|
month: 'long',
|
||||||
day: 'numeric',
|
day: 'numeric',
|
||||||
year: 'numeric',
|
year: 'numeric',
|
||||||
}))
|
})
|
||||||
|
|
||||||
const relationship = $(useRelationship(account))
|
const relationship = useRelationship(account)
|
||||||
|
|
||||||
const namedFields = ref<mastodon.v1.AccountField[]>([])
|
const namedFields = ref<mastodon.v1.AccountField[]>([])
|
||||||
const iconFields = ref<mastodon.v1.AccountField[]>([])
|
const iconFields = ref<mastodon.v1.AccountField[]>([])
|
||||||
const isEditingPersonalNote = ref<boolean>(false)
|
const isEditingPersonalNote = ref<boolean>(false)
|
||||||
const hasHeader = $computed(() => !account.header.endsWith('/original/missing.png'))
|
const hasHeader = computed(() => !account.header.endsWith('/original/missing.png'))
|
||||||
const isCopied = ref<boolean>(false)
|
const isCopied = ref<boolean>(false)
|
||||||
|
|
||||||
function getFieldIconTitle(fieldName: string) {
|
function getFieldIconTitle(fieldName: string) {
|
||||||
|
@ -29,7 +29,7 @@ function getFieldIconTitle(fieldName: string) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function getNotificationIconTitle() {
|
function getNotificationIconTitle() {
|
||||||
return relationship?.notifying ? t('account.notifications_on_post_disable', { username: `@${account.username}` }) : t('account.notifications_on_post_enable', { username: `@${account.username}` })
|
return relationship.value?.notifying ? t('account.notifications_on_post_disable', { username: `@${account.username}` }) : t('account.notifications_on_post_enable', { username: `@${account.username}` })
|
||||||
}
|
}
|
||||||
|
|
||||||
function previewHeader() {
|
function previewHeader() {
|
||||||
|
@ -51,14 +51,14 @@ function previewAvatar() {
|
||||||
}
|
}
|
||||||
|
|
||||||
async function toggleNotifications() {
|
async function toggleNotifications() {
|
||||||
relationship!.notifying = !relationship?.notifying
|
relationship.value!.notifying = !relationship.value?.notifying
|
||||||
try {
|
try {
|
||||||
const newRel = await client.v1.accounts.$select(account.id).follow({ notify: relationship?.notifying })
|
const newRel = await client.value.v1.accounts.$select(account.id).follow({ notify: relationship.value?.notifying })
|
||||||
Object.assign(relationship!, newRel)
|
Object.assign(relationship!, newRel)
|
||||||
}
|
}
|
||||||
catch {
|
catch {
|
||||||
// TODO error handling
|
// TODO error handling
|
||||||
relationship!.notifying = !relationship?.notifying
|
relationship.value!.notifying = !relationship.value?.notifying
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -75,35 +75,35 @@ watchEffect(() => {
|
||||||
})
|
})
|
||||||
icons.push({
|
icons.push({
|
||||||
name: 'Joined',
|
name: 'Joined',
|
||||||
value: createdAt,
|
value: createdAt.value,
|
||||||
})
|
})
|
||||||
|
|
||||||
namedFields.value = named
|
namedFields.value = named
|
||||||
iconFields.value = icons
|
iconFields.value = icons
|
||||||
})
|
})
|
||||||
|
|
||||||
const personalNoteDraft = ref(relationship?.note ?? '')
|
const personalNoteDraft = ref(relationship.value?.note ?? '')
|
||||||
watch($$(relationship), (relationship, oldValue) => {
|
watch(relationship, (relationship, oldValue) => {
|
||||||
if (!oldValue && relationship)
|
if (!oldValue && relationship)
|
||||||
personalNoteDraft.value = relationship.note ?? ''
|
personalNoteDraft.value = relationship.note ?? ''
|
||||||
})
|
})
|
||||||
|
|
||||||
async function editNote(event: Event) {
|
async function editNote(event: Event) {
|
||||||
if (!event.target || !('value' in event.target) || !relationship)
|
if (!event.target || !('value' in event.target) || !relationship.value)
|
||||||
return
|
return
|
||||||
|
|
||||||
const newNote = event.target?.value as string
|
const newNote = event.target?.value as string
|
||||||
|
|
||||||
if (relationship.note?.trim() === newNote.trim())
|
if (relationship.value.note?.trim() === newNote.trim())
|
||||||
return
|
return
|
||||||
|
|
||||||
const newNoteApiResult = await client.v1.accounts.$select(account.id).note.create({ comment: newNote })
|
const newNoteApiResult = await client.value.v1.accounts.$select(account.id).note.create({ comment: newNote })
|
||||||
relationship.note = newNoteApiResult.note
|
relationship.value.note = newNoteApiResult.note
|
||||||
personalNoteDraft.value = relationship.note ?? ''
|
personalNoteDraft.value = relationship.value.note ?? ''
|
||||||
}
|
}
|
||||||
|
|
||||||
const isSelf = $(useSelfAccount(() => account))
|
const isSelf = useSelfAccount(() => account)
|
||||||
const isNotifiedOnPost = $computed(() => !!relationship?.notifying)
|
const isNotifiedOnPost = computed(() => !!relationship.value?.notifying)
|
||||||
|
|
||||||
const personalNoteMaxLength = 2000
|
const personalNoteMaxLength = 2000
|
||||||
|
|
||||||
|
|
|
@ -5,7 +5,7 @@ const { account } = defineProps<{
|
||||||
account: mastodon.v1.Account
|
account: mastodon.v1.Account
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const relationship = $(useRelationship(account))
|
const relationship = useRelationship(account)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -1,26 +1,69 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { mastodon } from 'masto'
|
import type { mastodon } from 'masto'
|
||||||
|
import { fetchAccountByHandle } from '~/composables/cache'
|
||||||
|
|
||||||
|
type WatcherType = [acc?: mastodon.v1.Account | null, h?: string, v?: boolean]
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
inheritAttrs: false,
|
inheritAttrs: false,
|
||||||
})
|
})
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
account?: mastodon.v1.Account
|
account?: mastodon.v1.Account | null
|
||||||
handle?: string
|
handle?: string
|
||||||
disabled?: boolean
|
disabled?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const account = computed(() => props.account || (props.handle ? useAccountByHandle(props.handle!) : undefined))
|
const accountHover = ref()
|
||||||
|
const hovered = useElementHover(accountHover)
|
||||||
|
const account = ref<mastodon.v1.Account | null | undefined>(props.account)
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => [props.account, props.handle, hovered.value] satisfies WatcherType,
|
||||||
|
([newAccount, newHandle, newVisible], oldProps) => {
|
||||||
|
if (!newVisible || process.test)
|
||||||
|
return
|
||||||
|
|
||||||
|
if (newAccount) {
|
||||||
|
account.value = newAccount
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (newHandle) {
|
||||||
|
const [_oldAccount, oldHandle, _oldVisible] = oldProps ?? [undefined, undefined, false]
|
||||||
|
if (!oldHandle || newHandle !== oldHandle || !account.value) {
|
||||||
|
// new handle can be wrong: using server instead of webDomain
|
||||||
|
fetchAccountByHandle(newHandle).then((acc) => {
|
||||||
|
if (newHandle === props.handle)
|
||||||
|
account.value = acc
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
account.value = undefined
|
||||||
|
},
|
||||||
|
{ immediate: true, flush: 'post' },
|
||||||
|
)
|
||||||
|
|
||||||
const userSettings = useUserSettings()
|
const userSettings = useUserSettings()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<VMenu v-if="!disabled && account && !getPreferences(userSettings, 'hideAccountHoverCard')" placement="bottom-start" :delay="{ show: 500, hide: 100 }" v-bind="$attrs" :close-on-content-click="false">
|
<span ref="accountHover">
|
||||||
<slot />
|
<VMenu
|
||||||
<template #popper>
|
v-if="!disabled && account && !getPreferences(userSettings, 'hideAccountHoverCard')"
|
||||||
<AccountHoverCard v-if="account" :account="account" />
|
placement="bottom-start"
|
||||||
</template>
|
:delay="{ show: 500, hide: 100 }"
|
||||||
</VMenu>
|
v-bind="$attrs"
|
||||||
<slot v-else />
|
:close-on-content-click="false"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
<template #popper>
|
||||||
|
<AccountHoverCard v-if="account" :account="account" />
|
||||||
|
</template>
|
||||||
|
</VMenu>
|
||||||
|
<slot v-else />
|
||||||
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -11,12 +11,12 @@ const emit = defineEmits<{
|
||||||
(evt: 'removeNote'): void
|
(evt: 'removeNote'): void
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
let relationship = $(useRelationship(account))
|
const relationship = useRelationship(account)
|
||||||
|
|
||||||
const isSelf = $(useSelfAccount(() => account))
|
const isSelf = useSelfAccount(() => account)
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
const { client } = $(useMasto())
|
const { client } = useMasto()
|
||||||
const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
|
const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
|
||||||
const { share, isSupported: isShareSupported } = useShare()
|
const { share, isSupported: isShareSupported } = useShare()
|
||||||
|
|
||||||
|
@ -25,7 +25,7 @@ function shareAccount() {
|
||||||
}
|
}
|
||||||
|
|
||||||
async function toggleReblogs() {
|
async function toggleReblogs() {
|
||||||
if (!relationship!.showingReblogs && await openConfirmDialog({
|
if (!relationship.value!.showingReblogs && await openConfirmDialog({
|
||||||
title: t('confirm.show_reblogs.title'),
|
title: t('confirm.show_reblogs.title'),
|
||||||
description: t('confirm.show_reblogs.description', [account.acct]),
|
description: t('confirm.show_reblogs.description', [account.acct]),
|
||||||
confirm: t('confirm.show_reblogs.confirm'),
|
confirm: t('confirm.show_reblogs.confirm'),
|
||||||
|
@ -33,8 +33,8 @@ async function toggleReblogs() {
|
||||||
}) !== 'confirm')
|
}) !== 'confirm')
|
||||||
return
|
return
|
||||||
|
|
||||||
const showingReblogs = !relationship?.showingReblogs
|
const showingReblogs = !relationship.value?.showingReblogs
|
||||||
relationship = await client.v1.accounts.$select(account.id).follow({ reblogs: showingReblogs })
|
relationship.value = await client.value.v1.accounts.$select(account.id).follow({ reblogs: showingReblogs })
|
||||||
}
|
}
|
||||||
|
|
||||||
async function addUserNote() {
|
async function addUserNote() {
|
||||||
|
@ -42,11 +42,11 @@ async function addUserNote() {
|
||||||
}
|
}
|
||||||
|
|
||||||
async function removeUserNote() {
|
async function removeUserNote() {
|
||||||
if (!relationship!.note || relationship!.note.length === 0)
|
if (!relationship.value!.note || relationship.value!.note.length === 0)
|
||||||
return
|
return
|
||||||
|
|
||||||
const newNote = await client.v1.accounts.$select(account.id).note.create({ comment: '' })
|
const newNote = await client.value.v1.accounts.$select(account.id).note.create({ comment: '' })
|
||||||
relationship!.note = newNote.note
|
relationship.value!.note = newNote.note
|
||||||
emit('removeNote')
|
emit('removeNote')
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -8,10 +8,10 @@ const { paginator, account, context } = defineProps<{
|
||||||
relationshipContext?: 'followedBy' | 'following'
|
relationshipContext?: 'followedBy' | 'following'
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const fallbackContext = $computed(() => {
|
const fallbackContext = computed(() => {
|
||||||
return ['following', 'followers'].includes(context!)
|
return ['following', 'followers'].includes(context!)
|
||||||
})
|
})
|
||||||
const showOriginSite = $computed(() =>
|
const showOriginSite = computed(() =>
|
||||||
account && account.id !== currentUser.value?.account.id && getServerName(account) !== currentServer.value,
|
account && account.id !== currentUser.value?.account.id && getServerName(account) !== currentServer.value,
|
||||||
)
|
)
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,18 +1,18 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { CommonRouteTabOption } from '../common/CommonRouteTabs.vue'
|
import type { CommonRouteTabOption } from '~/types'
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
|
||||||
const server = $(computedEager(() => route.params.server as string))
|
const server = computed(() => route.params.server as string)
|
||||||
const account = $(computedEager(() => route.params.account as string))
|
const account = computed(() => route.params.account as string)
|
||||||
|
|
||||||
const tabs = $computed<CommonRouteTabOption[]>(() => [
|
const tabs = computed<CommonRouteTabOption[]>(() => [
|
||||||
{
|
{
|
||||||
name: 'account-index',
|
name: 'account-index',
|
||||||
to: {
|
to: {
|
||||||
name: 'account-index',
|
name: 'account-index',
|
||||||
params: { server, account },
|
params: { server: server.value, account: account.value },
|
||||||
},
|
},
|
||||||
display: t('tab.posts'),
|
display: t('tab.posts'),
|
||||||
icon: 'i-ri:file-list-2-line',
|
icon: 'i-ri:file-list-2-line',
|
||||||
|
@ -21,7 +21,7 @@ const tabs = $computed<CommonRouteTabOption[]>(() => [
|
||||||
name: 'account-replies',
|
name: 'account-replies',
|
||||||
to: {
|
to: {
|
||||||
name: 'account-replies',
|
name: 'account-replies',
|
||||||
params: { server, account },
|
params: { server: server.value, account: account.value },
|
||||||
},
|
},
|
||||||
display: t('tab.posts_with_replies'),
|
display: t('tab.posts_with_replies'),
|
||||||
icon: 'i-ri:chat-1-line',
|
icon: 'i-ri:chat-1-line',
|
||||||
|
@ -30,7 +30,7 @@ const tabs = $computed<CommonRouteTabOption[]>(() => [
|
||||||
name: 'account-media',
|
name: 'account-media',
|
||||||
to: {
|
to: {
|
||||||
name: 'account-media',
|
name: 'account-media',
|
||||||
params: { server, account },
|
params: { server: server.value, account: account.value },
|
||||||
},
|
},
|
||||||
display: t('tab.media'),
|
display: t('tab.media'),
|
||||||
icon: 'i-ri:camera-2-line',
|
icon: 'i-ri:camera-2-line',
|
||||||
|
|
|
@ -0,0 +1,45 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { mastodon } from 'masto'
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
inheritAttrs: false,
|
||||||
|
})
|
||||||
|
|
||||||
|
const { tagName, disabled } = defineProps<{
|
||||||
|
tagName?: string
|
||||||
|
disabled?: boolean
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const tag = ref<mastodon.v1.Tag>()
|
||||||
|
const tagHover = ref()
|
||||||
|
const hovered = useElementHover(tagHover)
|
||||||
|
|
||||||
|
watch(hovered, (newHovered) => {
|
||||||
|
if (newHovered && tagName) {
|
||||||
|
fetchTag(tagName).then((t) => {
|
||||||
|
tag.value = t
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const userSettings = useUserSettings()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<span ref="tagHover">
|
||||||
|
<VMenu
|
||||||
|
v-if="!disabled && !getPreferences(userSettings, 'hideTagHoverCard')"
|
||||||
|
placement="bottom-start"
|
||||||
|
:delay="{ show: 500, hide: 100 }"
|
||||||
|
v-bind="$attrs"
|
||||||
|
:close-on-content-click="false"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
<template #popper>
|
||||||
|
<TagCardSkeleton v-if="!tag" />
|
||||||
|
<TagCard v-else :tag="tag" />
|
||||||
|
</template>
|
||||||
|
</VMenu>
|
||||||
|
<slot v-else />
|
||||||
|
</span>
|
||||||
|
</template>
|
|
@ -1,6 +1,6 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import type { LocaleObject } from '@nuxtjs/i18n'
|
||||||
import type { AriaAnnounceType, AriaLive } from '~/composables/aria'
|
import type { AriaAnnounceType, AriaLive } from '~/composables/aria'
|
||||||
import type { LocaleObject } from '#i18n'
|
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const { t, locale, locales } = useI18n()
|
const { t, locale, locales } = useI18n()
|
||||||
|
@ -11,16 +11,16 @@ const localeMap = (locales.value as LocaleObject[]).reduce((acc, l) => {
|
||||||
return acc
|
return acc
|
||||||
}, {} as Record<string, string>)
|
}, {} as Record<string, string>)
|
||||||
|
|
||||||
let ariaLive = $ref<AriaLive>('polite')
|
const ariaLive = ref<AriaLive>('polite')
|
||||||
let ariaMessage = $ref<string>('')
|
const ariaMessage = ref<string>('')
|
||||||
|
|
||||||
function onMessage(event: AriaAnnounceType, message?: string) {
|
function onMessage(event: AriaAnnounceType, message?: string) {
|
||||||
if (event === 'announce')
|
if (event === 'announce')
|
||||||
ariaMessage = message!
|
ariaMessage.value = message!
|
||||||
else if (event === 'mute')
|
else if (event === 'mute')
|
||||||
ariaLive = 'off'
|
ariaLive.value = 'off'
|
||||||
else
|
else
|
||||||
ariaLive = 'polite'
|
ariaLive.value = 'polite'
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(locale, (l, ol) => {
|
watch(locale, (l, ol) => {
|
||||||
|
|
|
@ -1,19 +1,19 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { ResolvedCommand } from '~/composables/command'
|
import type { ResolvedCommand } from '~/composables/command'
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(event: 'activate'): void
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
cmd,
|
cmd,
|
||||||
index,
|
index,
|
||||||
active = false,
|
active = false,
|
||||||
} = $defineProps<{
|
} = defineProps<{
|
||||||
cmd: ResolvedCommand
|
cmd: ResolvedCommand
|
||||||
index: number
|
index: number
|
||||||
active?: boolean
|
active?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(event: 'activate'): void
|
||||||
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -5,7 +5,7 @@ const props = defineProps<{
|
||||||
|
|
||||||
const isMac = useIsMac()
|
const isMac = useIsMac()
|
||||||
|
|
||||||
const keys = $computed(() => props.name.toLowerCase().split('+'))
|
const keys = computed(() => props.name.toLowerCase().split('+'))
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -10,21 +10,21 @@ const registry = useCommandRegistry()
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
const inputEl = $ref<HTMLInputElement>()
|
const inputEl = ref<HTMLInputElement>()
|
||||||
const resultEl = $ref<HTMLDivElement>()
|
const resultEl = ref<HTMLDivElement>()
|
||||||
|
|
||||||
const scopes = $ref<CommandScope[]>([])
|
const scopes = ref<CommandScope[]>([])
|
||||||
let input = $(commandPanelInput)
|
const input = commandPanelInput
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
inputEl?.focus()
|
inputEl.value?.focus()
|
||||||
})
|
})
|
||||||
|
|
||||||
const commandMode = $computed(() => input.startsWith('>'))
|
const commandMode = computed(() => input.value.startsWith('>'))
|
||||||
|
|
||||||
const query = $computed(() => commandMode ? '' : input.trim())
|
const query = computed(() => commandMode ? '' : input.value.trim())
|
||||||
|
|
||||||
const { accounts, hashtags, loading } = useSearch($$(query))
|
const { accounts, hashtags, loading } = useSearch(query)
|
||||||
|
|
||||||
function toSearchQueryResultItem(search: SearchResultType): QueryResultItem {
|
function toSearchQueryResultItem(search: SearchResultType): QueryResultItem {
|
||||||
return {
|
return {
|
||||||
|
@ -35,8 +35,8 @@ function toSearchQueryResultItem(search: SearchResultType): QueryResultItem {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const searchResult = $computed<QueryResult>(() => {
|
const searchResult = computed<QueryResult>(() => {
|
||||||
if (query.length === 0 || loading.value)
|
if (query.value.length === 0 || loading.value)
|
||||||
return { length: 0, items: [], grouped: {} as any }
|
return { length: 0, items: [], grouped: {} as any }
|
||||||
|
|
||||||
// TODO extract this scope
|
// TODO extract this scope
|
||||||
|
@ -61,22 +61,22 @@ const searchResult = $computed<QueryResult>(() => {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const result = $computed<QueryResult>(() => commandMode
|
const result = computed<QueryResult>(() => commandMode
|
||||||
? registry.query(scopes.map(s => s.id).join('.'), input.slice(1).trim())
|
? registry.query(scopes.value.map(s => s.id).join('.'), input.value.slice(1).trim())
|
||||||
: searchResult,
|
: searchResult.value,
|
||||||
)
|
)
|
||||||
|
|
||||||
const isMac = useIsMac()
|
const isMac = useIsMac()
|
||||||
const modifierKeyName = $computed(() => isMac.value ? '⌘' : 'Ctrl')
|
const modifierKeyName = computed(() => isMac.value ? '⌘' : 'Ctrl')
|
||||||
|
|
||||||
let active = $ref(0)
|
const active = ref(0)
|
||||||
watch($$(result), (n, o) => {
|
watch(result, (n, o) => {
|
||||||
if (n.length !== o.length || !n.items.every((i, idx) => i === o.items[idx]))
|
if (n.length !== o.length || !n.items.every((i, idx) => i === o.items[idx]))
|
||||||
active = 0
|
active.value = 0
|
||||||
})
|
})
|
||||||
|
|
||||||
function findItemEl(index: number) {
|
function findItemEl(index: number) {
|
||||||
return resultEl?.querySelector(`[data-index="${index}"]`) as HTMLDivElement | null
|
return resultEl.value?.querySelector(`[data-index="${index}"]`) as HTMLDivElement | null
|
||||||
}
|
}
|
||||||
function onCommandActivate(item: QueryResultItem) {
|
function onCommandActivate(item: QueryResultItem) {
|
||||||
if (item.onActivate) {
|
if (item.onActivate) {
|
||||||
|
@ -84,14 +84,14 @@ function onCommandActivate(item: QueryResultItem) {
|
||||||
emit('close')
|
emit('close')
|
||||||
}
|
}
|
||||||
else if (item.onComplete) {
|
else if (item.onComplete) {
|
||||||
scopes.push(item.onComplete())
|
scopes.value.push(item.onComplete())
|
||||||
input = '> '
|
input.value = '> '
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
function onCommandComplete(item: QueryResultItem) {
|
function onCommandComplete(item: QueryResultItem) {
|
||||||
if (item.onComplete) {
|
if (item.onComplete) {
|
||||||
scopes.push(item.onComplete())
|
scopes.value.push(item.onComplete())
|
||||||
input = '> '
|
input.value = '> '
|
||||||
}
|
}
|
||||||
else if (item.onActivate) {
|
else if (item.onActivate) {
|
||||||
item.onActivate()
|
item.onActivate()
|
||||||
|
@ -105,9 +105,9 @@ function intoView(index: number) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function setActive(index: number) {
|
function setActive(index: number) {
|
||||||
const len = result.length
|
const len = result.value.length
|
||||||
active = (index + len) % len
|
active.value = (index + len) % len
|
||||||
intoView(active)
|
intoView(active.value)
|
||||||
}
|
}
|
||||||
|
|
||||||
function onKeyDown(e: KeyboardEvent) {
|
function onKeyDown(e: KeyboardEvent) {
|
||||||
|
@ -118,7 +118,7 @@ function onKeyDown(e: KeyboardEvent) {
|
||||||
break
|
break
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
|
||||||
setActive(active - 1)
|
setActive(active.value - 1)
|
||||||
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
@ -128,7 +128,7 @@ function onKeyDown(e: KeyboardEvent) {
|
||||||
break
|
break
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
|
||||||
setActive(active + 1)
|
setActive(active.value + 1)
|
||||||
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
@ -136,9 +136,9 @@ function onKeyDown(e: KeyboardEvent) {
|
||||||
case 'Home': {
|
case 'Home': {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
|
||||||
active = 0
|
active.value = 0
|
||||||
|
|
||||||
intoView(active)
|
intoView(active.value)
|
||||||
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
@ -146,7 +146,7 @@ function onKeyDown(e: KeyboardEvent) {
|
||||||
case 'End': {
|
case 'End': {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
|
||||||
setActive(result.length - 1)
|
setActive(result.value.length - 1)
|
||||||
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
@ -154,7 +154,7 @@ function onKeyDown(e: KeyboardEvent) {
|
||||||
case 'Enter': {
|
case 'Enter': {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
|
||||||
const cmd = result.items[active]
|
const cmd = result.value.items[active.value]
|
||||||
if (cmd)
|
if (cmd)
|
||||||
onCommandActivate(cmd)
|
onCommandActivate(cmd)
|
||||||
|
|
||||||
|
@ -164,7 +164,7 @@ function onKeyDown(e: KeyboardEvent) {
|
||||||
case 'Tab': {
|
case 'Tab': {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
|
||||||
const cmd = result.items[active]
|
const cmd = result.value.items[active.value]
|
||||||
if (cmd)
|
if (cmd)
|
||||||
onCommandComplete(cmd)
|
onCommandComplete(cmd)
|
||||||
|
|
||||||
|
@ -172,9 +172,9 @@ function onKeyDown(e: KeyboardEvent) {
|
||||||
}
|
}
|
||||||
|
|
||||||
case 'Backspace': {
|
case 'Backspace': {
|
||||||
if (input === '>' && scopes.length) {
|
if (input.value === '>' && scopes.value.length) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
scopes.pop()
|
scopes.value.pop()
|
||||||
}
|
}
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
|
|
@ -33,7 +33,7 @@ const previewImage = ref('')
|
||||||
const imageSrc = computed<string>(() => previewImage.value || defaultImage.value)
|
const imageSrc = computed<string>(() => previewImage.value || defaultImage.value)
|
||||||
|
|
||||||
async function pickImage() {
|
async function pickImage() {
|
||||||
if (process.server)
|
if (import.meta.server)
|
||||||
return
|
return
|
||||||
const image = await fileOpen({
|
const image = await fileOpen({
|
||||||
description: 'Image',
|
description: 'Image',
|
||||||
|
|
|
@ -44,7 +44,7 @@ defineSlots<{
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
const nuxtApp = useNuxtApp()
|
const nuxtApp = useNuxtApp()
|
||||||
|
|
||||||
const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, $$(stream), preprocess)
|
const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, toRef(() => stream), preprocess)
|
||||||
|
|
||||||
nuxtApp.hook('elk-logo:click', () => {
|
nuxtApp.hook('elk-logo:click', () => {
|
||||||
update()
|
update()
|
||||||
|
@ -94,8 +94,8 @@ defineExpose({ createEntry, removeEntry, updateEntry })
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<slot
|
<slot
|
||||||
v-for="item, index of items"
|
v-for="(item, index) of items"
|
||||||
v-bind="{ key: item[keyProp as keyof U] }"
|
v-bind="{ key: (item as U)[keyProp as keyof U] }"
|
||||||
:item="item as U"
|
:item="item as U"
|
||||||
:older="items[index + 1] as U"
|
:older="items[index + 1] as U"
|
||||||
:newer="items[index - 1] as U"
|
:newer="items[index - 1] as U"
|
||||||
|
|
|
@ -1,24 +1,7 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { RouteLocationRaw } from 'vue-router'
|
import type { CommonRouteTabMoreOption, CommonRouteTabOption } from '~/types'
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { options, command, replace, preventScrollTop = false, moreOptions } = defineProps<{
|
||||||
|
|
||||||
export interface CommonRouteTabOption {
|
|
||||||
to: RouteLocationRaw
|
|
||||||
display: string
|
|
||||||
disabled?: boolean
|
|
||||||
name?: string
|
|
||||||
icon?: string
|
|
||||||
hide?: boolean
|
|
||||||
match?: boolean
|
|
||||||
}
|
|
||||||
export interface CommonRouteTabMoreOption {
|
|
||||||
options: CommonRouteTabOption[]
|
|
||||||
icon?: string
|
|
||||||
tooltip?: string
|
|
||||||
match?: boolean
|
|
||||||
}
|
|
||||||
const { options, command, replace, preventScrollTop = false, moreOptions } = $defineProps<{
|
|
||||||
options: CommonRouteTabOption[]
|
options: CommonRouteTabOption[]
|
||||||
moreOptions?: CommonRouteTabMoreOption
|
moreOptions?: CommonRouteTabMoreOption
|
||||||
command?: boolean
|
command?: boolean
|
||||||
|
@ -26,6 +9,7 @@ const { options, command, replace, preventScrollTop = false, moreOptions } = $de
|
||||||
preventScrollTop?: boolean
|
preventScrollTop?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
useCommands(() => command
|
useCommands(() => command
|
||||||
|
@ -49,7 +33,7 @@ useCommands(() => command
|
||||||
:to="option.to"
|
:to="option.to"
|
||||||
:replace="replace"
|
:replace="replace"
|
||||||
relative flex flex-auto cursor-pointer sm:px6 px2 rounded transition-all
|
relative flex flex-auto cursor-pointer sm:px6 px2 rounded transition-all
|
||||||
tabindex="1"
|
tabindex="0"
|
||||||
hover:bg-active transition-100
|
hover:bg-active transition-100
|
||||||
exact-active-class="children:(text-secondary !border-primary !op100 !text-base)"
|
exact-active-class="children:(text-secondary !border-primary !op100 !text-base)"
|
||||||
@click="!preventScrollTop && $scrollToTop()"
|
@click="!preventScrollTop && $scrollToTop()"
|
||||||
|
@ -60,9 +44,9 @@ useCommands(() => command
|
||||||
<span ws-nowrap mxa sm:px2 sm:py3 py2 text-center text-secondary-light op50>{{ option.display }}</span>
|
<span ws-nowrap mxa sm:px2 sm:py3 py2 text-center text-secondary-light op50>{{ option.display }}</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-if="moreOptions?.options?.length">
|
<template v-if="isHydrated && moreOptions?.options?.length">
|
||||||
<CommonDropdown placement="bottom" flex cursor-pointer mx-1.25rem>
|
<CommonDropdown placement="bottom" flex cursor-pointer mx-1.25rem>
|
||||||
<CommonTooltip placement="top" :content="moreOptions.tooltip || t('action.more')">
|
<CommonTooltip placement="top" no-auto-focus :content="moreOptions.tooltip || t('action.more')">
|
||||||
<button
|
<button
|
||||||
cursor-pointer
|
cursor-pointer
|
||||||
flex
|
flex
|
||||||
|
|
|
@ -1,5 +1,9 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const { as = 'div', active } = defineProps<{ as: any; active: boolean }>()
|
const { as = 'div', active } = defineProps<{
|
||||||
|
as: any
|
||||||
|
active: boolean
|
||||||
|
}>()
|
||||||
|
|
||||||
const el = ref()
|
const el = ref()
|
||||||
|
|
||||||
watch(() => active, (active) => {
|
watch(() => active, (active) => {
|
||||||
|
|
|
@ -10,7 +10,7 @@ const { options, command } = defineProps<{
|
||||||
|
|
||||||
const modelValue = defineModel<string>({ required: true })
|
const modelValue = defineModel<string>({ required: true })
|
||||||
|
|
||||||
const tabs = $computed(() => {
|
const tabs = computed(() => {
|
||||||
return options.map((option) => {
|
return options.map((option) => {
|
||||||
if (typeof option === 'string')
|
if (typeof option === 'string')
|
||||||
return { name: option, display: option }
|
return { name: option, display: option }
|
||||||
|
@ -24,7 +24,7 @@ function toValidName(otpion: string) {
|
||||||
}
|
}
|
||||||
|
|
||||||
useCommands(() => command
|
useCommands(() => command
|
||||||
? tabs.map(tab => ({
|
? tabs.value.map(tab => ({
|
||||||
scope: 'Tabs',
|
scope: 'Tabs',
|
||||||
|
|
||||||
name: tab.display,
|
name: tab.display,
|
||||||
|
@ -49,7 +49,7 @@ useCommands(() => command
|
||||||
><label
|
><label
|
||||||
flex flex-auto cursor-pointer px3 m1 rounded transition-all
|
flex flex-auto cursor-pointer px3 m1 rounded transition-all
|
||||||
:for="`tab-${toValidName(option.name)}`"
|
:for="`tab-${toValidName(option.name)}`"
|
||||||
tabindex="1"
|
tabindex="0"
|
||||||
hover:bg-active transition-100
|
hover:bg-active transition-100
|
||||||
@keypress.enter="modelValue = option.name"
|
@keypress.enter="modelValue = option.name"
|
||||||
><span
|
><span
|
||||||
|
|
|
@ -10,6 +10,7 @@ defineProps<Props>()
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<VTooltip
|
<VTooltip
|
||||||
|
v-if="isHydrated"
|
||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
auto-hide
|
auto-hide
|
||||||
>
|
>
|
||||||
|
|
|
@ -4,15 +4,15 @@ import type { mastodon } from 'masto'
|
||||||
const {
|
const {
|
||||||
history,
|
history,
|
||||||
maxDay = 2,
|
maxDay = 2,
|
||||||
} = $defineProps<{
|
} = defineProps<{
|
||||||
history: mastodon.v1.TagHistory[]
|
history: mastodon.v1.TagHistory[]
|
||||||
maxDay?: number
|
maxDay?: number
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const ongoingHot = $computed(() => history.slice(0, maxDay))
|
const ongoingHot = computed(() => history.slice(0, maxDay))
|
||||||
|
|
||||||
const people = $computed(() =>
|
const people = computed(() =>
|
||||||
ongoingHot.reduce((total: number, item) => total + (Number(item.accounts) || 0), 0),
|
ongoingHot.value.reduce((total: number, item) => total + (Number(item.accounts) || 0), 0),
|
||||||
)
|
)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -6,22 +6,22 @@ const {
|
||||||
history,
|
history,
|
||||||
width = 60,
|
width = 60,
|
||||||
height = 40,
|
height = 40,
|
||||||
} = $defineProps<{
|
} = defineProps<{
|
||||||
history?: mastodon.v1.TagHistory[]
|
history?: mastodon.v1.TagHistory[]
|
||||||
width?: number
|
width?: number
|
||||||
height?: number
|
height?: number
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const historyNum = $computed(() => {
|
const historyNum = computed(() => {
|
||||||
if (!history)
|
if (!history)
|
||||||
return [1, 1, 1, 1, 1, 1, 1]
|
return [1, 1, 1, 1, 1, 1, 1]
|
||||||
return [...history].reverse().map(item => Number(item.accounts) || 0)
|
return [...history].reverse().map(item => Number(item.accounts) || 0)
|
||||||
})
|
})
|
||||||
|
|
||||||
const sparklineEl = $ref<SVGSVGElement>()
|
const sparklineEl = ref<SVGSVGElement>()
|
||||||
const sparklineFn = typeof sparkline !== 'function' ? (sparkline as any).default : sparkline
|
const sparklineFn = typeof sparkline !== 'function' ? (sparkline as any).default : sparkline
|
||||||
|
|
||||||
watch([$$(historyNum), $$(sparklineEl)], ([historyNum, sparklineEl]) => {
|
watch([historyNum, sparklineEl], ([historyNum, sparklineEl]) => {
|
||||||
if (!sparklineEl)
|
if (!sparklineEl)
|
||||||
return
|
return
|
||||||
sparklineFn(sparklineEl, historyNum)
|
sparklineFn(sparklineEl, historyNum)
|
||||||
|
|
|
@ -10,9 +10,9 @@ const props = defineProps<{
|
||||||
|
|
||||||
const { formatHumanReadableNumber, formatNumber, forSR } = useHumanReadableNumber()
|
const { formatHumanReadableNumber, formatNumber, forSR } = useHumanReadableNumber()
|
||||||
|
|
||||||
const useSR = $computed(() => forSR(props.count))
|
const useSR = computed(() => forSR(props.count))
|
||||||
const rawNumber = $computed(() => formatNumber(props.count))
|
const rawNumber = computed(() => formatNumber(props.count))
|
||||||
const humanReadableNumber = $computed(() => formatHumanReadableNumber(props.count))
|
const humanReadableNumber = computed(() => formatHumanReadableNumber(props.count))
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -6,11 +6,11 @@ defineProps<{
|
||||||
autoBoundaryMaxSize?: boolean
|
autoBoundaryMaxSize?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const dropdown = $ref<any>()
|
const dropdown = ref<any>()
|
||||||
const colorMode = useColorMode()
|
const colorMode = useColorMode()
|
||||||
|
|
||||||
function hide() {
|
function hide() {
|
||||||
return dropdown.hide()
|
return dropdown.value.hide()
|
||||||
}
|
}
|
||||||
provide(InjectionKeyDropdownContext, {
|
provide(InjectionKeyDropdownContext, {
|
||||||
hide,
|
hide,
|
||||||
|
|
|
@ -4,7 +4,7 @@ const props = defineProps<{
|
||||||
lang?: string
|
lang?: string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const raw = $computed(() => decodeURIComponent(props.code).replace(/'/g, '\''))
|
const raw = computed(() => decodeURIComponent(props.code).replace(/'/g, '\''))
|
||||||
|
|
||||||
const langMap: Record<string, string> = {
|
const langMap: Record<string, string> = {
|
||||||
js: 'javascript',
|
js: 'javascript',
|
||||||
|
@ -13,7 +13,7 @@ const langMap: Record<string, string> = {
|
||||||
}
|
}
|
||||||
|
|
||||||
const highlighted = computed(() => {
|
const highlighted = computed(() => {
|
||||||
return props.lang ? highlightCode(raw, (langMap[props.lang] || props.lang) as any) : raw
|
return props.lang ? highlightCode(raw.value, (langMap[props.lang] || props.lang) as any) : raw
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -5,7 +5,7 @@ const { conversation } = defineProps<{
|
||||||
conversation: mastodon.v1.Conversation
|
conversation: mastodon.v1.Conversation
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const withAccounts = $computed(() =>
|
const withAccounts = computed(() =>
|
||||||
conversation.accounts.filter(account => account.id !== conversation.lastStatus?.account.id),
|
conversation.accounts.filter(account => account.id !== conversation.lastStatus?.account.id),
|
||||||
)
|
)
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,26 +1,26 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const { as, alt, dataEmojiId } = $defineProps<{
|
const { as, alt, dataEmojiId } = defineProps<{
|
||||||
as: string
|
as: string
|
||||||
alt?: string
|
alt?: string
|
||||||
dataEmojiId?: string
|
dataEmojiId?: string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
let title = $ref<string | undefined>()
|
const title = ref<string | undefined>()
|
||||||
|
|
||||||
if (alt) {
|
if (alt) {
|
||||||
if (alt.startsWith(':')) {
|
if (alt.startsWith(':')) {
|
||||||
title = alt.replace(/:/g, '')
|
title.value = alt.replace(/:/g, '')
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
import('node-emoji').then(({ find }) => {
|
import('node-emoji').then(({ find }) => {
|
||||||
title = find(alt)?.key.replace(/_/g, ' ')
|
title.value = find(alt)?.key.replace(/_/g, ' ')
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// if it has a data-emoji-id, use that as the title instead
|
// if it has a data-emoji-id, use that as the title instead
|
||||||
if (dataEmojiId)
|
if (dataEmojiId)
|
||||||
title = dataEmojiId
|
title.value = dataEmojiId
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -2,12 +2,14 @@
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
(event: 'close'): void
|
(event: 'close'): void
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
|
const vAutoFocus = (el: HTMLElement) => el.focus()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div my-8 px-3 sm:px-8 md:max-w-200 flex="~ col gap-4" relative>
|
<div my-8 px-3 sm:px-8 md:max-w-200 flex="~ col gap-4" relative>
|
||||||
<button btn-action-icon absolute top--8 right-0 m1 aria-label="Close" @click="emit('close')">
|
<button v-auto-focus type="button" btn-action-icon absolute top--8 right-0 m1 aria-label="Close" @click="emit('close')">
|
||||||
<div i-ri:close-line />
|
<span i-ri:close-line />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<img :alt="$t('app_logo')" :src="`/${''}logo.svg`" w-20 h-20 height="80" width="80" mxa class="rtl-flip">
|
<img :alt="$t('app_logo')" :src="`/${''}logo.svg`" w-20 h-20 height="80" width="80" mxa class="rtl-flip">
|
||||||
|
@ -42,7 +44,7 @@ const emit = defineEmits<{
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<button btn-solid mxa tabindex="2" @click="emit('close')">
|
<button type="button" btn-solid mxa @click="emit('close')">
|
||||||
{{ $t('action.enter_app') }}
|
{{ $t('action.enter_app') }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -15,23 +15,23 @@ const { form, isDirty, submitter, reset } = useForm({
|
||||||
form: () => ({ ...list.value }),
|
form: () => ({ ...list.value }),
|
||||||
})
|
})
|
||||||
|
|
||||||
let isEditing = $ref<boolean>(false)
|
const isEditing = ref<boolean>(false)
|
||||||
let deleting = $ref<boolean>(false)
|
const deleting = ref<boolean>(false)
|
||||||
let actionError = $ref<string | undefined>(undefined)
|
const actionError = ref<string | undefined>(undefined)
|
||||||
|
|
||||||
const input = ref<HTMLInputElement>()
|
const input = ref<HTMLInputElement>()
|
||||||
const editBtn = ref<HTMLButtonElement>()
|
const editBtn = ref<HTMLButtonElement>()
|
||||||
const deleteBtn = ref<HTMLButtonElement>()
|
const deleteBtn = ref<HTMLButtonElement>()
|
||||||
|
|
||||||
async function prepareEdit() {
|
async function prepareEdit() {
|
||||||
isEditing = true
|
isEditing.value = true
|
||||||
actionError = undefined
|
actionError.value = undefined
|
||||||
await nextTick()
|
await nextTick()
|
||||||
input.value?.focus()
|
input.value?.focus()
|
||||||
}
|
}
|
||||||
async function cancelEdit() {
|
async function cancelEdit() {
|
||||||
isEditing = false
|
isEditing.value = false
|
||||||
actionError = undefined
|
actionError.value = undefined
|
||||||
reset()
|
reset()
|
||||||
|
|
||||||
await nextTick()
|
await nextTick()
|
||||||
|
@ -47,14 +47,14 @@ const { submit, submitting } = submitter(async () => {
|
||||||
}
|
}
|
||||||
catch (err) {
|
catch (err) {
|
||||||
console.error(err)
|
console.error(err)
|
||||||
actionError = (err as Error).message
|
actionError.value = (err as Error).message
|
||||||
await nextTick()
|
await nextTick()
|
||||||
input.value?.focus()
|
input.value?.focus()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
async function removeList() {
|
async function removeList() {
|
||||||
if (deleting)
|
if (deleting.value)
|
||||||
return
|
return
|
||||||
|
|
||||||
const confirmDelete = await openConfirmDialog({
|
const confirmDelete = await openConfirmDialog({
|
||||||
|
@ -64,8 +64,8 @@ async function removeList() {
|
||||||
cancel: t('confirm.delete_list.cancel'),
|
cancel: t('confirm.delete_list.cancel'),
|
||||||
})
|
})
|
||||||
|
|
||||||
deleting = true
|
deleting.value = true
|
||||||
actionError = undefined
|
actionError.value = undefined
|
||||||
await nextTick()
|
await nextTick()
|
||||||
|
|
||||||
if (confirmDelete === 'confirm') {
|
if (confirmDelete === 'confirm') {
|
||||||
|
@ -76,21 +76,21 @@ async function removeList() {
|
||||||
}
|
}
|
||||||
catch (err) {
|
catch (err) {
|
||||||
console.error(err)
|
console.error(err)
|
||||||
actionError = (err as Error).message
|
actionError.value = (err as Error).message
|
||||||
await nextTick()
|
await nextTick()
|
||||||
deleteBtn.value?.focus()
|
deleteBtn.value?.focus()
|
||||||
}
|
}
|
||||||
finally {
|
finally {
|
||||||
deleting = false
|
deleting.value = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
deleting = false
|
deleting.value = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function clearError() {
|
async function clearError() {
|
||||||
actionError = undefined
|
actionError.value = undefined
|
||||||
await nextTick()
|
await nextTick()
|
||||||
if (isEditing)
|
if (isEditing)
|
||||||
input.value?.focus()
|
input.value?.focus()
|
||||||
|
|
|
@ -3,9 +3,9 @@ const { userId } = defineProps<{
|
||||||
userId: string
|
userId: string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const { client } = $(useMasto())
|
const { client } = useMasto()
|
||||||
const paginator = client.v1.lists.list()
|
const paginator = client.value.v1.lists.list()
|
||||||
const listsWithUser = ref((await client.v1.accounts.$select(userId).lists.list()).map(list => list.id))
|
const listsWithUser = ref((await client.value.v1.accounts.$select(userId).lists.list()).map(list => list.id))
|
||||||
|
|
||||||
function indexOfUserInList(listId: string) {
|
function indexOfUserInList(listId: string) {
|
||||||
return listsWithUser.value.indexOf(listId)
|
return listsWithUser.value.indexOf(listId)
|
||||||
|
@ -15,11 +15,11 @@ async function edit(listId: string) {
|
||||||
try {
|
try {
|
||||||
const index = indexOfUserInList(listId)
|
const index = indexOfUserInList(listId)
|
||||||
if (index === -1) {
|
if (index === -1) {
|
||||||
await client.v1.lists.$select(listId).accounts.create({ accountIds: [userId] })
|
await client.value.v1.lists.$select(listId).accounts.create({ accountIds: [userId] })
|
||||||
listsWithUser.value.push(listId)
|
listsWithUser.value.push(listId)
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
await client.v1.lists.$select(listId).accounts.remove({ accountIds: [userId] })
|
await client.value.v1.lists.$select(listId).accounts.remove({ accountIds: [userId] })
|
||||||
listsWithUser.value = listsWithUser.value.filter(id => id !== listId)
|
listsWithUser.value = listsWithUser.value.filter(id => id !== listId)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -22,9 +22,9 @@ interface ShortcutItemGroup {
|
||||||
}
|
}
|
||||||
|
|
||||||
const isMac = useIsMac()
|
const isMac = useIsMac()
|
||||||
const modifierKeyName = $computed(() => isMac.value ? '⌘' : 'Ctrl')
|
const modifierKeyName = computed(() => isMac.value ? '⌘' : 'Ctrl')
|
||||||
|
|
||||||
const shortcutItemGroups: ShortcutItemGroup[] = [
|
const shortcutItemGroups = computed<ShortcutItemGroup[]>(() => [
|
||||||
{
|
{
|
||||||
name: t('magic_keys.groups.navigation.title'),
|
name: t('magic_keys.groups.navigation.title'),
|
||||||
items: [
|
items: [
|
||||||
|
@ -40,6 +40,10 @@ const shortcutItemGroups: ShortcutItemGroup[] = [
|
||||||
// description: t('magic_keys.groups.navigation.previous_status'),
|
// description: t('magic_keys.groups.navigation.previous_status'),
|
||||||
// shortcut: { keys: ['k'], isSequence: false },
|
// shortcut: { keys: ['k'], isSequence: false },
|
||||||
// },
|
// },
|
||||||
|
{
|
||||||
|
description: t('magic_keys.groups.navigation.go_to_search'),
|
||||||
|
shortcut: { keys: ['/'], isSequence: false },
|
||||||
|
},
|
||||||
{
|
{
|
||||||
description: t('magic_keys.groups.navigation.go_to_home'),
|
description: t('magic_keys.groups.navigation.go_to_home'),
|
||||||
shortcut: { keys: ['g', 'h'], isSequence: true },
|
shortcut: { keys: ['g', 'h'], isSequence: true },
|
||||||
|
@ -48,6 +52,42 @@ const shortcutItemGroups: ShortcutItemGroup[] = [
|
||||||
description: t('magic_keys.groups.navigation.go_to_notifications'),
|
description: t('magic_keys.groups.navigation.go_to_notifications'),
|
||||||
shortcut: { keys: ['g', 'n'], isSequence: true },
|
shortcut: { keys: ['g', 'n'], isSequence: true },
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
description: t('magic_keys.groups.navigation.go_to_conversations'),
|
||||||
|
shortcut: { keys: ['g', 'c'], isSequence: true },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: t('magic_keys.groups.navigation.go_to_favourites'),
|
||||||
|
shortcut: { keys: ['g', 'f'], isSequence: true },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: t('magic_keys.groups.navigation.go_to_bookmarks'),
|
||||||
|
shortcut: { keys: ['g', 'b'], isSequence: true },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: t('magic_keys.groups.navigation.go_to_explore'),
|
||||||
|
shortcut: { keys: ['g', 'e'], isSequence: true },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: t('magic_keys.groups.navigation.go_to_local'),
|
||||||
|
shortcut: { keys: ['g', 'l'], isSequence: true },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: t('magic_keys.groups.navigation.go_to_federated'),
|
||||||
|
shortcut: { keys: ['g', 't'], isSequence: true },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: t('magic_keys.groups.navigation.go_to_lists'),
|
||||||
|
shortcut: { keys: ['g', 'i'], isSequence: true },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: t('magic_keys.groups.navigation.go_to_settings'),
|
||||||
|
shortcut: { keys: ['g', 's'], isSequence: true },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: t('magic_keys.groups.navigation.go_to_profile'),
|
||||||
|
shortcut: { keys: ['g', 'p'], isSequence: true },
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -55,16 +95,20 @@ const shortcutItemGroups: ShortcutItemGroup[] = [
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
description: t('magic_keys.groups.actions.search'),
|
description: t('magic_keys.groups.actions.search'),
|
||||||
shortcut: { keys: [modifierKeyName, 'k'], isSequence: false },
|
shortcut: { keys: [modifierKeyName.value, 'k'], isSequence: false },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
description: t('magic_keys.groups.actions.command_mode'),
|
description: t('magic_keys.groups.actions.command_mode'),
|
||||||
shortcut: { keys: [modifierKeyName, '/'], isSequence: false },
|
shortcut: { keys: [modifierKeyName.value, '/'], isSequence: false },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
description: t('magic_keys.groups.actions.compose'),
|
description: t('magic_keys.groups.actions.compose'),
|
||||||
shortcut: { keys: ['c'], isSequence: false },
|
shortcut: { keys: ['c'], isSequence: false },
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
description: t('magic_keys.groups.actions.show_new_items'),
|
||||||
|
shortcut: { keys: ['.'], isSequence: false },
|
||||||
|
},
|
||||||
{
|
{
|
||||||
description: t('magic_keys.groups.actions.favourite'),
|
description: t('magic_keys.groups.actions.favourite'),
|
||||||
shortcut: { keys: ['f'], isSequence: false },
|
shortcut: { keys: ['f'], isSequence: false },
|
||||||
|
@ -79,7 +123,7 @@ const shortcutItemGroups: ShortcutItemGroup[] = [
|
||||||
name: t('magic_keys.groups.media.title'),
|
name: t('magic_keys.groups.media.title'),
|
||||||
items: [],
|
items: [],
|
||||||
},
|
},
|
||||||
]
|
])
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -22,7 +22,7 @@ const slider = ref()
|
||||||
const slide = ref()
|
const slide = ref()
|
||||||
const image = ref()
|
const image = ref()
|
||||||
|
|
||||||
const reduceMotion = process.server ? ref(false) : useReducedMotion()
|
const reduceMotion = import.meta.server ? ref(false) : useReducedMotion()
|
||||||
const isInitialScrollDone = useTimeout(350)
|
const isInitialScrollDone = useTimeout(350)
|
||||||
const canAnimate = computed(() => isInitialScrollDone.value && !reduceMotion.value)
|
const canAnimate = computed(() => isInitialScrollDone.value && !reduceMotion.value)
|
||||||
|
|
||||||
|
|
|
@ -33,7 +33,7 @@ const { notifications } = useNotifications()
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<NuxtLink :to="`/${currentServer}/explore`" :aria-label="$t('nav.explore')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
|
<NuxtLink :to="`/${currentServer}/explore`" :aria-label="$t('nav.explore')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
|
||||||
<div i-ri:hashtag />
|
<div i-ri:compass-3-line />
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<NuxtLink group :to="`/${currentServer}/public/local`" :aria-label="$t('nav.local')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
|
<NuxtLink group :to="`/${currentServer}/public/local`" :aria-label="$t('nav.local')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
|
||||||
<div i-ri:group-2-line />
|
<div i-ri:group-2-line />
|
||||||
|
|
|
@ -30,10 +30,11 @@ const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
|
||||||
<NavSideItem :text="$t('action.compose')" to="/compose" icon="i-ri:quill-pen-line" user-only :command="command" />
|
<NavSideItem :text="$t('action.compose')" to="/compose" icon="i-ri:quill-pen-line" user-only :command="command" />
|
||||||
|
|
||||||
<div class="spacer" shrink hidden sm:block />
|
<div class="spacer" shrink hidden sm:block />
|
||||||
<NavSideItem :text="$t('nav.explore')" :to="isHydrated ? `/${currentServer}/explore` : '/explore'" icon="i-ri:hashtag" :command="command" />
|
<NavSideItem :text="$t('nav.explore')" :to="isHydrated ? `/${currentServer}/explore` : '/explore'" icon="i-ri:compass-3-line" :command="command" />
|
||||||
<NavSideItem :text="$t('nav.local')" :to="isHydrated ? `/${currentServer}/public/local` : '/public/local'" icon="i-ri:group-2-line " :command="command" />
|
<NavSideItem :text="$t('nav.local')" :to="isHydrated ? `/${currentServer}/public/local` : '/public/local'" icon="i-ri:group-2-line " :command="command" />
|
||||||
<NavSideItem :text="$t('nav.federated')" :to="isHydrated ? `/${currentServer}/public` : '/public'" icon="i-ri:earth-line" :command="command" />
|
<NavSideItem :text="$t('nav.federated')" :to="isHydrated ? `/${currentServer}/public` : '/public'" icon="i-ri:earth-line" :command="command" />
|
||||||
<NavSideItem :text="$t('nav.lists')" :to="isHydrated ? `/${currentServer}/lists` : '/lists'" icon="i-ri:list-check" user-only :command="command" />
|
<NavSideItem :text="$t('nav.lists')" :to="isHydrated ? `/${currentServer}/lists` : '/lists'" icon="i-ri:list-check" user-only :command="command" />
|
||||||
|
<NavSideItem :text="$t('nav.hashtags')" to="/hashtags" icon="i-ri:hashtag" user-only :command="command" />
|
||||||
|
|
||||||
<div class="spacer" shrink hidden sm:block />
|
<div class="spacer" shrink hidden sm:block />
|
||||||
<NavSideItem :text="$t('nav.settings')" to="/settings" icon="i-ri:settings-3-line" :command="command" />
|
<NavSideItem :text="$t('nav.settings')" to="/settings" icon="i-ri:settings-3-line" :command="command" />
|
||||||
|
|
|
@ -28,13 +28,13 @@ useCommand({
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
let activeClass = $ref('text-primary')
|
const activeClass = ref('text-primary')
|
||||||
onHydrated(async () => {
|
onHydrated(async () => {
|
||||||
// TODO: force NuxtLink to reevaluate, we now we are in this route though, so we should force it to active
|
// TODO: force NuxtLink to reevaluate, we now we are in this route though, so we should force it to active
|
||||||
// we don't have currentServer defined until later
|
// we don't have currentServer defined until later
|
||||||
activeClass = ''
|
activeClass.value = ''
|
||||||
await nextTick()
|
await nextTick()
|
||||||
activeClass = 'text-primary'
|
activeClass.value = 'text-primary'
|
||||||
})
|
})
|
||||||
|
|
||||||
// Optimize rendering for the common case of being logged in, only show visual feedback for disabled user-only items
|
// Optimize rendering for the common case of being logged in, only show visual feedback for disabled user-only items
|
||||||
|
|
|
@ -5,10 +5,10 @@ const { items } = defineProps<{
|
||||||
items: GroupedNotifications
|
items: GroupedNotifications
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const count = $computed(() => items.items.length)
|
const count = computed(() => items.items.length)
|
||||||
const isExpanded = ref(false)
|
const isExpanded = ref(false)
|
||||||
const lang = $computed(() => {
|
const lang = computed(() => {
|
||||||
return (count > 1 || count === 0) ? undefined : items.items[0].status?.language
|
return (count.value > 1 || count.value === 0) ? undefined : items.items[0].status?.language
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -6,8 +6,8 @@ const { group } = defineProps<{
|
||||||
}>()
|
}>()
|
||||||
const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
|
const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
|
||||||
|
|
||||||
const reblogs = $computed(() => group.likes.filter(i => i.reblog))
|
const reblogs = computed(() => group.likes.filter(i => i.reblog))
|
||||||
const likes = $computed(() => group.likes.filter(i => i.favourite && !i.reblog))
|
const likes = computed(() => group.likes.filter(i => i.favourite && !i.reblog))
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -174,7 +174,7 @@ const { formatNumber } = useHumanReadableNumber()
|
||||||
:virtualScroller="virtualScroller"
|
:virtualScroller="virtualScroller"
|
||||||
>
|
>
|
||||||
<template #updater="{ number, update }">
|
<template #updater="{ number, update }">
|
||||||
<button py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="() => { update(); clearNotifications() }">
|
<button id="elk_show_new_items" py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="() => { update(); clearNotifications() }">
|
||||||
{{ $t('timeline.show_new_items', number, { named: { v: formatNumber(number) } }) }}
|
{{ $t('timeline.show_new_items', number, { named: { v: formatNumber(number) } }) }}
|
||||||
</button>
|
</button>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -17,12 +17,12 @@ const { t } = useI18n()
|
||||||
|
|
||||||
const pwaEnabled = useAppConfig().pwaEnabled
|
const pwaEnabled = useAppConfig().pwaEnabled
|
||||||
|
|
||||||
let busy = $ref<boolean>(false)
|
const busy = ref<boolean>(false)
|
||||||
let animateSave = $ref<boolean>(false)
|
const animateSave = ref<boolean>(false)
|
||||||
let animateSubscription = $ref<boolean>(false)
|
const animateSubscription = ref<boolean>(false)
|
||||||
let animateRemoveSubscription = $ref<boolean>(false)
|
const animateRemoveSubscription = ref<boolean>(false)
|
||||||
let subscribeError = $ref<string>('')
|
const subscribeError = ref<string>('')
|
||||||
let showSubscribeError = $ref<boolean>(false)
|
const showSubscribeError = ref<boolean>(false)
|
||||||
|
|
||||||
function hideNotification() {
|
function hideNotification() {
|
||||||
const key = currentUser.value?.account?.acct
|
const key = currentUser.value?.account?.acct
|
||||||
|
@ -30,22 +30,22 @@ function hideNotification() {
|
||||||
hiddenNotification.value[key] = true
|
hiddenNotification.value[key] = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const showWarning = $computed(() => {
|
const showWarning = computed(() => {
|
||||||
if (!pwaEnabled)
|
if (!pwaEnabled)
|
||||||
return false
|
return false
|
||||||
|
|
||||||
return isSupported
|
return isSupported
|
||||||
&& (!isSubscribed.value || !notificationPermission.value || notificationPermission.value === 'prompt')
|
&& (!isSubscribed.value || !notificationPermission.value || notificationPermission.value === 'prompt')
|
||||||
&& !(hiddenNotification.value[currentUser.value?.account?.acct ?? ''] === true)
|
&& !(hiddenNotification.value[currentUser.value?.account?.acct ?? ''])
|
||||||
})
|
})
|
||||||
|
|
||||||
async function saveSettings() {
|
async function saveSettings() {
|
||||||
if (busy)
|
if (busy.value)
|
||||||
return
|
return
|
||||||
|
|
||||||
busy = true
|
busy.value = true
|
||||||
await nextTick()
|
await nextTick()
|
||||||
animateSave = true
|
animateSave.value = true
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await updateSubscription()
|
await updateSubscription()
|
||||||
|
@ -55,48 +55,48 @@ async function saveSettings() {
|
||||||
console.error(err)
|
console.error(err)
|
||||||
}
|
}
|
||||||
finally {
|
finally {
|
||||||
busy = false
|
busy.value = false
|
||||||
animateSave = false
|
animateSave.value = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function doSubscribe() {
|
async function doSubscribe() {
|
||||||
if (busy)
|
if (busy.value)
|
||||||
return
|
return
|
||||||
|
|
||||||
busy = true
|
busy.value = true
|
||||||
await nextTick()
|
await nextTick()
|
||||||
animateSubscription = true
|
animateSubscription.value = true
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const result = await subscribe()
|
const result = await subscribe()
|
||||||
if (result !== 'subscribed') {
|
if (result !== 'subscribed') {
|
||||||
subscribeError = t(`settings.notifications.push_notifications.subscription_error.${result === 'notification-denied' ? 'permission_denied' : 'request_error'}`)
|
subscribeError.value = t(`settings.notifications.push_notifications.subscription_error.${result === 'notification-denied' ? 'permission_denied' : 'request_error'}`)
|
||||||
showSubscribeError = true
|
showSubscribeError.value = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
catch (err) {
|
catch (err) {
|
||||||
if (err instanceof PushSubscriptionError) {
|
if (err instanceof PushSubscriptionError) {
|
||||||
subscribeError = t(`settings.notifications.push_notifications.subscription_error.${err.code}`)
|
subscribeError.value = t(`settings.notifications.push_notifications.subscription_error.${err.code}`)
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
console.error(err)
|
console.error(err)
|
||||||
subscribeError = t('settings.notifications.push_notifications.subscription_error.request_error')
|
subscribeError.value = t('settings.notifications.push_notifications.subscription_error.request_error')
|
||||||
}
|
}
|
||||||
showSubscribeError = true
|
showSubscribeError.value = true
|
||||||
}
|
}
|
||||||
finally {
|
finally {
|
||||||
busy = false
|
busy.value = false
|
||||||
animateSubscription = false
|
animateSubscription.value = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
async function removeSubscription() {
|
async function removeSubscription() {
|
||||||
if (busy)
|
if (busy.value)
|
||||||
return
|
return
|
||||||
|
|
||||||
busy = true
|
busy.value = true
|
||||||
await nextTick()
|
await nextTick()
|
||||||
animateRemoveSubscription = true
|
animateRemoveSubscription.value = true
|
||||||
try {
|
try {
|
||||||
await unsubscribe()
|
await unsubscribe()
|
||||||
}
|
}
|
||||||
|
@ -104,11 +104,11 @@ async function removeSubscription() {
|
||||||
console.error(err)
|
console.error(err)
|
||||||
}
|
}
|
||||||
finally {
|
finally {
|
||||||
busy = false
|
busy.value = false
|
||||||
animateRemoveSubscription = false
|
animateRemoveSubscription.value = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
onActivated(() => (busy = false))
|
onActivated(() => (busy.value = false))
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -20,9 +20,10 @@ const maxDescriptionLength = 1500
|
||||||
|
|
||||||
const isEditDialogOpen = ref(false)
|
const isEditDialogOpen = ref(false)
|
||||||
const description = ref(props.attachment.description ?? '')
|
const description = ref(props.attachment.description ?? '')
|
||||||
|
|
||||||
function toggleApply() {
|
function toggleApply() {
|
||||||
isEditDialogOpen.value = false
|
isEditDialogOpen.value = false
|
||||||
emit('setDescription', unref(description))
|
emit('setDescription', description.value)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -8,7 +8,7 @@ const { editor } = defineProps<{
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<CommonTooltip placement="top" :content="$t('tooltip.open_editor_tools')">
|
<CommonTooltip placement="top" :content="$t('tooltip.open_editor_tools')">
|
||||||
<VDropdown v-if="editor" placement="top">
|
<VDropdown v-if="editor" placement="bottom">
|
||||||
<button
|
<button
|
||||||
btn-action-icon
|
btn-action-icon
|
||||||
:aria-label="$t('tooltip.open_editor_tools')"
|
:aria-label="$t('tooltip.open_editor_tools')"
|
||||||
|
|
|
@ -9,16 +9,16 @@ const emit = defineEmits<{
|
||||||
|
|
||||||
const { locale } = useI18n()
|
const { locale } = useI18n()
|
||||||
|
|
||||||
const el = $ref<HTMLElement>()
|
const el = ref<HTMLElement>()
|
||||||
let picker = $ref<Picker>()
|
const picker = ref<Picker>()
|
||||||
const colorMode = useColorMode()
|
const colorMode = useColorMode()
|
||||||
|
|
||||||
async function openEmojiPicker() {
|
async function openEmojiPicker() {
|
||||||
await updateCustomEmojis()
|
await updateCustomEmojis()
|
||||||
|
|
||||||
if (picker) {
|
if (picker.value) {
|
||||||
picker.update({
|
picker.value.update({
|
||||||
theme: colorMode.value,
|
theme: colorMode,
|
||||||
custom: customEmojisData.value,
|
custom: customEmojisData.value,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -29,7 +29,7 @@ async function openEmojiPicker() {
|
||||||
importEmojiLang(locale.value.split('-')[0]),
|
importEmojiLang(locale.value.split('-')[0]),
|
||||||
])
|
])
|
||||||
|
|
||||||
picker = new Picker({
|
picker.value = new Picker({
|
||||||
data: () => dataPromise,
|
data: () => dataPromise,
|
||||||
onEmojiSelect({ native, src, alt, name }: any) {
|
onEmojiSelect({ native, src, alt, name }: any) {
|
||||||
native
|
native
|
||||||
|
@ -37,19 +37,19 @@ async function openEmojiPicker() {
|
||||||
: emit('selectCustom', { src, alt, 'data-emoji-id': name })
|
: emit('selectCustom', { src, alt, 'data-emoji-id': name })
|
||||||
},
|
},
|
||||||
set: 'twitter',
|
set: 'twitter',
|
||||||
theme: colorMode.value,
|
theme: colorMode,
|
||||||
custom: customEmojisData.value,
|
custom: customEmojisData.value,
|
||||||
i18n,
|
i18n,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
await nextTick()
|
await nextTick()
|
||||||
// TODO: custom picker
|
// TODO: custom picker
|
||||||
el?.appendChild(picker as any as HTMLElement)
|
el.value?.appendChild(picker.value as any as HTMLElement)
|
||||||
}
|
}
|
||||||
|
|
||||||
function hideEmojiPicker() {
|
function hideEmojiPicker() {
|
||||||
if (picker)
|
if (picker.value)
|
||||||
el?.removeChild(picker as any as HTMLElement)
|
el.value?.removeChild(picker.value as any as HTMLElement)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -6,16 +6,16 @@ const modelValue = defineModel<string>({ required: true })
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
const userSettings = useUserSettings()
|
const userSettings = useUserSettings()
|
||||||
|
|
||||||
const languageKeyword = $ref('')
|
const languageKeyword = ref('')
|
||||||
|
|
||||||
const fuse = new Fuse(languagesNameList, {
|
const fuse = new Fuse(languagesNameList, {
|
||||||
keys: ['code', 'nativeName', 'name'],
|
keys: ['code', 'nativeName', 'name'],
|
||||||
shouldSort: true,
|
shouldSort: true,
|
||||||
})
|
})
|
||||||
|
|
||||||
const languages = $computed(() =>
|
const languages = computed(() =>
|
||||||
languageKeyword.trim()
|
languageKeyword.value.trim()
|
||||||
? fuse.search(languageKeyword).map(r => r.item)
|
? fuse.search(languageKeyword.value).map(r => r.item)
|
||||||
: [...languagesNameList].filter(entry => !userSettings.value.disabledTranslationLanguages.includes(entry.code))
|
: [...languagesNameList].filter(entry => !userSettings.value.disabledTranslationLanguages.includes(entry.code))
|
||||||
.sort(({ code: a }, { code: b }) => {
|
.sort(({ code: a }, { code: b }) => {
|
||||||
// Put English on the top
|
// Put English on the top
|
||||||
|
|
|
@ -7,7 +7,7 @@ const modelValue = defineModel<string>({
|
||||||
required: true,
|
required: true,
|
||||||
})
|
})
|
||||||
|
|
||||||
const currentVisibility = $computed(() =>
|
const currentVisibility = computed(() =>
|
||||||
statusVisibilities.find(v => v.value === modelValue.value) || statusVisibilities[0],
|
statusVisibilities.find(v => v.value === modelValue.value) || statusVisibilities[0],
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
|
@ -27,90 +27,96 @@ const emit = defineEmits<{
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
|
||||||
const draftState = useDraft(draftKey, initial)
|
const draftState = useDraft(draftKey, initial)
|
||||||
const { draft } = $(draftState)
|
const { draft } = draftState
|
||||||
|
|
||||||
const {
|
const {
|
||||||
isExceedingAttachmentLimit, isUploading, failedAttachments, isOverDropZone,
|
isExceedingAttachmentLimit,
|
||||||
uploadAttachments, pickAttachments, setDescription, removeAttachment,
|
isUploading,
|
||||||
|
failedAttachments,
|
||||||
|
isOverDropZone,
|
||||||
|
uploadAttachments,
|
||||||
|
pickAttachments,
|
||||||
|
setDescription,
|
||||||
|
removeAttachment,
|
||||||
dropZoneRef,
|
dropZoneRef,
|
||||||
} = $(useUploadMediaAttachment($$(draft)))
|
} = useUploadMediaAttachment(draft)
|
||||||
|
|
||||||
let { shouldExpanded, isExpanded, isSending, isPublishDisabled, publishDraft, failedMessages, preferredLanguage, publishSpoilerText } = $(usePublish(
|
const { shouldExpanded, isExpanded, isSending, isPublishDisabled, publishDraft, failedMessages, preferredLanguage, publishSpoilerText } = usePublish(
|
||||||
{
|
{
|
||||||
draftState,
|
draftState,
|
||||||
...$$({ expanded, isUploading, initialDraft: initial }),
|
...{ expanded: toRef(() => expanded), isUploading, initialDraft: toRef(() => initial) },
|
||||||
},
|
},
|
||||||
))
|
)
|
||||||
|
|
||||||
const { editor } = useTiptap({
|
const { editor } = useTiptap({
|
||||||
content: computed({
|
content: computed({
|
||||||
get: () => draft.params.status,
|
get: () => draft.value.params.status,
|
||||||
set: (newVal) => {
|
set: (newVal) => {
|
||||||
draft.params.status = newVal
|
draft.value.params.status = newVal
|
||||||
draft.lastUpdated = Date.now()
|
draft.value.lastUpdated = Date.now()
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
placeholder: computed(() => placeholder ?? draft.params.inReplyToId ? t('placeholder.replying') : t('placeholder.default_1')),
|
placeholder: computed(() => placeholder ?? draft.value.params.inReplyToId ? t('placeholder.replying') : t('placeholder.default_1')),
|
||||||
autofocus: shouldExpanded,
|
autofocus: shouldExpanded.value,
|
||||||
onSubmit: publish,
|
onSubmit: publish,
|
||||||
onFocus() {
|
onFocus() {
|
||||||
if (!isExpanded && draft.initialText) {
|
if (!isExpanded && draft.value.initialText) {
|
||||||
editor.value?.chain().insertContent(`${draft.initialText} `).focus('end').run()
|
editor.value?.chain().insertContent(`${draft.value.initialText} `).focus('end').run()
|
||||||
draft.initialText = ''
|
draft.value.initialText = ''
|
||||||
}
|
}
|
||||||
isExpanded = true
|
isExpanded.value = true
|
||||||
},
|
},
|
||||||
onPaste: handlePaste,
|
onPaste: handlePaste,
|
||||||
})
|
})
|
||||||
|
|
||||||
function trimPollOptions() {
|
function trimPollOptions() {
|
||||||
const indexLastNonEmpty = draft.params.poll!.options.findLastIndex(option => option.trim().length > 0)
|
const indexLastNonEmpty = draft.value.params.poll!.options.findLastIndex(option => option.trim().length > 0)
|
||||||
const trimmedOptions = draft.params.poll!.options.slice(0, indexLastNonEmpty + 1)
|
const trimmedOptions = draft.value.params.poll!.options.slice(0, indexLastNonEmpty + 1)
|
||||||
|
|
||||||
if (currentInstance.value?.configuration
|
if (currentInstance.value?.configuration
|
||||||
&& trimmedOptions.length >= currentInstance.value?.configuration?.polls.maxOptions)
|
&& trimmedOptions.length >= currentInstance.value?.configuration?.polls.maxOptions)
|
||||||
draft.params.poll!.options = trimmedOptions
|
draft.value.params.poll!.options = trimmedOptions
|
||||||
else
|
else
|
||||||
draft.params.poll!.options = [...trimmedOptions, '']
|
draft.value.params.poll!.options = [...trimmedOptions, '']
|
||||||
}
|
}
|
||||||
|
|
||||||
function editPollOptionDraft(event: Event, index: number) {
|
function editPollOptionDraft(event: Event, index: number) {
|
||||||
draft.params.poll!.options = Object.assign(draft.params.poll!.options.slice(), { [index]: (event.target as HTMLInputElement).value })
|
draft.value.params.poll!.options = Object.assign(draft.value.params.poll!.options.slice(), { [index]: (event.target as HTMLInputElement).value })
|
||||||
|
|
||||||
trimPollOptions()
|
trimPollOptions()
|
||||||
}
|
}
|
||||||
|
|
||||||
function deletePollOption(index: number) {
|
function deletePollOption(index: number) {
|
||||||
draft.params.poll!.options = draft.params.poll!.options.slice().splice(index, 1)
|
draft.value.params.poll!.options = draft.value.params.poll!.options.slice().splice(index, 1)
|
||||||
trimPollOptions()
|
trimPollOptions()
|
||||||
}
|
}
|
||||||
|
|
||||||
const expiresInOptions = computed(() => [
|
const expiresInOptions = computed(() => [
|
||||||
{
|
{
|
||||||
seconds: 1 * 60 * 60,
|
seconds: 1 * 60 * 60,
|
||||||
label: isHydrated.value ? t('time_ago_options.hour_future', 1) : '',
|
label: t('time_ago_options.hour_future', 1),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
seconds: 2 * 60 * 60,
|
seconds: 2 * 60 * 60,
|
||||||
label: isHydrated.value ? t('time_ago_options.hour_future', 2) : '',
|
label: t('time_ago_options.hour_future', 2),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
seconds: 1 * 24 * 60 * 60,
|
seconds: 1 * 24 * 60 * 60,
|
||||||
label: isHydrated.value ? t('time_ago_options.day_future', 1) : '',
|
label: t('time_ago_options.day_future', 1),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
seconds: 2 * 24 * 60 * 60,
|
seconds: 2 * 24 * 60 * 60,
|
||||||
label: isHydrated.value ? t('time_ago_options.day_future', 2) : '',
|
label: t('time_ago_options.day_future', 2),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
seconds: 7 * 24 * 60 * 60,
|
seconds: 7 * 24 * 60 * 60,
|
||||||
label: isHydrated.value ? t('time_ago_options.day_future', 7) : '',
|
label: t('time_ago_options.day_future', 7),
|
||||||
},
|
},
|
||||||
])
|
])
|
||||||
|
|
||||||
const expiresInDefaultOptionIndex = 2
|
const expiresInDefaultOptionIndex = 2
|
||||||
|
|
||||||
const characterCount = $computed(() => {
|
const characterCount = computed(() => {
|
||||||
const text = htmlToText(editor.value?.getHTML() || '')
|
const text = htmlToText(editor.value?.getHTML() || '')
|
||||||
|
|
||||||
let length = stringLength(text)
|
let length = stringLength(text)
|
||||||
|
@ -131,24 +137,24 @@ const characterCount = $computed(() => {
|
||||||
for (const [fullMatch, before, _handle, username] of text.matchAll(countableMentionRegex))
|
for (const [fullMatch, before, _handle, username] of text.matchAll(countableMentionRegex))
|
||||||
length -= fullMatch.length - (before + username).length - 1 // - 1 for the @
|
length -= fullMatch.length - (before + username).length - 1 // - 1 for the @
|
||||||
|
|
||||||
if (draft.mentions) {
|
if (draft.value.mentions) {
|
||||||
// + 1 is needed as mentions always need a space seperator at the end
|
// + 1 is needed as mentions always need a space seperator at the end
|
||||||
length += draft.mentions.map((mention) => {
|
length += draft.value.mentions.map((mention) => {
|
||||||
const [handle] = mention.split('@')
|
const [handle] = mention.split('@')
|
||||||
return `@${handle}`
|
return `@${handle}`
|
||||||
}).join(' ').length + 1
|
}).join(' ').length + 1
|
||||||
}
|
}
|
||||||
|
|
||||||
length += stringLength(publishSpoilerText)
|
length += stringLength(publishSpoilerText.value)
|
||||||
|
|
||||||
return length
|
return length
|
||||||
})
|
})
|
||||||
|
|
||||||
const isExceedingCharacterLimit = $computed(() => {
|
const isExceedingCharacterLimit = computed(() => {
|
||||||
return characterCount > characterLimit.value
|
return characterCount.value > characterLimit.value
|
||||||
})
|
})
|
||||||
|
|
||||||
const postLanguageDisplay = $computed(() => languagesNameList.find(i => i.code === (draft.params.language || preferredLanguage))?.nativeName)
|
const postLanguageDisplay = computed(() => languagesNameList.find(i => i.code === (draft.value.params.language || preferredLanguage))?.nativeName)
|
||||||
|
|
||||||
async function handlePaste(evt: ClipboardEvent) {
|
async function handlePaste(evt: ClipboardEvent) {
|
||||||
const files = evt.clipboardData?.files
|
const files = evt.clipboardData?.files
|
||||||
|
@ -167,7 +173,7 @@ function insertCustomEmoji(image: any) {
|
||||||
}
|
}
|
||||||
|
|
||||||
async function toggleSensitive() {
|
async function toggleSensitive() {
|
||||||
draft.params.sensitive = !draft.params.sensitive
|
draft.value.params.sensitive = !draft.value.params.sensitive
|
||||||
}
|
}
|
||||||
|
|
||||||
async function publish() {
|
async function publish() {
|
||||||
|
|
|
@ -5,16 +5,16 @@ const route = useRoute()
|
||||||
const { formatNumber } = useHumanReadableNumber()
|
const { formatNumber } = useHumanReadableNumber()
|
||||||
const timeAgoOptions = useTimeAgoOptions()
|
const timeAgoOptions = useTimeAgoOptions()
|
||||||
|
|
||||||
let draftKey = $ref('home')
|
const draftKey = ref('home')
|
||||||
|
|
||||||
const draftKeys = $computed(() => Object.keys(currentUserDrafts.value))
|
const draftKeys = computed(() => Object.keys(currentUserDrafts.value))
|
||||||
const nonEmptyDrafts = $computed(() => draftKeys
|
const nonEmptyDrafts = computed(() => draftKeys.value
|
||||||
.filter(i => i !== draftKey && !isEmptyDraft(currentUserDrafts.value[i]))
|
.filter(i => i !== draftKey.value && !isEmptyDraft(currentUserDrafts.value[i]))
|
||||||
.map(i => [i, currentUserDrafts.value[i]] as const),
|
.map(i => [i, currentUserDrafts.value[i]] as const),
|
||||||
)
|
)
|
||||||
|
|
||||||
watchEffect(() => {
|
watchEffect(() => {
|
||||||
draftKey = route.query.draft?.toString() || 'home'
|
draftKey.value = route.query.draft?.toString() || 'home'
|
||||||
})
|
})
|
||||||
|
|
||||||
onDeactivated(() => {
|
onDeactivated(() => {
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<button
|
<button
|
||||||
v-if="$pwa?.needRefresh"
|
v-if="useNuxtApp().$pwa?.needRefresh"
|
||||||
bg="primary-fade" relative rounded
|
bg="primary-fade" relative rounded
|
||||||
flex="~ gap-1 center" px3 py1 text-primary
|
flex="~ gap-1 center" px3 py1 text-primary
|
||||||
@click="$pwa.updateServiceWorker()"
|
@click="useNuxtApp().$pwa?.updateServiceWorker()"
|
||||||
>
|
>
|
||||||
<div i-ri-download-cloud-2-line />
|
<div i-ri-download-cloud-2-line />
|
||||||
<h2 flex="~ gap-2" items-center>
|
<h2 flex="~ gap-2" items-center>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
v-if="$pwa?.showInstallPrompt && !$pwa?.needRefresh"
|
v-if="useNuxtApp().$pwa?.showInstallPrompt && !useNuxtApp().$pwa?.needRefresh"
|
||||||
m-2 p5 bg="primary-fade" relative
|
m-2 p5 bg="primary-fade" relative
|
||||||
rounded-lg of-hidden
|
rounded-lg of-hidden
|
||||||
flex="~ col gap-3"
|
flex="~ col gap-3"
|
||||||
|
@ -10,10 +10,10 @@
|
||||||
{{ $t('pwa.install_title') }}
|
{{ $t('pwa.install_title') }}
|
||||||
</h2>
|
</h2>
|
||||||
<div flex="~ gap-1">
|
<div flex="~ gap-1">
|
||||||
<button type="button" btn-solid px-4 py-1 text-center text-sm @click="$pwa.install()">
|
<button type="button" btn-solid px-4 py-1 text-center text-sm @click="useNuxtApp().$pwa?.install()">
|
||||||
{{ $t('pwa.install') }}
|
{{ $t('pwa.install') }}
|
||||||
</button>
|
</button>
|
||||||
<button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="$pwa.cancelInstall()">
|
<button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="useNuxtApp().$pwa?.cancelInstall()">
|
||||||
{{ $t('pwa.dismiss') }}
|
{{ $t('pwa.dismiss') }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
v-if="$pwa?.needRefresh"
|
v-if="useNuxtApp().$pwa?.needRefresh"
|
||||||
m-2 p5 bg="primary-fade" relative
|
m-2 p5 bg="primary-fade" relative
|
||||||
rounded-lg of-hidden
|
rounded-lg of-hidden
|
||||||
flex="~ col gap-3"
|
flex="~ col gap-3"
|
||||||
|
@ -9,10 +9,10 @@
|
||||||
{{ $t('pwa.title') }}
|
{{ $t('pwa.title') }}
|
||||||
</h2>
|
</h2>
|
||||||
<div flex="~ gap-1">
|
<div flex="~ gap-1">
|
||||||
<button type="button" btn-solid px-4 py-1 text-center text-sm @click="$pwa.updateServiceWorker()">
|
<button type="button" btn-solid px-4 py-1 text-center text-sm @click="useNuxtApp().$pwa?.updateServiceWorker()">
|
||||||
{{ $t('pwa.update') }}
|
{{ $t('pwa.update') }}
|
||||||
</button>
|
</button>
|
||||||
<button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="$pwa.close()">
|
<button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="useNuxtApp().$pwa?.close()">
|
||||||
{{ $t('pwa.dismiss') }}
|
{{ $t('pwa.dismiss') }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -5,7 +5,7 @@ const { hashtag } = defineProps<{
|
||||||
hashtag: mastodon.v1.Tag
|
hashtag: mastodon.v1.Tag
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const totalTrend = $computed(() =>
|
const totalTrend = computed(() =>
|
||||||
hashtag.history?.reduce((total: number, item) => total + (Number(item.accounts) || 0), 0),
|
hashtag.history?.reduce((total: number, item) => total + (Number(item.accounts) || 0), 0),
|
||||||
)
|
)
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -77,7 +77,7 @@ function activate() {
|
||||||
ps-3
|
ps-3
|
||||||
pe-1
|
pe-1
|
||||||
ml-1
|
ml-1
|
||||||
:placeholder="isHydrated ? t('nav.search') : ''"
|
:placeholder="t('nav.search')"
|
||||||
pb="1px"
|
pb="1px"
|
||||||
placeholder-text-secondary
|
placeholder-text-secondary
|
||||||
@keydown.down.prevent="shift(1)"
|
@keydown.down.prevent="shift(1)"
|
||||||
|
|
|
@ -18,12 +18,12 @@ useCommand({
|
||||||
scope: 'Settings',
|
scope: 'Settings',
|
||||||
|
|
||||||
name: () => props.text
|
name: () => props.text
|
||||||
?? (props.to
|
?? (props.to
|
||||||
? typeof props.to === 'string'
|
? typeof props.to === 'string'
|
||||||
? props.to
|
? props.to
|
||||||
: props.to.name
|
: props.to.name
|
||||||
: ''
|
: ''
|
||||||
),
|
),
|
||||||
description: () => props.description,
|
description: () => props.description,
|
||||||
icon: () => props.icon || '',
|
icon: () => props.icon || '',
|
||||||
visible: () => props.command && props.to,
|
visible: () => props.command && props.to,
|
||||||
|
@ -46,7 +46,7 @@ useCommand({
|
||||||
@click="to ? $scrollToTop() : undefined"
|
@click="to ? $scrollToTop() : undefined"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
w-full flex w-fit px5 py3 md:gap2 gap4 items-center
|
w-full flex px5 py3 md:gap2 gap4 items-center
|
||||||
transition-250 group-hover:bg-active
|
transition-250 group-hover:bg-active
|
||||||
group-focus-visible:ring="2 current"
|
group-focus-visible:ring="2 current"
|
||||||
>
|
>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { ComputedRef } from 'vue'
|
import type { ComputedRef } from 'vue'
|
||||||
import type { LocaleObject } from '#i18n'
|
import type { LocaleObject } from '@nuxtjs/i18n'
|
||||||
|
|
||||||
const userSettings = useUserSettings()
|
const userSettings = useUserSettings()
|
||||||
|
|
||||||
|
|
|
@ -4,15 +4,14 @@ import type { mastodon } from 'masto'
|
||||||
const form = defineModel<{
|
const form = defineModel<{
|
||||||
fieldsAttributes: NonNullable<mastodon.rest.v1.UpdateCredentialsParams['fieldsAttributes']>
|
fieldsAttributes: NonNullable<mastodon.rest.v1.UpdateCredentialsParams['fieldsAttributes']>
|
||||||
}>({ required: true })
|
}>({ required: true })
|
||||||
const dropdown = $ref<any>()
|
const dropdown = ref<any>()
|
||||||
|
|
||||||
const fieldIcons = computed(() =>
|
const fieldIcons = computed(() =>
|
||||||
Array.from({ length: maxAccountFieldCount.value }, (_, i) =>
|
Array.from({ length: maxAccountFieldCount.value }, (_, i) =>
|
||||||
getAccountFieldIcon(form.value.fieldsAttributes[i].name),
|
getAccountFieldIcon(form.value.fieldsAttributes[i].name)),
|
||||||
),
|
|
||||||
)
|
)
|
||||||
|
|
||||||
const fieldCount = $computed(() => {
|
const fieldCount = computed(() => {
|
||||||
// find last non-empty field
|
// find last non-empty field
|
||||||
const idx = [...form.value.fieldsAttributes].reverse().findIndex(f => f.name || f.value)
|
const idx = [...form.value.fieldsAttributes].reverse().findIndex(f => f.name || f.value)
|
||||||
if (idx === -1)
|
if (idx === -1)
|
||||||
|
@ -25,7 +24,7 @@ const fieldCount = $computed(() => {
|
||||||
|
|
||||||
function chooseIcon(i: number, text: string) {
|
function chooseIcon(i: number, text: string) {
|
||||||
form.value.fieldsAttributes[i].name = text
|
form.value.fieldsAttributes[i].name = text
|
||||||
dropdown[i]?.hide()
|
dropdown.value[i]?.hide()
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -2,12 +2,12 @@
|
||||||
import type { ThemeColors } from '~/composables/settings'
|
import type { ThemeColors } from '~/composables/settings'
|
||||||
|
|
||||||
const themes = await import('~/constants/themes.json').then(r => r.default) as [string, ThemeColors][]
|
const themes = await import('~/constants/themes.json').then(r => r.default) as [string, ThemeColors][]
|
||||||
const settings = $(useUserSettings())
|
const settings = useUserSettings()
|
||||||
|
|
||||||
const currentTheme = $computed(() => settings.themeColors?.['--theme-color-name'] || themes[0][1]['--theme-color-name'])
|
const currentTheme = computed(() => settings.value.themeColors?.['--theme-color-name'] || themes[0][1]['--theme-color-name'])
|
||||||
|
|
||||||
function updateTheme(theme: ThemeColors) {
|
function updateTheme(theme: ThemeColors) {
|
||||||
settings.themeColors = theme
|
settings.value.themeColors = theme
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -9,7 +9,7 @@ const props = defineProps<{
|
||||||
|
|
||||||
const focusEditor = inject<typeof noop>('focus-editor', noop)
|
const focusEditor = inject<typeof noop>('focus-editor', noop)
|
||||||
|
|
||||||
const { details, command } = $(props)
|
const { details, command } = props // TODO
|
||||||
|
|
||||||
const userSettings = useUserSettings()
|
const userSettings = useUserSettings()
|
||||||
const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
|
const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
|
||||||
|
@ -21,7 +21,7 @@ const {
|
||||||
toggleBookmark,
|
toggleBookmark,
|
||||||
toggleFavourite,
|
toggleFavourite,
|
||||||
toggleReblog,
|
toggleReblog,
|
||||||
} = $(useStatusActions(props))
|
} = useStatusActions(props)
|
||||||
|
|
||||||
function reply() {
|
function reply() {
|
||||||
if (!checkLogin())
|
if (!checkLogin())
|
||||||
|
@ -29,7 +29,7 @@ function reply() {
|
||||||
if (details)
|
if (details)
|
||||||
focusEditor()
|
focusEditor()
|
||||||
else
|
else
|
||||||
navigateToStatus({ status, focusReply: true })
|
navigateToStatus({ status: status.value, focusReply: true })
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -14,8 +14,6 @@ const emit = defineEmits<{
|
||||||
|
|
||||||
const focusEditor = inject<typeof noop>('focus-editor', noop)
|
const focusEditor = inject<typeof noop>('focus-editor', noop)
|
||||||
|
|
||||||
const { details, command } = $(props)
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
status,
|
status,
|
||||||
isLoading,
|
isLoading,
|
||||||
|
@ -24,7 +22,7 @@ const {
|
||||||
togglePin,
|
togglePin,
|
||||||
toggleReblog,
|
toggleReblog,
|
||||||
toggleMute,
|
toggleMute,
|
||||||
} = $(useStatusActions(props))
|
} = useStatusActions(props)
|
||||||
|
|
||||||
const clipboard = useClipboard()
|
const clipboard = useClipboard()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
@ -33,9 +31,9 @@ const { t } = useI18n()
|
||||||
const userSettings = useUserSettings()
|
const userSettings = useUserSettings()
|
||||||
const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
|
const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
|
||||||
|
|
||||||
const isAuthor = $computed(() => status.account.id === currentUser.value?.account.id)
|
const isAuthor = computed(() => status.value.account.id === currentUser.value?.account.id)
|
||||||
|
|
||||||
const { client } = $(useMasto())
|
const { client } = useMasto()
|
||||||
|
|
||||||
function getPermalinkUrl(status: mastodon.v1.Status) {
|
function getPermalinkUrl(status: mastodon.v1.Status) {
|
||||||
const url = getStatusPermalinkRoute(status)
|
const url = getStatusPermalinkRoute(status)
|
||||||
|
@ -72,8 +70,8 @@ async function deleteStatus() {
|
||||||
}) !== 'confirm')
|
}) !== 'confirm')
|
||||||
return
|
return
|
||||||
|
|
||||||
removeCachedStatus(status.id)
|
removeCachedStatus(status.value.id)
|
||||||
await client.v1.statuses.$select(status.id).remove()
|
await client.value.v1.statuses.$select(status.value.id).remove()
|
||||||
|
|
||||||
if (route.name === 'status')
|
if (route.name === 'status')
|
||||||
router.back()
|
router.back()
|
||||||
|
@ -90,16 +88,16 @@ async function deleteAndRedraft() {
|
||||||
}) !== 'confirm')
|
}) !== 'confirm')
|
||||||
return
|
return
|
||||||
|
|
||||||
if (process.dev) {
|
if (import.meta.dev) {
|
||||||
// eslint-disable-next-line no-alert
|
// eslint-disable-next-line no-alert
|
||||||
const result = confirm('[DEV] Are you sure you want to delete and re-draft this post?')
|
const result = confirm('[DEV] Are you sure you want to delete and re-draft this post?')
|
||||||
if (!result)
|
if (!result)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
removeCachedStatus(status.id)
|
removeCachedStatus(status.value.id)
|
||||||
await client.v1.statuses.$select(status.id).remove()
|
await client.value.v1.statuses.$select(status.value.id).remove()
|
||||||
await openPublishDialog('dialog', await getDraftFromStatus(status), true)
|
await openPublishDialog('dialog', await getDraftFromStatus(status.value), true)
|
||||||
|
|
||||||
// Go to the new status, if the page is the old status
|
// Go to the new status, if the page is the old status
|
||||||
if (lastPublishDialogStatus.value && route.name === 'status')
|
if (lastPublishDialogStatus.value && route.name === 'status')
|
||||||
|
@ -109,25 +107,25 @@ async function deleteAndRedraft() {
|
||||||
function reply() {
|
function reply() {
|
||||||
if (!checkLogin())
|
if (!checkLogin())
|
||||||
return
|
return
|
||||||
if (details) {
|
if (props.details) {
|
||||||
focusEditor()
|
focusEditor()
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
const { key, draft } = getReplyDraft(status)
|
const { key, draft } = getReplyDraft(status.value)
|
||||||
openPublishDialog(key, draft())
|
openPublishDialog(key, draft())
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function editStatus() {
|
async function editStatus() {
|
||||||
await openPublishDialog(`edit-${status.id}`, {
|
await openPublishDialog(`edit-${status.value.id}`, {
|
||||||
...await getDraftFromStatus(status),
|
...await getDraftFromStatus(status.value),
|
||||||
editingStatus: status,
|
editingStatus: status.value,
|
||||||
}, true)
|
}, true)
|
||||||
emit('afterEdit')
|
emit('afterEdit')
|
||||||
}
|
}
|
||||||
|
|
||||||
function showFavoritedAndBoostedBy() {
|
function showFavoritedAndBoostedBy() {
|
||||||
openFavoridedBoostedByDialog(status.id)
|
openFavoridedBoostedByDialog(status.value.id)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -14,8 +14,8 @@ const {
|
||||||
isPreview?: boolean
|
isPreview?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const src = $computed(() => attachment.previewUrl || attachment.url || attachment.remoteUrl!)
|
const src = computed(() => attachment.previewUrl || attachment.url || attachment.remoteUrl!)
|
||||||
const srcset = $computed(() => [
|
const srcset = computed(() => [
|
||||||
[attachment.url, attachment.meta?.original?.width],
|
[attachment.url, attachment.meta?.original?.width],
|
||||||
[attachment.remoteUrl, attachment.meta?.original?.width],
|
[attachment.remoteUrl, attachment.meta?.original?.width],
|
||||||
[attachment.previewUrl, attachment.meta?.small?.width],
|
[attachment.previewUrl, attachment.meta?.small?.width],
|
||||||
|
@ -53,12 +53,12 @@ const typeExtsMap = {
|
||||||
gifv: ['gifv', 'gif'],
|
gifv: ['gifv', 'gif'],
|
||||||
}
|
}
|
||||||
|
|
||||||
const type = $computed(() => {
|
const type = computed(() => {
|
||||||
if (attachment.type && attachment.type !== 'unknown')
|
if (attachment.type && attachment.type !== 'unknown')
|
||||||
return attachment.type
|
return attachment.type
|
||||||
// some server returns unknown type, we need to guess it based on file extension
|
// some server returns unknown type, we need to guess it based on file extension
|
||||||
for (const [type, exts] of Object.entries(typeExtsMap)) {
|
for (const [type, exts] of Object.entries(typeExtsMap)) {
|
||||||
if (exts.some(ext => src?.toLowerCase().endsWith(`.${ext}`)))
|
if (exts.some(ext => src.value?.toLowerCase().endsWith(`.${ext}`)))
|
||||||
return type
|
return type
|
||||||
}
|
}
|
||||||
return 'unknown'
|
return 'unknown'
|
||||||
|
@ -66,8 +66,8 @@ const type = $computed(() => {
|
||||||
|
|
||||||
const video = ref<HTMLVideoElement | undefined>()
|
const video = ref<HTMLVideoElement | undefined>()
|
||||||
const prefersReducedMotion = usePreferredReducedMotion()
|
const prefersReducedMotion = usePreferredReducedMotion()
|
||||||
const isAudio = $computed(() => attachment.type === 'audio')
|
const isAudio = computed(() => attachment.type === 'audio')
|
||||||
const isVideo = $computed(() => attachment.type === 'video')
|
const isVideo = computed(() => attachment.type === 'video')
|
||||||
|
|
||||||
const enableAutoplay = usePreferences('enableAutoplay')
|
const enableAutoplay = usePreferences('enableAutoplay')
|
||||||
|
|
||||||
|
@ -100,21 +100,21 @@ function loadAttachment() {
|
||||||
shouldLoadAttachment.value = true
|
shouldLoadAttachment.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const blurHashSrc = $computed(() => {
|
const blurHashSrc = computed(() => {
|
||||||
if (!attachment.blurhash)
|
if (!attachment.blurhash)
|
||||||
return ''
|
return ''
|
||||||
const pixels = decode(attachment.blurhash, 32, 32)
|
const pixels = decode(attachment.blurhash, 32, 32)
|
||||||
return getDataUrlFromArr(pixels, 32, 32)
|
return getDataUrlFromArr(pixels, 32, 32)
|
||||||
})
|
})
|
||||||
|
|
||||||
let videoThumbnail = shouldLoadAttachment.value
|
const videoThumbnail = ref(shouldLoadAttachment.value
|
||||||
? attachment.previewUrl
|
? attachment.previewUrl
|
||||||
: blurHashSrc
|
: blurHashSrc.value)
|
||||||
|
|
||||||
watch(shouldLoadAttachment, () => {
|
watch(shouldLoadAttachment, () => {
|
||||||
videoThumbnail = shouldLoadAttachment
|
videoThumbnail.value = shouldLoadAttachment.value
|
||||||
? attachment.previewUrl
|
? attachment.previewUrl
|
||||||
: blurHashSrc
|
: blurHashSrc.value
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -14,7 +14,7 @@ const {
|
||||||
const { translation } = useTranslation(status, getLanguageCode())
|
const { translation } = useTranslation(status, getLanguageCode())
|
||||||
|
|
||||||
const emojisObject = useEmojisFallback(() => status.emojis)
|
const emojisObject = useEmojisFallback(() => status.emojis)
|
||||||
const vnode = $computed(() => {
|
const vnode = computed(() => {
|
||||||
if (!status.content)
|
if (!status.content)
|
||||||
return null
|
return null
|
||||||
return contentToVNode(status.content, {
|
return contentToVNode(status.content, {
|
||||||
|
|
|
@ -26,45 +26,45 @@ const props = withDefaults(
|
||||||
|
|
||||||
const userSettings = useUserSettings()
|
const userSettings = useUserSettings()
|
||||||
|
|
||||||
const status = $computed(() => {
|
const status = computed(() => {
|
||||||
if (props.status.reblog && (!props.status.content || props.status.content === props.status.reblog.content))
|
if (props.status.reblog && (!props.status.content || props.status.content === props.status.reblog.content))
|
||||||
return props.status.reblog
|
return props.status.reblog
|
||||||
return props.status
|
return props.status
|
||||||
})
|
})
|
||||||
|
|
||||||
// Use original status, avoid connecting a reblog
|
// Use original status, avoid connecting a reblog
|
||||||
const directReply = $computed(() => props.hasNewer || (!!status.inReplyToId && (status.inReplyToId === props.newer?.id || status.inReplyToId === props.newer?.reblog?.id)))
|
const directReply = computed(() => props.hasNewer || (!!status.value.inReplyToId && (status.value.inReplyToId === props.newer?.id || status.value.inReplyToId === props.newer?.reblog?.id)))
|
||||||
// Use reblogged status, connect it to further replies
|
// Use reblogged status, connect it to further replies
|
||||||
const connectReply = $computed(() => props.hasOlder || status.id === props.older?.inReplyToId || status.id === props.older?.reblog?.inReplyToId)
|
const connectReply = computed(() => props.hasOlder || status.value.id === props.older?.inReplyToId || status.value.id === props.older?.reblog?.inReplyToId)
|
||||||
// Open a detailed status, the replies directly to it
|
// Open a detailed status, the replies directly to it
|
||||||
const replyToMain = $computed(() => props.main && props.main.id === status.inReplyToId)
|
const replyToMain = computed(() => props.main && props.main.id === status.value.inReplyToId)
|
||||||
|
|
||||||
const rebloggedBy = $computed(() => props.status.reblog ? props.status.account : null)
|
const rebloggedBy = computed(() => props.status.reblog ? props.status.account : null)
|
||||||
|
|
||||||
const statusRoute = $computed(() => getStatusRoute(status))
|
const statusRoute = computed(() => getStatusRoute(status.value))
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
function go(evt: MouseEvent | KeyboardEvent) {
|
function go(evt: MouseEvent | KeyboardEvent) {
|
||||||
if (evt.metaKey || evt.ctrlKey) {
|
if (evt.metaKey || evt.ctrlKey) {
|
||||||
window.open(statusRoute.href)
|
window.open(statusRoute.value.href)
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
cacheStatus(status)
|
cacheStatus(status.value)
|
||||||
router.push(statusRoute)
|
router.push(statusRoute.value)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const createdAt = useFormattedDateTime(status.createdAt)
|
const createdAt = useFormattedDateTime(status.value.createdAt)
|
||||||
const timeAgoOptions = useTimeAgoOptions(true)
|
const timeAgoOptions = useTimeAgoOptions(true)
|
||||||
const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
|
const timeago = useTimeAgo(() => status.value.createdAt, timeAgoOptions)
|
||||||
|
|
||||||
const isSelfReply = $computed(() => status.inReplyToAccountId === status.account.id)
|
const isSelfReply = computed(() => status.value.inReplyToAccountId === status.value.account.id)
|
||||||
const collapseRebloggedBy = $computed(() => rebloggedBy?.id === status.account.id)
|
const collapseRebloggedBy = computed(() => rebloggedBy.value?.id === status.value.account.id)
|
||||||
const isDM = $computed(() => status.visibility === 'direct')
|
const isDM = computed(() => status.value.visibility === 'direct')
|
||||||
|
|
||||||
const showUpperBorder = $computed(() => props.newer && !directReply)
|
const showUpperBorder = computed(() => props.newer && !directReply.value)
|
||||||
const showReplyTo = $computed(() => !replyToMain && !directReply)
|
const showReplyTo = computed(() => !replyToMain.value && !directReply.value)
|
||||||
|
|
||||||
const forceShow = ref(false)
|
const forceShow = ref(false)
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -9,28 +9,28 @@ const { status, context } = defineProps<{
|
||||||
inNotification?: boolean
|
inNotification?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const isDM = $computed(() => status.visibility === 'direct')
|
const isDM = computed(() => status.visibility === 'direct')
|
||||||
const isDetails = $computed(() => context === 'details')
|
const isDetails = computed(() => context === 'details')
|
||||||
|
|
||||||
// Content Filter logic
|
// Content Filter logic
|
||||||
const filterResult = $computed(() => status.filtered?.length ? status.filtered[0] : null)
|
const filterResult = computed(() => status.filtered?.length ? status.filtered[0] : null)
|
||||||
const filter = $computed(() => filterResult?.filter)
|
const filter = computed(() => filterResult.value?.filter)
|
||||||
|
|
||||||
const filterPhrase = $computed(() => filter?.title)
|
const filterPhrase = computed(() => filter.value?.title)
|
||||||
const isFiltered = $computed(() => status.account.id !== currentUser.value?.account.id && filterPhrase && context && context !== 'details' && !!filter?.context.includes(context))
|
const isFiltered = computed(() => status.account.id !== currentUser.value?.account.id && filterPhrase && context && context !== 'details' && !!filter.value?.context.includes(context))
|
||||||
|
|
||||||
// check spoiler text or media attachment
|
// check spoiler text or media attachment
|
||||||
// needed to handle accounts that mark all their posts as sensitive
|
// needed to handle accounts that mark all their posts as sensitive
|
||||||
const spoilerTextPresent = $computed(() => !!status.spoilerText && status.spoilerText.trim().length > 0)
|
const spoilerTextPresent = computed(() => !!status.spoilerText && status.spoilerText.trim().length > 0)
|
||||||
const hasSpoilerOrSensitiveMedia = $computed(() => spoilerTextPresent || (status.sensitive && !!status.mediaAttachments.length))
|
const hasSpoilerOrSensitiveMedia = computed(() => spoilerTextPresent.value || (status.sensitive && !!status.mediaAttachments.length))
|
||||||
const isSensitiveNonSpoiler = computed(() => status.sensitive && !status.spoilerText && !!status.mediaAttachments.length)
|
const isSensitiveNonSpoiler = computed(() => status.sensitive && !status.spoilerText && !!status.mediaAttachments.length)
|
||||||
const hideAllMedia = computed(
|
const hideAllMedia = computed(
|
||||||
() => {
|
() => {
|
||||||
return currentUser.value ? (getHideMediaByDefault(currentUser.value.account) && (!!status.mediaAttachments.length || !!status.card?.html)) : false
|
return currentUser.value ? (getHideMediaByDefault(currentUser.value.account) && (!!status.mediaAttachments.length || !!status.card?.html)) : false
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
const embeddedMediaPreference = $(usePreferences('experimentalEmbeddedMedia'))
|
const embeddedMediaPreference = usePreferences('experimentalEmbeddedMedia')
|
||||||
const allowEmbeddedMedia = $computed(() => status.card?.html && embeddedMediaPreference)
|
const allowEmbeddedMedia = computed(() => status.card?.html && embeddedMediaPreference.value)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -14,18 +14,18 @@ defineEmits<{
|
||||||
(event: 'refetchStatus'): void
|
(event: 'refetchStatus'): void
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const status = $computed(() => {
|
const status = computed(() => {
|
||||||
if (props.status.reblog && props.status.reblog)
|
if (props.status.reblog && props.status.reblog)
|
||||||
return props.status.reblog
|
return props.status.reblog
|
||||||
return props.status
|
return props.status
|
||||||
})
|
})
|
||||||
|
|
||||||
const createdAt = useFormattedDateTime(status.createdAt)
|
const createdAt = useFormattedDateTime(status.value.createdAt)
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
|
||||||
useHydratedHead({
|
useHydratedHead({
|
||||||
title: () => `${getDisplayName(status.account)} ${t('common.in')} ${t('app_name')}: "${removeHTMLTags(status.content) || ''}"`,
|
title: () => `${getDisplayName(status.value.account)} ${t('common.in')} ${t('app_name')}: "${removeHTMLTags(status.value.content) || ''}"`,
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -5,7 +5,7 @@ const { status } = defineProps<{
|
||||||
status: mastodon.v1.Status
|
status: mastodon.v1.Status
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const vnode = $computed(() => {
|
const vnode = computed(() => {
|
||||||
if (!status.card?.html)
|
if (!status.card?.html)
|
||||||
return null
|
return null
|
||||||
const node = sanitizeEmbeddedIframe(status.card?.html)?.children[0]
|
const node = sanitizeEmbeddedIframe(status.card?.html)?.children[0]
|
||||||
|
|
|
@ -3,13 +3,13 @@ import { favouritedBoostedByStatusId } from '~/composables/dialog'
|
||||||
|
|
||||||
const type = ref<'favourited-by' | 'boosted-by'>('favourited-by')
|
const type = ref<'favourited-by' | 'boosted-by'>('favourited-by')
|
||||||
|
|
||||||
const { client } = $(useMasto())
|
const { client } = useMasto()
|
||||||
|
|
||||||
function load() {
|
function load() {
|
||||||
return client.v1.statuses.$select(favouritedBoostedByStatusId.value!)[type.value === 'favourited-by' ? 'favouritedBy' : 'rebloggedBy'].list()
|
return client.value.v1.statuses.$select(favouritedBoostedByStatusId.value!)[type.value === 'favourited-by' ? 'favouritedBy' : 'rebloggedBy'].list()
|
||||||
}
|
}
|
||||||
|
|
||||||
const paginator = $computed(() => load())
|
const paginator = computed(() => load())
|
||||||
|
|
||||||
function showFavouritedBy() {
|
function showFavouritedBy() {
|
||||||
type.value = 'favourited-by'
|
type.value = 'favourited-by'
|
||||||
|
@ -42,7 +42,7 @@ const tabs = [
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
relative flex flex-auto cursor-pointer sm:px6 px2 rounded transition-all
|
relative flex flex-auto cursor-pointer sm:px6 px2 rounded transition-all
|
||||||
tabindex="1"
|
tabindex="0"
|
||||||
hover:bg-active transition-100
|
hover:bg-active transition-100
|
||||||
@click="option.onClick"
|
@click="option.onClick"
|
||||||
>
|
>
|
||||||
|
|
|
@ -8,7 +8,7 @@ const props = defineProps<{
|
||||||
|
|
||||||
const el = ref<HTMLElement>()
|
const el = ref<HTMLElement>()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const statusRoute = $computed(() => getStatusRoute(props.status))
|
const statusRoute = computed(() => getStatusRoute(props.status))
|
||||||
|
|
||||||
function onclick(evt: MouseEvent | KeyboardEvent) {
|
function onclick(evt: MouseEvent | KeyboardEvent) {
|
||||||
const path = evt.composedPath() as HTMLElement[]
|
const path = evt.composedPath() as HTMLElement[]
|
||||||
|
@ -20,11 +20,11 @@ function onclick(evt: MouseEvent | KeyboardEvent) {
|
||||||
|
|
||||||
function go(evt: MouseEvent | KeyboardEvent) {
|
function go(evt: MouseEvent | KeyboardEvent) {
|
||||||
if (evt.metaKey || evt.ctrlKey) {
|
if (evt.metaKey || evt.ctrlKey) {
|
||||||
window.open(statusRoute.href)
|
window.open(statusRoute.value.href)
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
cacheStatus(props.status)
|
cacheStatus(props.status)
|
||||||
router.push(statusRoute)
|
router.push(statusRoute.value)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -15,7 +15,7 @@ const expiredTimeAgo = useTimeAgo(poll.expiresAt!, timeAgoOptions)
|
||||||
const expiredTimeFormatted = useFormattedDateTime(poll.expiresAt!)
|
const expiredTimeFormatted = useFormattedDateTime(poll.expiresAt!)
|
||||||
const { formatPercentage } = useHumanReadableNumber()
|
const { formatPercentage } = useHumanReadableNumber()
|
||||||
|
|
||||||
const { client } = $(useMasto())
|
const { client } = useMasto()
|
||||||
|
|
||||||
async function vote(e: Event) {
|
async function vote(e: Event) {
|
||||||
const formData = new FormData(e.target as HTMLFormElement)
|
const formData = new FormData(e.target as HTMLFormElement)
|
||||||
|
@ -36,10 +36,10 @@ async function vote(e: Event) {
|
||||||
|
|
||||||
cacheStatus({ ...status, poll }, undefined, true)
|
cacheStatus({ ...status, poll }, undefined, true)
|
||||||
|
|
||||||
await client.v1.polls.$select(poll.id).votes.create({ choices })
|
await client.value.v1.polls.$select(poll.id).votes.create({ choices })
|
||||||
}
|
}
|
||||||
|
|
||||||
const votersCount = $computed(() => poll.votersCount ?? poll.votesCount ?? 0)
|
const votersCount = computed(() => poll.votersCount ?? poll.votesCount ?? 0)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -11,7 +11,7 @@ const props = defineProps<{
|
||||||
|
|
||||||
const providerName = props.card.providerName
|
const providerName = props.card.providerName
|
||||||
|
|
||||||
const gitHubCards = $(usePreferences('experimentalGitHubCards'))
|
const gitHubCards = usePreferences('experimentalGitHubCards')
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -12,14 +12,14 @@ const props = defineProps<{
|
||||||
// mastodon's default max og image width
|
// mastodon's default max og image width
|
||||||
const ogImageWidth = 400
|
const ogImageWidth = 400
|
||||||
|
|
||||||
const alt = $computed(() => `${props.card.title} - ${props.card.title}`)
|
const alt = computed(() => `${props.card.title} - ${props.card.title}`)
|
||||||
const isSquare = $computed(() => (
|
const isSquare = computed(() => (
|
||||||
props.smallPictureOnly
|
props.smallPictureOnly
|
||||||
|| props.card.width === props.card.height
|
|| props.card.width === props.card.height
|
||||||
|| Number(props.card.width || 0) < ogImageWidth
|
|| Number(props.card.width || 0) < ogImageWidth
|
||||||
|| Number(props.card.height || 0) < ogImageWidth / 2
|
|| Number(props.card.height || 0) < ogImageWidth / 2
|
||||||
))
|
))
|
||||||
const providerName = $computed(() => props.card.providerName ? props.card.providerName : new URL(props.card.url).hostname)
|
const providerName = computed(() => props.card.providerName ? props.card.providerName : new URL(props.card.url).hostname)
|
||||||
|
|
||||||
// TODO: handle card.type: 'photo' | 'video' | 'rich';
|
// TODO: handle card.type: 'photo' | 'video' | 'rich';
|
||||||
const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {
|
const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {
|
||||||
|
|
|
@ -29,7 +29,7 @@ interface Meta {
|
||||||
// /sponsors/user
|
// /sponsors/user
|
||||||
const supportedReservedRoutes = ['sponsors']
|
const supportedReservedRoutes = ['sponsors']
|
||||||
|
|
||||||
const meta = $computed(() => {
|
const meta = computed(() => {
|
||||||
const { url } = props.card
|
const { url } = props.card
|
||||||
const path = url.split('https://github.com/')[1]
|
const path = url.split('https://github.com/')[1]
|
||||||
const [firstName, secondName] = path?.split('/') || []
|
const [firstName, secondName] = path?.split('/') || []
|
||||||
|
@ -64,7 +64,7 @@ const meta = $computed(() => {
|
||||||
const avatar = `https://github.com/${user}.png?size=256`
|
const avatar = `https://github.com/${user}.png?size=256`
|
||||||
|
|
||||||
const author = props.card.authorName
|
const author = props.card.authorName
|
||||||
const info = $ref<Meta>({
|
return {
|
||||||
type,
|
type,
|
||||||
user,
|
user,
|
||||||
titleUrl: `https://github.com/${user}${repo ? `/${repo}` : ''}`,
|
titleUrl: `https://github.com/${user}${repo ? `/${repo}` : ''}`,
|
||||||
|
@ -78,8 +78,7 @@ const meta = $computed(() => {
|
||||||
user: author,
|
user: author,
|
||||||
}
|
}
|
||||||
: undefined,
|
: undefined,
|
||||||
})
|
} satisfies Meta
|
||||||
return info
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -19,31 +19,30 @@ interface Meta {
|
||||||
// Protect against long code snippets
|
// Protect against long code snippets
|
||||||
const maxLines = 20
|
const maxLines = 20
|
||||||
|
|
||||||
const meta = $computed(() => {
|
const meta = computed(() => {
|
||||||
const { description } = props.card
|
const { description } = props.card
|
||||||
const meta = description.match(/.*Code Snippet from (.+), lines (\S+)\n\n(.+)/s)
|
const meta = description.match(/.*Code Snippet from (.+), lines (\S+)\n\n(.+)/s)
|
||||||
const file = meta?.[1]
|
const file = meta?.[1]
|
||||||
const lines = meta?.[2]
|
const lines = meta?.[2]
|
||||||
const code = meta?.[3].split('\n').slice(0, maxLines).join('\n')
|
const code = meta?.[3].split('\n').slice(0, maxLines).join('\n')
|
||||||
const project = props.card.title?.replace(' - StackBlitz', '')
|
const project = props.card.title?.replace(' - StackBlitz', '')
|
||||||
const info = $ref<Meta>({
|
return {
|
||||||
file,
|
file,
|
||||||
lines,
|
lines,
|
||||||
code,
|
code,
|
||||||
project,
|
project,
|
||||||
})
|
} satisfies Meta
|
||||||
return info
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const vnodeCode = $computed(() => {
|
const vnodeCode = computed(() => {
|
||||||
if (!meta.code)
|
if (!meta.value.code)
|
||||||
return null
|
return null
|
||||||
const code = meta.code
|
const code = meta.value.code
|
||||||
.replace(/</g, '<')
|
.replace(/</g, '<')
|
||||||
.replace(/>/g, '>')
|
.replace(/>/g, '>')
|
||||||
.replace(/`/g, '`')
|
.replace(/`/g, '`')
|
||||||
|
|
||||||
const vnode = contentToVNode(`<p>\`\`\`${meta.file?.split('.')?.[1] ?? ''}\n${code}\n\`\`\`\</p>`, {
|
const vnode = contentToVNode(`<p>\`\`\`${meta.value.file?.split('.')?.[1] ?? ''}\n${code}\n\`\`\`\</p>`, {
|
||||||
markdown: true,
|
markdown: true,
|
||||||
})
|
})
|
||||||
return vnode
|
return vnode
|
||||||
|
|
|
@ -1,21 +1,56 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { mastodon } from 'masto'
|
import type { mastodon } from 'masto'
|
||||||
|
import { fetchAccountById } from '~/composables/cache'
|
||||||
|
|
||||||
const {
|
type WatcherType = [status?: mastodon.v1.Status, v?: boolean]
|
||||||
status,
|
|
||||||
isSelfReply = false,
|
const props = defineProps<{
|
||||||
} = defineProps<{
|
|
||||||
status: mastodon.v1.Status
|
status: mastodon.v1.Status
|
||||||
isSelfReply: boolean
|
isSelfReply: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const isSelf = $computed(() => status.inReplyToAccountId === status.account.id)
|
const link = ref()
|
||||||
const account = isSelf ? computed(() => status.account) : useAccountById(status.inReplyToAccountId)
|
const targetIsVisible = ref(false)
|
||||||
|
const isSelf = computed(() => props.status.inReplyToAccountId === props.status.account.id)
|
||||||
|
const account = ref<mastodon.v1.Account | null | undefined>(isSelf.value ? props.status.account : undefined)
|
||||||
|
|
||||||
|
useIntersectionObserver(
|
||||||
|
link,
|
||||||
|
([{ intersectionRatio }]) => {
|
||||||
|
targetIsVisible.value = intersectionRatio > 0.1
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => [props.status, targetIsVisible.value] satisfies WatcherType,
|
||||||
|
([newStatus, newVisible]) => {
|
||||||
|
if (newStatus.account && newStatus.inReplyToAccountId === newStatus.account.id) {
|
||||||
|
account.value = newStatus.account
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!newVisible)
|
||||||
|
return
|
||||||
|
|
||||||
|
const newId = newStatus.inReplyToAccountId
|
||||||
|
|
||||||
|
if (newId) {
|
||||||
|
fetchAccountById(newStatus.inReplyToAccountId).then((acc) => {
|
||||||
|
if (newId === props.status.inReplyToAccountId)
|
||||||
|
account.value = acc
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
account.value = undefined
|
||||||
|
},
|
||||||
|
{ immediate: true, flush: 'post' },
|
||||||
|
)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<NuxtLink
|
<NuxtLink
|
||||||
v-if="status.inReplyToId"
|
v-if="status.inReplyToId"
|
||||||
|
ref="link"
|
||||||
flex="~ gap2" items-center h-auto text-sm text-secondary
|
flex="~ gap2" items-center h-auto text-sm text-secondary
|
||||||
:to="getStatusInReplyToRoute(status)"
|
:to="getStatusInReplyToRoute(status)"
|
||||||
:title="$t('status.replying_to', [account ? getDisplayName(account) : $t('status.someone')])"
|
:title="$t('status.replying_to', [account ? getDisplayName(account) : $t('status.someone')])"
|
||||||
|
|
|
@ -1,5 +1,10 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const props = defineProps<{ enabled?: boolean; filter?: boolean; isDM?: boolean; sensitiveNonSpoiler?: boolean }>()
|
const props = defineProps<{
|
||||||
|
enabled?: boolean
|
||||||
|
filter?: boolean
|
||||||
|
isDM?: boolean
|
||||||
|
sensitiveNonSpoiler?: boolean
|
||||||
|
}>()
|
||||||
|
|
||||||
const expandSpoilers = computed(() => {
|
const expandSpoilers = computed(() => {
|
||||||
const expandCW = currentUser.value ? getExpandSpoilersByDefault(currentUser.value.account) : false
|
const expandCW = currentUser.value ? getExpandSpoilersByDefault(currentUser.value.account) : false
|
||||||
|
|
|
@ -18,14 +18,14 @@ const showButton = computed(() =>
|
||||||
&& status.content.trim().length,
|
&& status.content.trim().length,
|
||||||
)
|
)
|
||||||
|
|
||||||
let translating = $ref(false)
|
const translating = ref(false)
|
||||||
async function toggleTranslation() {
|
async function toggleTranslation() {
|
||||||
translating = true
|
translating.value = true
|
||||||
try {
|
try {
|
||||||
await _toggleTranslation()
|
await _toggleTranslation()
|
||||||
}
|
}
|
||||||
finally {
|
finally {
|
||||||
translating = false
|
translating.value = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -5,7 +5,7 @@ const { status } = defineProps<{
|
||||||
status: mastodon.v1.Status
|
status: mastodon.v1.Status
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const visibility = $computed(() => statusVisibilities.find(v => v.value === status.visibility)!)
|
const visibility = computed(() => statusVisibilities.find(v => v.value === status.visibility)!)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -9,7 +9,7 @@ const emit = defineEmits<{
|
||||||
(event: 'change'): void
|
(event: 'change'): void
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const { client } = $(useMasto())
|
const { client } = useMasto()
|
||||||
|
|
||||||
async function toggleFollowTag() {
|
async function toggleFollowTag() {
|
||||||
// We save the state so be can do an optimistic UI update, but fallback to the previous state if the API call fails
|
// We save the state so be can do an optimistic UI update, but fallback to the previous state if the API call fails
|
||||||
|
@ -20,9 +20,9 @@ async function toggleFollowTag() {
|
||||||
|
|
||||||
try {
|
try {
|
||||||
if (previousFollowingState)
|
if (previousFollowingState)
|
||||||
await client.v1.tags.$select(tag.name).unfollow()
|
await client.value.v1.tags.$select(tag.name).unfollow()
|
||||||
else
|
else
|
||||||
await client.v1.tags.$select(tag.name).follow()
|
await client.value.v1.tags.$select(tag.name).follow()
|
||||||
|
|
||||||
emit('change')
|
emit('change')
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,13 +1,11 @@
|
||||||
<script lang="ts" setup>
|
<script setup lang="ts">
|
||||||
import type { mastodon } from 'masto'
|
import type { mastodon } from 'masto'
|
||||||
|
|
||||||
const {
|
const { tag } = defineProps<{
|
||||||
tag,
|
|
||||||
} = $defineProps<{
|
|
||||||
tag: mastodon.v1.Tag
|
tag: mastodon.v1.Tag
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const to = $computed(() => {
|
const to = computed(() => {
|
||||||
const { hostname, pathname } = new URL(tag.url)
|
const { hostname, pathname } = new URL(tag.url)
|
||||||
return `/${hostname}${pathname}`
|
return `/${hostname}${pathname}`
|
||||||
})
|
})
|
||||||
|
@ -24,27 +22,29 @@ function onclick(evt: MouseEvent | KeyboardEvent) {
|
||||||
|
|
||||||
function go(evt: MouseEvent | KeyboardEvent) {
|
function go(evt: MouseEvent | KeyboardEvent) {
|
||||||
if (evt.metaKey || evt.ctrlKey)
|
if (evt.metaKey || evt.ctrlKey)
|
||||||
window.open(to)
|
window.open(to.value)
|
||||||
else
|
else
|
||||||
router.push(to)
|
router.push(to.value)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
block p4 hover:bg-active flex justify-between cursor-pointer
|
block p4 hover:bg-active flex justify-between cursor-pointer flex-gap-2
|
||||||
@click="onclick"
|
@click="onclick"
|
||||||
@keydown.enter="onclick"
|
@keydown.enter="onclick"
|
||||||
>
|
>
|
||||||
<div>
|
<div flex flex-gap-2>
|
||||||
<h4 flex items-center text-size-base leading-normal font-medium line-clamp-1 break-all ws-pre-wrap>
|
<TagActionButton :tag="tag" />
|
||||||
<TagActionButton :tag="tag" />
|
<div>
|
||||||
<bdi>
|
<h4 flex items-center text-size-base leading-normal font-medium line-clamp-1 break-all ws-pre-wrap>
|
||||||
<span>#</span>
|
<bdi>
|
||||||
<span hover:underline>{{ tag.name }}</span>
|
<span>#</span>
|
||||||
</bdi>
|
<span hover:underline>{{ tag.name }}</span>
|
||||||
</h4>
|
</bdi>
|
||||||
<CommonTrending v-if="tag.history" :history="tag.history" text-sm text-secondary line-clamp-1 ws-pre-wrap break-all />
|
</h4>
|
||||||
|
<CommonTrending v-if="tag.history" :history="tag.history" text-sm text-secondary line-clamp-1 ws-pre-wrap break-all />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="tag.history" flex items-center>
|
<div v-if="tag.history" flex items-center>
|
||||||
<CommonTrendingCharts :history="tag.history" />
|
<CommonTrendingCharts :history="tag.history" />
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div p4 flex justify-between>
|
<div p4 flex justify-between gap-4>
|
||||||
<div flex="~ col 1 gap-2">
|
<div flex="~ col 1 gap-2">
|
||||||
<div flex class="skeleton-loading-bg" h-5 w-30 rounded />
|
<div flex class="skeleton-loading-bg" h-5 w-30 rounded />
|
||||||
<div flex class="skeleton-loading-bg" h-4 w-45 rounded />
|
<div flex class="skeleton-loading-bg" h-4 w-45 rounded />
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const { client } = $(useMasto())
|
const { client } = useMasto()
|
||||||
const paginator = client.v1.domainBlocks.list()
|
const paginator = client.value.v1.domainBlocks.list()
|
||||||
|
|
||||||
async function unblock(domain: string) {
|
async function unblock(domain: string) {
|
||||||
await client.v1.domainBlocks.remove({ domain })
|
await client.value.v1.domainBlocks.remove({ domain })
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -15,9 +15,9 @@ const { paginator, stream, account, buffer = 10, endMessage = true } = definePro
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const { formatNumber } = useHumanReadableNumber()
|
const { formatNumber } = useHumanReadableNumber()
|
||||||
const virtualScroller = $(usePreferences('experimentalVirtualScroller'))
|
const virtualScroller = usePreferences('experimentalVirtualScroller')
|
||||||
|
|
||||||
const showOriginSite = $computed(() =>
|
const showOriginSite = computed(() =>
|
||||||
account && account.id !== currentUser.value?.account.id && getServerName(account) !== currentServer.value,
|
account && account.id !== currentUser.value?.account.id && getServerName(account) !== currentServer.value,
|
||||||
)
|
)
|
||||||
</script>
|
</script>
|
||||||
|
@ -25,7 +25,7 @@ const showOriginSite = $computed(() =>
|
||||||
<template>
|
<template>
|
||||||
<CommonPaginator v-bind="{ paginator, stream, preprocess, buffer, endMessage }" :virtual-scroller="virtualScroller">
|
<CommonPaginator v-bind="{ paginator, stream, preprocess, buffer, endMessage }" :virtual-scroller="virtualScroller">
|
||||||
<template #updater="{ number, update }">
|
<template #updater="{ number, update }">
|
||||||
<button py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="update">
|
<button id="elk_show_new_items" py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="update">
|
||||||
{{ $t('timeline.show_new_items', number, { named: { v: formatNumber(number) } }) }}
|
{{ $t('timeline.show_new_items', number, { named: { v: formatNumber(number) } }) }}
|
||||||
</button>
|
</button>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -13,7 +13,7 @@ const { items, command } = defineProps<{
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const emojis = computed(() => {
|
const emojis = computed(() => {
|
||||||
if (process.server)
|
if (import.meta.server)
|
||||||
return []
|
return []
|
||||||
|
|
||||||
return items.map((item: CustomEmoji | Emoji) => {
|
return items.map((item: CustomEmoji | Emoji) => {
|
||||||
|
@ -37,10 +37,10 @@ const emojis = computed(() => {
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
let selectedIndex = $ref(0)
|
const selectedIndex = ref(0)
|
||||||
|
|
||||||
watch(items, () => {
|
watch(() => items, () => {
|
||||||
selectedIndex = 0
|
selectedIndex.value = 0
|
||||||
})
|
})
|
||||||
|
|
||||||
function onKeyDown(event: KeyboardEvent) {
|
function onKeyDown(event: KeyboardEvent) {
|
||||||
|
@ -48,15 +48,15 @@ function onKeyDown(event: KeyboardEvent) {
|
||||||
return false
|
return false
|
||||||
|
|
||||||
if (event.key === 'ArrowUp') {
|
if (event.key === 'ArrowUp') {
|
||||||
selectedIndex = ((selectedIndex + items.length) - 1) % items.length
|
selectedIndex.value = ((selectedIndex.value + items.length) - 1) % items.length
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
else if (event.key === 'ArrowDown') {
|
else if (event.key === 'ArrowDown') {
|
||||||
selectedIndex = (selectedIndex + 1) % items.length
|
selectedIndex.value = (selectedIndex.value + 1) % items.length
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
else if (event.key === 'Enter') {
|
else if (event.key === 'Enter') {
|
||||||
selectItem(selectedIndex)
|
selectItem(selectedIndex.value)
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -9,10 +9,10 @@ const { items, command } = defineProps<{
|
||||||
isPending?: boolean
|
isPending?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
let selectedIndex = $ref(0)
|
const selectedIndex = ref(0)
|
||||||
|
|
||||||
watch(items, () => {
|
watch(() => items, () => {
|
||||||
selectedIndex = 0
|
selectedIndex.value = 0
|
||||||
})
|
})
|
||||||
|
|
||||||
function onKeyDown(event: KeyboardEvent) {
|
function onKeyDown(event: KeyboardEvent) {
|
||||||
|
@ -20,15 +20,15 @@ function onKeyDown(event: KeyboardEvent) {
|
||||||
return false
|
return false
|
||||||
|
|
||||||
if (event.key === 'ArrowUp') {
|
if (event.key === 'ArrowUp') {
|
||||||
selectedIndex = ((selectedIndex + items.length) - 1) % items.length
|
selectedIndex.value = ((selectedIndex.value + items.length) - 1) % items.length
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
else if (event.key === 'ArrowDown') {
|
else if (event.key === 'ArrowDown') {
|
||||||
selectedIndex = (selectedIndex + 1) % items.length
|
selectedIndex.value = (selectedIndex.value + 1) % items.length
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
else if (event.key === 'Enter') {
|
else if (event.key === 'Enter') {
|
||||||
selectItem(selectedIndex)
|
selectItem(selectedIndex.value)
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -9,10 +9,10 @@ const { items, command } = defineProps<{
|
||||||
isPending?: boolean
|
isPending?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
let selectedIndex = $ref(0)
|
const selectedIndex = ref(0)
|
||||||
|
|
||||||
watch(items, () => {
|
watch(() => items, () => {
|
||||||
selectedIndex = 0
|
selectedIndex.value = 0
|
||||||
})
|
})
|
||||||
|
|
||||||
function onKeyDown(event: KeyboardEvent) {
|
function onKeyDown(event: KeyboardEvent) {
|
||||||
|
@ -20,15 +20,15 @@ function onKeyDown(event: KeyboardEvent) {
|
||||||
return false
|
return false
|
||||||
|
|
||||||
if (event.key === 'ArrowUp') {
|
if (event.key === 'ArrowUp') {
|
||||||
selectedIndex = ((selectedIndex + items.length) - 1) % items.length
|
selectedIndex.value = ((selectedIndex.value + items.length) - 1) % items.length
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
else if (event.key === 'ArrowDown') {
|
else if (event.key === 'ArrowDown') {
|
||||||
selectedIndex = (selectedIndex + 1) % items.length
|
selectedIndex.value = (selectedIndex.value + 1) % items.length
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
else if (event.key === 'Enter') {
|
else if (event.key === 'Enter') {
|
||||||
selectItem(selectedIndex)
|
selectItem(selectedIndex.value)
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -2,19 +2,19 @@
|
||||||
import Fuse from 'fuse.js'
|
import Fuse from 'fuse.js'
|
||||||
|
|
||||||
const input = ref<HTMLInputElement | undefined>()
|
const input = ref<HTMLInputElement | undefined>()
|
||||||
let knownServers = $ref<string[]>([])
|
const knownServers = ref<string[]>([])
|
||||||
let autocompleteIndex = $ref(0)
|
const autocompleteIndex = ref(0)
|
||||||
let autocompleteShow = $ref(false)
|
const autocompleteShow = ref(false)
|
||||||
|
|
||||||
const { busy, error, displayError, server, oauth } = useSignIn(input)
|
const { busy, error, displayError, server, oauth } = useSignIn(input)
|
||||||
|
|
||||||
let fuse = $shallowRef(new Fuse([] as string[]))
|
const fuse = shallowRef(new Fuse([] as string[]))
|
||||||
|
|
||||||
const filteredServers = $computed(() => {
|
const filteredServers = computed(() => {
|
||||||
if (!server.value)
|
if (!server.value)
|
||||||
return []
|
return []
|
||||||
|
|
||||||
const results = fuse.search(server.value, { limit: 6 }).map(result => result.item)
|
const results = fuse.value.search(server.value, { limit: 6 }).map(result => result.item)
|
||||||
if (results[0] === server.value)
|
if (results[0] === server.value)
|
||||||
return []
|
return []
|
||||||
|
|
||||||
|
@ -44,52 +44,52 @@ async function handleInput() {
|
||||||
isValidUrl(`https://${input}`)
|
isValidUrl(`https://${input}`)
|
||||||
&& input.match(/^[a-z0-9-]+(\.[a-z0-9-]+)+(:[0-9]+)?$/i)
|
&& input.match(/^[a-z0-9-]+(\.[a-z0-9-]+)+(:[0-9]+)?$/i)
|
||||||
// Do not hide the autocomplete if a result has an exact substring match on the input
|
// Do not hide the autocomplete if a result has an exact substring match on the input
|
||||||
&& !filteredServers.some(s => s.includes(input))
|
&& !filteredServers.value.some(s => s.includes(input))
|
||||||
)
|
)
|
||||||
autocompleteShow = false
|
autocompleteShow.value = false
|
||||||
else
|
else
|
||||||
autocompleteShow = true
|
autocompleteShow.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
function toSelector(server: string) {
|
function toSelector(server: string) {
|
||||||
return server.replace(/[^\w-]/g, '-')
|
return server.replace(/[^\w-]/g, '-')
|
||||||
}
|
}
|
||||||
function move(delta: number) {
|
function move(delta: number) {
|
||||||
if (filteredServers.length === 0) {
|
if (filteredServers.value.length === 0) {
|
||||||
autocompleteIndex = 0
|
autocompleteIndex.value = 0
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
autocompleteIndex = ((autocompleteIndex + delta) + filteredServers.length) % filteredServers.length
|
autocompleteIndex.value = ((autocompleteIndex.value + delta) + filteredServers.value.length) % filteredServers.value.length
|
||||||
document.querySelector(`#${toSelector(filteredServers[autocompleteIndex])}`)?.scrollIntoView(false)
|
document.querySelector(`#${toSelector(filteredServers.value[autocompleteIndex.value])}`)?.scrollIntoView(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
function onEnter(e: KeyboardEvent) {
|
function onEnter(e: KeyboardEvent) {
|
||||||
if (autocompleteShow === true && filteredServers[autocompleteIndex]) {
|
if (autocompleteShow.value === true && filteredServers.value[autocompleteIndex.value]) {
|
||||||
server.value = filteredServers[autocompleteIndex]
|
server.value = filteredServers.value[autocompleteIndex.value]
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
autocompleteShow = false
|
autocompleteShow.value = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function escapeAutocomplete(evt: KeyboardEvent) {
|
function escapeAutocomplete(evt: KeyboardEvent) {
|
||||||
if (!autocompleteShow)
|
if (!autocompleteShow)
|
||||||
return
|
return
|
||||||
autocompleteShow = false
|
autocompleteShow.value = false
|
||||||
evt.stopPropagation()
|
evt.stopPropagation()
|
||||||
}
|
}
|
||||||
|
|
||||||
function select(index: number) {
|
function select(index: number) {
|
||||||
server.value = filteredServers[index]
|
server.value = filteredServers.value[index]
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
input?.value?.focus()
|
input?.value?.focus()
|
||||||
knownServers = await (globalThis.$fetch as any)('/api/list-servers')
|
knownServers.value = await (globalThis.$fetch as any)('/api/list-servers')
|
||||||
fuse = new Fuse(knownServers, { shouldSort: true })
|
fuse.value = new Fuse(knownServers.value, { shouldSort: true })
|
||||||
})
|
})
|
||||||
|
|
||||||
onClickOutside(input, () => {
|
onClickOutside(input, () => {
|
||||||
autocompleteShow = false
|
autocompleteShow.value = false
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -20,18 +20,18 @@ export function useAriaAnnouncer() {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function useAriaLog() {
|
export function useAriaLog() {
|
||||||
let logs = $ref<any[]>([])
|
const logs = ref<any[]>([])
|
||||||
|
|
||||||
const announceLogs = (messages: any[]) => {
|
const announceLogs = (messages: any[]) => {
|
||||||
logs = messages
|
logs.value = messages
|
||||||
}
|
}
|
||||||
|
|
||||||
const appendLogs = (messages: any[]) => {
|
const appendLogs = (messages: any[]) => {
|
||||||
logs = logs.concat(messages)
|
logs.value = logs.value.concat(messages)
|
||||||
}
|
}
|
||||||
|
|
||||||
const clearLogs = () => {
|
const clearLogs = () => {
|
||||||
logs = []
|
logs.value = []
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
@ -43,14 +43,14 @@ export function useAriaLog() {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function useAriaStatus() {
|
export function useAriaStatus() {
|
||||||
let status = $ref<any>('')
|
const status = ref<any>('')
|
||||||
|
|
||||||
const announceStatus = (message: any) => {
|
const announceStatus = (message: any) => {
|
||||||
status = message
|
status.value = message
|
||||||
}
|
}
|
||||||
|
|
||||||
const clearStatus = () => {
|
const clearStatus = () => {
|
||||||
status = ''
|
status.value = ''
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|
|
@ -5,7 +5,7 @@ const cache = new LRUCache<string, any>({
|
||||||
max: 1000,
|
max: 1000,
|
||||||
})
|
})
|
||||||
|
|
||||||
if (process.dev && process.client)
|
if (import.meta.dev && import.meta.client)
|
||||||
// eslint-disable-next-line no-console
|
// eslint-disable-next-line no-console
|
||||||
console.log({ cache })
|
console.log({ cache })
|
||||||
|
|
||||||
|
@ -23,7 +23,8 @@ export function fetchStatus(id: string, force = false): Promise<mastodon.v1.Stat
|
||||||
const key = `${server}:${userId}:status:${id}`
|
const key = `${server}:${userId}:status:${id}`
|
||||||
const cached = cache.get(key)
|
const cached = cache.get(key)
|
||||||
if (cached && !force)
|
if (cached && !force)
|
||||||
return cached
|
return Promise.resolve(cached)
|
||||||
|
|
||||||
const promise = useMastoClient().v1.statuses.$select(id).fetch()
|
const promise = useMastoClient().v1.statuses.$select(id).fetch()
|
||||||
.then((status) => {
|
.then((status) => {
|
||||||
cacheStatus(status)
|
cacheStatus(status)
|
||||||
|
@ -42,7 +43,8 @@ export function fetchAccountById(id?: string | null): Promise<mastodon.v1.Accoun
|
||||||
const key = `${server}:${userId}:account:${id}`
|
const key = `${server}:${userId}:account:${id}`
|
||||||
const cached = cache.get(key)
|
const cached = cache.get(key)
|
||||||
if (cached)
|
if (cached)
|
||||||
return cached
|
return Promise.resolve(cached)
|
||||||
|
|
||||||
const domain = getInstanceDomainFromServer(server)
|
const domain = getInstanceDomainFromServer(server)
|
||||||
const promise = useMastoClient().v1.accounts.$select(id).fetch()
|
const promise = useMastoClient().v1.accounts.$select(id).fetch()
|
||||||
.then((r) => {
|
.then((r) => {
|
||||||
|
@ -64,7 +66,7 @@ export async function fetchAccountByHandle(acct: string): Promise<mastodon.v1.Ac
|
||||||
const key = `${server}:${userId}:account:${userAcct}`
|
const key = `${server}:${userId}:account:${userAcct}`
|
||||||
const cached = cache.get(key)
|
const cached = cache.get(key)
|
||||||
if (cached)
|
if (cached)
|
||||||
return cached
|
return Promise.resolve(cached)
|
||||||
|
|
||||||
async function lookupAccount() {
|
async function lookupAccount() {
|
||||||
const client = useMastoClient()
|
const client = useMastoClient()
|
||||||
|
@ -82,17 +84,30 @@ export async function fetchAccountByHandle(acct: string): Promise<mastodon.v1.Ac
|
||||||
return account
|
return account
|
||||||
}
|
}
|
||||||
|
|
||||||
const account = lookupAccount()
|
const promise = lookupAccount()
|
||||||
.then((r) => {
|
.then((r) => {
|
||||||
cacheAccount(r, server, true)
|
cacheAccount(r, server, true)
|
||||||
return r
|
return r
|
||||||
})
|
})
|
||||||
cache.set(key, account)
|
cache.set(key, promise)
|
||||||
return account
|
return promise
|
||||||
}
|
}
|
||||||
|
|
||||||
export function useAccountByHandle(acct: string) {
|
export function fetchTag(tagName: string, force = false): Promise<mastodon.v1.Tag> {
|
||||||
return useAsyncState(() => fetchAccountByHandle(acct), null).state
|
const server = currentServer.value
|
||||||
|
const userId = currentUser.value?.account.id
|
||||||
|
const key = `${server}:${userId}:tag:${tagName}`
|
||||||
|
const cached = cache.get(key)
|
||||||
|
if (cached && !force)
|
||||||
|
return Promise.resolve(cached)
|
||||||
|
|
||||||
|
const promise = useMastoClient().v1.tags.$select(tagName).fetch()
|
||||||
|
.then((tag) => {
|
||||||
|
cacheTag(tag)
|
||||||
|
return tag
|
||||||
|
})
|
||||||
|
cache.set(key, promise)
|
||||||
|
return promise
|
||||||
}
|
}
|
||||||
|
|
||||||
export function useAccountById(id?: string | null) {
|
export function useAccountById(id?: string | null) {
|
||||||
|
@ -115,3 +130,8 @@ export function cacheAccount(account: mastodon.v1.Account, server = currentServe
|
||||||
setCached(`${server}:${userId}:account:${account.id}`, account, override)
|
setCached(`${server}:${userId}:account:${account.id}`, account, override)
|
||||||
setCached(`${server}:${userId}:account:${userAcct}`, account, override)
|
setCached(`${server}:${userId}:account:${userAcct}`, account, override)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function cacheTag(tag: mastodon.v1.Tag, server = currentServer.value, override?: boolean) {
|
||||||
|
const userId = currentUser.value?.account.id
|
||||||
|
setCached(`${server}:${userId}:tag:${tag.name}`, tag, override)
|
||||||
|
}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import type { ComputedRef } from 'vue'
|
import type { ComputedRef } from 'vue'
|
||||||
import { defineStore } from 'pinia'
|
import { defineStore } from 'pinia'
|
||||||
import Fuse from 'fuse.js'
|
import Fuse from 'fuse.js'
|
||||||
import type { LocaleObject } from '#i18n'
|
import type { LocaleObject } from '@nuxtjs/i18n'
|
||||||
import type { SearchResult } from '~/composables/masto/search'
|
import type { SearchResult } from '~/composables/masto/search'
|
||||||
|
|
||||||
// @unocss-include
|
// @unocss-include
|
||||||
|
@ -170,7 +170,8 @@ export const useCommandRegistry = defineStore('command', () => {
|
||||||
const indexed = cmds.map((cmd, index) => ({ ...cmd, index }))
|
const indexed = cmds.map((cmd, index) => ({ ...cmd, index }))
|
||||||
|
|
||||||
const grouped = new Map<CommandScopeNames, CommandQueryResultItem[]>(
|
const grouped = new Map<CommandScopeNames, CommandQueryResultItem[]>(
|
||||||
scopes.map(scope => [scope, []]))
|
scopes.map(scope => [scope, []]),
|
||||||
|
)
|
||||||
for (const cmd of indexed) {
|
for (const cmd of indexed) {
|
||||||
const scope = cmd.scope ?? ''
|
const scope = cmd.scope ?? ''
|
||||||
grouped.get(scope)!.push({
|
grouped.get(scope)!.push({
|
||||||
|
|
|
@ -494,7 +494,10 @@ function _markdownProcess(value: string) {
|
||||||
|
|
||||||
let start = 0
|
let start = 0
|
||||||
while (true) {
|
while (true) {
|
||||||
let found: { match: RegExpMatchArray; replacer: (c: (string | Node)[]) => Node } | undefined
|
let found: {
|
||||||
|
match: RegExpMatchArray
|
||||||
|
replacer: (c: (string | Node)[]) => Node
|
||||||
|
} | undefined
|
||||||
|
|
||||||
for (const [re, replacer] of _markdownReplacements) {
|
for (const [re, replacer] of _markdownReplacements) {
|
||||||
re.lastIndex = start
|
re.lastIndex = start
|
||||||
|
@ -524,10 +527,21 @@ function transformMarkdown(node: Node) {
|
||||||
return _markdownProcess(node.value)
|
return _markdownProcess(node.value)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function addBdiParagraphs(node: Node) {
|
||||||
|
if (node.name === 'p' && !('dir' in node.attributes) && node.children?.length && node.children.length > 1)
|
||||||
|
node.attributes.dir = 'auto'
|
||||||
|
|
||||||
|
return node
|
||||||
|
}
|
||||||
|
|
||||||
function transformParagraphs(node: Node): Node | Node[] {
|
function transformParagraphs(node: Node): Node | Node[] {
|
||||||
|
// Add bdi to paragraphs
|
||||||
|
addBdiParagraphs(node)
|
||||||
|
|
||||||
// For top level paragraphs, inject an empty <p> to preserve status paragraphs in our editor (except for the last one)
|
// For top level paragraphs, inject an empty <p> to preserve status paragraphs in our editor (except for the last one)
|
||||||
if (node.parent?.type === DOCUMENT_NODE && node.name === 'p' && node.parent.children.at(-1) !== node)
|
if (node.parent?.type === DOCUMENT_NODE && node.name === 'p' && node.parent.children.at(-1) !== node)
|
||||||
return [node, h('p')]
|
return [node, h('p')]
|
||||||
|
|
||||||
return node
|
return node
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -10,6 +10,7 @@ import Emoji from '~/components/emoji/Emoji.vue'
|
||||||
import ContentCode from '~/components/content/ContentCode.vue'
|
import ContentCode from '~/components/content/ContentCode.vue'
|
||||||
import ContentMentionGroup from '~/components/content/ContentMentionGroup.vue'
|
import ContentMentionGroup from '~/components/content/ContentMentionGroup.vue'
|
||||||
import AccountHoverWrapper from '~/components/account/AccountHoverWrapper.vue'
|
import AccountHoverWrapper from '~/components/account/AccountHoverWrapper.vue'
|
||||||
|
import TagHoverWrapper from '~/components/account/TagHoverWrapper.vue'
|
||||||
|
|
||||||
function getTextualAstComponents(astChildren: Node[]): string {
|
function getTextualAstComponents(astChildren: Node[]): string {
|
||||||
return astChildren
|
return astChildren
|
||||||
|
@ -128,11 +129,13 @@ function handleMention(el: Node) {
|
||||||
addBdiNode(el)
|
addBdiNode(el)
|
||||||
return h(AccountHoverWrapper, { handle, class: 'inline-block' }, () => nodeToVNode(el))
|
return h(AccountHoverWrapper, { handle, class: 'inline-block' }, () => nodeToVNode(el))
|
||||||
}
|
}
|
||||||
|
|
||||||
const matchTag = href.match(TagLinkRE)
|
const matchTag = href.match(TagLinkRE)
|
||||||
if (matchTag) {
|
if (matchTag) {
|
||||||
const [, , name] = matchTag
|
const [, , tagName] = matchTag
|
||||||
addBdiNode(el)
|
addBdiNode(el)
|
||||||
el.attributes.href = `/${currentServer.value}/tags/${name}`
|
el.attributes.href = `/${currentServer.value}/tags/${tagName}`
|
||||||
|
return h(TagHoverWrapper, { tagName, class: 'inline-block' }, () => nodeToVNode(el))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -56,7 +56,7 @@ export async function openPublishDialog(draftKey = 'dialog', draft?: Draft, over
|
||||||
if (overwrite && !isEmptyDraft(currentUserDrafts.value[draftKey])) {
|
if (overwrite && !isEmptyDraft(currentUserDrafts.value[draftKey])) {
|
||||||
// TODO overwrite warning
|
// TODO overwrite warning
|
||||||
// TODO don't overwrite, have a draft list
|
// TODO don't overwrite, have a draft list
|
||||||
if (process.dev) {
|
if (import.meta.dev) {
|
||||||
// eslint-disable-next-line no-alert
|
// eslint-disable-next-line no-alert
|
||||||
const result = confirm('[DEV] Are you sure you overwrite draft content?')
|
const result = confirm('[DEV] Are you sure you overwrite draft content?')
|
||||||
if (!result)
|
if (!result)
|
||||||
|
@ -89,7 +89,7 @@ function restoreMediaPreviewFromState() {
|
||||||
isMediaPreviewOpen.value = history.state?.mediaPreview ?? false
|
isMediaPreviewOpen.value = history.state?.mediaPreview ?? false
|
||||||
}
|
}
|
||||||
|
|
||||||
if (process.client) {
|
if (import.meta.client) {
|
||||||
window.addEventListener('popstate', restoreMediaPreviewFromState)
|
window.addEventListener('popstate', restoreMediaPreviewFromState)
|
||||||
|
|
||||||
restoreMediaPreviewFromState()
|
restoreMediaPreviewFromState()
|
||||||
|
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue