forked from Mirrors/elk
Compare commits
10 commits
main
...
userquin/f
Author | SHA1 | Date | |
---|---|---|---|
|
47a14fa0bb | ||
|
c411850750 | ||
|
c4be05a747 | ||
|
3ad1e292a4 | ||
|
b76edfd66e | ||
|
6b0f83115c | ||
|
e5352af1a6 | ||
|
6c8cd72e52 | ||
|
5ce3459f85 | ||
|
cbb4245754 |
357 changed files with 10015 additions and 19503 deletions
|
@ -11,6 +11,7 @@ dist
|
||||||
.netlify/
|
.netlify/
|
||||||
.eslintcache
|
.eslintcache
|
||||||
|
|
||||||
|
public/shiki
|
||||||
public/emojis
|
public/emojis
|
||||||
|
|
||||||
*~
|
*~
|
||||||
|
|
|
@ -8,7 +8,7 @@ NUXT_CLOUDFLARE_ACCOUNT_ID=
|
||||||
NUXT_CLOUDFLARE_NAMESPACE_ID=
|
NUXT_CLOUDFLARE_NAMESPACE_ID=
|
||||||
NUXT_CLOUDFLARE_API_TOKEN=
|
NUXT_CLOUDFLARE_API_TOKEN=
|
||||||
|
|
||||||
# 'cloudflare' | 'vercel' | 'fs'
|
# 'cloudflare' | 'fs'
|
||||||
NUXT_STORAGE_DRIVER=
|
NUXT_STORAGE_DRIVER=
|
||||||
NUXT_STORAGE_FS_BASE=
|
NUXT_STORAGE_FS_BASE=
|
||||||
|
|
||||||
|
|
15
.eslintignore
Normal file
15
.eslintignore
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
*.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
|
18
.eslintrc
Normal file
18
.eslintrc
Normal file
|
@ -0,0 +1,18 @@
|
||||||
|
{
|
||||||
|
"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."
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
1
.gitattributes
vendored
1
.gitattributes
vendored
|
@ -1 +0,0 @@
|
||||||
* text=auto eol=lf
|
|
11
.github/renovate.json5
vendored
11
.github/renovate.json5
vendored
|
@ -3,13 +3,10 @@
|
||||||
"extends": ["config:base", "schedule:weekly", "group:allNonMajor"],
|
"extends": ["config:base", "schedule:weekly", "group:allNonMajor"],
|
||||||
"labels": ["c: dependencies"],
|
"labels": ["c: dependencies"],
|
||||||
"rangeStrategy": "bump",
|
"rangeStrategy": "bump",
|
||||||
|
"node": false,
|
||||||
"ignoreDeps": [
|
"ignoreDeps": [
|
||||||
"vue",
|
"vue",
|
||||||
"vue-tsc",
|
"vue-tsc"
|
||||||
"typescript",
|
|
||||||
|
|
||||||
// Intl.Segmenter is not supported in Firefox
|
|
||||||
"string-length"
|
|
||||||
],
|
],
|
||||||
"packageRules": [
|
"packageRules": [
|
||||||
{
|
{
|
||||||
|
@ -64,10 +61,6 @@
|
||||||
{
|
{
|
||||||
"groupName": "typescript",
|
"groupName": "typescript",
|
||||||
"matchPackageNames": ["typescript"]
|
"matchPackageNames": ["typescript"]
|
||||||
},
|
|
||||||
{
|
|
||||||
"matchDatasources": ["node-version"],
|
|
||||||
"enabled": false
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"vulnerabilityAlerts": {
|
"vulnerabilityAlerts": {
|
||||||
|
|
10
.github/workflows/ci.yml
vendored
10
.github/workflows/ci.yml
vendored
|
@ -10,18 +10,17 @@ on:
|
||||||
branches:
|
branches:
|
||||||
- main
|
- main
|
||||||
workflow_dispatch: {}
|
workflow_dispatch: {}
|
||||||
merge_group: {}
|
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
ci:
|
ci:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
|
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v4
|
- uses: actions/checkout@v3
|
||||||
- run: corepack enable
|
- run: corepack enable
|
||||||
- uses: actions/setup-node@v4
|
- uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
node-version: 20
|
node-version: 18
|
||||||
cache: pnpm
|
cache: pnpm
|
||||||
|
|
||||||
- name: 📦 Install dependencies
|
- name: 📦 Install dependencies
|
||||||
|
@ -31,8 +30,7 @@ jobs:
|
||||||
run: pnpm nuxi prepare
|
run: pnpm nuxi prepare
|
||||||
|
|
||||||
- name: 🧪 Test project
|
- name: 🧪 Test project
|
||||||
run: pnpm test:ci
|
run: pnpm test tests/unit
|
||||||
timeout-minutes: 10
|
|
||||||
|
|
||||||
- name: 📝 Lint
|
- name: 📝 Lint
|
||||||
run: pnpm lint
|
run: pnpm lint
|
||||||
|
|
14
.github/workflows/docker.yml
vendored
14
.github/workflows/docker.yml
vendored
|
@ -16,29 +16,29 @@ jobs:
|
||||||
packages: write
|
packages: write
|
||||||
steps:
|
steps:
|
||||||
- name: Checkout
|
- name: Checkout
|
||||||
uses: actions/checkout@v4
|
uses: actions/checkout@v3
|
||||||
- name: Docker meta
|
- name: Docker meta
|
||||||
id: metal
|
id: metal
|
||||||
uses: docker/metadata-action@v5
|
uses: docker/metadata-action@v4
|
||||||
with:
|
with:
|
||||||
images: |
|
images: |
|
||||||
ghcr.io/${{ github.repository }}
|
ghcr.io/${{ github.repository }}
|
||||||
- name: Set up QEMU
|
- name: Set up QEMU
|
||||||
uses: docker/setup-qemu-action@v3
|
uses: docker/setup-qemu-action@v2
|
||||||
- name: Set up Docker Buildx
|
- name: Set up Docker Buildx
|
||||||
uses: docker/setup-buildx-action@v3
|
uses: docker/setup-buildx-action@v2
|
||||||
- name: Login to GitHub Container Registry
|
- name: Login to GitHub Container Registry
|
||||||
if: github.event_name != 'pull_request'
|
if: github.event_name != 'pull_request'
|
||||||
uses: docker/login-action@v3
|
uses: docker/login-action@v2
|
||||||
with:
|
with:
|
||||||
registry: ghcr.io
|
registry: ghcr.io
|
||||||
username: ${{ github.actor }}
|
username: ${{ github.actor }}
|
||||||
password: ${{ github.token }}
|
password: ${{ github.token }}
|
||||||
- name: Build and push
|
- name: Build and push
|
||||||
uses: docker/build-push-action@v5
|
uses: docker/build-push-action@v4
|
||||||
with:
|
with:
|
||||||
context: .
|
context: .
|
||||||
platforms: linux/amd64,linux/arm64
|
platforms: linux/amd64
|
||||||
push: ${{ github.event_name != 'pull_request' }}
|
push: ${{ github.event_name != 'pull_request' }}
|
||||||
tags: ${{ steps.metal.outputs.tags }}
|
tags: ${{ steps.metal.outputs.tags }}
|
||||||
labels: ${{ steps.metal.outputs.labels }}
|
labels: ${{ steps.metal.outputs.labels }}
|
||||||
|
|
4
.github/workflows/release.yml
vendored
4
.github/workflows/release.yml
vendored
|
@ -12,12 +12,12 @@ jobs:
|
||||||
release:
|
release:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v4
|
- uses: actions/checkout@v3
|
||||||
with:
|
with:
|
||||||
fetch-depth: 0
|
fetch-depth: 0
|
||||||
|
|
||||||
- name: Set node
|
- name: Set node
|
||||||
uses: actions/setup-node@v4
|
uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
node-version: 18
|
node-version: 18
|
||||||
|
|
||||||
|
|
2
.github/workflows/semantic-pull-request.yml
vendored
2
.github/workflows/semantic-pull-request.yml
vendored
|
@ -19,6 +19,6 @@ jobs:
|
||||||
name: Semantic Pull Request
|
name: Semantic Pull Request
|
||||||
steps:
|
steps:
|
||||||
- name: Validate PR title
|
- name: Validate PR title
|
||||||
uses: amannn/action-semantic-pull-request@v5.4.0
|
uses: amannn/action-semantic-pull-request@v5.2.0
|
||||||
env:
|
env:
|
||||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||||
|
|
2
.gitignore
vendored
2
.gitignore
vendored
|
@ -2,7 +2,6 @@ node_modules
|
||||||
*.log
|
*.log
|
||||||
dist
|
dist
|
||||||
.output
|
.output
|
||||||
.pnpm-store
|
|
||||||
.nuxt
|
.nuxt
|
||||||
.env
|
.env
|
||||||
.DS_Store
|
.DS_Store
|
||||||
|
@ -12,6 +11,7 @@ dist
|
||||||
.eslintcache
|
.eslintcache
|
||||||
elk-translation-status.json
|
elk-translation-status.json
|
||||||
|
|
||||||
|
public/shiki
|
||||||
public/emojis
|
public/emojis
|
||||||
|
|
||||||
*~
|
*~
|
||||||
|
|
1
.npmrc
1
.npmrc
|
@ -1,3 +1,4 @@
|
||||||
shamefully-hoist=true
|
shamefully-hoist=true
|
||||||
|
strict-peer-dependencies=false
|
||||||
shell-emulator=true
|
shell-emulator=true
|
||||||
ignore-workspace-root-check=true
|
ignore-workspace-root-check=true
|
||||||
|
|
2
.nvmrc
2
.nvmrc
|
@ -1 +1 @@
|
||||||
20
|
v18
|
45
.vscode/settings.json
vendored
45
.vscode/settings.json
vendored
|
@ -5,6 +5,10 @@
|
||||||
"unmute",
|
"unmute",
|
||||||
"unstorage"
|
"unstorage"
|
||||||
],
|
],
|
||||||
|
"editor.codeActionsOnSave": {
|
||||||
|
"source.fixAll.eslint": true
|
||||||
|
},
|
||||||
|
"editor.formatOnSave": false,
|
||||||
"files.associations": {
|
"files.associations": {
|
||||||
"*.css": "postcss"
|
"*.css": "postcss"
|
||||||
},
|
},
|
||||||
|
@ -19,44 +23,7 @@
|
||||||
"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,
|
||||||
"editor.formatOnSave": false,
|
"volar.completion.preferredTagNameCase": "pascal",
|
||||||
|
"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"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,22 +0,0 @@
|
||||||
steps:
|
|
||||||
- name: build docker
|
|
||||||
image: docker:25-cli
|
|
||||||
secrets: [user, pass]
|
|
||||||
commands:
|
|
||||||
- apk add git
|
|
||||||
- REPO=$(echo "$CI_REPO" | tr '[:upper:]' '[:lower:]')
|
|
||||||
- REGISTRY="dev.cat-enby.club"
|
|
||||||
- MAJOR=$(echo ${CI_COMMIT_TAG} | cut -d '.' -f 1 | tr -d 'v')
|
|
||||||
- MINOR=$(echo ${CI_COMMIT_TAG} | cut -d '.' -f 2)
|
|
||||||
- PATCH=$(echo ${CI_COMMIT_TAG} | cut -d '.' -f 3 | cut -d '-' -f 1)
|
|
||||||
- docker buildx build -t $${REGISTRY}/$${REPO}:v$${MAJOR:-0}.$${MINOR:-0}.$${PATCH-0} -t $${REGISTRY}/$${REPO}:v$${MAJOR:-0}.$${MINOR} -t $${REGISTRY}/$$REPO:v$${MAJOR:-0} -t $${REGISTRY}/$$REPO:latest .
|
|
||||||
- docker login --username $USER --password $PASS $${REGISTRY}
|
|
||||||
- docker push $${REGISTRY}/$${REPO}:v$${MAJOR:-0}.$${MINOR:-0}.$${PATCH-0}
|
|
||||||
- docker push $${REGISTRY}/$${REPO}:v$${MAJOR:-0}.$${MINOR}
|
|
||||||
- docker push $${REGISTRY}/$${REPO}:v$${MAJOR:-0}
|
|
||||||
- docker push $${REGISTRY}/$${REPO}:latest
|
|
||||||
volumes:
|
|
||||||
- /var/run/docker.sock:/var/run/docker.sock
|
|
||||||
when:
|
|
||||||
- repo: nikurasu:elk-test-ci
|
|
||||||
- event: tag
|
|
|
@ -21,6 +21,7 @@ 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:
|
||||||
|
@ -83,7 +84,7 @@ Simple approach used by most websites of relying on direction set in HTML elemen
|
||||||
We've added some `UnoCSS` utilities styles to help you with that:
|
We've added some `UnoCSS` utilities styles to help you with that:
|
||||||
- Do not use `left/right` padding and margin: for example `pl-1`. Use `padding-inline-start/end` instead. So `pl-1` should be `ps-1`, `pr-1` should be `pe-1`. The same rules apply to margin.
|
- Do not use `left/right` padding and margin: for example `pl-1`. Use `padding-inline-start/end` instead. So `pl-1` should be `ps-1`, `pr-1` should be `pe-1`. The same rules apply to margin.
|
||||||
- Do not use `rtl-` classes, such as `rtl-left-0`.
|
- Do not use `rtl-` classes, such as `rtl-left-0`.
|
||||||
- For icons that should be rotated for RTL, add `class="rtl-flip"`. This can only be used for icons outside of elements with `dir="auto"`, such as timeline, and is the only exception to the rule above. For icons inside the timeline, it might not work as expected.
|
- For icons that should be rotated for RTL, add `class="rtl-flip"`. This can only be used for icons outside of elements with `dir="auto"`, such as timeline, and is the only exception from the rule above. For icons inside the timeline, it might not work as expected.
|
||||||
- For absolute positioned elements, don't use `left/right`: for example `left-0`. Use `inset-inline-start/end` instead. `UnoCSS` shortcuts are `inset-is` for `inset-inline-start` and `inset-ie` for `inset-inline-end`. Example: `left-0` should be replaced with `inset-is-0`.
|
- For absolute positioned elements, don't use `left/right`: for example `left-0`. Use `inset-inline-start/end` instead. `UnoCSS` shortcuts are `inset-is` for `inset-inline-start` and `inset-ie` for `inset-inline-end`. Example: `left-0` should be replaced with `inset-is-0`.
|
||||||
- If you need to change the border radius for an entire left or right side, use `border-inline-start/end`. `UnoCSS` shortcuts are `rounded-is` for left side, `rounded-ie` for right side. Example: `rounded-l-5` should be replaced with `rounded-ie-5`.
|
- If you need to change the border radius for an entire left or right side, use `border-inline-start/end`. `UnoCSS` shortcuts are `rounded-is` for left side, `rounded-ie` for right side. Example: `rounded-l-5` should be replaced with `rounded-ie-5`.
|
||||||
- If you need to change the border radius for one corner, use `border-start-end-radius` and similar rules. `UnoCSS` shortcuts are `rounded` + top/bottom as either `-bs` (top) or `-be` (bottom) + left/right as either `-is` (left) or `-ie` (right). Example: `rounded-tl-0` should be replaced with `rounded-bs-is-0`.
|
- If you need to change the border radius for one corner, use `border-start-end-radius` and similar rules. `UnoCSS` shortcuts are `rounded` + top/bottom as either `-bs` (top) or `-be` (bottom) + left/right as either `-is` (left) or `-ie` (right). Example: `rounded-tl-0` should be replaced with `rounded-bs-is-0`.
|
||||||
|
|
|
@ -14,7 +14,6 @@ RUN apk add git --no-cache
|
||||||
|
|
||||||
# Prepare build deps ( ignore postinstall scripts for now )
|
# Prepare build deps ( ignore postinstall scripts for now )
|
||||||
COPY package.json ./
|
COPY package.json ./
|
||||||
COPY .npmrc ./
|
|
||||||
COPY pnpm-lock.yaml ./
|
COPY pnpm-lock.yaml ./
|
||||||
COPY patches ./patches
|
COPY patches ./patches
|
||||||
RUN pnpm i --frozen-lockfile --ignore-scripts
|
RUN pnpm i --frozen-lockfile --ignore-scripts
|
||||||
|
|
12
README.md
12
README.md
|
@ -49,24 +49,20 @@ One could put Elk behind popular reverse proxies with SSL Handling like Traefik,
|
||||||
1. adjust permissions of storage dir: ```sudo chown 911:911 ./elk-storage```
|
1. adjust permissions of storage dir: ```sudo chown 911:911 ./elk-storage```
|
||||||
1. start container: ```docker-compose up -d```
|
1. start container: ```docker-compose up -d```
|
||||||
|
|
||||||
> [!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:
|
||||||
|
|
||||||
- [elk.fedified.com](https://elk.fedified.com) - Use Elk to log into any compatible instance
|
- [elk.fedified.com](https://elk.fedified.com) - Use Elk to log into any compatible instance
|
||||||
- [elk.me.uk](https://elk.me.uk) - Use Elk to log into any compatible instance, hosted on Google Cloud Run with no Cloudflare proxy
|
|
||||||
- [elk.h4.io](https://elk.h4.io) - Use Elk for the `h4.io` Server
|
- [elk.h4.io](https://elk.h4.io) - Use Elk for the `h4.io` Server
|
||||||
- [elk.universeodon.com](https://elk.universeodon.com) - Use Elk for the Universeodon Server
|
- [elk.universeodon.com](https://elk.universeodon.com) - Use Elk for the Universeodon Server
|
||||||
- [elk.vmst.io](https://elk.vmst.io) - Use Elk for the `vmst.io` Server
|
- [elk.vmst.io](https://elk.vmst.io) - Use Elk for the `vmst.io` Server
|
||||||
- [elk.hostux.social](https://elk.hostux.social) - Use Elk for the `hostux.social` Server
|
- [elk.hostux.social](https://elk.hostux.social) - Use Elk for the `hostux.social` Server
|
||||||
- [elk.cupoftea.social](https://elk.cupoftea.social) - Use Elk for the `cupoftea.social` Server
|
- [elk.cupoftea.social](https://elk.cupoftea.social) - Use Elk for the `cupoftea.social` Server
|
||||||
- [elk.aus.social](https://elk.aus.social) - Use Elk for the `aus.social` Server
|
- [elk.aus.social](https://elk.aus.social) - Use Elk for the `aus.social` Server
|
||||||
- [elk.mstdn.ca](https://elk.mstdn.ca) - Use Elk for the `mstdn.ca` Server
|
|
||||||
- [elk.mastodonapp.uk](https://elk.mastodonapp.uk) - Use Elk for the `mastodonapp.uk` Server
|
|
||||||
- [elk.bolha.us](https://elk.bolha.us) - Use Elk for the `bolha.us` Server
|
|
||||||
|
|
||||||
> **Note**: Community deployments are **NOT** maintained by the Elk team. It may not be synced with Elk's source code. Please do your own research about the host servers before using them.
|
> **Note**: Community deployments are **NOT** maintained by the Elk team. It may not be synced with Elk's source code. Please do your own research about the host servers before using them.
|
||||||
|
|
||||||
|
@ -138,7 +134,7 @@ nr test
|
||||||
|
|
||||||
## 📲 PWA
|
## 📲 PWA
|
||||||
|
|
||||||
You can consult the [PWA documentation](https://docs.elk.zone/pwa) to learn more about the PWA capabilities on Elk, how to install Elk PWA in your desktop or mobile device and some hints about PWA stuff on Elk.
|
You can consult the [PWA documentation](https://docs.elk.zone/docs/pwa) to learn more about the PWA capabilities on Elk, how to install Elk PWA in your desktop or mobile device and some hints about PWA stuff on Elk.
|
||||||
|
|
||||||
## 🦄 Stack
|
## 🦄 Stack
|
||||||
|
|
||||||
|
@ -151,7 +147,7 @@ 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
|
||||||
- [shiki](https://shiki.style/) - A beautiful yet powerful syntax highlighter
|
- [shiki](https://shiki.matsu.io/) - A beautiful 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
|
||||||
|
|
6
app.vue
6
app.vue
|
@ -4,12 +4,10 @@ provideGlobalCommands()
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
|
||||||
if (import.meta.server && !route.path.startsWith('/settings')) {
|
if (process.server && !route.path.startsWith('/settings')) {
|
||||||
const url = useRequestURL()
|
|
||||||
|
|
||||||
useHead({
|
useHead({
|
||||||
meta: [
|
meta: [
|
||||||
{ property: 'og:url', content: `${url.origin}${route.path}` },
|
{ property: 'og:url', content: `https://elk.zone${route.path}` },
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -1,16 +1,16 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { mastodon } from 'masto'
|
import type { mastodon } from 'masto'
|
||||||
|
|
||||||
defineOptions({
|
const { account, as = 'div' } = $defineProps<{
|
||||||
inheritAttrs: false,
|
|
||||||
})
|
|
||||||
|
|
||||||
const { account, as = 'div' } = defineProps<{
|
|
||||||
account: mastodon.v1.Account
|
account: mastodon.v1.Account
|
||||||
as?: string
|
as?: string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
cacheAccount(account)
|
cacheAccount(account)
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
inheritAttrs: false,
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -19,10 +19,8 @@ cacheAccount(account)
|
||||||
overflow-hidden
|
overflow-hidden
|
||||||
:to="getAccountRoute(account)"
|
:to="getAccountRoute(account)"
|
||||||
/>
|
/>
|
||||||
<slot>
|
|
||||||
<div h-full p1 shrink-0>
|
<div h-full p1 shrink-0>
|
||||||
<AccountFollowButton :account="account" :context="relationshipContext" />
|
<AccountFollowButton :account="account" :context="relationshipContext" />
|
||||||
</div>
|
</div>
|
||||||
</slot>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { mastodon } from 'masto'
|
import type { mastodon } from 'masto'
|
||||||
import { toggleFollowAccount, useRelationship } from '~~/composables/masto/relationship'
|
|
||||||
|
|
||||||
const { account, command, context, ...props } = defineProps<{
|
const { account, command, context, ...props } = defineProps<{
|
||||||
account: mastodon.v1.Account
|
account: mastodon.v1.Account
|
||||||
|
@ -10,36 +9,55 @@ const { account, command, context, ...props } = defineProps<{
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
const isSelf = useSelfAccount(() => account)
|
const isSelf = $(useSelfAccount(() => account))
|
||||||
const enable = computed(() => !isSelf.value && currentUser.value)
|
const enable = $computed(() => !isSelf && currentUser.value)
|
||||||
const relationship = computed(() => props.relationship || useRelationship(account).value)
|
const relationship = $computed(() => props.relationship || useRelationship(account).value)
|
||||||
const isLoading = computed(() => relationship.value === undefined)
|
|
||||||
|
|
||||||
const { client } = useMasto()
|
const { client } = $(useMasto())
|
||||||
|
async function toggleFollow() {
|
||||||
async function unblock() {
|
if (relationship!.following) {
|
||||||
relationship.value!.blocking = false
|
if (await openConfirmDialog({
|
||||||
|
title: t('confirm.unfollow.title'),
|
||||||
|
confirm: t('confirm.unfollow.confirm'),
|
||||||
|
cancel: t('confirm.unfollow.cancel'),
|
||||||
|
}) !== 'confirm')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
relationship!.following = !relationship!.following
|
||||||
try {
|
try {
|
||||||
const newRel = await client.value.v1.accounts.$select(account.id).unblock()
|
const newRel = await client.v1.accounts[relationship!.following ? 'follow' : 'unfollow'](account.id)
|
||||||
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.value!.blocking = true
|
relationship!.following = !relationship!.following
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function unblock() {
|
||||||
|
relationship!.blocking = false
|
||||||
|
try {
|
||||||
|
const newRel = await client.v1.accounts.unblock(account.id)
|
||||||
|
Object.assign(relationship!, newRel)
|
||||||
|
}
|
||||||
|
catch (err) {
|
||||||
|
console.error(err)
|
||||||
|
// TODO error handling
|
||||||
|
relationship!.blocking = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function unmute() {
|
async function unmute() {
|
||||||
relationship.value!.muting = false
|
relationship!.muting = false
|
||||||
try {
|
try {
|
||||||
const newRel = await client.value.v1.accounts.$select(account.id).unmute()
|
const newRel = await client.v1.accounts.unmute(account.id)
|
||||||
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.value!.muting = true
|
relationship!.muting = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -47,25 +65,21 @@ useCommand({
|
||||||
scope: 'Actions',
|
scope: 'Actions',
|
||||||
order: -2,
|
order: -2,
|
||||||
visible: () => command && enable,
|
visible: () => command && enable,
|
||||||
name: () => `${relationship.value?.following ? t('account.unfollow') : t('account.follow')} ${getShortHandle(account)}`,
|
name: () => `${relationship?.following ? t('account.unfollow') : t('account.follow')} ${getShortHandle(account)}`,
|
||||||
icon: 'i-ri:star-line',
|
icon: 'i-ri:star-line',
|
||||||
onActivate: () => toggleFollowAccount(relationship.value!, account),
|
onActivate: () => toggleFollow(),
|
||||||
})
|
})
|
||||||
|
|
||||||
const buttonStyle = computed(() => {
|
const buttonStyle = $computed(() => {
|
||||||
if (relationship.value?.blocking)
|
if (relationship?.blocking)
|
||||||
return 'text-inverted bg-red border-red'
|
return 'text-inverted bg-red border-red'
|
||||||
|
|
||||||
if (relationship.value?.muting)
|
if (relationship?.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.value ? relationship.value.following : context === 'following')
|
if (relationship ? relationship.following : context === 'following')
|
||||||
return `text-base ${relationship.value?.followedBy ? 'border-strong' : 'border-base'}`
|
return `text-base ${relationship?.followedBy ? 'border-strong' : 'border-base'}`
|
||||||
|
|
||||||
// If loading, use a plain style
|
|
||||||
if (isLoading.value)
|
|
||||||
return 'text-base 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'
|
||||||
|
@ -76,16 +90,13 @@ const buttonStyle = computed(() => {
|
||||||
<button
|
<button
|
||||||
v-if="enable"
|
v-if="enable"
|
||||||
gap-1 items-center group
|
gap-1 items-center group
|
||||||
|
:disabled="relationship?.requested"
|
||||||
border-1
|
border-1
|
||||||
rounded-full flex="~ gap2 center" font-500 min-w-30 h-fit px3 py1
|
rounded-full flex="~ gap2 center" font-500 min-w-30 h-fit px3 py1
|
||||||
:class="buttonStyle"
|
:class="buttonStyle"
|
||||||
:hover="!relationship?.blocking && !relationship?.muting && relationship?.following ? 'border-red text-red' : 'bg-base border-primary text-primary'"
|
:hover="!relationship?.blocking && !relationship?.muting && relationship?.following ? 'border-red text-red' : 'bg-base border-primary text-primary'"
|
||||||
@click="relationship?.blocking ? unblock() : relationship?.muting ? unmute() : toggleFollowAccount(relationship!, account)"
|
@click="relationship?.blocking ? unblock() : relationship?.muting ? unmute() : toggleFollow()"
|
||||||
>
|
>
|
||||||
<template v-if="isLoading">
|
|
||||||
<span i-svg-spinners-180-ring-with-bg />
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<template v-if="relationship?.blocking">
|
<template v-if="relationship?.blocking">
|
||||||
<span elk-group-hover="hidden">{{ $t('account.blocking') }}</span>
|
<span elk-group-hover="hidden">{{ $t('account.blocking') }}</span>
|
||||||
<span hidden elk-group-hover="inline">{{ $t('account.unblock') }}</span>
|
<span hidden elk-group-hover="inline">{{ $t('account.unblock') }}</span>
|
||||||
|
@ -99,16 +110,14 @@ const buttonStyle = computed(() => {
|
||||||
<span hidden elk-group-hover="inline">{{ $t('account.unfollow') }}</span>
|
<span hidden elk-group-hover="inline">{{ $t('account.unfollow') }}</span>
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="relationship?.requested">
|
<template v-else-if="relationship?.requested">
|
||||||
<span elk-group-hover="hidden">{{ $t('account.follow_requested') }}</span>
|
<span>{{ $t('account.follow_requested') }}</span>
|
||||||
<span hidden elk-group-hover="inline">{{ $t('account.withdraw_follow_request') }}</span>
|
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="relationship ? relationship.followedBy : context === 'followedBy'">
|
<template v-else-if="relationship ? relationship.followedBy : context === 'followedBy'">
|
||||||
<span elk-group-hover="hidden">{{ $t('account.follows_you') }}</span>
|
<span elk-group-hover="hidden">{{ $t('account.follows_you') }}</span>
|
||||||
<span hidden elk-group-hover="inline">{{ account.locked ? $t('account.request_follow') : $t('account.follow_back') }}</span>
|
<span hidden elk-group-hover="inline">{{ $t('account.follow_back') }}</span>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<span>{{ account.locked ? $t('account.request_follow') : $t('account.follow') }}</span>
|
<span>{{ account.locked ? $t('account.request_follow') : $t('account.follow') }}</span>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
|
||||||
</button>
|
</button>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -1,68 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import type { mastodon } from 'masto'
|
|
||||||
|
|
||||||
const { account, ...props } = defineProps<{
|
|
||||||
account: mastodon.v1.Account
|
|
||||||
relationship?: mastodon.v1.Relationship
|
|
||||||
}>()
|
|
||||||
const relationship = computed(() => props.relationship || useRelationship(account).value)
|
|
||||||
const { client } = useMasto()
|
|
||||||
|
|
||||||
async function authorizeFollowRequest() {
|
|
||||||
relationship.value!.requestedBy = false
|
|
||||||
relationship.value!.followedBy = true
|
|
||||||
try {
|
|
||||||
const newRel = await client.value.v1.followRequests.$select(account.id).authorize()
|
|
||||||
Object.assign(relationship!, newRel)
|
|
||||||
}
|
|
||||||
catch (err) {
|
|
||||||
console.error(err)
|
|
||||||
relationship.value!.requestedBy = true
|
|
||||||
relationship.value!.followedBy = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function rejectFollowRequest() {
|
|
||||||
relationship.value!.requestedBy = false
|
|
||||||
try {
|
|
||||||
const newRel = await client.value.v1.followRequests.$select(account.id).reject()
|
|
||||||
Object.assign(relationship!, newRel)
|
|
||||||
}
|
|
||||||
catch (err) {
|
|
||||||
console.error(err)
|
|
||||||
relationship.value!.requestedBy = true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div flex gap-4>
|
|
||||||
<template v-if="relationship?.requestedBy">
|
|
||||||
<CommonTooltip :content="$t('account.authorize')" no-auto-focus>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
rounded-full text-sm p2 border-1
|
|
||||||
hover:text-green transition-colors
|
|
||||||
@click="authorizeFollowRequest"
|
|
||||||
>
|
|
||||||
<span block text-current i-ri:check-fill />
|
|
||||||
</button>
|
|
||||||
</CommonTooltip>
|
|
||||||
<CommonTooltip :content="$t('account.reject')" no-auto-focus>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
rounded-full text-sm p2 border-1
|
|
||||||
hover:text-red transition-colors
|
|
||||||
@click="rejectFollowRequest"
|
|
||||||
>
|
|
||||||
<span block text-current i-ri:close-fill />
|
|
||||||
</button>
|
|
||||||
</CommonTooltip>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<span text-secondary>
|
|
||||||
{{ relationship?.followedBy ? $t('account.authorized') : $t('account.rejected') }}
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
|
@ -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,30 +6,29 @@ 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)
|
|
||||||
|
|
||||||
function getFieldIconTitle(fieldName: string) {
|
function getFieldIconTitle(fieldName: string) {
|
||||||
return fieldName === 'Joined' ? t('account.joined') : fieldName
|
return fieldName === 'Joined' ? t('account.joined') : fieldName
|
||||||
}
|
}
|
||||||
|
|
||||||
function getNotificationIconTitle() {
|
function getNotificationIconTitle() {
|
||||||
return relationship.value?.notifying ? t('account.notifications_on_post_disable', { username: `@${account.username}` }) : t('account.notifications_on_post_enable', { username: `@${account.username}` })
|
return relationship?.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 +50,14 @@ function previewAvatar() {
|
||||||
}
|
}
|
||||||
|
|
||||||
async function toggleNotifications() {
|
async function toggleNotifications() {
|
||||||
relationship.value!.notifying = !relationship.value?.notifying
|
relationship!.notifying = !relationship?.notifying
|
||||||
try {
|
try {
|
||||||
const newRel = await client.value.v1.accounts.$select(account.id).follow({ notify: relationship.value?.notifying })
|
const newRel = await client.v1.accounts.follow(account.id, { notify: relationship?.notifying })
|
||||||
Object.assign(relationship!, newRel)
|
Object.assign(relationship!, newRel)
|
||||||
}
|
}
|
||||||
catch {
|
catch {
|
||||||
// TODO error handling
|
// TODO error handling
|
||||||
relationship.value!.notifying = !relationship.value?.notifying
|
relationship!.notifying = !relationship?.notifying
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -75,70 +74,49 @@ watchEffect(() => {
|
||||||
})
|
})
|
||||||
icons.push({
|
icons.push({
|
||||||
name: 'Joined',
|
name: 'Joined',
|
||||||
value: createdAt.value,
|
value: createdAt,
|
||||||
})
|
})
|
||||||
|
|
||||||
namedFields.value = named
|
namedFields.value = named
|
||||||
iconFields.value = icons
|
iconFields.value = icons
|
||||||
})
|
})
|
||||||
|
|
||||||
const personalNoteDraft = ref(relationship.value?.note ?? '')
|
const personalNoteDraft = ref(relationship?.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.value)
|
if (!event.target || !('value' in event.target) || !relationship)
|
||||||
return
|
return
|
||||||
|
|
||||||
const newNote = event.target?.value as string
|
const newNote = event.target?.value as string
|
||||||
|
|
||||||
if (relationship.value.note?.trim() === newNote.trim())
|
if (relationship.note?.trim() === newNote.trim())
|
||||||
return
|
return
|
||||||
|
|
||||||
const newNoteApiResult = await client.value.v1.accounts.$select(account.id).note.create({ comment: newNote })
|
const newNoteApiResult = await client.v1.accounts.createNote(account.id, { comment: newNote })
|
||||||
relationship.value.note = newNoteApiResult.note
|
relationship.note = newNoteApiResult.note
|
||||||
personalNoteDraft.value = relationship.value.note ?? ''
|
personalNoteDraft.value = relationship.note ?? ''
|
||||||
}
|
}
|
||||||
|
|
||||||
const isSelf = useSelfAccount(() => account)
|
const isSelf = $(useSelfAccount(() => account))
|
||||||
const isNotifiedOnPost = computed(() => !!relationship.value?.notifying)
|
const isNotifiedOnPost = $computed(() => !!relationship?.notifying)
|
||||||
|
|
||||||
const personalNoteMaxLength = 2000
|
const personalNoteMaxLength = 2000
|
||||||
|
|
||||||
async function copyAccountName() {
|
|
||||||
try {
|
|
||||||
const shortHandle = getShortHandle(account)
|
|
||||||
const serverName = getServerName(account)
|
|
||||||
const accountName = `${shortHandle}@${serverName}`
|
|
||||||
await navigator.clipboard.writeText(accountName)
|
|
||||||
}
|
|
||||||
catch (err) {
|
|
||||||
console.error('Failed to copy account name:', err)
|
|
||||||
}
|
|
||||||
|
|
||||||
isCopied.value = true
|
|
||||||
setTimeout(() => {
|
|
||||||
isCopied.value = false
|
|
||||||
}, 2000)
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div flex flex-col>
|
<div flex flex-col>
|
||||||
<div v-if="relationship?.requestedBy" p-4 flex justify-between items-center bg-card>
|
|
||||||
<span text-primary font-bold>{{ $t('account.requested', [account.displayName]) }}</span>
|
|
||||||
<AccountFollowRequestButton :account="account" :relationship="relationship" />
|
|
||||||
</div>
|
|
||||||
<component :is="hasHeader ? 'button' : 'div'" border="b base" z-1 @click="hasHeader ? previewHeader() : undefined">
|
<component :is="hasHeader ? 'button' : 'div'" border="b base" z-1 @click="hasHeader ? previewHeader() : undefined">
|
||||||
<img h-50 height="200" w-full object-cover :src="account.header" :alt="t('account.profile_description', [account.username])">
|
<img h-50 height="200" w-full object-cover :src="account.header" :alt="t('account.profile_description', [account.username])">
|
||||||
</component>
|
</component>
|
||||||
<div p4 mt--18 flex flex-col gap-4>
|
<div p4 mt--18 flex flex-col gap-4>
|
||||||
<div relative>
|
<div relative>
|
||||||
<div flex justify-between>
|
<div flex justify-between>
|
||||||
<button shrink-0 h-full :class="{ 'rounded-full': !isSelf, 'squircle': isSelf }" p1 bg-base border-bg-base z-2 @click="previewAvatar">
|
<button shrink-0 :class="{ 'rounded-full': !isSelf, 'squircle': isSelf }" w-30 h-30 p1 bg-base border-bg-base z-2 @click="previewAvatar">
|
||||||
<AccountAvatar :square="isSelf" :account="account" hover:opacity-90 transition-opacity w-28 h-28 />
|
<AccountAvatar :square="isSelf" :account="account" hover:opacity-90 transition-opacity />
|
||||||
</button>
|
</button>
|
||||||
<div inset-ie-0 flex="~ wrap row-reverse" gap-2 items-center pt18 justify-start>
|
<div inset-ie-0 flex="~ wrap row-reverse" gap-2 items-center pt18 justify-start>
|
||||||
<!-- Edit profile -->
|
<!-- Edit profile -->
|
||||||
|
@ -187,21 +165,11 @@ async function copyAccountName() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div flex="~ col gap1" pt2>
|
<div flex="~ col gap1" pt2>
|
||||||
<div flex gap2 items-center flex-wrap>
|
<div flex justify-between>
|
||||||
<AccountDisplayName :account="account" font-bold sm:text-2xl text-xl />
|
<AccountDisplayName :account="account" font-bold sm:text-2xl text-xl />
|
||||||
<AccountRolesIndicator v-if="account.roles?.length" :account="account" />
|
|
||||||
<AccountLockIndicator v-if="account.locked" show-label />
|
|
||||||
<AccountBotIndicator v-if="account.bot" show-label />
|
<AccountBotIndicator v-if="account.bot" show-label />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div flex items-center gap-1>
|
|
||||||
<AccountHandle :account="account" overflow-unset line-clamp-unset />
|
<AccountHandle :account="account" overflow-unset line-clamp-unset />
|
||||||
<CommonTooltip placement="bottom" :content="$t('account.copy_account_name')" no-auto-focus flex>
|
|
||||||
<button text-secondary-light text-sm :class="isCopied ? 'i-ri:check-fill text-green' : 'i-ri:file-copy-line'" @click="copyAccountName">
|
|
||||||
<span sr-only>{{ $t('account.copy_account_name') }}</span>
|
|
||||||
</button>
|
|
||||||
</CommonTooltip>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<label
|
<label
|
||||||
|
|
|
@ -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,69 +1,26 @@
|
||||||
<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({
|
|
||||||
inheritAttrs: false,
|
|
||||||
})
|
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
account?: mastodon.v1.Account | null
|
account?: mastodon.v1.Account
|
||||||
handle?: string
|
handle?: string
|
||||||
disabled?: boolean
|
disabled?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const accountHover = ref()
|
const account = computed(() => props.account || (props.handle ? useAccountByHandle(props.handle!) : undefined))
|
||||||
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()
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
inheritAttrs: false,
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<span ref="accountHover">
|
<VMenu v-if="!disabled && account && !getPreferences(userSettings, 'hideAccountHoverCard')" placement="bottom-start" :delay="{ show: 500, hide: 100 }" v-bind="$attrs" :close-on-content-click="false">
|
||||||
<VMenu
|
|
||||||
v-if="!disabled && account && !getPreferences(userSettings, 'hideAccountHoverCard')"
|
|
||||||
placement="bottom-start"
|
|
||||||
:delay="{ show: 500, hide: 100 }"
|
|
||||||
v-bind="$attrs"
|
|
||||||
:close-on-content-click="false"
|
|
||||||
>
|
|
||||||
<slot />
|
<slot />
|
||||||
<template #popper>
|
<template #popper>
|
||||||
<AccountHoverCard v-if="account" :account="account" />
|
<AccountHoverCard v-if="account" :account="account" />
|
||||||
</template>
|
</template>
|
||||||
</VMenu>
|
</VMenu>
|
||||||
<slot v-else />
|
<slot v-else />
|
||||||
</span>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -1,16 +1,16 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { mastodon } from 'masto'
|
import type { mastodon } from 'masto'
|
||||||
|
|
||||||
defineOptions({
|
|
||||||
inheritAttrs: false,
|
|
||||||
})
|
|
||||||
|
|
||||||
const { account, as = 'div' } = defineProps<{
|
const { account, as = 'div' } = defineProps<{
|
||||||
account: mastodon.v1.Account
|
account: mastodon.v1.Account
|
||||||
as?: string
|
as?: string
|
||||||
hoverCard?: boolean
|
hoverCard?: boolean
|
||||||
square?: boolean
|
square?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
inheritAttrs: false,
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- TODO: Make this work for both buttons and links -->
|
<!-- TODO: Make this work for both buttons and links -->
|
||||||
|
@ -23,8 +23,6 @@ const { account, as = 'div' } = defineProps<{
|
||||||
<div flex="~ col" shrink pt-1 h-full overflow-hidden justify-center leading-none select-none>
|
<div flex="~ col" shrink pt-1 h-full overflow-hidden justify-center leading-none select-none>
|
||||||
<div flex="~" gap-2>
|
<div flex="~" gap-2>
|
||||||
<AccountDisplayName :account="account" font-bold line-clamp-1 ws-pre-wrap break-all text-lg />
|
<AccountDisplayName :account="account" font-bold line-clamp-1 ws-pre-wrap break-all text-lg />
|
||||||
<AccountRolesIndicator v-if="account.roles?.length" :account="account" :limit="1" />
|
|
||||||
<AccountLockIndicator v-if="account.locked" text-xs />
|
|
||||||
<AccountBotIndicator v-if="account.bot" text-xs />
|
<AccountBotIndicator v-if="account.bot" text-xs />
|
||||||
</div>
|
</div>
|
||||||
<AccountHandle :account="account" text-secondary-light />
|
<AccountHandle :account="account" text-secondary-light />
|
||||||
|
|
|
@ -1,23 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
defineProps<{
|
|
||||||
showLabel?: boolean
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const { t } = useI18n()
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div
|
|
||||||
flex="~ gap1" items-center
|
|
||||||
:class="{ 'border border-base rounded-md px-1': showLabel }"
|
|
||||||
text-secondary-light
|
|
||||||
>
|
|
||||||
<slot name="prepend" />
|
|
||||||
<CommonTooltip no-auto-focus content="Lock" :disabled="showLabel">
|
|
||||||
<div i-ri:lock-line />
|
|
||||||
</CommonTooltip>
|
|
||||||
<div v-if="showLabel">
|
|
||||||
{{ t('account.lock') }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
|
@ -1,6 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { mastodon } from 'masto'
|
import type { mastodon } from 'masto'
|
||||||
import { toggleBlockAccount, toggleBlockDomain, toggleMuteAccount } from '~~/composables/masto/relationship'
|
|
||||||
|
|
||||||
const { account } = defineProps<{
|
const { account } = defineProps<{
|
||||||
account: mastodon.v1.Account
|
account: mastodon.v1.Account
|
||||||
|
@ -11,33 +10,64 @@ const emit = defineEmits<{
|
||||||
(evt: 'removeNote'): void
|
(evt: 'removeNote'): void
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const relationship = useRelationship(account)
|
let 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()
|
|
||||||
|
|
||||||
function shareAccount() {
|
async function toggleMute() {
|
||||||
share({ url: location.href })
|
if (!relationship!.muting && await openConfirmDialog({
|
||||||
|
title: t('confirm.mute_account.title', [account.acct]),
|
||||||
|
confirm: t('confirm.mute_account.confirm'),
|
||||||
|
cancel: t('confirm.mute_account.cancel'),
|
||||||
|
}) !== 'confirm')
|
||||||
|
return
|
||||||
|
|
||||||
|
relationship!.muting = !relationship!.muting
|
||||||
|
relationship = relationship!.muting
|
||||||
|
? await client.v1.accounts.mute(account.id, {
|
||||||
|
// TODO support more options
|
||||||
|
})
|
||||||
|
: await client.v1.accounts.unmute(account.id)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function toggleBlockUser() {
|
||||||
|
if (!relationship!.blocking && await openConfirmDialog({
|
||||||
|
title: t('confirm.block_account.title', [account.acct]),
|
||||||
|
confirm: t('confirm.block_account.confirm'),
|
||||||
|
cancel: t('confirm.block_account.cancel'),
|
||||||
|
}) !== 'confirm')
|
||||||
|
return
|
||||||
|
|
||||||
|
relationship!.blocking = !relationship!.blocking
|
||||||
|
relationship = await client.v1.accounts[relationship!.blocking ? 'block' : 'unblock'](account.id)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function toggleBlockDomain() {
|
||||||
|
if (!relationship!.domainBlocking && await openConfirmDialog({
|
||||||
|
title: t('confirm.block_domain.title', [getServerName(account)]),
|
||||||
|
confirm: t('confirm.block_domain.confirm'),
|
||||||
|
cancel: t('confirm.block_domain.cancel'),
|
||||||
|
}) !== 'confirm')
|
||||||
|
return
|
||||||
|
|
||||||
|
relationship!.domainBlocking = !relationship!.domainBlocking
|
||||||
|
await client.v1.domainBlocks[relationship!.domainBlocking ? 'block' : 'unblock'](getServerName(account))
|
||||||
}
|
}
|
||||||
|
|
||||||
async function toggleReblogs() {
|
async function toggleReblogs() {
|
||||||
if (!relationship.value!.showingReblogs) {
|
if (!relationship!.showingReblogs && await openConfirmDialog({
|
||||||
const dialogChoice = await openConfirmDialog({
|
title: t('confirm.show_reblogs.title', [account.acct]),
|
||||||
title: t('confirm.show_reblogs.title'),
|
|
||||||
description: t('confirm.show_reblogs.description', [account.acct]),
|
|
||||||
confirm: t('confirm.show_reblogs.confirm'),
|
confirm: t('confirm.show_reblogs.confirm'),
|
||||||
cancel: t('confirm.show_reblogs.cancel'),
|
cancel: t('confirm.show_reblogs.cancel'),
|
||||||
})
|
}) !== 'confirm')
|
||||||
if (dialogChoice.choice !== 'confirm')
|
|
||||||
return
|
return
|
||||||
}
|
|
||||||
|
|
||||||
const showingReblogs = !relationship.value?.showingReblogs
|
const showingReblogs = !relationship?.showingReblogs
|
||||||
relationship.value = await client.value.v1.accounts.$select(account.id).follow({ reblogs: showingReblogs })
|
relationship = await client.v1.accounts.follow(account.id, { reblogs: showingReblogs })
|
||||||
}
|
}
|
||||||
|
|
||||||
async function addUserNote() {
|
async function addUserNote() {
|
||||||
|
@ -45,11 +75,11 @@ async function addUserNote() {
|
||||||
}
|
}
|
||||||
|
|
||||||
async function removeUserNote() {
|
async function removeUserNote() {
|
||||||
if (!relationship.value!.note || relationship.value!.note.length === 0)
|
if (!relationship!.note || relationship!.note.length === 0)
|
||||||
return
|
return
|
||||||
|
|
||||||
const newNote = await client.value.v1.accounts.$select(account.id).note.create({ comment: '' })
|
const newNote = await client.v1.accounts.createNote(account.id, { comment: '' })
|
||||||
relationship.value!.note = newNote.note
|
relationship!.note = newNote.note
|
||||||
emit('removeNote')
|
emit('removeNote')
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -70,13 +100,6 @@ async function removeUserNote() {
|
||||||
:command="command"
|
:command="command"
|
||||||
/>
|
/>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<CommonDropdownItem
|
|
||||||
v-if="isShareSupported"
|
|
||||||
:text="$t('menu.share_account', [`@${account.acct}`])"
|
|
||||||
icon="i-ri:share-line"
|
|
||||||
:command="command"
|
|
||||||
@click="shareAccount()"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<template v-if="currentUser">
|
<template v-if="currentUser">
|
||||||
<template v-if="!isSelf">
|
<template v-if="!isSelf">
|
||||||
|
@ -126,16 +149,16 @@ async function removeUserNote() {
|
||||||
<CommonDropdownItem
|
<CommonDropdownItem
|
||||||
v-if="!relationship?.muting"
|
v-if="!relationship?.muting"
|
||||||
:text="$t('menu.mute_account', [`@${account.acct}`])"
|
:text="$t('menu.mute_account', [`@${account.acct}`])"
|
||||||
icon="i-ri:volume-mute-line"
|
icon="i-ri:volume-up-fill"
|
||||||
:command="command"
|
:command="command"
|
||||||
@click="toggleMuteAccount (relationship!, account)"
|
@click="toggleMute()"
|
||||||
/>
|
/>
|
||||||
<CommonDropdownItem
|
<CommonDropdownItem
|
||||||
v-else
|
v-else
|
||||||
:text="$t('menu.unmute_account', [`@${account.acct}`])"
|
:text="$t('menu.unmute_account', [`@${account.acct}`])"
|
||||||
icon="i-ri:volume-up-fill"
|
icon="i-ri:volume-mute-line"
|
||||||
:command="command"
|
:command="command"
|
||||||
@click="toggleMuteAccount (relationship!, account)"
|
@click="toggleMute()"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<CommonDropdownItem
|
<CommonDropdownItem
|
||||||
|
@ -143,14 +166,14 @@ async function removeUserNote() {
|
||||||
:text="$t('menu.block_account', [`@${account.acct}`])"
|
:text="$t('menu.block_account', [`@${account.acct}`])"
|
||||||
icon="i-ri:forbid-2-line"
|
icon="i-ri:forbid-2-line"
|
||||||
:command="command"
|
:command="command"
|
||||||
@click="toggleBlockAccount (relationship!, account)"
|
@click="toggleBlockUser()"
|
||||||
/>
|
/>
|
||||||
<CommonDropdownItem
|
<CommonDropdownItem
|
||||||
v-else
|
v-else
|
||||||
:text="$t('menu.unblock_account', [`@${account.acct}`])"
|
:text="$t('menu.unblock_account', [`@${account.acct}`])"
|
||||||
icon="i-ri:checkbox-circle-line"
|
icon="i-ri:checkbox-circle-line"
|
||||||
:command="command"
|
:command="command"
|
||||||
@click="toggleBlockAccount (relationship!, account)"
|
@click="toggleBlockUser()"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<template v-if="getServerName(account) !== currentServer">
|
<template v-if="getServerName(account) !== currentServer">
|
||||||
|
@ -159,23 +182,16 @@ async function removeUserNote() {
|
||||||
:text="$t('menu.block_domain', [getServerName(account)])"
|
:text="$t('menu.block_domain', [getServerName(account)])"
|
||||||
icon="i-ri:shut-down-line"
|
icon="i-ri:shut-down-line"
|
||||||
:command="command"
|
:command="command"
|
||||||
@click="toggleBlockDomain(relationship!, account)"
|
@click="toggleBlockDomain()"
|
||||||
/>
|
/>
|
||||||
<CommonDropdownItem
|
<CommonDropdownItem
|
||||||
v-else
|
v-else
|
||||||
:text="$t('menu.unblock_domain', [getServerName(account)])"
|
:text="$t('menu.unblock_domain', [getServerName(account)])"
|
||||||
icon="i-ri:restart-line"
|
icon="i-ri:restart-line"
|
||||||
:command="command"
|
:command="command"
|
||||||
@click="toggleBlockDomain(relationship!, account)"
|
@click="toggleBlockDomain()"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<CommonDropdownItem
|
|
||||||
:text="$t('menu.report_account', [`@${account.acct}`])"
|
|
||||||
icon="i-ri:flag-2-line"
|
|
||||||
:command="command"
|
|
||||||
@click="openReportDialog(account)"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-else>
|
<template v-else>
|
||||||
|
|
|
@ -1,17 +1,17 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { mastodon } from 'masto'
|
import type { Paginator, mastodon } from 'masto'
|
||||||
|
|
||||||
const { paginator, account, context } = defineProps<{
|
const { paginator, account, context } = defineProps<{
|
||||||
paginator: mastodon.Paginator<mastodon.v1.Account[], mastodon.DefaultPaginationParams | undefined>
|
paginator: Paginator<mastodon.v1.Account[], mastodon.DefaultPaginationParams>
|
||||||
context?: 'following' | 'followers'
|
context?: 'following' | 'followers'
|
||||||
account?: mastodon.v1.Account
|
account?: mastodon.v1.Account
|
||||||
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>
|
||||||
|
|
|
@ -33,21 +33,13 @@ const userSettings = useUserSettings()
|
||||||
text-secondary exact-active-class="text-primary"
|
text-secondary exact-active-class="text-primary"
|
||||||
>
|
>
|
||||||
<template #default="{ isExactActive }">
|
<template #default="{ isExactActive }">
|
||||||
<template
|
|
||||||
v-if="!getPreferences(userSettings, 'hideFollowerCount')"
|
|
||||||
>
|
|
||||||
<CommonLocalizedNumber
|
<CommonLocalizedNumber
|
||||||
v-if="account.followingCount >= 0"
|
v-if="!getPreferences(userSettings, 'hideFollowerCount')"
|
||||||
keypath="account.following_count"
|
keypath="account.following_count"
|
||||||
:count="account.followingCount"
|
:count="account.followingCount"
|
||||||
font-bold
|
font-bold
|
||||||
:class="isExactActive ? 'text-primary' : 'text-base'"
|
:class="isExactActive ? 'text-primary' : 'text-base'"
|
||||||
/>
|
/>
|
||||||
<div v-else flex gap-x-1>
|
|
||||||
<span font-bold text-base>Hidden</span>
|
|
||||||
<span>{{ $t('account.following') }}</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<span v-else>{{ $t('account.following') }}</span>
|
<span v-else>{{ $t('account.following') }}</span>
|
||||||
</template>
|
</template>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
@ -58,19 +50,13 @@ const userSettings = useUserSettings()
|
||||||
exact-active-class="text-primary"
|
exact-active-class="text-primary"
|
||||||
>
|
>
|
||||||
<template #default="{ isExactActive }">
|
<template #default="{ isExactActive }">
|
||||||
<template v-if="!getPreferences(userSettings, 'hideFollowerCount')">
|
|
||||||
<CommonLocalizedNumber
|
<CommonLocalizedNumber
|
||||||
v-if="account.followersCount >= 0"
|
v-if="!getPreferences(userSettings, 'hideFollowerCount')"
|
||||||
keypath="account.followers_count"
|
keypath="account.followers_count"
|
||||||
:count="account.followersCount"
|
:count="account.followersCount"
|
||||||
font-bold
|
font-bold
|
||||||
:class="isExactActive ? 'text-primary' : 'text-base'"
|
:class="isExactActive ? 'text-primary' : 'text-base'"
|
||||||
/>
|
/>
|
||||||
<div v-else flex gap-x-1>
|
|
||||||
<span font-bold text-base>Hidden</span>
|
|
||||||
<span>{{ $t('account.followers') }}</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<span v-else>{{ $t('account.followers') }}</span>
|
<span v-else>{{ $t('account.followers') }}</span>
|
||||||
</template>
|
</template>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
|
|
@ -1,31 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import type { mastodon } from 'masto'
|
|
||||||
|
|
||||||
defineProps<{
|
|
||||||
account: mastodon.v1.Account
|
|
||||||
limit?: number
|
|
||||||
}>()
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div
|
|
||||||
flex="~ gap1" items-center
|
|
||||||
class="border border-base rounded-md px-1"
|
|
||||||
text-secondary-light
|
|
||||||
>
|
|
||||||
<slot name="prepend" />
|
|
||||||
<div v-for="role in account.roles?.slice(0, limit)" :key="role.id" flex>
|
|
||||||
<div :style="`color: ${role.color}; border-color: ${role.color}`">
|
|
||||||
{{ role.name }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-if="limit && account.roles?.length > limit"
|
|
||||||
flex="~ gap1" items-center
|
|
||||||
class="border border-base rounded-md px-1"
|
|
||||||
text-secondary-light
|
|
||||||
>
|
|
||||||
+{{ account.roles?.length - limit }}
|
|
||||||
</div>
|
|
||||||
</template>
|
|
|
@ -1,18 +1,18 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { CommonRouteTabOption } from '~/types'
|
import type { CommonRouteTabOption } from '../common/CommonRouteTabs.vue'
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
|
||||||
const server = computed(() => route.params.server as string)
|
const server = $(computedEager(() => route.params.server as string))
|
||||||
const account = computed(() => route.params.account as string)
|
const account = $(computedEager(() => 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: server.value, account: account.value },
|
params: { server, account },
|
||||||
},
|
},
|
||||||
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: server.value, account: account.value },
|
params: { server, account },
|
||||||
},
|
},
|
||||||
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: server.value, account: account.value },
|
params: { server, account },
|
||||||
},
|
},
|
||||||
display: t('tab.media'),
|
display: t('tab.media'),
|
||||||
icon: 'i-ri:camera-2-line',
|
icon: 'i-ri:camera-2-line',
|
||||||
|
|
|
@ -1,45 +0,0 @@
|
||||||
<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>)
|
||||||
|
|
||||||
const ariaLive = ref<AriaLive>('polite')
|
let ariaLive = $ref<AriaLive>('polite')
|
||||||
const ariaMessage = ref<string>('')
|
let ariaMessage = $ref<string>('')
|
||||||
|
|
||||||
function onMessage(event: AriaAnnounceType, message?: string) {
|
function onMessage(event: AriaAnnounceType, message?: string) {
|
||||||
if (event === 'announce')
|
if (event === 'announce')
|
||||||
ariaMessage.value = message!
|
ariaMessage = message!
|
||||||
else if (event === 'mute')
|
else if (event === 'mute')
|
||||||
ariaLive.value = 'off'
|
ariaLive = 'off'
|
||||||
else
|
else
|
||||||
ariaLive.value = 'polite'
|
ariaLive = '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[]>([])
|
||||||
const input = commandPanelInput
|
let input = $(commandPanelInput)
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
inputEl.value?.focus()
|
inputEl?.focus()
|
||||||
})
|
})
|
||||||
|
|
||||||
const commandMode = computed(() => input.value.startsWith('>'))
|
const commandMode = $computed(() => input.startsWith('>'))
|
||||||
|
|
||||||
const query = computed(() => commandMode.value ? '' : input.value.trim())
|
const query = $computed(() => commandMode ? '' : input.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.value.length === 0 || loading.value)
|
if (query.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.value
|
const result = $computed<QueryResult>(() => commandMode
|
||||||
? registry.query(scopes.value.map(s => s.id).join('.'), input.value.slice(1).trim())
|
? registry.query(scopes.map(s => s.id).join('.'), input.slice(1).trim())
|
||||||
: searchResult.value,
|
: searchResult,
|
||||||
)
|
)
|
||||||
|
|
||||||
const isMac = useIsMac()
|
const isMac = useIsMac()
|
||||||
const modifierKeyName = computed(() => isMac.value ? '⌘' : 'Ctrl')
|
const modifierKeyName = $computed(() => isMac.value ? '⌘' : 'Ctrl')
|
||||||
|
|
||||||
const active = ref(0)
|
let 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.value = 0
|
active = 0
|
||||||
})
|
})
|
||||||
|
|
||||||
function findItemEl(index: number) {
|
function findItemEl(index: number) {
|
||||||
return resultEl.value?.querySelector(`[data-index="${index}"]`) as HTMLDivElement | null
|
return resultEl?.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.value.push(item.onComplete())
|
scopes.push(item.onComplete())
|
||||||
input.value = '> '
|
input = '> '
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
function onCommandComplete(item: QueryResultItem) {
|
function onCommandComplete(item: QueryResultItem) {
|
||||||
if (item.onComplete) {
|
if (item.onComplete) {
|
||||||
scopes.value.push(item.onComplete())
|
scopes.push(item.onComplete())
|
||||||
input.value = '> '
|
input = '> '
|
||||||
}
|
}
|
||||||
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.value.length
|
const len = result.length
|
||||||
active.value = (index + len) % len
|
active = (index + len) % len
|
||||||
intoView(active.value)
|
intoView(active)
|
||||||
}
|
}
|
||||||
|
|
||||||
function onKeyDown(e: KeyboardEvent) {
|
function onKeyDown(e: KeyboardEvent) {
|
||||||
|
@ -118,7 +118,7 @@ function onKeyDown(e: KeyboardEvent) {
|
||||||
break
|
break
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
|
||||||
setActive(active.value - 1)
|
setActive(active - 1)
|
||||||
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
@ -128,7 +128,7 @@ function onKeyDown(e: KeyboardEvent) {
|
||||||
break
|
break
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
|
||||||
setActive(active.value + 1)
|
setActive(active + 1)
|
||||||
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
@ -136,9 +136,9 @@ function onKeyDown(e: KeyboardEvent) {
|
||||||
case 'Home': {
|
case 'Home': {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
|
||||||
active.value = 0
|
active = 0
|
||||||
|
|
||||||
intoView(active.value)
|
intoView(active)
|
||||||
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
@ -146,7 +146,7 @@ function onKeyDown(e: KeyboardEvent) {
|
||||||
case 'End': {
|
case 'End': {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
|
||||||
setActive(result.value.length - 1)
|
setActive(result.length - 1)
|
||||||
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
@ -154,7 +154,7 @@ function onKeyDown(e: KeyboardEvent) {
|
||||||
case 'Enter': {
|
case 'Enter': {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
|
||||||
const cmd = result.value.items[active.value]
|
const cmd = result.items[active]
|
||||||
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.value.items[active.value]
|
const cmd = result.items[active]
|
||||||
if (cmd)
|
if (cmd)
|
||||||
onCommandComplete(cmd)
|
onCommandComplete(cmd)
|
||||||
|
|
||||||
|
@ -172,9 +172,9 @@ function onKeyDown(e: KeyboardEvent) {
|
||||||
}
|
}
|
||||||
|
|
||||||
case 'Backspace': {
|
case 'Backspace': {
|
||||||
if (input.value === '>' && scopes.value.length) {
|
if (input === '>' && scopes.length) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
scopes.value.pop()
|
scopes.pop()
|
||||||
}
|
}
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,7 +2,9 @@
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
(event: 'close'): void
|
(event: 'close'): void
|
||||||
}>()
|
}>()
|
||||||
const visible = defineModel<boolean>()
|
const { modelValue: visible } = defineModels<{
|
||||||
|
modelValue?: boolean
|
||||||
|
}>()
|
||||||
|
|
||||||
function close() {
|
function close() {
|
||||||
emit('close')
|
emit('close')
|
||||||
|
|
|
@ -1,14 +1,14 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
defineOptions({
|
|
||||||
inheritAttrs: false,
|
|
||||||
})
|
|
||||||
|
|
||||||
const { blurhash = '', src, srcset, shouldLoadImage = true } = defineProps<{
|
const { blurhash = '', src, srcset, shouldLoadImage = true } = defineProps<{
|
||||||
blurhash?: string
|
blurhash?: string
|
||||||
src: string
|
src: string
|
||||||
srcset?: string
|
srcset?: string
|
||||||
shouldLoadImage?: boolean
|
shouldLoadImage?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
inheritAttrs: false,
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -4,10 +4,10 @@ defineProps<{
|
||||||
hover?: boolean
|
hover?: boolean
|
||||||
iconChecked?: string
|
iconChecked?: string
|
||||||
iconUnchecked?: string
|
iconUnchecked?: string
|
||||||
checkedIconColor?: string
|
|
||||||
prependCheckbox?: boolean
|
|
||||||
}>()
|
}>()
|
||||||
const modelValue = defineModel<boolean | null>()
|
const { modelValue } = defineModels<{
|
||||||
|
modelValue?: boolean | null
|
||||||
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -17,12 +17,9 @@ const modelValue = defineModel<boolean | null>()
|
||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
@click.prevent="modelValue = !modelValue"
|
@click.prevent="modelValue = !modelValue"
|
||||||
>
|
>
|
||||||
<span v-if="label && !prependCheckbox" flex-1 ms-2 pointer-events-none>{{ label }}</span>
|
<span v-if="label" flex-1 ms-2 pointer-events-none>{{ label }}</span>
|
||||||
<span
|
<span
|
||||||
:class="[
|
:class="modelValue ? (iconChecked ?? 'i-ri:checkbox-line') : (iconUnchecked ?? 'i-ri:checkbox-blank-line')"
|
||||||
modelValue ? (iconChecked ?? 'i-ri:checkbox-line') : (iconUnchecked ?? 'i-ri:checkbox-blank-line'),
|
|
||||||
modelValue && checkedIconColor,
|
|
||||||
]"
|
|
||||||
text-lg
|
text-lg
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
/>
|
/>
|
||||||
|
@ -31,7 +28,6 @@ const modelValue = defineModel<boolean | null>()
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
sr-only
|
sr-only
|
||||||
>
|
>
|
||||||
<span v-if="label && prependCheckbox" flex-1 ms-2 pointer-events-none>{{ label }}</span>
|
|
||||||
</label>
|
</label>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -14,7 +14,10 @@ const props = withDefaults(defineProps<Props>(), {
|
||||||
stencilSizePercentage: 0.9,
|
stencilSizePercentage: 0.9,
|
||||||
})
|
})
|
||||||
|
|
||||||
const file = defineModel<File | null>()
|
const { modelValue: file } = defineModels<{
|
||||||
|
/** Images to be cropped */
|
||||||
|
modelValue: File | null
|
||||||
|
}>()
|
||||||
|
|
||||||
const cropperDialog = ref(false)
|
const cropperDialog = ref(false)
|
||||||
|
|
||||||
|
|
|
@ -22,7 +22,9 @@ const emit = defineEmits<{
|
||||||
(event: 'error', code: number, message: string): void
|
(event: 'error', code: number, message: string): void
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const file = defineModel<FileWithHandle | null>()
|
const { modelValue: file } = defineModels<{
|
||||||
|
modelValue: FileWithHandle | null
|
||||||
|
}>()
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
@ -33,7 +35,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 (import.meta.server)
|
if (process.server)
|
||||||
return
|
return
|
||||||
const image = await fileOpen({
|
const image = await fileOpen({
|
||||||
description: 'Image',
|
description: 'Image',
|
||||||
|
|
|
@ -2,51 +2,50 @@
|
||||||
// @ts-expect-error missing types
|
// @ts-expect-error missing types
|
||||||
import { DynamicScroller } from 'vue-virtual-scroller'
|
import { DynamicScroller } from 'vue-virtual-scroller'
|
||||||
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
|
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
|
||||||
import type { mastodon } from 'masto'
|
import type { Paginator, WsEvents } from 'masto'
|
||||||
import type { UnwrapRef } from 'vue'
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
paginator,
|
paginator,
|
||||||
stream,
|
stream,
|
||||||
eventType,
|
|
||||||
keyProp = 'id',
|
keyProp = 'id',
|
||||||
virtualScroller = false,
|
virtualScroller = false,
|
||||||
|
eventType = 'update',
|
||||||
preprocess,
|
preprocess,
|
||||||
endMessage = true,
|
endMessage = true,
|
||||||
} = defineProps<{
|
} = defineProps<{
|
||||||
paginator: mastodon.Paginator<T[], O>
|
paginator: Paginator<T[], O>
|
||||||
keyProp?: keyof T
|
keyProp?: keyof T
|
||||||
virtualScroller?: boolean
|
virtualScroller?: boolean
|
||||||
stream?: mastodon.streaming.Subscription
|
stream?: Promise<WsEvents>
|
||||||
eventType?: 'update' | 'notification'
|
eventType?: 'notification' | 'update'
|
||||||
preprocess?: (items: (U | T)[]) => U[]
|
preprocess?: (items: (U | T)[]) => U[]
|
||||||
endMessage?: boolean | string
|
endMessage?: boolean | string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
defineSlots<{
|
defineSlots<{
|
||||||
default: (props: {
|
default: {
|
||||||
items: U[]
|
items: U[]
|
||||||
item: U
|
item: U
|
||||||
index: number
|
index: number
|
||||||
active?: boolean
|
active?: boolean
|
||||||
older: U
|
older?: U
|
||||||
newer: U // newer is undefined when index === 0
|
newer?: U // newer is undefined when index === 0
|
||||||
}) => void
|
}
|
||||||
items: (props: {
|
items: {
|
||||||
items: UnwrapRef<U[]>
|
items: U[]
|
||||||
}) => void
|
}
|
||||||
updater: (props: {
|
updater: {
|
||||||
number: number
|
number: number
|
||||||
update: () => void
|
update: () => void
|
||||||
}) => void
|
}
|
||||||
loading: (props: object) => void
|
loading: {}
|
||||||
done: (props: { items: U[] }) => void
|
done: {}
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
const nuxtApp = useNuxtApp()
|
const nuxtApp = useNuxtApp()
|
||||||
|
|
||||||
const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, toRef(() => stream), eventType, preprocess)
|
const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, $$(stream), eventType, preprocess)
|
||||||
|
|
||||||
nuxtApp.hook('elk-logo:click', () => {
|
nuxtApp.hook('elk-logo:click', () => {
|
||||||
update()
|
update()
|
||||||
|
@ -84,25 +83,25 @@ defineExpose({ createEntry, removeEntry, updateEntry })
|
||||||
page-mode
|
page-mode
|
||||||
>
|
>
|
||||||
<slot
|
<slot
|
||||||
v-bind="{ key: item[keyProp] }"
|
:key="item[keyProp]"
|
||||||
:item="item"
|
:item="item"
|
||||||
:active="active"
|
:active="active"
|
||||||
:older="items[index + 1] as U"
|
:older="items[index + 1]"
|
||||||
:newer="items[index - 1] as U"
|
:newer="items[index - 1]"
|
||||||
:index="index"
|
:index="index"
|
||||||
:items="items as U[]"
|
:items="items"
|
||||||
/>
|
/>
|
||||||
</DynamicScroller>
|
</DynamicScroller>
|
||||||
</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 as U)[keyProp as keyof U] }"
|
:key="(item as any)[keyProp]"
|
||||||
:item="item as U"
|
:item="item"
|
||||||
:older="items[index + 1] as U"
|
:older="items[index + 1]"
|
||||||
:newer="items[index - 1] as U"
|
:newer="items[index - 1]"
|
||||||
:index="index"
|
:index="index"
|
||||||
:items="items as U[]"
|
:items="items"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
</slot>
|
</slot>
|
||||||
|
@ -110,9 +109,9 @@ defineExpose({ createEntry, removeEntry, updateEntry })
|
||||||
<slot v-if="state === 'loading'" name="loading">
|
<slot v-if="state === 'loading'" name="loading">
|
||||||
<TimelineSkeleton />
|
<TimelineSkeleton />
|
||||||
</slot>
|
</slot>
|
||||||
<slot v-else-if="state === 'done' && endMessage !== false" name="done" :items="items as U[]">
|
<slot v-else-if="state === 'done' && endMessage !== false" name="done">
|
||||||
<div p5 text-secondary italic text-center>
|
<div p5 text-secondary italic text-center>
|
||||||
{{ t(typeof endMessage === 'string' && items.length <= 0 ? endMessage : 'common.end_of_list') }}
|
{{ t(typeof endMessage === 'string' ? endMessage : 'common.end_of_list') }}
|
||||||
</div>
|
</div>
|
||||||
</slot>
|
</slot>
|
||||||
<div v-else-if="state === 'error'" p5 text-secondary>
|
<div v-else-if="state === 'error'" p5 text-secondary>
|
||||||
|
|
|
@ -4,7 +4,9 @@ defineProps<{
|
||||||
value: any
|
value: any
|
||||||
hover?: boolean
|
hover?: boolean
|
||||||
}>()
|
}>()
|
||||||
const modelValue = defineModel()
|
const { modelValue } = defineModels<{
|
||||||
|
modelValue: any
|
||||||
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -1,20 +1,27 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { CommonRouteTabMoreOption, CommonRouteTabOption } from '~/types'
|
import type { RouteLocationRaw } from 'vue-router'
|
||||||
|
|
||||||
const { options, command, replace, preventScrollTop = false, moreOptions } = defineProps<{
|
export interface CommonRouteTabOption {
|
||||||
|
to: RouteLocationRaw
|
||||||
|
display: string
|
||||||
|
disabled?: boolean
|
||||||
|
name?: string
|
||||||
|
icon?: string
|
||||||
|
hide?: boolean
|
||||||
|
}
|
||||||
|
const { options, command, replace, preventScrollTop = false } = $defineProps<{
|
||||||
options: CommonRouteTabOption[]
|
options: CommonRouteTabOption[]
|
||||||
moreOptions?: CommonRouteTabMoreOption
|
|
||||||
command?: boolean
|
command?: boolean
|
||||||
replace?: boolean
|
replace?: boolean
|
||||||
preventScrollTop?: boolean
|
preventScrollTop?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const { t } = useI18n()
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
useCommands(() => command
|
useCommands(() => command
|
||||||
? options.map(tab => ({
|
? options.map(tab => ({
|
||||||
scope: 'Tabs',
|
scope: 'Tabs',
|
||||||
|
|
||||||
name: tab.display,
|
name: tab.display,
|
||||||
icon: tab.icon ?? 'i-ri:file-list-2-line',
|
icon: tab.icon ?? 'i-ri:file-list-2-line',
|
||||||
onActivate: () => router.replace(tab.to),
|
onActivate: () => router.replace(tab.to),
|
||||||
|
@ -33,7 +40,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="0"
|
tabindex="1"
|
||||||
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()"
|
||||||
|
@ -44,43 +51,5 @@ 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="isHydrated && moreOptions?.options?.length">
|
|
||||||
<CommonDropdown placement="bottom" flex cursor-pointer mx-1.25rem>
|
|
||||||
<CommonTooltip placement="top" no-auto-focus :content="moreOptions.tooltip || t('action.more')">
|
|
||||||
<button
|
|
||||||
cursor-pointer
|
|
||||||
flex
|
|
||||||
gap-1
|
|
||||||
w-12
|
|
||||||
rounded
|
|
||||||
hover:bg-active
|
|
||||||
btn-action-icon
|
|
||||||
op75
|
|
||||||
px4
|
|
||||||
group
|
|
||||||
:aria-label="t('action.more')"
|
|
||||||
:class="moreOptions.match ? 'text-primary' : 'text-secondary'"
|
|
||||||
>
|
|
||||||
<span v-if="moreOptions.icon" :class="moreOptions.icon" text-sm me--1 block />
|
|
||||||
<span i-ri:arrow-down-s-line text-sm me--1 block />
|
|
||||||
</button>
|
|
||||||
</CommonTooltip>
|
|
||||||
<template #popper>
|
|
||||||
<NuxtLink
|
|
||||||
v-for="(option, index) in moreOptions.options.filter(item => !item.hide)"
|
|
||||||
:key="option?.name || index"
|
|
||||||
:to="option.to"
|
|
||||||
>
|
|
||||||
<CommonDropdownItem>
|
|
||||||
<span flex="~ row" gap-x-4 items-center :class="option.match ? 'text-primary' : ''">
|
|
||||||
<span v-if="option.icon" :class="[option.icon, option.match ? 'text-primary' : 'text.secondary']" text-md me--1 block />
|
|
||||||
<span v-else block> </span>
|
|
||||||
<span>{{ option.display }}</span>
|
|
||||||
</span>
|
|
||||||
</CommonDropdownItem>
|
|
||||||
</NuxtLink>
|
|
||||||
</template>
|
|
||||||
</commondropdown>
|
|
||||||
</template>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -1,9 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const { as = 'div', active } = defineProps<{
|
const { as = 'div', active } = defineProps<{ as: any; active: boolean }>()
|
||||||
as: any
|
|
||||||
active: boolean
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const el = ref()
|
const el = ref()
|
||||||
|
|
||||||
watch(() => active, (active) => {
|
watch(() => active, (active) => {
|
||||||
|
|
|
@ -8,9 +8,11 @@ const { options, command } = defineProps<{
|
||||||
command?: boolean
|
command?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const modelValue = defineModel<string>({ required: true })
|
const { modelValue } = defineModels<{
|
||||||
|
modelValue: string
|
||||||
|
}>()
|
||||||
|
|
||||||
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 }
|
||||||
|
@ -19,12 +21,12 @@ const tabs = computed(() => {
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
function toValidName(option: string) {
|
function toValidName(otpion: string) {
|
||||||
return option.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-')
|
return otpion.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-')
|
||||||
}
|
}
|
||||||
|
|
||||||
useCommands(() => command
|
useCommands(() => command
|
||||||
? tabs.value.map(tab => ({
|
? tabs.map(tab => ({
|
||||||
scope: 'Tabs',
|
scope: 'Tabs',
|
||||||
|
|
||||||
name: tab.display,
|
name: tab.display,
|
||||||
|
@ -49,7 +51,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="0"
|
tabindex="1"
|
||||||
hover:bg-active transition-100
|
hover:bg-active transition-100
|
||||||
@keypress.enter="modelValue = option.name"
|
@keypress.enter="modelValue = option.name"
|
||||||
><span
|
><span
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { Popper as VTooltipType } from 'floating-vue'
|
import type { Popper as VTooltipType } from 'floating-vue/dist'
|
||||||
|
|
||||||
export interface Props extends Partial<typeof VTooltipType> {
|
export interface Props extends Partial<typeof VTooltipType> {
|
||||||
content?: string
|
content?: string
|
||||||
|
@ -10,7 +10,6 @@ defineProps<Props>()
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<VTooltip
|
<VTooltip
|
||||||
v-if="isHydrated"
|
|
||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
auto-hide
|
auto-hide
|
||||||
>
|
>
|
||||||
|
|
|
@ -4,20 +4,20 @@ 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.value.reduce((total: number, item) => total + (Number(item.accounts) || 0), 0),
|
ongoingHot.reduce((total: number, item) => total + (Number(item.accounts) || 0), 0),
|
||||||
)
|
)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<p>
|
<p>
|
||||||
{{ $t('command.n_people_in_the_past_n_days', [people, maxDay]) }}
|
{{ $t('command.n-people-in-the-past-n-days', [people, maxDay]) }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -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)
|
||||||
|
|
|
@ -1,18 +1,18 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
defineOptions({
|
|
||||||
inheritAttrs: false,
|
|
||||||
})
|
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
count: number
|
count: number
|
||||||
keypath: string
|
keypath: string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
inheritAttrs: false,
|
||||||
|
})
|
||||||
|
|
||||||
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.value.hide()
|
return dropdown.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.value, (langMap[props.lang] || props.lang) as any) : raw
|
return props.lang ? highlightCode(raw, (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,8 +1,8 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { mastodon } from 'masto'
|
import type { Paginator, mastodon } from 'masto'
|
||||||
|
|
||||||
const { paginator } = defineProps<{
|
const { paginator } = defineProps<{
|
||||||
paginator: mastodon.Paginator<mastodon.v1.Conversation[], mastodon.DefaultPaginationParams>
|
paginator: Paginator<mastodon.v1.Conversation[], mastodon.DefaultPaginationParams>
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
function preprocess(items: mastodon.v1.Conversation[]): mastodon.v1.Conversation[] {
|
function preprocess(items: mastodon.v1.Conversation[]): mastodon.v1.Conversation[] {
|
||||||
|
|
|
@ -1,30 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
const { as, alt, dataEmojiId } = defineProps<{
|
|
||||||
as: string
|
|
||||||
alt?: string
|
|
||||||
dataEmojiId?: string
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const title = ref<string | undefined>()
|
|
||||||
|
|
||||||
if (alt) {
|
|
||||||
if (alt.startsWith(':')) {
|
|
||||||
title.value = alt.replace(/:/g, '')
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
import('node-emoji').then(({ find }) => {
|
|
||||||
title.value = find(alt)?.key.replace(/_/g, ' ')
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// if it has a data-emoji-id, use that as the title instead
|
|
||||||
if (dataEmojiId)
|
|
||||||
title.value = dataEmojiId
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<component :is="as" v-bind="$attrs" :alt="alt" :data-emoji-id="dataEmojiId" :title="title">
|
|
||||||
<slot />
|
|
||||||
</component>
|
|
||||||
</template>
|
|
|
@ -2,14 +2,12 @@
|
||||||
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 v-auto-focus type="button" btn-action-icon absolute top--8 right-0 m1 aria-label="Close" @click="emit('close')">
|
<button btn-action-icon absolute top--8 right-0 m1 aria-label="Close" @click="emit('close')">
|
||||||
<span i-ri:close-line />
|
<div 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">
|
||||||
|
@ -30,12 +28,10 @@ const vAutoFocus = (el: HTMLElement) => el.focus()
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
{{ $t('help.desc_para6') }}
|
{{ $t('help.desc_para6') }}
|
||||||
</p>
|
</p>
|
||||||
<NuxtLink hover:text-primary href="https://github.com/sponsors/elk-zone" target="_blank">
|
|
||||||
{{ $t('help.desc_para3') }}
|
{{ $t('help.desc_para3') }}
|
||||||
</NuxtLink>
|
<p flex="~ gap-2 wrap" mxa>
|
||||||
<p flex="~ gap-2 wrap justify-center" mxa>
|
|
||||||
<template v-for="team of elkTeamMembers" :key="team.github">
|
<template v-for="team of elkTeamMembers" :key="team.github">
|
||||||
<NuxtLink :href="team.link" target="_blank" external rounded-full transition duration-300 border="~ transparent" hover="scale-105 border-primary">
|
<NuxtLink :href="`https://github.com/sponsors/${team.github}`" target="_blank" external rounded-full transition duration-300 border="~ transparent" hover="scale-105 border-primary">
|
||||||
<img :src="`/avatars/${team.github}-100x100.png`" :alt="team.display" rounded-full w-15 h-15 height="60" width="60">
|
<img :src="`/avatars/${team.github}-100x100.png`" :alt="team.display" rounded-full w-15 h-15 height="60" width="60">
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</template>
|
</template>
|
||||||
|
@ -46,7 +42,7 @@ const vAutoFocus = (el: HTMLElement) => el.focus()
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<button type="button" btn-solid mxa @click="emit('close')">
|
<button btn-solid mxa tabindex="2" @click="emit('close')">
|
||||||
{{ $t('action.enter_app') }}
|
{{ $t('action.enter_app') }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -16,8 +16,8 @@ const isRemoved = ref(false)
|
||||||
async function edit() {
|
async function edit() {
|
||||||
try {
|
try {
|
||||||
isRemoved.value
|
isRemoved.value
|
||||||
? await client.v1.lists.$select(list).accounts.create({ accountIds: [account.id] })
|
? await client.v1.lists.addAccount(list, { accountIds: [account.id] })
|
||||||
: await client.v1.lists.$select(list).accounts.remove({ accountIds: [account.id] })
|
: await client.v1.lists.removeAccount(list, { accountIds: [account.id] })
|
||||||
isRemoved.value = !isRemoved.value
|
isRemoved.value = !isRemoved.value
|
||||||
}
|
}
|
||||||
catch (err) {
|
catch (err) {
|
||||||
|
|
|
@ -6,7 +6,9 @@ const emit = defineEmits<{
|
||||||
(e: 'listUpdated', list: mastodon.v1.List): void
|
(e: 'listUpdated', list: mastodon.v1.List): void
|
||||||
(e: 'listRemoved', id: string): void
|
(e: 'listRemoved', id: string): void
|
||||||
}>()
|
}>()
|
||||||
const list = defineModel<mastodon.v1.List>({ required: true })
|
const { list } = defineModels<{
|
||||||
|
list: mastodon.v1.List
|
||||||
|
}>()
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
const client = useMastoClient()
|
const client = useMastoClient()
|
||||||
|
@ -15,23 +17,23 @@ const { form, isDirty, submitter, reset } = useForm({
|
||||||
form: () => ({ ...list.value }),
|
form: () => ({ ...list.value }),
|
||||||
})
|
})
|
||||||
|
|
||||||
const isEditing = ref<boolean>(false)
|
let isEditing = $ref<boolean>(false)
|
||||||
const deleting = ref<boolean>(false)
|
let deleting = $ref<boolean>(false)
|
||||||
const actionError = ref<string | undefined>(undefined)
|
let 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.value = true
|
isEditing = true
|
||||||
actionError.value = undefined
|
actionError = undefined
|
||||||
await nextTick()
|
await nextTick()
|
||||||
input.value?.focus()
|
input.value?.focus()
|
||||||
}
|
}
|
||||||
async function cancelEdit() {
|
async function cancelEdit() {
|
||||||
isEditing.value = false
|
isEditing = false
|
||||||
actionError.value = undefined
|
actionError = undefined
|
||||||
reset()
|
reset()
|
||||||
|
|
||||||
await nextTick()
|
await nextTick()
|
||||||
|
@ -40,59 +42,58 @@ async function cancelEdit() {
|
||||||
|
|
||||||
const { submit, submitting } = submitter(async () => {
|
const { submit, submitting } = submitter(async () => {
|
||||||
try {
|
try {
|
||||||
list.value = await client.v1.lists.$select(form.id).update({
|
list.value = await client.v1.lists.update(form.id, {
|
||||||
title: form.title,
|
title: form.title,
|
||||||
})
|
})
|
||||||
cancelEdit()
|
cancelEdit()
|
||||||
}
|
}
|
||||||
catch (err) {
|
catch (err) {
|
||||||
console.error(err)
|
console.error(err)
|
||||||
actionError.value = (err as Error).message
|
actionError = (err as Error).message
|
||||||
await nextTick()
|
await nextTick()
|
||||||
input.value?.focus()
|
input.value?.focus()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
async function removeList() {
|
async function removeList() {
|
||||||
if (deleting.value)
|
if (deleting)
|
||||||
return
|
return
|
||||||
|
|
||||||
const confirmDelete = await openConfirmDialog({
|
const confirmDelete = await openConfirmDialog({
|
||||||
title: t('confirm.delete_list.title'),
|
title: t('confirm.delete_list.title', [list.value.title]),
|
||||||
description: t('confirm.delete_list.description', [list.value.title]),
|
|
||||||
confirm: t('confirm.delete_list.confirm'),
|
confirm: t('confirm.delete_list.confirm'),
|
||||||
cancel: t('confirm.delete_list.cancel'),
|
cancel: t('confirm.delete_list.cancel'),
|
||||||
})
|
})
|
||||||
|
|
||||||
deleting.value = true
|
deleting = true
|
||||||
actionError.value = undefined
|
actionError = undefined
|
||||||
await nextTick()
|
await nextTick()
|
||||||
|
|
||||||
if (confirmDelete.choice === 'confirm') {
|
if (confirmDelete === 'confirm') {
|
||||||
await nextTick()
|
await nextTick()
|
||||||
try {
|
try {
|
||||||
await client.v1.lists.$select(list.value.id).remove()
|
await client.v1.lists.remove(list.value.id)
|
||||||
emit('listRemoved', list.value.id)
|
emit('listRemoved', list.value.id)
|
||||||
}
|
}
|
||||||
catch (err) {
|
catch (err) {
|
||||||
console.error(err)
|
console.error(err)
|
||||||
actionError.value = (err as Error).message
|
actionError = (err as Error).message
|
||||||
await nextTick()
|
await nextTick()
|
||||||
deleteBtn.value?.focus()
|
deleteBtn.value?.focus()
|
||||||
}
|
}
|
||||||
finally {
|
finally {
|
||||||
deleting.value = false
|
deleting = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
deleting.value = false
|
deleting = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function clearError() {
|
async function clearError() {
|
||||||
actionError.value = undefined
|
actionError = undefined
|
||||||
await nextTick()
|
await nextTick()
|
||||||
if (isEditing.value)
|
if (isEditing)
|
||||||
input.value?.focus()
|
input.value?.focus()
|
||||||
else
|
else
|
||||||
deleteBtn.value?.focus()
|
deleteBtn.value?.focus()
|
||||||
|
|
|
@ -3,9 +3,9 @@ const { userId } = defineProps<{
|
||||||
userId: string
|
userId: string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const { client } = useMasto()
|
const { client } = $(useMasto())
|
||||||
const paginator = client.value.v1.lists.list()
|
const paginator = client.v1.lists.list()
|
||||||
const listsWithUser = ref((await client.value.v1.accounts.$select(userId).lists.list()).map(list => list.id))
|
const listsWithUser = ref((await client.v1.accounts.listLists(userId)).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.value.v1.lists.$select(listId).accounts.create({ accountIds: [userId] })
|
await client.v1.lists.addAccount(listId, { accountIds: [userId] })
|
||||||
listsWithUser.value.push(listId)
|
listsWithUser.value.push(listId)
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
await client.value.v1.lists.$select(listId).accounts.remove({ accountIds: [userId] })
|
await client.v1.lists.removeAccount(listId, { accountIds: [userId] })
|
||||||
listsWithUser.value = listsWithUser.value.filter(id => id !== listId)
|
listsWithUser.value = listsWithUser.value.filter(id => id !== listId)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -21,10 +21,7 @@ interface ShortcutItemGroup {
|
||||||
items: ShortcutItem[]
|
items: ShortcutItem[]
|
||||||
}
|
}
|
||||||
|
|
||||||
const isMac = useIsMac()
|
const shortcutItemGroups: ShortcutItemGroup[] = [
|
||||||
const modifierKeyName = computed(() => isMac.value ? '⌘' : 'Ctrl')
|
|
||||||
|
|
||||||
const shortcutItemGroups = computed<ShortcutItemGroup[]>(() => [
|
|
||||||
{
|
{
|
||||||
name: t('magic_keys.groups.navigation.title'),
|
name: t('magic_keys.groups.navigation.title'),
|
||||||
items: [
|
items: [
|
||||||
|
@ -40,10 +37,6 @@ const shortcutItemGroups = computed<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 },
|
||||||
|
@ -52,63 +45,19 @@ const shortcutItemGroups = computed<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 },
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: t('magic_keys.groups.actions.title'),
|
name: t('magic_keys.groups.actions.title'),
|
||||||
items: [
|
items: [
|
||||||
{
|
|
||||||
description: t('magic_keys.groups.actions.search'),
|
|
||||||
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.value, '/'], isSequence: false },
|
shortcut: { keys: ['cmd', '/'], 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 },
|
||||||
|
@ -123,7 +72,7 @@ const shortcutItemGroups = computed<ShortcutItemGroup[]>(() => [
|
||||||
name: t('magic_keys.groups.media.title'),
|
name: t('magic_keys.groups.media.title'),
|
||||||
items: [],
|
items: [],
|
||||||
},
|
},
|
||||||
])
|
]
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -10,7 +10,6 @@ defineProps<{
|
||||||
|
|
||||||
const container = ref()
|
const container = ref()
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const userSettings = useUserSettings()
|
|
||||||
const { height: windowHeight } = useWindowSize()
|
const { height: windowHeight } = useWindowSize()
|
||||||
const { height: containerHeight } = useElementBounding(container)
|
const { height: containerHeight } = useElementBounding(container)
|
||||||
const wideLayout = computed(() => route.meta.wideLayout ?? false)
|
const wideLayout = computed(() => route.meta.wideLayout ?? false)
|
||||||
|
@ -27,13 +26,10 @@ const containerClass = computed(() => {
|
||||||
<template>
|
<template>
|
||||||
<div ref="container" :class="containerClass">
|
<div ref="container" :class="containerClass">
|
||||||
<div
|
<div
|
||||||
sticky top-0 z10
|
sticky top-0 z10 backdrop-blur
|
||||||
pt="[env(safe-area-inset-top,0)]"
|
pt="[env(safe-area-inset-top,0)]"
|
||||||
bg="[rgba(var(--rgb-bg-base),0.7)]"
|
bg="[rgba(var(--rgb-bg-base),0.7)]"
|
||||||
class="native:lg:w-[calc(100vw-5rem)] native:xl:w-[calc(135%+(100vw-1200px)/2)]"
|
class="native:lg:w-[calc(100vw-5rem)] native:xl:w-[calc(135%+(100vw-1200px)/2)]"
|
||||||
:class="{
|
|
||||||
'backdrop-blur': !getPreferences(userSettings, 'optimizeForLowPerformanceDevice'),
|
|
||||||
}"
|
|
||||||
>
|
>
|
||||||
<div flex justify-between px5 py2 :class="{ 'xl:hidden': $route.name !== 'tag' }" class="native:xl:flex" border="b base">
|
<div flex justify-between px5 py2 :class="{ 'xl:hidden': $route.name !== 'tag' }" class="native:xl:flex" border="b base">
|
||||||
<div flex gap-3 items-center :overflow-hidden="!noOverflowHidden ? '' : false" py2 w-full>
|
<div flex gap-3 items-center :overflow-hidden="!noOverflowHidden ? '' : false" py2 w-full>
|
||||||
|
@ -44,7 +40,7 @@ const containerClass = computed(() => {
|
||||||
>
|
>
|
||||||
<div i-ri:arrow-left-line class="rtl-flip" />
|
<div i-ri:arrow-left-line class="rtl-flip" />
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<div :truncate="!noOverflowHidden ? '' : false" flex w-full data-tauri-drag-region class="native-mac:justify-start native-mac:text-center">
|
<div :truncate="!noOverflowHidden ? '' : false" flex w-full data-tauri-drag-region class="native-mac:justify-center native-mac:text-center native-mac:sm:justify-start">
|
||||||
<slot name="title" />
|
<slot name="title" />
|
||||||
</div>
|
</div>
|
||||||
<div sm:hidden h-7 w-1px />
|
<div sm:hidden h-7 w-1px />
|
||||||
|
|
|
@ -1,45 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
const model = defineModel<number>()
|
|
||||||
const isValid = defineModel<boolean>('isValid')
|
|
||||||
|
|
||||||
const days = ref<number | ''>(0)
|
|
||||||
const hours = ref<number | ''>(1)
|
|
||||||
const minutes = ref<number | ''>(0)
|
|
||||||
|
|
||||||
watchEffect(() => {
|
|
||||||
if (days.value === '' || hours.value === '' || minutes.value === '') {
|
|
||||||
isValid.value = false
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const duration
|
|
||||||
= days.value * 24 * 60 * 60
|
|
||||||
+ hours.value * 60 * 60
|
|
||||||
+ minutes.value * 60
|
|
||||||
|
|
||||||
if (duration <= 0) {
|
|
||||||
isValid.value = false
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
isValid.value = true
|
|
||||||
model.value = duration
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div flex flex-grow-0 gap-2>
|
|
||||||
<label flex items-center gap-2>
|
|
||||||
<input v-model="days" type="number" min="0" max="1999" input-base :class="!isValid ? 'input-error' : null">
|
|
||||||
{{ $t('confirm.mute_account.days', days === '' ? 0 : days) }}
|
|
||||||
</label>
|
|
||||||
<label flex items-center gap-2>
|
|
||||||
<input v-model="hours" type="number" min="0" max="24" input-base :class="!isValid ? 'input-error' : null">
|
|
||||||
{{ $t('confirm.mute_account.hours', hours === '' ? 0 : hours) }}
|
|
||||||
</label>
|
|
||||||
<label flex items-center gap-2>
|
|
||||||
<input v-model="minutes" type="number" min="0" max="59" step="5" input-base :class="!isValid ? 'input-error' : null">
|
|
||||||
{{ $t('confirm.mute_account.minute', minutes === '' ? 0 : minutes) }}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
|
@ -1,55 +1,26 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { ConfirmDialogChoice, ConfirmDialogOptions } from '~/types'
|
import type { ConfirmDialogChoice, ConfirmDialogLabel } from '~/types'
|
||||||
import DurationPicker from '~/components/modal/DurationPicker.vue'
|
|
||||||
|
|
||||||
const props = defineProps<ConfirmDialogOptions>()
|
defineProps<ConfirmDialogLabel>()
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
(evt: 'choice', choice: ConfirmDialogChoice): void
|
(evt: 'choice', choice: ConfirmDialogChoice): void
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const hasDuration = ref(false)
|
|
||||||
const isValidDuration = ref(true)
|
|
||||||
const duration = ref(60 * 60) // default to 1 hour
|
|
||||||
const shouldMuteNotifications = ref(true)
|
|
||||||
const isMute = computed(() => props.extraOptionType === 'mute')
|
|
||||||
|
|
||||||
function handleChoice(choice: ConfirmDialogChoice['choice']) {
|
|
||||||
const dialogChoice = {
|
|
||||||
choice,
|
|
||||||
...isMute.value && {
|
|
||||||
extraOptions: {
|
|
||||||
mute: {
|
|
||||||
duration: hasDuration.value ? duration.value : 0,
|
|
||||||
notifications: shouldMuteNotifications.value,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
emit('choice', dialogChoice)
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div flex="~ col" gap-6>
|
<div flex="~ col" gap-6>
|
||||||
<div font-bold text-lg>
|
<div font-bold text-lg text-center>
|
||||||
{{ title }}
|
{{ title }}
|
||||||
</div>
|
</div>
|
||||||
<div v-if="description">
|
<div v-if="description">
|
||||||
{{ description }}
|
{{ description }}
|
||||||
</div>
|
</div>
|
||||||
<div v-if="isMute" flex-col flex gap-4>
|
|
||||||
<CommonCheckbox v-model="hasDuration" :label="$t('confirm.mute_account.specify_duration')" prepend-checkbox checked-icon-color="text-primary" />
|
|
||||||
<DurationPicker v-if="hasDuration" v-model="duration" v-model:is-valid="isValidDuration" />
|
|
||||||
<CommonCheckbox v-model="shouldMuteNotifications" :label="$t('confirm.mute_account.notifications')" prepend-checkbox checked-icon-color="text-primary" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div flex justify-end gap-2>
|
<div flex justify-end gap-2>
|
||||||
<button btn-text @click="handleChoice('cancel')">
|
<button btn-text @click="emit('choice', 'cancel')">
|
||||||
{{ cancel || $t('confirm.common.cancel') }}
|
{{ cancel || $t('confirm.common.cancel') }}
|
||||||
</button>
|
</button>
|
||||||
<button btn-solid :disabled="!isValidDuration" @click="handleChoice('confirm')">
|
<button btn-solid @click="emit('choice', 'confirm')">
|
||||||
{{ confirm || $t('confirm.common.confirm') }}
|
{{ confirm || $t('confirm.common.confirm') }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -11,7 +11,6 @@ import {
|
||||||
isMediaPreviewOpen,
|
isMediaPreviewOpen,
|
||||||
isPreviewHelpOpen,
|
isPreviewHelpOpen,
|
||||||
isPublishDialogOpen,
|
isPublishDialogOpen,
|
||||||
isReportDialogOpen,
|
|
||||||
isSigninDialogOpen,
|
isSigninDialogOpen,
|
||||||
} from '~/composables/dialog'
|
} from '~/composables/dialog'
|
||||||
|
|
||||||
|
@ -103,8 +102,5 @@ function handleFavouritedBoostedByClose() {
|
||||||
<ModalDialog v-model="isKeyboardShortcutsDialogOpen" max-w-full sm:max-w-140 md:max-w-170 lg:max-w-220 md:min-w-160>
|
<ModalDialog v-model="isKeyboardShortcutsDialogOpen" max-w-full sm:max-w-140 md:max-w-170 lg:max-w-220 md:min-w-160>
|
||||||
<MagickeysKeyboardShortcuts @close="closeKeyboardShortcuts()" />
|
<MagickeysKeyboardShortcuts @close="closeKeyboardShortcuts()" />
|
||||||
</ModalDialog>
|
</ModalDialog>
|
||||||
<ModalDialog v-model="isReportDialogOpen" keep-alive max-w-175>
|
|
||||||
<ReportModal v-if="reportAccount" :account="reportAccount" :status="reportStatus" @close="closeReportDialog()" />
|
|
||||||
</ModalDialog>
|
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -36,10 +36,6 @@ export interface Props {
|
||||||
dialogLabelledBy?: string
|
dialogLabelledBy?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
defineOptions({
|
|
||||||
inheritAttrs: false,
|
|
||||||
})
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
zIndex: 100,
|
zIndex: 100,
|
||||||
closeByMask: true,
|
closeByMask: true,
|
||||||
|
@ -49,14 +45,20 @@ const props = withDefaults(defineProps<Props>(), {
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
/** v-model dialog visibility */
|
/** v-model dialog visibility */
|
||||||
(event: 'close'): void
|
(event: 'close',): void
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const visible = defineModel<boolean>({ required: true })
|
const { modelValue: visible } = defineModels<{
|
||||||
|
/** v-model dislog visibility */
|
||||||
|
modelValue: boolean
|
||||||
|
}>()
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
inheritAttrs: false,
|
||||||
|
})
|
||||||
|
|
||||||
const deactivated = useDeactivated()
|
const deactivated = useDeactivated()
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const userSettings = useUserSettings()
|
|
||||||
|
|
||||||
/** scrollable HTML element */
|
/** scrollable HTML element */
|
||||||
const elDialogMain = ref<HTMLDivElement>()
|
const elDialogMain = ref<HTMLDivElement>()
|
||||||
|
@ -78,8 +80,6 @@ defineExpose({
|
||||||
|
|
||||||
/** close the dialog */
|
/** close the dialog */
|
||||||
function close() {
|
function close() {
|
||||||
if (!visible.value)
|
|
||||||
return
|
|
||||||
visible.value = false
|
visible.value = false
|
||||||
emit('close')
|
emit('close')
|
||||||
}
|
}
|
||||||
|
@ -157,13 +157,7 @@ useEventListener('keydown', (e: KeyboardEvent) => {
|
||||||
<!-- corresponding to issue: #106, so please don't remove it. -->
|
<!-- corresponding to issue: #106, so please don't remove it. -->
|
||||||
|
|
||||||
<!-- Mask layer: blur -->
|
<!-- Mask layer: blur -->
|
||||||
<div
|
<div class="dialog-mask" absolute inset-0 z-0 bg-transparent opacity-100 backdrop-filter backdrop-blur-sm touch-none />
|
||||||
class="dialog-mask"
|
|
||||||
:class="{
|
|
||||||
'backdrop-blur-sm': !getPreferences(userSettings, 'optimizeForLowPerformanceDevice'),
|
|
||||||
}"
|
|
||||||
absolute inset-0 z-0 bg-transparent opacity-100 backdrop-filter touch-none
|
|
||||||
/>
|
|
||||||
<!-- Mask layer: dimming -->
|
<!-- Mask layer: dimming -->
|
||||||
<div class="dialog-mask" absolute inset-0 z-0 bg-black opacity-48 touch-none h="[calc(100%+0.5px)]" @click="clickMask" />
|
<div class="dialog-mask" absolute inset-0 z-0 bg-black opacity-48 touch-none h="[calc(100%+0.5px)]" @click="clickMask" />
|
||||||
<!-- Dialog container -->
|
<!-- Dialog container -->
|
||||||
|
|
|
@ -37,7 +37,7 @@ onUnmounted(() => locked.value = false)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div relative h-full w-full flex pt-12 @click="onClick">
|
<div relative h-full w-full flex pt-12 w-100vh @click="onClick">
|
||||||
<button
|
<button
|
||||||
v-if="hasNext" pointer-events-auto btn-action-icon bg="black/20" :aria-label="$t('action.previous')"
|
v-if="hasNext" pointer-events-auto btn-action-icon bg="black/20" :aria-label="$t('action.previous')"
|
||||||
hover:bg="black/40" dark:bg="white/30" dark-hover:bg="white/20" absolute top="1/2" right-1 z5
|
hover:bg="black/40" dark:bg="white/30" dark-hover:bg="white/20" absolute top="1/2" right-1 z5
|
||||||
|
@ -53,10 +53,11 @@ onUnmounted(() => locked.value = false)
|
||||||
<div i-ri:arrow-left-s-line text-white />
|
<div i-ri:arrow-left-s-line text-white />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div flex="~ col center" h-full w-full>
|
<div flex flex-row items-center mxa>
|
||||||
|
<div flex="~ col center" max-h-full max-w-full>
|
||||||
<ModalMediaPreviewCarousel v-model="index" :media="mediaPreviewList" @close="emit('close')" />
|
<ModalMediaPreviewCarousel v-model="index" :media="mediaPreviewList" @close="emit('close')" />
|
||||||
|
|
||||||
<div bg="black/30" dark:bg="white/10" mb-6 mt-4 text-white rounded-full flex="~ center shrink-0" overflow-hidden>
|
<div bg="black/30" dark:bg="white/10" ms-4 mb-6 mt-4 text-white rounded-full flex="~ center shrink-0" overflow-hidden>
|
||||||
<div v-if="mediaPreviewList.length > 1" p="y-1 x-3" rounded-r-0 shrink-0>
|
<div v-if="mediaPreviewList.length > 1" p="y-1 x-3" rounded-r-0 shrink-0>
|
||||||
{{ index + 1 }} / {{ mediaPreviewList.length }}
|
{{ index + 1 }} / {{ mediaPreviewList.length }}
|
||||||
</div>
|
</div>
|
||||||
|
@ -68,6 +69,7 @@ onUnmounted(() => locked.value = false)
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div absolute top-0 w-full flex justify-end>
|
<div absolute top-0 w-full flex justify-end>
|
||||||
<button
|
<button
|
||||||
|
|
|
@ -1,285 +1,104 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { Vector2 } from '@vueuse/gesture'
|
|
||||||
import { useGesture } from '@vueuse/gesture'
|
import { useGesture } from '@vueuse/gesture'
|
||||||
|
import type { PermissiveMotionProperties } from '@vueuse/motion'
|
||||||
import { useReducedMotion } from '@vueuse/motion'
|
import { useReducedMotion } from '@vueuse/motion'
|
||||||
import type { mastodon } from 'masto'
|
import type { mastodon } from 'masto'
|
||||||
|
|
||||||
const { media = [] } = defineProps<{
|
const { media = [], threshold = 20 } = defineProps<{
|
||||||
media?: mastodon.v1.MediaAttachment[]
|
media?: mastodon.v1.MediaAttachment[]
|
||||||
|
threshold?: number
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
(event: 'close'): void
|
(event: 'close'): void
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const modelValue = defineModel<number>({ required: true })
|
const { modelValue } = defineModels<{
|
||||||
|
modelValue: number
|
||||||
|
}>()
|
||||||
|
|
||||||
const slideGap = 20
|
const target = ref()
|
||||||
const doubleTapThreshold = 250
|
|
||||||
|
|
||||||
const view = ref()
|
const animateTimeout = useTimeout(10)
|
||||||
const slider = ref()
|
const reduceMotion = process.server ? ref(false) : useReducedMotion()
|
||||||
const slide = ref()
|
|
||||||
const image = ref()
|
|
||||||
|
|
||||||
const reduceMotion = import.meta.server ? ref(false) : useReducedMotion()
|
const canAnimate = computed(() => !reduceMotion.value && animateTimeout.value)
|
||||||
const isInitialScrollDone = useTimeout(350)
|
|
||||||
const canAnimate = computed(() => isInitialScrollDone.value && !reduceMotion.value)
|
|
||||||
|
|
||||||
const scale = ref(1)
|
const { motionProperties } = useMotionProperties(target, {
|
||||||
const x = ref(0)
|
cursor: 'grab',
|
||||||
const y = ref(0)
|
scale: 1,
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
})
|
||||||
|
const { set } = useSpring(motionProperties as Partial<PermissiveMotionProperties>)
|
||||||
|
|
||||||
const isDragging = ref(false)
|
function resetZoom() {
|
||||||
const isPinching = ref(false)
|
set({ scale: 1 })
|
||||||
|
|
||||||
const maxZoomOut = ref(1)
|
|
||||||
const isZoomedIn = computed(() => scale.value > 1)
|
|
||||||
|
|
||||||
const enableAutoplay = usePreferences('enableAutoplay')
|
|
||||||
|
|
||||||
function goToFocusedSlide() {
|
|
||||||
scale.value = 1
|
|
||||||
x.value = slide.value[modelValue.value].offsetLeft * scale.value
|
|
||||||
y.value = 0
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
watch(modelValue, resetZoom)
|
||||||
const slideGapAsScale = slideGap / view.value.clientWidth
|
|
||||||
maxZoomOut.value = 1 - slideGapAsScale
|
|
||||||
|
|
||||||
goToFocusedSlide()
|
const { width, height } = useElementSize(target)
|
||||||
|
const { isSwiping, lengthX, lengthY, direction } = useSwipe(target, {
|
||||||
|
threshold: 5,
|
||||||
|
passive: false,
|
||||||
|
onSwipeEnd(e, direction) {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-use-before-define
|
||||||
|
if (direction === 'right' && Math.abs(distanceX.value) > threshold) {
|
||||||
|
modelValue.value = Math.max(0, modelValue.value - 1)
|
||||||
|
resetZoom()
|
||||||
|
}
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-use-before-define
|
||||||
|
if (direction === 'left' && Math.abs(distanceX.value) > threshold) {
|
||||||
|
modelValue.value = Math.min(media.length - 1, modelValue.value + 1)
|
||||||
|
resetZoom()
|
||||||
|
}
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-use-before-define
|
||||||
|
if (direction === 'up' && Math.abs(distanceY.value) > threshold)
|
||||||
|
emit('close')
|
||||||
|
},
|
||||||
})
|
})
|
||||||
watch(modelValue, goToFocusedSlide)
|
|
||||||
|
|
||||||
let lastOrigin = [0, 0]
|
|
||||||
let initialScale = 0
|
|
||||||
useGesture({
|
useGesture({
|
||||||
onPinch({ first, initial: [initialDistance], movement: [deltaDistance], da: [distance], origin, touches }) {
|
onPinch({ offset: [distance, _angle] }) {
|
||||||
isPinching.value = true
|
set({ scale: Math.max(0.5, 1 + distance / 200) })
|
||||||
|
|
||||||
if (first) {
|
|
||||||
initialScale = scale.value
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
if (touches === 0)
|
|
||||||
handleMouseWheelZoom(initialScale, deltaDistance, origin)
|
|
||||||
else
|
|
||||||
handlePinchZoom(initialScale, initialDistance, distance, origin)
|
|
||||||
}
|
|
||||||
|
|
||||||
lastOrigin = origin
|
|
||||||
},
|
},
|
||||||
onPinchEnd() {
|
onMove({ movement: [x, y], dragging, pinching }) {
|
||||||
isPinching.value = false
|
if (dragging && !pinching)
|
||||||
isDragging.value = false
|
set({ x, y })
|
||||||
|
|
||||||
if (!isZoomedIn.value)
|
|
||||||
goToFocusedSlide()
|
|
||||||
},
|
|
||||||
onDrag({ movement, delta, pinching, tap, last, swipe, event, xy }) {
|
|
||||||
event.preventDefault()
|
|
||||||
|
|
||||||
if (pinching)
|
|
||||||
return
|
|
||||||
|
|
||||||
if (last)
|
|
||||||
handleLastDrag(tap, swipe, movement, xy)
|
|
||||||
else
|
|
||||||
handleDrag(delta, movement)
|
|
||||||
},
|
},
|
||||||
}, {
|
}, {
|
||||||
domTarget: view,
|
domTarget: target,
|
||||||
eventOptions: {
|
eventOptions: {
|
||||||
passive: false,
|
passive: true,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
const shiftRestrictions = computed(() => {
|
const distanceX = computed(() => {
|
||||||
const focusedImage = image.value[modelValue.value]
|
if (width.value === 0)
|
||||||
const focusedSlide = slide.value[modelValue.value]
|
return 0
|
||||||
|
|
||||||
const scaledImageWidth = focusedImage.offsetWidth * scale.value
|
if (!isSwiping.value || (direction.value !== 'left' && direction.value !== 'right'))
|
||||||
const scaledHorizontalOverflow = scaledImageWidth / 2 - view.value.clientWidth / 2 + slideGap
|
return modelValue.value * 100 * -1
|
||||||
const horizontalOverflow = Math.max(0, scaledHorizontalOverflow / scale.value)
|
|
||||||
|
|
||||||
const scaledImageHeight = focusedImage.offsetHeight * scale.value
|
return (lengthX.value / width.value) * 100 * -1 + (modelValue.value * 100) * -1
|
||||||
const scaledVerticalOverflow = scaledImageHeight / 2 - view.value.clientHeight / 2 + slideGap
|
|
||||||
const verticalOverflow = Math.max(0, scaledVerticalOverflow / scale.value)
|
|
||||||
|
|
||||||
return {
|
|
||||||
left: focusedSlide.offsetLeft - horizontalOverflow,
|
|
||||||
right: focusedSlide.offsetLeft + horizontalOverflow,
|
|
||||||
top: focusedSlide.offsetTop - verticalOverflow,
|
|
||||||
bottom: focusedSlide.offsetTop + verticalOverflow,
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
|
||||||
function handlePinchZoom(initialScale: number, initialDistance: number, distance: number, [originX, originY]: Vector2) {
|
const distanceY = computed(() => {
|
||||||
scale.value = initialScale * (distance / initialDistance)
|
if (height.value === 0 || !isSwiping.value || direction.value !== 'up')
|
||||||
scale.value = Math.max(maxZoomOut.value, scale.value)
|
return 0
|
||||||
|
|
||||||
const deltaCenterX = originX - lastOrigin[0]
|
return (lengthY.value / height.value) * 100 * -1
|
||||||
const deltaCenterY = originY - lastOrigin[1]
|
|
||||||
|
|
||||||
handleZoomDrag([deltaCenterX, deltaCenterY])
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleMouseWheelZoom(initialScale: number, deltaDistance: number, [originX, originY]: Vector2) {
|
|
||||||
scale.value = initialScale + (deltaDistance / 1000)
|
|
||||||
scale.value = Math.max(maxZoomOut.value, scale.value)
|
|
||||||
|
|
||||||
const deltaCenterX = lastOrigin[0] - originX
|
|
||||||
const deltaCenterY = lastOrigin[1] - originY
|
|
||||||
|
|
||||||
handleZoomDrag([deltaCenterX, deltaCenterY])
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleLastDrag(tap: boolean, swipe: Vector2, movement: Vector2, position: Vector2) {
|
|
||||||
isDragging.value = false
|
|
||||||
|
|
||||||
if (tap)
|
|
||||||
handleTap(position)
|
|
||||||
else if (swipe[0] || swipe[1])
|
|
||||||
handleSwipe(swipe, movement)
|
|
||||||
else if (!isZoomedIn.value)
|
|
||||||
slideToClosestSlide()
|
|
||||||
}
|
|
||||||
|
|
||||||
let lastTapAt = 0
|
|
||||||
function handleTap([positionX, positionY]: Vector2) {
|
|
||||||
const now = Date.now()
|
|
||||||
const isDoubleTap = now - lastTapAt < doubleTapThreshold
|
|
||||||
lastTapAt = now
|
|
||||||
|
|
||||||
if (!isDoubleTap)
|
|
||||||
return
|
|
||||||
|
|
||||||
if (isZoomedIn.value) {
|
|
||||||
goToFocusedSlide()
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
const focusedSlideBounding = slide.value[modelValue.value].getBoundingClientRect()
|
|
||||||
const slideCenterX = focusedSlideBounding.left + focusedSlideBounding.width / 2
|
|
||||||
const slideCenterY = focusedSlideBounding.top + focusedSlideBounding.height / 2
|
|
||||||
|
|
||||||
scale.value = 3
|
|
||||||
x.value += positionX - slideCenterX
|
|
||||||
y.value += positionY - slideCenterY
|
|
||||||
restrictShiftToInsideSlide()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleSwipe([horiz, vert]: Vector2, [movementX, movementY]: Vector2) {
|
|
||||||
if (isZoomedIn.value || isPinching.value)
|
|
||||||
return
|
|
||||||
|
|
||||||
const isHorizontalDrag = Math.abs(movementX) >= Math.abs(movementY)
|
|
||||||
|
|
||||||
if (isHorizontalDrag) {
|
|
||||||
if (horiz === 1) // left
|
|
||||||
modelValue.value = Math.max(0, modelValue.value - 1)
|
|
||||||
if (horiz === -1) // right
|
|
||||||
modelValue.value = Math.min(media.length - 1, modelValue.value + 1)
|
|
||||||
}
|
|
||||||
else if (vert === 1 || vert === -1) {
|
|
||||||
emit('close')
|
|
||||||
}
|
|
||||||
|
|
||||||
goToFocusedSlide()
|
|
||||||
}
|
|
||||||
|
|
||||||
function slideToClosestSlide() {
|
|
||||||
const startOfFocusedSlide = slide.value[modelValue.value].offsetLeft * scale.value
|
|
||||||
const slideWidth = slide.value[modelValue.value].offsetWidth * scale.value
|
|
||||||
|
|
||||||
if (x.value > startOfFocusedSlide + slideWidth / 2)
|
|
||||||
modelValue.value = Math.min(media.length - 1, modelValue.value + 1)
|
|
||||||
else if (x.value < startOfFocusedSlide - slideWidth / 2)
|
|
||||||
modelValue.value = Math.max(0, modelValue.value - 1)
|
|
||||||
|
|
||||||
goToFocusedSlide()
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleDrag(delta: Vector2, movement: Vector2) {
|
|
||||||
isDragging.value = true
|
|
||||||
|
|
||||||
if (isZoomedIn.value)
|
|
||||||
handleZoomDrag(delta)
|
|
||||||
else
|
|
||||||
handleSlideDrag(movement)
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleZoomDrag([deltaX, deltaY]: Vector2) {
|
|
||||||
x.value -= deltaX / scale.value
|
|
||||||
y.value -= deltaY / scale.value
|
|
||||||
|
|
||||||
restrictShiftToInsideSlide()
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleSlideDrag([movementX, movementY]: Vector2) {
|
|
||||||
goToFocusedSlide()
|
|
||||||
|
|
||||||
if (Math.abs(movementY) > Math.abs(movementX)) // vertical movement is more than horizontal
|
|
||||||
y.value -= movementY / scale.value
|
|
||||||
else
|
|
||||||
x.value -= movementX / scale.value
|
|
||||||
|
|
||||||
if (media.length === 1)
|
|
||||||
x.value = 0
|
|
||||||
}
|
|
||||||
|
|
||||||
function restrictShiftToInsideSlide() {
|
|
||||||
x.value = Math.min(shiftRestrictions.value.right, Math.max(shiftRestrictions.value.left, x.value))
|
|
||||||
y.value = Math.min(shiftRestrictions.value.bottom, Math.max(shiftRestrictions.value.top, y.value))
|
|
||||||
}
|
|
||||||
|
|
||||||
const sliderStyle = computed(() => {
|
|
||||||
const style = {
|
|
||||||
transform: `scale(${scale.value}) translate(${-x.value}px, ${-y.value}px)`,
|
|
||||||
transition: 'none',
|
|
||||||
gap: `${slideGap}px`,
|
|
||||||
}
|
|
||||||
|
|
||||||
if (canAnimate.value && !isDragging.value && !isPinching.value)
|
|
||||||
style.transition = 'all 0.3s ease'
|
|
||||||
|
|
||||||
return style
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const imageStyle = computed(() => ({
|
|
||||||
cursor: isDragging.value ? 'grabbing' : 'grab',
|
|
||||||
}))
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div ref="view" flex flex-row h-full w-full overflow-hidden>
|
<div ref="target" flex flex-row max-h-full max-w-full overflow-hidden>
|
||||||
<div ref="slider" :style="sliderStyle" w-full h-full flex items-center>
|
<div flex :style="{ transform: `translateX(${distanceX}%) translateY(${distanceY}%)`, transition: isSwiping ? 'none' : canAnimate ? 'all 0.5s ease' : 'none' }">
|
||||||
<div
|
<div v-for="item in media" :key="item.id" p4 select-none w-full flex-shrink-0 flex flex-col items-center justify-center>
|
||||||
v-for="item in media"
|
<img max-h-full max-w-full :draggable="false" select-none :src="item.url || item.previewUrl" :alt="item.description || ''">
|
||||||
:key="item.id"
|
|
||||||
ref="slide"
|
|
||||||
flex-shrink-0
|
|
||||||
w-full
|
|
||||||
h-full
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
>
|
|
||||||
<component
|
|
||||||
:is="item.type === 'gifv' ? 'video' : 'img'"
|
|
||||||
ref="image"
|
|
||||||
:autoplay="enableAutoplay"
|
|
||||||
controls
|
|
||||||
loop
|
|
||||||
select-none
|
|
||||||
max-w-full
|
|
||||||
max-h-full
|
|
||||||
:style="imageStyle"
|
|
||||||
:draggable="false"
|
|
||||||
:src="item.url || item.previewUrl"
|
|
||||||
:alt="item.description || ''"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,12 +1,8 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
// only one icon can be lit up at the same time
|
// only one icon can be lit up at the same time
|
||||||
import { STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE } from '~/constants'
|
|
||||||
|
|
||||||
const moreMenuVisible = ref(false)
|
const moreMenuVisible = ref(false)
|
||||||
|
|
||||||
const { notifications } = useNotifications()
|
const { notifications } = useNotifications()
|
||||||
const lastAccessedNotificationRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE, '')
|
|
||||||
const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, '')
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -23,7 +19,7 @@ const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLO
|
||||||
<NuxtLink to="/search" :aria-label="$t('nav.search')" :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="/search" :aria-label="$t('nav.search')" :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:search-line />
|
<div i-ri:search-line />
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<NuxtLink :to="`/notifications/${lastAccessedNotificationRoute}`" :aria-label="$t('nav.notifications')" :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="/notifications" :aria-label="$t('nav.notifications')" :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 flex relative>
|
<div flex relative>
|
||||||
<div class="i-ri:notification-4-line" text-xl />
|
<div class="i-ri:notification-4-line" text-xl />
|
||||||
<div v-if="notifications" class="top-[-0.3rem] right-[-0.3rem]" absolute font-bold rounded-full h-4 w-4 text-xs bg-primary text-inverted flex items-center justify-center>
|
<div v-if="notifications" class="top-[-0.3rem] right-[-0.3rem]" absolute font-bold rounded-full h-4 w-4 text-xs bg-primary text-inverted flex items-center justify-center>
|
||||||
|
@ -36,8 +32,8 @@ const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLO
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<NuxtLink :to="`/${currentServer}/explore/${lastAccessedExploreRoute}`" :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:compass-3-line />
|
<div i-ri:hashtag />
|
||||||
</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 />
|
||||||
|
@ -47,14 +43,14 @@ const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLO
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</template>
|
</template>
|
||||||
<NavBottomMoreMenu v-slot="{ toggleVisible, show }" v-model="moreMenuVisible" flex flex-row items-center place-content-center h-full flex-1 cursor-pointer>
|
<NavBottomMoreMenu v-slot="{ toggleVisible, show }" v-model="moreMenuVisible" flex flex-row items-center place-content-center h-full flex-1 cursor-pointer>
|
||||||
<button
|
<label
|
||||||
flex items-center place-content-center h-full flex-1 class="select-none"
|
flex items-center place-content-center h-full flex-1 class="select-none"
|
||||||
:class="show ? '!text-primary' : ''"
|
:class="show ? '!text-primary' : ''"
|
||||||
aria-label="More menu"
|
|
||||||
@click="toggleVisible"
|
|
||||||
>
|
>
|
||||||
<span :class="show ? 'i-ri:close-fill' : 'i-ri:more-fill'" />
|
<input type="checkbox" z="-1" absolute inset-0 opacity-0 @click="toggleVisible">
|
||||||
</button>
|
<span v-show="show" i-ri:close-fill />
|
||||||
|
<span v-show="!show" i-ri:more-fill />
|
||||||
|
</label>
|
||||||
</NavBottomMoreMenu>
|
</NavBottomMoreMenu>
|
||||||
</nav>
|
</nav>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -1,27 +1,22 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { invoke } from '@vueuse/core'
|
let { modelValue } = $defineModels<{
|
||||||
|
modelValue: boolean
|
||||||
const modelValue = defineModel<boolean>({ required: true })
|
}>()
|
||||||
const colorMode = useColorMode()
|
const colorMode = useColorMode()
|
||||||
|
|
||||||
const userSettings = useUserSettings()
|
const userSettings = useUserSettings()
|
||||||
|
|
||||||
const drawerEl = ref<HTMLDivElement>()
|
|
||||||
|
|
||||||
function toggleVisible() {
|
function toggleVisible() {
|
||||||
modelValue.value = !modelValue.value
|
modelValue = !modelValue
|
||||||
}
|
}
|
||||||
|
|
||||||
const buttonEl = ref<HTMLDivElement>()
|
const buttonEl = ref<HTMLDivElement>()
|
||||||
/**
|
/** Close the drop-down menu if the mouse click is not on the drop-down menu button when the drop-down menu is opened */
|
||||||
* Close the drop-down menu if the mouse click is not on the drop-down menu button when the drop-down menu is opened
|
|
||||||
* @param mouse
|
|
||||||
*/
|
|
||||||
function clickEvent(mouse: MouseEvent) {
|
function clickEvent(mouse: MouseEvent) {
|
||||||
if (mouse.target && !buttonEl.value?.children[0].contains(mouse.target as any)) {
|
if (mouse.target && !buttonEl.value?.children[0].contains(mouse.target as any)) {
|
||||||
if (modelValue.value) {
|
if (modelValue) {
|
||||||
document.removeEventListener('click', clickEvent)
|
document.removeEventListener('click', clickEvent)
|
||||||
modelValue.value = false
|
modelValue = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -30,7 +25,7 @@ function toggleDark() {
|
||||||
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
|
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(modelValue, (val) => {
|
watch($$(modelValue), (val) => {
|
||||||
if (val && typeof document !== 'undefined')
|
if (val && typeof document !== 'undefined')
|
||||||
document.addEventListener('click', clickEvent)
|
document.addEventListener('click', clickEvent)
|
||||||
})
|
})
|
||||||
|
@ -38,80 +33,6 @@ watch(modelValue, (val) => {
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
document.removeEventListener('click', clickEvent)
|
document.removeEventListener('click', clickEvent)
|
||||||
})
|
})
|
||||||
|
|
||||||
// Pull down to close
|
|
||||||
const { dragging, dragDistance } = invoke(() => {
|
|
||||||
const triggerDistance = 120
|
|
||||||
|
|
||||||
let scrollTop = 0
|
|
||||||
let beforeTouchPointY = 0
|
|
||||||
|
|
||||||
const dragDistance = ref(0)
|
|
||||||
const dragging = ref(false)
|
|
||||||
|
|
||||||
useEventListener(drawerEl, 'scroll', (e: Event) => {
|
|
||||||
scrollTop = (e.target as HTMLDivElement).scrollTop
|
|
||||||
|
|
||||||
// Prevent the page from scrolling when the drawer is being dragged.
|
|
||||||
if (dragDistance.value > 0)
|
|
||||||
(e.target as HTMLDivElement).scrollTop = 0
|
|
||||||
}, { passive: true })
|
|
||||||
|
|
||||||
useEventListener(drawerEl, 'touchstart', (e: TouchEvent) => {
|
|
||||||
if (!modelValue.value)
|
|
||||||
return
|
|
||||||
|
|
||||||
beforeTouchPointY = e.touches[0].pageY
|
|
||||||
dragDistance.value = 0
|
|
||||||
}, { passive: true })
|
|
||||||
|
|
||||||
useEventListener(drawerEl, 'touchmove', (e: TouchEvent) => {
|
|
||||||
if (!modelValue.value)
|
|
||||||
return
|
|
||||||
|
|
||||||
// Do not move the entire drawer when its contents are not scrolled to the top.
|
|
||||||
if (scrollTop > 0 && dragDistance.value <= 0) {
|
|
||||||
dragging.value = false
|
|
||||||
beforeTouchPointY = e.touches[0].pageY
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const { pageY } = e.touches[0]
|
|
||||||
|
|
||||||
// Calculate the drag distance.
|
|
||||||
dragDistance.value += pageY - beforeTouchPointY
|
|
||||||
if (dragDistance.value < 0)
|
|
||||||
dragDistance.value = 0
|
|
||||||
beforeTouchPointY = pageY
|
|
||||||
|
|
||||||
// Marked as dragging.
|
|
||||||
if (dragDistance.value > 1)
|
|
||||||
dragging.value = true
|
|
||||||
|
|
||||||
// Prevent the page from scrolling when the drawer is being dragged.
|
|
||||||
if (dragDistance.value > 0) {
|
|
||||||
if (e?.cancelable && e?.preventDefault)
|
|
||||||
e.preventDefault()
|
|
||||||
e?.stopPropagation()
|
|
||||||
}
|
|
||||||
}, { passive: true })
|
|
||||||
|
|
||||||
useEventListener(drawerEl, 'touchend', () => {
|
|
||||||
if (!modelValue.value)
|
|
||||||
return
|
|
||||||
|
|
||||||
if (dragDistance.value >= triggerDistance)
|
|
||||||
modelValue.value = false
|
|
||||||
|
|
||||||
dragging.value = false
|
|
||||||
// code
|
|
||||||
}, { passive: true })
|
|
||||||
|
|
||||||
return {
|
|
||||||
dragDistance,
|
|
||||||
dragging,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -120,12 +41,12 @@ const { dragging, dragDistance } = invoke(() => {
|
||||||
|
|
||||||
<!-- Drawer -->
|
<!-- Drawer -->
|
||||||
<Transition
|
<Transition
|
||||||
enter-active-class="transition duration-250 ease-out"
|
enter-active-class="transition duration-250 ease-out children:(transition duration-250 ease-out)"
|
||||||
enter-from-class="opacity-0 children:(translate-y-full)"
|
enter-from-class="opacity-0 children:(transform translate-y-full)"
|
||||||
enter-to-class="opacity-100 children:(translate-y-0)"
|
enter-to-class="opacity-100 children:(transform translate-y-0)"
|
||||||
leave-active-class="transition duration-250 ease-in"
|
leave-active-class="transition duration-250 ease-in children:(transition duration-250 ease-in)"
|
||||||
leave-from-class="opacity-100 children:(translate-y-0)"
|
leave-from-class="opacity-100 children:(transform translate-y-0)"
|
||||||
leave-to-class="opacity-0 children:(translate-y-full)"
|
leave-to-class="opacity-0 children:(transform translate-y-full)"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-show="modelValue"
|
v-show="modelValue"
|
||||||
|
@ -137,19 +58,10 @@ const { dragging, dragDistance } = invoke(() => {
|
||||||
<!-- corresponding to issue: #106, so please don't remove it. -->
|
<!-- corresponding to issue: #106, so please don't remove it. -->
|
||||||
<div absolute inset-0 opacity-0 h="[calc(100vh+0.5px)]" />
|
<div absolute inset-0 opacity-0 h="[calc(100vh+0.5px)]" />
|
||||||
<div
|
<div
|
||||||
ref="drawerEl"
|
|
||||||
:style="{
|
|
||||||
transform: dragging ? `translateY(${dragDistance}px)` : '',
|
|
||||||
}"
|
|
||||||
:class="{
|
|
||||||
'duration-0': dragging,
|
|
||||||
'duration-250': !dragging,
|
|
||||||
'backdrop-blur-md': !getPreferences(userSettings, 'optimizeForLowPerformanceDevice'),
|
|
||||||
}"
|
|
||||||
transition="transform ease-in"
|
|
||||||
flex-1 min-w-48 py-6 mb="-1px"
|
flex-1 min-w-48 py-6 mb="-1px"
|
||||||
of-y-auto scrollbar-hide overscroll-none max-h="[calc(100vh-200px)]"
|
of-y-auto scrollbar-hide overscroll-none max-h="[calc(100vh-200px)]"
|
||||||
rounded-t-lg bg="white/85 dark:neutral-900/85" backdrop-filter
|
rounded-t-lg bg="white/85 dark:neutral-900/85" backdrop-filter backdrop-blur-md
|
||||||
border-t-1 border-base
|
border-t-1 border-base
|
||||||
>
|
>
|
||||||
<!-- Nav -->
|
<!-- Nav -->
|
||||||
|
|
|
@ -28,9 +28,6 @@ function toggleDark() {
|
||||||
@click="togglePreferences('zenMode')"
|
@click="togglePreferences('zenMode')"
|
||||||
/>
|
/>
|
||||||
</CommonTooltip>
|
</CommonTooltip>
|
||||||
<CommonTooltip :content="$t('magic_keys.dialog_header')">
|
|
||||||
<button flex i-ri:keyboard-box-line dark-i-ri:keyboard-box-line text-lg :aria-label="$t('magic_keys.dialog_header')" @click="toggleKeyboardShortcuts" />
|
|
||||||
</CommonTooltip>
|
|
||||||
<CommonTooltip :content="$t('settings.about.sponsor_action')">
|
<CommonTooltip :content="$t('settings.about.sponsor_action')">
|
||||||
<NuxtLink
|
<NuxtLink
|
||||||
flex
|
flex
|
||||||
|
|
|
@ -1,13 +1,9 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE } from '~/constants'
|
|
||||||
|
|
||||||
const { command } = defineProps<{
|
const { command } = defineProps<{
|
||||||
command?: boolean
|
command?: boolean
|
||||||
}>()
|
}>()
|
||||||
const { notifications } = useNotifications()
|
const { notifications } = useNotifications()
|
||||||
const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
|
const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
|
||||||
const lastAccessedNotificationRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE, '')
|
|
||||||
const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, '')
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -16,7 +12,7 @@ const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLO
|
||||||
|
|
||||||
<div class="spacer" shrink xl:hidden />
|
<div class="spacer" shrink xl:hidden />
|
||||||
<NavSideItem :text="$t('nav.home')" to="/home" icon="i-ri:home-5-line" user-only :command="command" />
|
<NavSideItem :text="$t('nav.home')" to="/home" icon="i-ri:home-5-line" user-only :command="command" />
|
||||||
<NavSideItem :text="$t('nav.notifications')" :to="`/notifications/${lastAccessedNotificationRoute}`" icon="i-ri:notification-4-line" user-only :command="command">
|
<NavSideItem :text="$t('nav.notifications')" to="/notifications" icon="i-ri:notification-4-line" user-only :command="command">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<div flex relative>
|
<div flex relative>
|
||||||
<div class="i-ri:notification-4-line" text-xl />
|
<div class="i-ri:notification-4-line" text-xl />
|
||||||
|
@ -34,11 +30,10 @@ const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLO
|
||||||
<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/${lastAccessedExploreRoute}` : `/explore/${lastAccessedExploreRoute}`" icon="i-ri:compass-3-line" :command="command" />
|
<NavSideItem :text="$t('nav.explore')" :to="isHydrated ? `/${currentServer}/explore` : '/explore'" icon="i-ri:hashtag" :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" />
|
||||||
|
|
|
@ -10,8 +10,8 @@ const props = withDefaults(defineProps<{
|
||||||
})
|
})
|
||||||
|
|
||||||
defineSlots<{
|
defineSlots<{
|
||||||
icon: (props: object) => void
|
icon: {}
|
||||||
default: (props: object) => void
|
default: {}
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
@ -28,13 +28,13 @@ useCommand({
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
const activeClass = ref('text-primary')
|
let 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.value = ''
|
activeClass = ''
|
||||||
await nextTick()
|
await nextTick()
|
||||||
activeClass.value = 'text-primary'
|
activeClass = '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
|
||||||
|
@ -57,21 +57,11 @@ const noUserVisual = computed(() => isHydrated.value && props.userOnly && !curre
|
||||||
<div
|
<div
|
||||||
class="item"
|
class="item"
|
||||||
flex items-center gap4
|
flex items-center gap4
|
||||||
xl="ml0 mr5 px5 w-auto"
|
|
||||||
:class="isSmallScreen
|
|
||||||
? `
|
|
||||||
w-full
|
|
||||||
px5 sm:mxa
|
|
||||||
transition-colors duration-200 transform
|
|
||||||
hover-bg-gray-100 hover-dark:(bg-gray-700 text-white)
|
|
||||||
` : `
|
|
||||||
w-fit rounded-3
|
w-fit rounded-3
|
||||||
px2 mx3 sm:mxa
|
px2 mx3 sm:mxa
|
||||||
|
xl="ml0 mr5 px5 w-auto"
|
||||||
transition-100
|
transition-100
|
||||||
elk-group-hover-bg-active
|
elk-group-hover="bg-active" group-focus-visible:ring="2 current"
|
||||||
group-focus-visible:ring-2
|
|
||||||
group-focus-visible:ring-current
|
|
||||||
`"
|
|
||||||
>
|
>
|
||||||
<slot name="icon">
|
<slot name="icon">
|
||||||
<div :class="icon" text-xl />
|
<div :class="icon" text-xl />
|
||||||
|
|
|
@ -34,13 +34,7 @@ const { busy, oauth, singleInstanceServer } = useSignIn()
|
||||||
<strong>{{ currentServer }}</strong>
|
<strong>{{ currentServer }}</strong>
|
||||||
</i18n-t>
|
</i18n-t>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button v-else btn-solid text-sm px-2 py-1 text-center xl:hidden @click="openSigninDialog()">
|
||||||
v-else
|
|
||||||
flex="~ row"
|
|
||||||
gap-x-1 items-center justify-center btn-solid text-sm px-2 py-1 xl:hidden
|
|
||||||
@click="openSigninDialog()"
|
|
||||||
>
|
|
||||||
<span aria-hidden="true" block i-ri:login-circle-line class="rtl-flip" />
|
|
||||||
{{ $t('action.sign_in') }}
|
{{ $t('action.sign_in') }}
|
||||||
</button>
|
</button>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -4,13 +4,6 @@ import type { mastodon } from 'masto'
|
||||||
const { notification } = defineProps<{
|
const { notification } = defineProps<{
|
||||||
notification: mastodon.v1.Notification
|
notification: mastodon.v1.Notification
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const { t } = useI18n()
|
|
||||||
|
|
||||||
// well-known emoji reactions types Elk does not support yet
|
|
||||||
const unsupportedEmojiReactionTypes = ['pleroma:emoji_reaction', 'reaction']
|
|
||||||
if (unsupportedEmojiReactionTypes.includes(notification.type))
|
|
||||||
console.warn(`[DEV] ${t('notification.missing_type')} '${notification.type}' (notification.id: ${notification.id})`)
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -22,35 +15,34 @@ if (unsupportedEmojiReactionTypes.includes(notification.type))
|
||||||
ps-3 pe-4 inset-is-0
|
ps-3 pe-4 inset-is-0
|
||||||
rounded-ie-be-3
|
rounded-ie-be-3
|
||||||
py-3 bg-base top-0
|
py-3 bg-base top-0
|
||||||
|
:lang="notification.status?.language ?? undefined"
|
||||||
>
|
>
|
||||||
<div i-ri-user-3-line text-xl me-3 color-blue />
|
<div i-ri:user-follow-fill me-1 color-primary />
|
||||||
<AccountDisplayName :account="notification.account" text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all />
|
<AccountDisplayName :account="notification.account" text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all />
|
||||||
<span ws-nowrap>
|
<span ws-nowrap>
|
||||||
{{ $t('notification.followed_you') }}
|
{{ $t('notification.followed_you') }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<AccountBigCard
|
<AccountBigCard
|
||||||
ms10
|
|
||||||
:account="notification.account"
|
:account="notification.account"
|
||||||
|
:lang="notification.status?.language ?? undefined"
|
||||||
/>
|
/>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="notification.type === 'admin.sign_up'">
|
<template v-else-if="notification.type === 'admin.sign_up'">
|
||||||
<NuxtLink :to="getAccountRoute(notification.account)">
|
<div flex p3 items-center bg-shaded>
|
||||||
<div flex p4 items-center bg-shaded>
|
<div i-ri:admin-fill me-1 color-purple />
|
||||||
<div i-ri:user-add-line text-xl me-2 color-purple />
|
|
||||||
<AccountDisplayName
|
<AccountDisplayName
|
||||||
:account="notification.account"
|
:account="notification.account"
|
||||||
text-purple me-1 font-bold line-clamp-1 ws-pre-wrap break-all
|
text-purple me-1 font-bold line-clamp-1 ws-pre-wrap break-all
|
||||||
/>
|
/>
|
||||||
<span>{{ $t("notification.signed_up") }}</span>
|
<span>{{ $t("notification.signed_up") }}</span>
|
||||||
</div>
|
</div>
|
||||||
</NuxtLink>
|
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="notification.type === 'admin.report'">
|
<template v-else-if="notification.type === 'admin.report'">
|
||||||
<NuxtLink :to="getReportRoute(notification.report?.id!)">
|
<NuxtLink :to="getReportRoute(notification.report?.id!)">
|
||||||
<div flex p4 items-center bg-shaded>
|
<div flex p3 items-center bg-shaded>
|
||||||
<div i-ri:flag-line text-xl me-2 color-purple />
|
<div i-ri:flag-fill me-1 color-purple />
|
||||||
<i18n-t keypath="notification.reported">
|
<i18n-t keypath="notification.reported">
|
||||||
<AccountDisplayName
|
<AccountDisplayName
|
||||||
:account="notification.account"
|
:account="notification.account"
|
||||||
|
@ -65,19 +57,12 @@ if (unsupportedEmojiReactionTypes.includes(notification.type))
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="notification.type === 'follow_request'">
|
<template v-else-if="notification.type === 'follow_request'">
|
||||||
<div flex px-3 py-2>
|
<div flex ms-4 items-center class="-top-2.5" absolute inset-ie-2 px-2>
|
||||||
<div i-ri-user-shared-line text-xl me-3 color-blue />
|
<div i-ri:user-follow-fill text-xl me-1 />
|
||||||
<AccountDisplayName
|
<AccountInlineInfo :account="notification.account" me1 />
|
||||||
:account="notification.account"
|
|
||||||
text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all
|
|
||||||
/>
|
|
||||||
<span me-1 ws-nowrap>
|
|
||||||
{{ $t('notification.request_to_follow') }}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
<AccountCard p="s-2 e-4 b-2" hover-card :account="notification.account">
|
<!-- TODO: accept request -->
|
||||||
<AccountFollowRequestButton :account="notification.account" />
|
<AccountCard :account="notification.account" />
|
||||||
</AccountCard>
|
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="notification.type === 'update'">
|
<template v-else-if="notification.type === 'update'">
|
||||||
<StatusCard :status="notification.status!" :in-notification="true" :actions="false">
|
<StatusCard :status="notification.status!" :in-notification="true" :actions="false">
|
||||||
|
@ -95,8 +80,7 @@ if (unsupportedEmojiReactionTypes.includes(notification.type))
|
||||||
<template v-else-if="notification.type === 'mention' || notification.type === 'poll' || notification.type === 'status'">
|
<template v-else-if="notification.type === 'mention' || notification.type === 'poll' || notification.type === 'status'">
|
||||||
<StatusCard :status="notification.status!" />
|
<StatusCard :status="notification.status!" />
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="!unsupportedEmojiReactionTypes.includes(notification.type)">
|
<template v-else>
|
||||||
<!-- prevent showing errors for dev for known emoji reaction types -->
|
|
||||||
<!-- type 'favourite' and 'reblog' should always rendered by NotificationGroupedLikes -->
|
<!-- type 'favourite' and 'reblog' should always rendered by NotificationGroupedLikes -->
|
||||||
<div text-red font-bold>
|
<div text-red font-bold>
|
||||||
[DEV] {{ $t('notification.missing_type') }} '{{ notification.type }}'
|
[DEV] {{ $t('notification.missing_type') }} '{{ notification.type }}'
|
||||||
|
|
|
@ -10,7 +10,7 @@ defineProps<{
|
||||||
defineEmits(['hide', 'subscribe'])
|
defineEmits(['hide', 'subscribe'])
|
||||||
|
|
||||||
defineSlots<{
|
defineSlots<{
|
||||||
error: (props: object) => void
|
error: {}
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const xl = useMediaQuery('(min-width: 1280px)')
|
const xl = useMediaQuery('(min-width: 1280px)')
|
||||||
|
|
|
@ -5,17 +5,17 @@ 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.value > 1 || count.value === 0) ? undefined : items.items[0].status?.language
|
return (count > 1 || count === 0) ? undefined : items.items[0].status?.language
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<article flex flex-col relative :lang="lang ?? undefined">
|
<article flex flex-col relative :lang="lang ?? undefined">
|
||||||
<div flex items-center top-0 left-2 pt-2 px-3>
|
<div flex items-center top-0 left-2 pt-2 px-3>
|
||||||
<div :class="count > 1 ? 'i-ri-group-line' : 'i-ri-user-3-line'" me-3 color-blue text-xl aria-hidden="true" />
|
<div i-ri:user-follow-fill me-3 color-primary aria-hidden="true" />
|
||||||
<template v-if="count > 1">
|
<template v-if="count > 1">
|
||||||
<CommonLocalizedNumber
|
<CommonLocalizedNumber
|
||||||
keypath="notification.followed_you_count"
|
keypath="notification.followed_you_count"
|
||||||
|
@ -32,7 +32,7 @@ const lang = computed(() => {
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div pb-2 ps8>
|
<div pb-2>
|
||||||
<div v-if="isExpanded">
|
<div v-if="isExpanded">
|
||||||
<AccountCard
|
<AccountCard
|
||||||
v-for="item in items.items"
|
v-for="item in items.items"
|
||||||
|
|
|
@ -4,18 +4,17 @@ import type { GroupedLikeNotifications } from '~/types'
|
||||||
const { group } = defineProps<{
|
const { group } = defineProps<{
|
||||||
group: GroupedLikeNotifications
|
group: GroupedLikeNotifications
|
||||||
}>()
|
}>()
|
||||||
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>
|
||||||
<article flex flex-col relative>
|
<article flex flex-col relative>
|
||||||
<StatusLink :status="group.status!" pb4 pt5>
|
<StatusLink :status="group.status!" pb2 pt3>
|
||||||
<div flex flex-col gap-3>
|
<div flex flex-col gap-2>
|
||||||
<div v-if="reblogs.length" flex="~ gap-1">
|
<div v-if="reblogs.length" flex="~ gap-1">
|
||||||
<div i-ri:repeat-fill text-xl me-2 color-green />
|
<div i-ri:repeat-fill text-xl me-1 color-green />
|
||||||
<template v-for="i, idx of reblogs" :key="idx">
|
<template v-for="i, idx of reblogs" :key="idx">
|
||||||
<AccountHoverWrapper :account="i.account">
|
<AccountHoverWrapper :account="i.account">
|
||||||
<NuxtLink :to="getAccountRoute(i.account)">
|
<NuxtLink :to="getAccountRoute(i.account)">
|
||||||
|
@ -28,7 +27,7 @@ const likes = computed(() => group.likes.filter(i => i.favourite && !i.reblog))
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="likes.length" flex="~ gap-1">
|
<div v-if="likes.length" flex="~ gap-1">
|
||||||
<div :class="useStarFavoriteIcon ? 'i-ri:star-line color-yellow' : 'i-ri:heart-line color-red'" text-xl me-2 />
|
<div i-ri:heart-fill text-xl me-1 color-red />
|
||||||
<template v-for="i, idx of likes" :key="idx">
|
<template v-for="i, idx of likes" :key="idx">
|
||||||
<AccountHoverWrapper :account="i.account">
|
<AccountHoverWrapper :account="i.account">
|
||||||
<NuxtLink :to="getAccountRoute(i.account)">
|
<NuxtLink :to="getAccountRoute(i.account)">
|
||||||
|
@ -36,12 +35,12 @@ const likes = computed(() => group.likes.filter(i => i.favourite && !i.reblog))
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</AccountHoverWrapper>
|
</AccountHoverWrapper>
|
||||||
</template>
|
</template>
|
||||||
<div ms1>
|
<div ml1>
|
||||||
{{ $t('notification.favourited_post') }}
|
{{ $t('notification.favourited_post') }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div ps9 mt-1>
|
<div pl8 mt-1>
|
||||||
<StatusBody :status="group.status!" text-secondary />
|
<StatusBody :status="group.status!" text-secondary />
|
||||||
<!-- When no text content is presented, we show media instead -->
|
<!-- When no text content is presented, we show media instead -->
|
||||||
<template v-if="!group.status!.content">
|
<template v-if="!group.status!.content">
|
||||||
|
|
|
@ -1,31 +1,21 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
// @ts-expect-error missing types
|
// @ts-expect-error missing types
|
||||||
import { DynamicScrollerItem } from 'vue-virtual-scroller'
|
import { DynamicScrollerItem } from 'vue-virtual-scroller'
|
||||||
import type { mastodon } from 'masto'
|
import type { Paginator, WsEvents, mastodon } from 'masto'
|
||||||
import type { GroupedAccountLike, NotificationSlot } from '~/types'
|
import type { GroupedAccountLike, NotificationSlot } from '~/types'
|
||||||
|
|
||||||
const { paginator, stream } = defineProps<{
|
const { paginator, stream } = defineProps<{
|
||||||
paginator: mastodon.Paginator<mastodon.v1.Notification[], mastodon.rest.v1.ListNotificationsParams>
|
paginator: Paginator<mastodon.v1.Notification[], mastodon.v1.ListNotificationsParams>
|
||||||
stream?: mastodon.streaming.Subscription
|
stream?: Promise<WsEvents>
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const virtualScroller = false // TODO: fix flickering issue with virtual scroll
|
const virtualScroller = false // TODO: fix flickering issue with virtual scroll
|
||||||
|
|
||||||
const groupCapacity = Number.MAX_VALUE // No limit
|
const groupCapacity = Number.MAX_VALUE // No limit
|
||||||
|
|
||||||
const includeNotificationTypes: mastodon.v1.NotificationType[] = ['update', 'mention', 'poll', 'status']
|
|
||||||
|
|
||||||
function includeNotificationsForStatusCard({ type, status }: mastodon.v1.Notification) {
|
|
||||||
// Exclude update, mention, pool and status notifications without the status entry:
|
|
||||||
// no makes sense to include them
|
|
||||||
// Those notifications will be shown using StatusCard SFC:
|
|
||||||
// check NotificationCard SFC L68 and L81 => :status="notification.status!"
|
|
||||||
return status || !includeNotificationTypes.includes(type)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Group by type (and status when applicable)
|
// Group by type (and status when applicable)
|
||||||
function groupId(item: mastodon.v1.Notification): string {
|
function groupId(item: mastodon.v1.Notification): string {
|
||||||
// If the update is related to a status, group notifications from the same account (boost + favorite the same status)
|
// If the update is related to an status, group notifications from the same account (boost + favorite the same status)
|
||||||
const id = item.status
|
const id = item.status
|
||||||
? {
|
? {
|
||||||
status: item.status?.id,
|
status: item.status?.id,
|
||||||
|
@ -118,9 +108,9 @@ function groupItems(items: mastodon.v1.Notification[]): NotificationSlot[] {
|
||||||
results.push(...group)
|
results.push(...group)
|
||||||
}
|
}
|
||||||
|
|
||||||
for (const item of items.filter(includeNotificationsForStatusCard)) {
|
for (const item of items) {
|
||||||
const itemId = groupId(item)
|
const itemId = groupId(item)
|
||||||
// Finalize the group if it already has too many notifications
|
// Finalize group if it already has too many notifications
|
||||||
if (currentGroupId !== itemId || currentGroup.length >= groupCapacity)
|
if (currentGroupId !== itemId || currentGroup.length >= groupCapacity)
|
||||||
processGroup()
|
processGroup()
|
||||||
|
|
||||||
|
@ -165,17 +155,17 @@ const { clearNotifications } = useNotifications()
|
||||||
const { formatNumber } = useHumanReadableNumber()
|
const { formatNumber } = useHumanReadableNumber()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- eslint-disable vue/attribute-hyphenation -->
|
|
||||||
<template>
|
<template>
|
||||||
<CommonPaginator
|
<CommonPaginator
|
||||||
:paginator="paginator"
|
:paginator="paginator"
|
||||||
:preprocess="preprocess"
|
:preprocess="preprocess"
|
||||||
:stream="stream"
|
:stream="stream"
|
||||||
eventType="notification"
|
:eager="3"
|
||||||
:virtualScroller="virtualScroller"
|
:virtual-scroller="virtualScroller"
|
||||||
|
event-type="notification"
|
||||||
>
|
>
|
||||||
<template #updater="{ number, update }">
|
<template #updater="{ number, update }">
|
||||||
<button id="elk_show_new_items" py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="() => { update(); clearNotifications() }">
|
<button 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
|
||||||
|
|
||||||
const busy = ref<boolean>(false)
|
let busy = $ref<boolean>(false)
|
||||||
const animateSave = ref<boolean>(false)
|
let animateSave = $ref<boolean>(false)
|
||||||
const animateSubscription = ref<boolean>(false)
|
let animateSubscription = $ref<boolean>(false)
|
||||||
const animateRemoveSubscription = ref<boolean>(false)
|
let animateRemoveSubscription = $ref<boolean>(false)
|
||||||
const subscribeError = ref<string>('')
|
let subscribeError = $ref<string>('')
|
||||||
const showSubscribeError = ref<boolean>(false)
|
let 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 ?? ''])
|
&& !(hiddenNotification.value[currentUser.value?.account?.acct ?? ''] === true)
|
||||||
})
|
})
|
||||||
|
|
||||||
async function saveSettings() {
|
async function saveSettings() {
|
||||||
if (busy.value)
|
if (busy)
|
||||||
return
|
return
|
||||||
|
|
||||||
busy.value = true
|
busy = true
|
||||||
await nextTick()
|
await nextTick()
|
||||||
animateSave.value = true
|
animateSave = true
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await updateSubscription()
|
await updateSubscription()
|
||||||
|
@ -55,48 +55,48 @@ async function saveSettings() {
|
||||||
console.error(err)
|
console.error(err)
|
||||||
}
|
}
|
||||||
finally {
|
finally {
|
||||||
busy.value = false
|
busy = false
|
||||||
animateSave.value = false
|
animateSave = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function doSubscribe() {
|
async function doSubscribe() {
|
||||||
if (busy.value)
|
if (busy)
|
||||||
return
|
return
|
||||||
|
|
||||||
busy.value = true
|
busy = true
|
||||||
await nextTick()
|
await nextTick()
|
||||||
animateSubscription.value = true
|
animateSubscription = true
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const result = await subscribe()
|
const result = await subscribe()
|
||||||
if (result !== 'subscribed') {
|
if (result !== 'subscribed') {
|
||||||
subscribeError.value = t(`settings.notifications.push_notifications.subscription_error.${result === 'notification-denied' ? 'permission_denied' : 'request_error'}`)
|
subscribeError = t(`settings.notifications.push_notifications.subscription_error.${result === 'notification-denied' ? 'permission_denied' : 'request_error'}`)
|
||||||
showSubscribeError.value = true
|
showSubscribeError = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
catch (err) {
|
catch (err) {
|
||||||
if (err instanceof PushSubscriptionError) {
|
if (err instanceof PushSubscriptionError) {
|
||||||
subscribeError.value = t(`settings.notifications.push_notifications.subscription_error.${err.code}`)
|
subscribeError = t(`settings.notifications.push_notifications.subscription_error.${err.code}`)
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
console.error(err)
|
console.error(err)
|
||||||
subscribeError.value = t('settings.notifications.push_notifications.subscription_error.request_error')
|
subscribeError = t('settings.notifications.push_notifications.subscription_error.request_error')
|
||||||
}
|
}
|
||||||
showSubscribeError.value = true
|
showSubscribeError = true
|
||||||
}
|
}
|
||||||
finally {
|
finally {
|
||||||
busy.value = false
|
busy = false
|
||||||
animateSubscription.value = false
|
animateSubscription = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
async function removeSubscription() {
|
async function removeSubscription() {
|
||||||
if (busy.value)
|
if (busy)
|
||||||
return
|
return
|
||||||
|
|
||||||
busy.value = true
|
busy = true
|
||||||
await nextTick()
|
await nextTick()
|
||||||
animateRemoveSubscription.value = true
|
animateRemoveSubscription = true
|
||||||
try {
|
try {
|
||||||
await unsubscribe()
|
await unsubscribe()
|
||||||
}
|
}
|
||||||
|
@ -104,11 +104,11 @@ async function removeSubscription() {
|
||||||
console.error(err)
|
console.error(err)
|
||||||
}
|
}
|
||||||
finally {
|
finally {
|
||||||
busy.value = false
|
busy = false
|
||||||
animateRemoveSubscription.value = false
|
animateRemoveSubscription = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
onActivated(() => (busy.value = false))
|
onActivated(() => (busy = false))
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -3,7 +3,9 @@ defineProps<{
|
||||||
title?: string
|
title?: string
|
||||||
message: string
|
message: string
|
||||||
}>()
|
}>()
|
||||||
const modelValue = defineModel<boolean>({ required: true })
|
const { modelValue } = defineModels<{
|
||||||
|
modelValue: boolean
|
||||||
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -20,10 +20,9 @@ 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', description.value)
|
emit('setDescription', unref(description))
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -8,10 +8,9 @@ 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="bottom">
|
<VDropdown v-if="editor" placement="top">
|
||||||
<button
|
<button
|
||||||
btn-action-icon
|
btn-action-icon
|
||||||
:aria-label="$t('tooltip.open_editor_tools')"
|
|
||||||
>
|
>
|
||||||
<div i-ri:font-size-2 />
|
<div i-ri:font-size-2 />
|
||||||
</button>
|
</button>
|
||||||
|
|
|
@ -9,16 +9,16 @@ const emit = defineEmits<{
|
||||||
|
|
||||||
const { locale } = useI18n()
|
const { locale } = useI18n()
|
||||||
|
|
||||||
const el = ref<HTMLElement>()
|
const el = $ref<HTMLElement>()
|
||||||
const picker = ref<Picker>()
|
let picker = $ref<Picker>()
|
||||||
const colorMode = useColorMode()
|
const colorMode = useColorMode()
|
||||||
|
|
||||||
async function openEmojiPicker() {
|
async function openEmojiPicker() {
|
||||||
await updateCustomEmojis()
|
await updateCustomEmojis()
|
||||||
|
|
||||||
if (picker.value) {
|
if (picker) {
|
||||||
picker.value.update({
|
picker.update({
|
||||||
theme: colorMode,
|
theme: colorMode.value,
|
||||||
custom: customEmojisData.value,
|
custom: customEmojisData.value,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -29,7 +29,7 @@ async function openEmojiPicker() {
|
||||||
importEmojiLang(locale.value.split('-')[0]),
|
importEmojiLang(locale.value.split('-')[0]),
|
||||||
])
|
])
|
||||||
|
|
||||||
picker.value = new Picker({
|
picker = 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,
|
theme: colorMode.value,
|
||||||
custom: customEmojisData.value,
|
custom: customEmojisData.value,
|
||||||
i18n,
|
i18n,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
await nextTick()
|
await nextTick()
|
||||||
// TODO: custom picker
|
// TODO: custom picker
|
||||||
el.value?.appendChild(picker.value as any as HTMLElement)
|
el?.appendChild(picker as any as HTMLElement)
|
||||||
}
|
}
|
||||||
|
|
||||||
function hideEmojiPicker() {
|
function hideEmojiPicker() {
|
||||||
if (picker.value)
|
if (picker)
|
||||||
el.value?.removeChild(picker.value as any as HTMLElement)
|
el?.removeChild(picker as any as HTMLElement)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -1,28 +1,30 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Fuse from 'fuse.js'
|
import Fuse from 'fuse.js'
|
||||||
|
|
||||||
const modelValue = defineModel<string>({ required: true })
|
let { modelValue } = $defineModels<{
|
||||||
|
modelValue: string
|
||||||
|
}>()
|
||||||
|
|
||||||
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.value.trim()
|
languageKeyword.trim()
|
||||||
? fuse.search(languageKeyword.value).map(r => r.item)
|
? fuse.search(languageKeyword).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
|
||||||
if (a === 'en')
|
if (a === 'en')
|
||||||
return -1
|
return -1
|
||||||
|
|
||||||
return a === modelValue.value ? -1 : b === modelValue.value ? 1 : a.localeCompare(b)
|
return a === modelValue ? -1 : b === modelValue ? 1 : a.localeCompare(b)
|
||||||
}),
|
}),
|
||||||
)
|
)
|
||||||
|
|
||||||
|
@ -39,7 +41,7 @@ const preferredLanguages = computed(() => {
|
||||||
)
|
)
|
||||||
|
|
||||||
function chooseLanguage(language: string) {
|
function chooseLanguage(language: string) {
|
||||||
modelValue.value = language
|
modelValue = language
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -3,16 +3,16 @@ const { editing } = defineProps<{
|
||||||
editing?: boolean
|
editing?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const modelValue = defineModel<string>({
|
let { modelValue } = $defineModels<{
|
||||||
required: true,
|
modelValue: string
|
||||||
})
|
}>()
|
||||||
|
|
||||||
const currentVisibility = computed(() =>
|
const currentVisibility = $computed(() =>
|
||||||
statusVisibilities.find(v => v.value === modelValue.value) || statusVisibilities[0],
|
statusVisibilities.find(v => v.value === modelValue) || statusVisibilities[0],
|
||||||
)
|
)
|
||||||
|
|
||||||
function chooseVisibility(visibility: string) {
|
function chooseVisibility(visibility: string) {
|
||||||
modelValue.value = visibility
|
modelValue = visibility
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -27,73 +27,64 @@ 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,
|
isExceedingAttachmentLimit, isUploading, failedAttachments, isOverDropZone,
|
||||||
isUploading,
|
uploadAttachments, pickAttachments, setDescription, removeAttachment,
|
||||||
failedAttachments,
|
|
||||||
isOverDropZone,
|
|
||||||
uploadAttachments,
|
|
||||||
pickAttachments,
|
|
||||||
setDescription,
|
|
||||||
removeAttachment,
|
|
||||||
dropZoneRef,
|
dropZoneRef,
|
||||||
} = useUploadMediaAttachment(draft)
|
} = $(useUploadMediaAttachment($$(draft)))
|
||||||
|
|
||||||
const { shouldExpanded, isExpanded, isSending, isPublishDisabled, publishDraft, failedMessages, preferredLanguage, publishSpoilerText } = usePublish(
|
let { shouldExpanded, isExpanded, isSending, isPublishDisabled, publishDraft, failedMessages, preferredLanguage, publishSpoilerText } = $(usePublish(
|
||||||
{
|
{
|
||||||
draftState,
|
draftState,
|
||||||
...{ expanded: toRef(() => expanded), isUploading, initialDraft: toRef(() => initial) },
|
...$$({ expanded, isUploading, initialDraft: initial }),
|
||||||
},
|
},
|
||||||
)
|
))
|
||||||
|
|
||||||
const { editor } = useTiptap({
|
const { editor } = useTiptap({
|
||||||
content: computed({
|
content: computed({
|
||||||
get: () => draft.value.params.status,
|
get: () => draft.params.status,
|
||||||
set: (newVal) => {
|
set: (newVal) => {
|
||||||
draft.value.params.status = newVal
|
draft.params.status = newVal
|
||||||
draft.value.lastUpdated = Date.now()
|
draft.lastUpdated = Date.now()
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
placeholder: computed(() => placeholder ?? draft.value.params.inReplyToId ? t('placeholder.replying') : t('placeholder.default_1')),
|
placeholder: computed(() => placeholder ?? draft.params.inReplyToId ? t('placeholder.replying') : t('placeholder.default_1')),
|
||||||
autofocus: shouldExpanded.value,
|
autofocus: shouldExpanded,
|
||||||
onSubmit: publish,
|
onSubmit: publish,
|
||||||
onFocus() {
|
onFocus() {
|
||||||
if (!isExpanded && draft.value.initialText) {
|
if (!isExpanded && draft.initialText) {
|
||||||
editor.value?.chain().insertContent(`${draft.value.initialText} `).focus('end').run()
|
editor.value?.chain().insertContent(`${draft.initialText} `).focus('end').run()
|
||||||
draft.value.initialText = ''
|
draft.initialText = ''
|
||||||
}
|
}
|
||||||
isExpanded.value = true
|
isExpanded = true
|
||||||
},
|
},
|
||||||
onPaste: handlePaste,
|
onPaste: handlePaste,
|
||||||
})
|
})
|
||||||
|
|
||||||
function trimPollOptions() {
|
function trimPollOptions() {
|
||||||
const indexLastNonEmpty = draft.value.params.poll!.options.findLastIndex(option => option.trim().length > 0)
|
const indexLastNonEmpty = draft.params.poll!.options.findLastIndex(option => option.trim().length > 0)
|
||||||
const trimmedOptions = draft.value.params.poll!.options.slice(0, indexLastNonEmpty + 1)
|
const trimmedOptions = draft.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.value.params.poll!.options = trimmedOptions
|
draft.params.poll!.options = trimmedOptions
|
||||||
else
|
else
|
||||||
draft.value.params.poll!.options = [...trimmedOptions, '']
|
draft.params.poll!.options = [...trimmedOptions, '']
|
||||||
}
|
}
|
||||||
|
|
||||||
function editPollOptionDraft(event: Event, index: number) {
|
function editPollOptionDraft(event: Event, index: number) {
|
||||||
draft.value.params.poll!.options = Object.assign(draft.value.params.poll!.options.slice(), { [index]: (event.target as HTMLInputElement).value })
|
draft.params.poll!.options[index] = (event.target as HTMLInputElement).value
|
||||||
|
|
||||||
trimPollOptions()
|
trimPollOptions()
|
||||||
}
|
}
|
||||||
|
|
||||||
function deletePollOption(index: number) {
|
function deletePollOption(index: number) {
|
||||||
const newPollOptions = draft.value.params.poll!.options.slice()
|
draft.params.poll!.options.splice(index, 1)
|
||||||
newPollOptions.splice(index, 1)
|
|
||||||
draft.value.params.poll!.options = newPollOptions
|
|
||||||
trimPollOptions()
|
trimPollOptions()
|
||||||
}
|
}
|
||||||
|
|
||||||
const expiresInOptions = computed(() => [
|
const expiresInOptions = [
|
||||||
{
|
{
|
||||||
seconds: 1 * 60 * 60,
|
seconds: 1 * 60 * 60,
|
||||||
label: t('time_ago_options.hour_future', 1),
|
label: t('time_ago_options.hour_future', 1),
|
||||||
|
@ -114,11 +105,11 @@ const expiresInOptions = computed(() => [
|
||||||
seconds: 7 * 24 * 60 * 60,
|
seconds: 7 * 24 * 60 * 60,
|
||||||
label: 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)
|
||||||
|
@ -139,26 +130,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.value.mentions) {
|
if (draft.mentions) {
|
||||||
// + 1 is needed as mentions always need a space separator at the end
|
// + 1 is needed as mentions always need a space seperator at the end
|
||||||
length += draft.value.mentions.map((mention) => {
|
length += draft.mentions.map((mention) => {
|
||||||
const [handle] = mention.split('@')
|
const [handle] = mention.split('@')
|
||||||
return `@${handle}`
|
return `@${handle}`
|
||||||
}).join(' ').length + 1
|
}).join(' ').length + 1
|
||||||
}
|
}
|
||||||
|
|
||||||
length += stringLength(publishSpoilerText.value)
|
length += stringLength(publishSpoilerText)
|
||||||
|
|
||||||
return length
|
return length
|
||||||
})
|
})
|
||||||
|
|
||||||
const isExceedingCharacterLimit = computed(() => {
|
const isExceedingCharacterLimit = $computed(() => {
|
||||||
return characterCount.value > characterLimit.value
|
return characterCount > characterLimit.value
|
||||||
})
|
})
|
||||||
|
|
||||||
const postLanguageDisplay = computed(() => languagesNameList.find(i => i.code === (draft.value.params.language || preferredLanguage))?.nativeName)
|
const postLanguageDisplay = $computed(() => languagesNameList.find(i => i.code === (draft.params.language || preferredLanguage))?.nativeName)
|
||||||
|
|
||||||
const isDM = computed(() => draft.value.params.visibility === 'direct')
|
|
||||||
|
|
||||||
async function handlePaste(evt: ClipboardEvent) {
|
async function handlePaste(evt: ClipboardEvent) {
|
||||||
const files = evt.clipboardData?.files
|
const files = evt.clipboardData?.files
|
||||||
|
@ -177,7 +166,7 @@ function insertCustomEmoji(image: any) {
|
||||||
}
|
}
|
||||||
|
|
||||||
async function toggleSensitive() {
|
async function toggleSensitive() {
|
||||||
draft.value.params.sensitive = !draft.value.params.sensitive
|
draft.params.sensitive = !draft.params.sensitive
|
||||||
}
|
}
|
||||||
|
|
||||||
async function publish() {
|
async function publish() {
|
||||||
|
@ -211,11 +200,6 @@ defineExpose({
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
function stopQuestionMarkPropagation(e: KeyboardEvent) {
|
|
||||||
if (e.key === '?')
|
|
||||||
e.stopImmediatePropagation()
|
|
||||||
}
|
|
||||||
|
|
||||||
onDeactivated(() => {
|
onDeactivated(() => {
|
||||||
clearEmptyDrafts()
|
clearEmptyDrafts()
|
||||||
})
|
})
|
||||||
|
@ -224,13 +208,17 @@ onDeactivated(() => {
|
||||||
<template>
|
<template>
|
||||||
<div v-if="isHydrated && currentUser" flex="~ col gap-4" py3 px2 sm:px4 aria-roledescription="publish-widget">
|
<div v-if="isHydrated && currentUser" flex="~ col gap-4" py3 px2 sm:px4 aria-roledescription="publish-widget">
|
||||||
<template v-if="draft.editingStatus">
|
<template v-if="draft.editingStatus">
|
||||||
|
<div flex="~ col gap-1">
|
||||||
<div id="state-editing" text-secondary self-center>
|
<div id="state-editing" text-secondary self-center>
|
||||||
{{ $t('state.editing') }}
|
{{ $t('state.editing') }}
|
||||||
</div>
|
</div>
|
||||||
|
<StatusCard :status="draft.editingStatus" :actions="false" :hover="false" is-preview px-0 />
|
||||||
|
</div>
|
||||||
|
<div border="b dashed gray/40" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<div flex gap-3 flex-1>
|
<div flex gap-3 flex-1>
|
||||||
<NuxtLink self-start :to="getAccountRoute(currentUser.account)">
|
<NuxtLink :to="getAccountRoute(currentUser.account)">
|
||||||
<AccountBigAvatar :account="currentUser.account" square />
|
<AccountBigAvatar :account="currentUser.account" square />
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<!-- This `w-0` style is used to avoid overflow problems in flex layouts,so don't remove it unless you know what you're doing -->
|
<!-- This `w-0` style is used to avoid overflow problems in flex layouts,so don't remove it unless you know what you're doing -->
|
||||||
|
@ -279,16 +267,11 @@ onDeactivated(() => {
|
||||||
</ol>
|
</ol>
|
||||||
</CommonErrorMessage>
|
</CommonErrorMessage>
|
||||||
|
|
||||||
<div relative flex-1 flex flex-col min-h-30>
|
<div relative flex-1 flex flex-col>
|
||||||
<EditorContent
|
<EditorContent
|
||||||
:editor="editor"
|
:editor="editor"
|
||||||
flex max-w-full
|
flex max-w-full
|
||||||
:class="{
|
:class="shouldExpanded ? 'min-h-30 md:max-h-[calc(100vh-200px)] sm:max-h-[calc(100vh-400px)] max-h-35 of-y-auto overscroll-contain' : ''"
|
||||||
'md:max-h-[calc(100vh-200px)] sm:max-h-[calc(100vh-400px)] max-h-35 of-y-auto overscroll-contain': shouldExpanded,
|
|
||||||
'py2 px3.5 bg-dm rounded-4 me--1 ms--1 mt--1': isDM,
|
|
||||||
}"
|
|
||||||
@keydown="stopQuestionMarkPropagation"
|
|
||||||
@keydown.esc.prevent="editor?.commands.blur()"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -384,31 +367,31 @@ onDeactivated(() => {
|
||||||
@select="insertEmoji"
|
@select="insertEmoji"
|
||||||
@select-custom="insertCustomEmoji"
|
@select-custom="insertCustomEmoji"
|
||||||
>
|
>
|
||||||
<button btn-action-icon :title="$t('tooltip.emojis')" :aria-label="$t('tooltip.add_emojis')">
|
<button btn-action-icon :title="$t('tooltip.emoji')">
|
||||||
<div i-ri:emotion-line />
|
<div i-ri:emotion-line />
|
||||||
</button>
|
</button>
|
||||||
</PublishEmojiPicker>
|
</PublishEmojiPicker>
|
||||||
|
|
||||||
<CommonTooltip v-if="draft.params.poll === undefined" placement="top" :content="$t('tooltip.add_media')" no-auto-focus>
|
<CommonTooltip v-if="draft.params.poll === undefined" placement="top" :content="$t('tooltip.add_media')">
|
||||||
<button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments">
|
<button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments">
|
||||||
<div i-ri:image-add-line />
|
<div i-ri:image-add-line />
|
||||||
</button>
|
</button>
|
||||||
</CommonTooltip>
|
</CommonTooltip>
|
||||||
|
|
||||||
<template v-if="draft.attachments.length === 0">
|
<template v-if="draft.attachments.length === 0">
|
||||||
<CommonTooltip v-if="!draft.params.poll" placement="top" :content="$t('polls.create')" no-auto-focus>
|
<CommonTooltip v-if="!draft.params.poll" placement="top" :content="$t('polls.create')">
|
||||||
<button btn-action-icon :aria-label="$t('polls.create')" @click="draft.params.poll = { options: [''], expiresIn: expiresInOptions[expiresInDefaultOptionIndex].seconds }">
|
<button btn-action-icon :aria-label="$t('polls.create')" @click="draft.params.poll = { options: [''], expiresIn: expiresInOptions[expiresInDefaultOptionIndex].seconds }">
|
||||||
<div i-ri:chat-poll-line />
|
<div i-ri:chat-poll-line />
|
||||||
</button>
|
</button>
|
||||||
</CommonTooltip>
|
</CommonTooltip>
|
||||||
<div v-else rounded-full b-1 border-dark flex="~ row" gap-1>
|
<div v-else rounded-full b-1 border-dark flex="~ row" gap-1>
|
||||||
<CommonTooltip placement="top" :content="$t('polls.cancel')" no-auto-focus>
|
<CommonTooltip placement="top" :content="$t('polls.cancel')">
|
||||||
<button btn-action-icon b-r border-dark :aria-label="$t('polls.cancel')" @click="draft.params.poll = undefined">
|
<button btn-action-icon b-r border-dark :aria-label="$t('polls.cancel')" @click="draft.params.poll = undefined">
|
||||||
<div i-ri:close-line />
|
<div i-ri:close-line />
|
||||||
</button>
|
</button>
|
||||||
</CommonTooltip>
|
</CommonTooltip>
|
||||||
<CommonDropdown placement="top">
|
<CommonDropdown placement="top">
|
||||||
<CommonTooltip placement="top" :content="$t('polls.settings')" no-auto-focus>
|
<CommonTooltip placement="top" :content="$t('polls.settings')">
|
||||||
<button :aria-label="$t('polls.settings')" btn-action-icon w-12>
|
<button :aria-label="$t('polls.settings')" btn-action-icon w-12>
|
||||||
<div i-ri:list-settings-line />
|
<div i-ri:list-settings-line />
|
||||||
<div i-ri:arrow-down-s-line text-sm text-secondary me--1 />
|
<div i-ri:arrow-down-s-line text-sm text-secondary me--1 />
|
||||||
|
@ -422,7 +405,7 @@ onDeactivated(() => {
|
||||||
</template>
|
</template>
|
||||||
</CommonDropdown>
|
</CommonDropdown>
|
||||||
<CommonDropdown placement="bottom">
|
<CommonDropdown placement="bottom">
|
||||||
<CommonTooltip placement="top" :content="$t('polls.expiration')" no-auto-focus>
|
<CommonTooltip placement="top" :content="$t('polls.expiration')">
|
||||||
<button :aria-label="$t('polls.expiration')" btn-action-icon w-12>
|
<button :aria-label="$t('polls.expiration')" btn-action-icon w-12>
|
||||||
<div i-ri:hourglass-line />
|
<div i-ri:hourglass-line />
|
||||||
<div i-ri:arrow-down-s-line text-sm text-secondary me--1 />
|
<div i-ri:arrow-down-s-line text-sm text-secondary me--1 />
|
||||||
|
@ -447,7 +430,7 @@ onDeactivated(() => {
|
||||||
|
|
||||||
<PublishCharacterCounter :max="characterLimit" :length="characterCount" />
|
<PublishCharacterCounter :max="characterLimit" :length="characterCount" />
|
||||||
|
|
||||||
<CommonTooltip placement="top" :content="$t('tooltip.change_language')" no-auto-focus>
|
<CommonTooltip placement="top" :content="$t('tooltip.change_language')">
|
||||||
<CommonDropdown placement="bottom" auto-boundary-max-size>
|
<CommonDropdown placement="bottom" auto-boundary-max-size>
|
||||||
<button btn-action-icon :aria-label="$t('tooltip.change_language')" w-max mr1>
|
<button btn-action-icon :aria-label="$t('tooltip.change_language')" w-max mr1>
|
||||||
<span v-if="postLanguageDisplay" text-secondary text-sm ml1>{{ postLanguageDisplay }}</span>
|
<span v-if="postLanguageDisplay" text-secondary text-sm ml1>{{ postLanguageDisplay }}</span>
|
||||||
|
@ -461,7 +444,7 @@ onDeactivated(() => {
|
||||||
</CommonDropdown>
|
</CommonDropdown>
|
||||||
</CommonTooltip>
|
</CommonTooltip>
|
||||||
|
|
||||||
<CommonTooltip placement="top" :content="$t('tooltip.add_content_warning')" no-auto-focus>
|
<CommonTooltip placement="top" :content="$t('tooltip.add_content_warning')">
|
||||||
<button btn-action-icon :aria-label="$t('tooltip.add_content_warning')" @click="toggleSensitive">
|
<button btn-action-icon :aria-label="$t('tooltip.add_content_warning')" @click="toggleSensitive">
|
||||||
<div v-if="draft.params.sensitive" i-ri:alarm-warning-fill text-orange />
|
<div v-if="draft.params.sensitive" i-ri:alarm-warning-fill text-orange />
|
||||||
<div v-else i-ri:alarm-warning-line />
|
<div v-else i-ri:alarm-warning-line />
|
||||||
|
@ -477,7 +460,7 @@ onDeactivated(() => {
|
||||||
</template>
|
</template>
|
||||||
</PublishVisibilityPicker>
|
</PublishVisibilityPicker>
|
||||||
|
|
||||||
<CommonTooltip v-if="failedMessages.length > 0" id="publish-failed-tooltip" placement="top" :content="$t('tooltip.publish_failed')" no-auto-focus>
|
<CommonTooltip v-if="failedMessages.length > 0" id="publish-failed-tooltip" placement="top" :content="$t('tooltip.publish_failed')">
|
||||||
<button
|
<button
|
||||||
btn-danger rounded-3 text-sm w-full flex="~ gap1" items-center md:w-fit aria-describedby="publish-failed-tooltip"
|
btn-danger rounded-3 text-sm w-full flex="~ gap1" items-center md:w-fit aria-describedby="publish-failed-tooltip"
|
||||||
>
|
>
|
||||||
|
@ -488,7 +471,7 @@ onDeactivated(() => {
|
||||||
</button>
|
</button>
|
||||||
</CommonTooltip>
|
</CommonTooltip>
|
||||||
|
|
||||||
<CommonTooltip v-else id="publish-tooltip" placement="top" :content="$t('tooltip.add_publishable_content')" :disabled="!(isPublishDisabled || isExceedingCharacterLimit)" no-auto-focus>
|
<CommonTooltip v-else id="publish-tooltip" placement="top" :content="$t('tooltip.add_publishable_content')" :disabled="!(isPublishDisabled || isExceedingCharacterLimit)">
|
||||||
<button
|
<button
|
||||||
btn-solid rounded-3 text-sm w-full flex="~ gap1" items-center
|
btn-solid rounded-3 text-sm w-full flex="~ gap1" items-center
|
||||||
md:w-fit
|
md:w-fit
|
||||||
|
|
|
@ -5,16 +5,16 @@ const route = useRoute()
|
||||||
const { formatNumber } = useHumanReadableNumber()
|
const { formatNumber } = useHumanReadableNumber()
|
||||||
const timeAgoOptions = useTimeAgoOptions()
|
const timeAgoOptions = useTimeAgoOptions()
|
||||||
|
|
||||||
const draftKey = ref('home')
|
let draftKey = $ref('home')
|
||||||
|
|
||||||
const draftKeys = computed(() => Object.keys(currentUserDrafts.value))
|
const draftKeys = $computed(() => Object.keys(currentUserDrafts.value))
|
||||||
const nonEmptyDrafts = computed(() => draftKeys.value
|
const nonEmptyDrafts = $computed(() => draftKeys
|
||||||
.filter(i => i !== draftKey.value && !isEmptyDraft(currentUserDrafts.value[i]))
|
.filter(i => i !== draftKey && !isEmptyDraft(currentUserDrafts.value[i]))
|
||||||
.map(i => [i, currentUserDrafts.value[i]] as const),
|
.map(i => [i, currentUserDrafts.value[i]] as const),
|
||||||
)
|
)
|
||||||
|
|
||||||
watchEffect(() => {
|
watchEffect(() => {
|
||||||
draftKey.value = route.query.draft?.toString() || 'home'
|
draftKey = route.query.draft?.toString() || 'home'
|
||||||
})
|
})
|
||||||
|
|
||||||
onDeactivated(() => {
|
onDeactivated(() => {
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<button
|
<button
|
||||||
v-if="useNuxtApp().$pwa?.needRefresh"
|
v-if="$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="useNuxtApp().$pwa?.updateServiceWorker()"
|
@click="$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="useNuxtApp().$pwa?.showInstallPrompt && !useNuxtApp().$pwa?.needRefresh"
|
v-if="$pwa?.showInstallPrompt && !$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="useNuxtApp().$pwa?.install()">
|
<button type="button" btn-solid px-4 py-1 text-center text-sm @click="$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="useNuxtApp().$pwa?.cancelInstall()">
|
<button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="$pwa.cancelInstall()">
|
||||||
{{ $t('pwa.dismiss') }}
|
{{ $t('pwa.dismiss') }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
v-if="useNuxtApp().$pwa?.needRefresh"
|
v-if="$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="useNuxtApp().$pwa?.updateServiceWorker()">
|
<button type="button" btn-solid px-4 py-1 text-center text-sm @click="$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="useNuxtApp().$pwa?.close()">
|
<button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="$pwa.close()">
|
||||||
{{ $t('pwa.dismiss') }}
|
{{ $t('pwa.dismiss') }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,266 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import type { mastodon } from 'masto'
|
|
||||||
import { toggleBlockAccount, toggleFollowAccount, toggleMuteAccount, useRelationship } from '~~/composables/masto/relationship'
|
|
||||||
|
|
||||||
const { account, status } = defineProps<{
|
|
||||||
account: mastodon.v1.Account
|
|
||||||
status?: mastodon.v1.Status
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(event: 'close'): void
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const { client } = useMasto()
|
|
||||||
|
|
||||||
const step = ref('selectCategory')
|
|
||||||
const serverRules = ref((await client.value.v2.instance.fetch()).rules || [])
|
|
||||||
const reportReason = ref('')
|
|
||||||
const selectedRuleIds = ref([])
|
|
||||||
const availableStatuses = ref(status ? [status] : [])
|
|
||||||
const selectedStatusIds = ref(status ? [status.id] : [])
|
|
||||||
const additionalComments = ref('')
|
|
||||||
const forwardReport = ref(false)
|
|
||||||
|
|
||||||
const dismissButton = ref<HTMLDivElement>()
|
|
||||||
|
|
||||||
loadStatuses() // Load statuses asynchronously ahead of time
|
|
||||||
|
|
||||||
function categoryChosen() {
|
|
||||||
step.value = reportReason.value === 'dontlike' ? 'furtherActions' : 'selectStatuses'
|
|
||||||
resetModal()
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadStatuses() {
|
|
||||||
if (status) {
|
|
||||||
// Load the 5 statuses before and after the reported status
|
|
||||||
const prevStatuses = await client.value.v1.accounts.$select(account.id).statuses.list({
|
|
||||||
maxId: status.id,
|
|
||||||
limit: 5,
|
|
||||||
})
|
|
||||||
const nextStatuses = await client.value.v1.accounts.$select(account.id).statuses.list({
|
|
||||||
minId: status.id,
|
|
||||||
limit: 5,
|
|
||||||
})
|
|
||||||
availableStatuses.value = availableStatuses.value.concat(prevStatuses)
|
|
||||||
availableStatuses.value = availableStatuses.value.concat(nextStatuses)
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
// Reporting an account directly
|
|
||||||
// Load the 10 most recent statuses
|
|
||||||
const mostRecentStatuses = await client.value.v1.accounts.$select(account.id).statuses.list({
|
|
||||||
limit: 10,
|
|
||||||
})
|
|
||||||
availableStatuses.value = mostRecentStatuses
|
|
||||||
}
|
|
||||||
availableStatuses.value.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
|
|
||||||
}
|
|
||||||
|
|
||||||
async function submitReport() {
|
|
||||||
await client.value.v1.reports.create({
|
|
||||||
accountId: account.id,
|
|
||||||
statusIds: selectedStatusIds.value,
|
|
||||||
comment: additionalComments.value,
|
|
||||||
forward: forwardReport.value,
|
|
||||||
category: reportReason.value === 'spam' ? 'spam' : reportReason.value === 'violation' ? 'violation' : 'other',
|
|
||||||
ruleIds: reportReason.value === 'violation' ? selectedRuleIds.value : null,
|
|
||||||
})
|
|
||||||
step.value = 'furtherActions'
|
|
||||||
resetModal()
|
|
||||||
}
|
|
||||||
|
|
||||||
function unfollow() {
|
|
||||||
emit('close')
|
|
||||||
toggleFollowAccount(useRelationship(account).value!, account)
|
|
||||||
}
|
|
||||||
|
|
||||||
function mute() {
|
|
||||||
emit('close')
|
|
||||||
toggleMuteAccount(useRelationship(account).value!, account)
|
|
||||||
}
|
|
||||||
|
|
||||||
function block() {
|
|
||||||
emit('close')
|
|
||||||
toggleBlockAccount(useRelationship(account).value!, account)
|
|
||||||
}
|
|
||||||
|
|
||||||
function resetModal() {
|
|
||||||
// TODO: extract this scroll/reset logic into ModalDialog element
|
|
||||||
dismissButton.value?.scrollIntoView() // scroll to top
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div my-8 px-3 sm:px-8 flex="~ col gap-4" relative>
|
|
||||||
<h2 mxa text-xl>
|
|
||||||
<i18n-t :keypath="reportReason === 'dontlike' ? 'report.limiting' : 'report.reporting'">
|
|
||||||
<b text-primary>@{{ account.acct }}</b>
|
|
||||||
</i18n-t>
|
|
||||||
</h2>
|
|
||||||
<button ref="dismissButton" btn-action-icon absolute top--8 right-0 m1 aria-label="Close" @click="emit('close')">
|
|
||||||
<div i-ri:close-line />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<template v-if="step === 'selectCategory'">
|
|
||||||
<h1 mxa text-4xl mb4>
|
|
||||||
{{ status ? $t('report.whats_wrong_post') : $t('report.whats_wrong_account') }}
|
|
||||||
</h1>
|
|
||||||
<p text-xl>
|
|
||||||
{{ $t('report.select_one') }}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<input id="dontlike" v-model="reportReason" type="radio" value="dontlike">
|
|
||||||
<label pl-2 for="dontlike" font-bold>{{ $t('report.dontlike') }}</label>
|
|
||||||
<p pl-6>
|
|
||||||
{{ $t('report.dontlike_desc') }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<input id="spam" v-model="reportReason" type="radio" value="spam">
|
|
||||||
<label pl-2 for="spam" font-bold>{{ $t('report.spam') }}</label>
|
|
||||||
<p pl-6>
|
|
||||||
{{ $t('report.spam_desc') }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="serverRules.length > 0">
|
|
||||||
<input id="violation" v-model="reportReason" type="radio" value="violation">
|
|
||||||
<label pl-2 for="violation" font-bold>{{ $t('report.violation') }}</label>
|
|
||||||
<p v-if="reportReason === 'violation'" pl-6 pt-2 text-primary font-bold>
|
|
||||||
{{ $t('report.select_many') }}
|
|
||||||
</p>
|
|
||||||
<ul pl-6>
|
|
||||||
<li v-for="rule in serverRules" :key="rule.id" pt-2>
|
|
||||||
<input
|
|
||||||
:id="rule.id"
|
|
||||||
v-model="selectedRuleIds"
|
|
||||||
type="checkbox"
|
|
||||||
:value="rule.id"
|
|
||||||
:disabled="reportReason !== 'violation'"
|
|
||||||
>
|
|
||||||
<label pl-2 :for="rule.id">{{ rule.text }}</label>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<input id="other" v-model="reportReason" type="radio" value="other">
|
|
||||||
<label pl-2 for="other" font-bold>{{ $t('report.other') }}</label>
|
|
||||||
<p pl-6>
|
|
||||||
{{ $t('report.other_desc') }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="reportReason && reportReason !== 'dontlike'">
|
|
||||||
<h3 mt-8 mb-4 font-bold>
|
|
||||||
{{ $t('report.anything_else') }}
|
|
||||||
</h3>
|
|
||||||
<textarea v-model="additionalComments" w-full h-20 p-3 border :placeholder="$t('report.additional_comments')" />
|
|
||||||
<div v-if="getServerName(account) && getServerName(account) !== currentServer">
|
|
||||||
<h3 mt-8 mb-2 font-bold>
|
|
||||||
{{ $t('report.another_server') }}
|
|
||||||
</h3>
|
|
||||||
<p pb-1>
|
|
||||||
{{ $t('report.forward_question') }}
|
|
||||||
</p>
|
|
||||||
<input id="forward" v-model="forwardReport" type="checkbox" value="rule.id">
|
|
||||||
<label pl-2 for="forward"><b>{{ $t('report.forward', [getServerName(account)]) }}</b></label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
btn-solid mxa mt-10
|
|
||||||
:disabled="!reportReason || (reportReason === 'violation' && selectedRuleIds.length < 1)"
|
|
||||||
@click="categoryChosen()"
|
|
||||||
>
|
|
||||||
{{ $t('action.next') }}
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-else-if="step === 'selectStatuses'">
|
|
||||||
<h1 mxa text-4xl mb4>
|
|
||||||
{{ status ? $t('report.select_posts_other') : $t('report.select_posts') }}
|
|
||||||
</h1>
|
|
||||||
<p text-primary font-bold>
|
|
||||||
{{ $t('report.select_many') }}
|
|
||||||
</p>
|
|
||||||
<table>
|
|
||||||
<tr v-for="availableStatus in availableStatuses" :key="availableStatus.id">
|
|
||||||
<td>
|
|
||||||
<input
|
|
||||||
:id="availableStatus.id"
|
|
||||||
v-model="selectedStatusIds"
|
|
||||||
type="checkbox"
|
|
||||||
:value="availableStatus.id"
|
|
||||||
>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<label :for="availableStatus.id">
|
|
||||||
<StatusCard :status="availableStatus" :actions="false" pointer-events-none />
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
<button
|
|
||||||
btn-solid mxa mt-5
|
|
||||||
@click="submitReport()"
|
|
||||||
>
|
|
||||||
{{ $t('report.submit') }}
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-else-if="step === 'furtherActions'">
|
|
||||||
<h1 mxa text-4xl mb4>
|
|
||||||
{{ reportReason === 'dontlike' ? $t('report.further_actions.limit.title') : $t('report.further_actions.report.title') }}
|
|
||||||
</h1>
|
|
||||||
<p text-xl>
|
|
||||||
{{ reportReason === 'dontlike' ? $t('report.further_actions.limit.description') : $t('report.further_actions.report.description') }}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div v-if="useRelationship(account).value?.following">
|
|
||||||
<button btn-outline mxa mt-4 mb-2 @click="unfollow()">
|
|
||||||
<i18n-t keypath="menu.unfollow_account">
|
|
||||||
<b>@{{ account.acct }}</b>
|
|
||||||
</i18n-t>
|
|
||||||
</button><br>
|
|
||||||
{{ $t('report.unfollow_desc') }}
|
|
||||||
</div>
|
|
||||||
<div v-if="!useRelationship(account).value?.muting">
|
|
||||||
<button btn-outline mxa mt-4 mb-2 @click="mute()">
|
|
||||||
<i18n-t keypath="menu.mute_account">
|
|
||||||
<b>@{{ account.acct }}</b>
|
|
||||||
</i18n-t>
|
|
||||||
</button><br>
|
|
||||||
{{ $t('report.mute_desc') }}
|
|
||||||
</div>
|
|
||||||
<div v-if="!useRelationship(account).value?.blocking">
|
|
||||||
<button btn-outline mxa mt-4 mb-2 @click="block()">
|
|
||||||
<i18n-t keypath="menu.block_account">
|
|
||||||
<b>@{{ account.acct }}</b>
|
|
||||||
</i18n-t>
|
|
||||||
</button><br>
|
|
||||||
{{ $t('report.block_desc') }}
|
|
||||||
</div>
|
|
||||||
<button btn-solid mxa mt-10 @click="emit('close')">
|
|
||||||
{{ $t('action.done') }}
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
tr {
|
|
||||||
border-bottom-width: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr:last-child {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
padding-top: 10px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -6,15 +6,12 @@ defineProps<{
|
||||||
}>()
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- TODO: reuse AccountInfo.vue -->
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div flex gap-2 items-center>
|
<div flex gap-2 items-center>
|
||||||
<AccountAvatar w-10 h-10 :account="account" shrink-0 />
|
<AccountAvatar w-10 h-10 :account="account" shrink-0 />
|
||||||
<div flex="~ col gap1" shrink h-full overflow-hidden leading-none>
|
<div flex="~ col gap1" shrink h-full overflow-hidden leading-none>
|
||||||
<div flex="~" gap-2>
|
<div flex="~" gap-2>
|
||||||
<AccountDisplayName :account="account" line-clamp-1 ws-pre-wrap break-all text-base />
|
<AccountDisplayName :account="account" line-clamp-1 ws-pre-wrap break-all text-base />
|
||||||
<AccountLockIndicator v-if="account.locked" text-xs />
|
|
||||||
<AccountBotIndicator v-if="account.bot" text-xs />
|
<AccountBotIndicator v-if="account.bot" text-xs />
|
||||||
</div>
|
</div>
|
||||||
<AccountHandle text-sm :account="account" text-secondary-light />
|
<AccountHandle text-sm :account="account" text-secondary-light />
|
||||||
|
|
|
@ -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,12 +77,11 @@ function activate() {
|
||||||
ps-3
|
ps-3
|
||||||
pe-1
|
pe-1
|
||||||
ml-1
|
ml-1
|
||||||
:placeholder="t('nav.search')"
|
:placeholder="isHydrated ? t('nav.search') : ''"
|
||||||
pb="1px"
|
pb="1px"
|
||||||
placeholder-text-secondary
|
placeholder-text-secondary
|
||||||
@keydown.down.prevent="shift(1)"
|
@keydown.down.prevent="shift(1)"
|
||||||
@keydown.up.prevent="shift(-1)"
|
@keydown.up.prevent="shift(-1)"
|
||||||
@keydown.esc.prevent="input?.blur()"
|
|
||||||
@keypress.enter="activate"
|
@keypress.enter="activate"
|
||||||
>
|
>
|
||||||
<button v-if="query.length" btn-action-icon text-secondary @click="query = ''; input?.focus()">
|
<button v-if="query.length" btn-action-icon text-secondary @click="query = ''; input?.focus()">
|
||||||
|
|
|
@ -4,7 +4,7 @@ import type { FontSize } from '~/composables/settings'
|
||||||
|
|
||||||
const userSettings = useUserSettings()
|
const userSettings = useUserSettings()
|
||||||
|
|
||||||
const sizes = (Array.from({ length: 11 })).fill(0).map((x, i) => `${10 + i}px`) as FontSize[]
|
const sizes = (new Array(11)).fill(0).map((x, i) => `${10 + i}px`) as FontSize[]
|
||||||
|
|
||||||
function setFontSize(e: Event) {
|
function setFontSize(e: Event) {
|
||||||
if (e.target && 'valueAsNumber' in e.target)
|
if (e.target && 'valueAsNumber' in e.target)
|
||||||
|
|
|
@ -10,11 +10,9 @@ const props = defineProps<{
|
||||||
external?: true
|
external?: true
|
||||||
large?: true
|
large?: true
|
||||||
match?: boolean
|
match?: boolean
|
||||||
target?: string
|
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const scrollOnClick = computed(() => props.to && !(props.target === '_blank' || props.external))
|
|
||||||
|
|
||||||
useCommand({
|
useCommand({
|
||||||
scope: 'Settings',
|
scope: 'Settings',
|
||||||
|
@ -41,15 +39,14 @@ useCommand({
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
:to="to"
|
:to="to"
|
||||||
:external="external"
|
:external="external"
|
||||||
:target="target"
|
|
||||||
exact-active-class="text-primary"
|
exact-active-class="text-primary"
|
||||||
:class="disabled ? 'op25 pointer-events-none ' : match ? 'text-primary' : ''"
|
:class="disabled ? 'op25 pointer-events-none ' : match ? 'text-primary' : ''"
|
||||||
block w-full group focus:outline-none
|
block w-full group focus:outline-none
|
||||||
:tabindex="disabled ? -1 : null"
|
:tabindex="disabled ? -1 : null"
|
||||||
@click="scrollOnClick ? $scrollToTop() : undefined"
|
@click="to ? $scrollToTop() : undefined"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
w-full flex px5 py3 md:gap2 gap4 items-center
|
w-full flex w-fit 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"
|
||||||
>
|
>
|
||||||
|
|
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue