Compare commits
No commits in common. "main" and "v0.1.14" have entirely different histories.
706 changed files with 19896 additions and 65720 deletions
|
|
@ -1,18 +0,0 @@
|
|||
# Modified from .gitignore
|
||||
node_modules
|
||||
*.log
|
||||
dist
|
||||
.output
|
||||
.nuxt
|
||||
#.env # Not ignoring this file because it can contain build-related settings.
|
||||
.DS_Store
|
||||
.idea/
|
||||
.vite-inspect
|
||||
.netlify/
|
||||
.eslintcache
|
||||
|
||||
public/emojis
|
||||
|
||||
*~
|
||||
*swp
|
||||
*swo
|
||||
|
|
@ -1,19 +1,14 @@
|
|||
NUXT_PUBLIC_TRANSLATE_API=
|
||||
NUXT_PUBLIC_DEFAULT_SERVER=
|
||||
NUXT_PUBLIC_SINGLE_INSTANCE=
|
||||
NUXT_PUBLIC_PRIVACY_POLICY_URL=
|
||||
|
||||
# Production only
|
||||
NUXT_CLOUDFLARE_ACCOUNT_ID=
|
||||
NUXT_CLOUDFLARE_NAMESPACE_ID=
|
||||
NUXT_CLOUDFLARE_API_TOKEN=
|
||||
|
||||
# 'cloudflare' | 'vercel' | 'fs'
|
||||
# 'cloudflare' | 'fs'
|
||||
NUXT_STORAGE_DRIVER=
|
||||
NUXT_STORAGE_FS_BASE=
|
||||
|
||||
NUXT_ADMIN_KEY=
|
||||
|
||||
NUXT_PUBLIC_DISABLE_VERSION_CHECK=
|
||||
|
||||
NUXT_GITHUB_CLIENT_ID=
|
||||
|
|
|
|||
6
.eslintignore
Normal file
6
.eslintignore
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
*.css
|
||||
*.png
|
||||
*.ico
|
||||
*.toml
|
||||
https-dev-config/localhost.crt
|
||||
https-dev-config/localhost.key
|
||||
12
.eslintrc
Normal file
12
.eslintrc
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"extends": "@antfu",
|
||||
"ignorePatterns": ["!pages/public"],
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["locales/**.json"],
|
||||
"rules": {
|
||||
"jsonc/sort-keys": "error"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
1
.gitattributes
vendored
1
.gitattributes
vendored
|
|
@ -1 +0,0 @@
|
|||
* text=auto eol=lf
|
||||
3
.github/FUNDING.yml
vendored
3
.github/FUNDING.yml
vendored
|
|
@ -1,2 +1 @@
|
|||
github: [elk-zone]
|
||||
open_collective: elk
|
||||
github: [antfu, patak-dev, sxzz, danielroe]
|
||||
|
|
|
|||
5
.github/ISSUE_TEMPLATE/bug_report.md
vendored
5
.github/ISSUE_TEMPLATE/bug_report.md
vendored
|
|
@ -1,5 +0,0 @@
|
|||
---
|
||||
name: 🐞 Bug report
|
||||
about: Report an issue
|
||||
labels: ['s: pending triage', 'c: bug']
|
||||
---
|
||||
56
.github/ISSUE_TEMPLATE/bug_report.yml
vendored
Normal file
56
.github/ISSUE_TEMPLATE/bug_report.yml
vendored
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
name: 🐞 Bug report
|
||||
description: Report an issue
|
||||
labels: ['s: pending triage', 'c: bug']
|
||||
body:
|
||||
- type: markdown
|
||||
attributes:
|
||||
value: |
|
||||
Thanks for taking the time to fill out this bug report!
|
||||
|
||||
If you are unsure whether your problem is a bug or not, you can check the following:
|
||||
|
||||
- use our [Discord community](https://chat.elk.zone)
|
||||
- open a new [discussion](https://github.com/elk-zone/elk/discussions) and ask your question there
|
||||
|
||||
- type: checkboxes
|
||||
id: checkboxes
|
||||
attributes:
|
||||
label: Pre-Checks
|
||||
description: Before submitting the issue, please make sure you do the following
|
||||
options:
|
||||
# - label: Follow our [Code of Conduct](https://github.com/elk-zone/elk/blob/main/CODE_OF_CONDUCT.md).
|
||||
# required: true
|
||||
# - label: Read the [Contributing Guidelines](https://github.com/elk-zone/elk/blob/main/CONTRIBUTING.md).
|
||||
# required: true
|
||||
- label: Check that there isn't [already an issue](https://github.com/elk-zone/elk/issues) that reports the same bug to avoid creating a duplicate.
|
||||
required: true
|
||||
- label: Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/elk-zone/elk/discussions) or join our [Discord Chat Server](https://chat.elk.zone).
|
||||
required: true
|
||||
- label: Providing a screenshot or video to reproduce the issue or show visually what was meant.
|
||||
required: true
|
||||
- label: I am willing to provide a PR.
|
||||
|
||||
- type: textarea
|
||||
id: bug-description
|
||||
attributes:
|
||||
label: Describe the bug
|
||||
description: A clear and concise description of what the bug is.
|
||||
placeholder: I am doing ... What I expect is ... What actually happening is ...
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: textarea
|
||||
id: reproduction
|
||||
attributes:
|
||||
label: Reproduction video or screenshot
|
||||
description: |
|
||||
A video or screenshot that visually shows the issue.
|
||||
**Tip:** You can attach images or recordings files by clicking this area to highlight it and then dragging files in.
|
||||
|
||||
- type: textarea
|
||||
id: additional-context
|
||||
attributes:
|
||||
label: Additional Context
|
||||
description: |
|
||||
Anything else relevant? Please tell us here, e.g. your used web browser and/or you are on desktop or mobile.
|
||||
**Tip:** You can attach images or recordings files by clicking this area to highlight it and then dragging files in.
|
||||
5
.github/ISSUE_TEMPLATE/feature_request.md
vendored
5
.github/ISSUE_TEMPLATE/feature_request.md
vendored
|
|
@ -1,5 +0,0 @@
|
|||
---
|
||||
name: 🚀 New feature proposal
|
||||
about: Propose a new feature
|
||||
labels: 's: pending triage'
|
||||
---
|
||||
35
.github/ISSUE_TEMPLATE/feature_request.yml
vendored
Normal file
35
.github/ISSUE_TEMPLATE/feature_request.yml
vendored
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
name: 🚀 New feature proposal
|
||||
description: Propose a new feature
|
||||
labels: ['s: pending triage'] # This will automatically assign the 's: pending triage' label
|
||||
body:
|
||||
- type: markdown
|
||||
attributes:
|
||||
value: Thanks for your interest in the project and taking the time to fill out this feature report!
|
||||
|
||||
- type: textarea
|
||||
id: feature-description
|
||||
attributes:
|
||||
label: Clear and concise description of the problem
|
||||
description: 'As a user I want [goal / wish] so that [benefit]. If you intend to submit a PR for this issue, tell us in the description. Thanks!'
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: textarea
|
||||
id: suggested-solution
|
||||
attributes:
|
||||
label: Suggested solution
|
||||
description: 'In section [xy] we could provide following feature...'
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: textarea
|
||||
id: alternative
|
||||
attributes:
|
||||
label: Alternative
|
||||
description: Clear and concise description of any alternative solutions or features you've considered.
|
||||
|
||||
- type: textarea
|
||||
id: additional-context
|
||||
attributes:
|
||||
label: Additional context
|
||||
description: Any other context about the feature request here.
|
||||
5
.github/ISSUE_TEMPLATE/freestyle.md
vendored
Normal file
5
.github/ISSUE_TEMPLATE/freestyle.md
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
name: Freestyle Report
|
||||
about: Create a report to help us improve
|
||||
labels: 'pending triage' # This will automatically assign the 'pending triage' label
|
||||
---
|
||||
1
.github/_workflows/README.md
vendored
Normal file
1
.github/_workflows/README.md
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
GitHub Actions is temporary disabled as we are reaching the usage limit as a private repo. Tests have been moved to Netlify pipeline as an workaround. We shall recover this once we open up.
|
||||
36
.github/_workflows/ci.yml
vendored
Normal file
36
.github/_workflows/ci.yml
vendored
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
name: ci
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
pull_request:
|
||||
branches:
|
||||
- main
|
||||
|
||||
jobs:
|
||||
ci:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- run: corepack enable
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
cache: pnpm
|
||||
|
||||
- name: 📦 Install dependencies
|
||||
run: pnpm install --frozen-lockfile
|
||||
|
||||
- name: 🚧 Set up project
|
||||
run: pnpm nuxi prepare
|
||||
|
||||
- name: 🧪 Test project
|
||||
run: pnpm test
|
||||
|
||||
- name: 📝 Lint
|
||||
run: pnpm lint
|
||||
|
||||
- name: 💪 Type check
|
||||
run: pnpm test:typecheck
|
||||
|
|
@ -19,6 +19,6 @@ jobs:
|
|||
name: Semantic Pull Request
|
||||
steps:
|
||||
- name: Validate PR title
|
||||
uses: amannn/action-semantic-pull-request@v5.5.3
|
||||
uses: amannn/action-semantic-pull-request@v5.0.2
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
13
.github/renovate.json5
vendored
13
.github/renovate.json5
vendored
|
|
@ -3,14 +3,6 @@
|
|||
"extends": ["config:base", "schedule:weekly", "group:allNonMajor"],
|
||||
"labels": ["c: dependencies"],
|
||||
"rangeStrategy": "bump",
|
||||
"ignoreDeps": [
|
||||
"vue",
|
||||
"vue-tsc",
|
||||
"typescript",
|
||||
|
||||
// Intl.Segmenter is not supported in Firefox
|
||||
"string-length"
|
||||
],
|
||||
"packageRules": [
|
||||
{
|
||||
"groupName": "devDependencies",
|
||||
|
|
@ -40,6 +32,7 @@
|
|||
"groupName": "lint",
|
||||
"matchPackageNames": [
|
||||
"@antfu/eslint-config",
|
||||
"@types/prettier",
|
||||
"eslint",
|
||||
"prettier"
|
||||
]
|
||||
|
|
@ -63,10 +56,6 @@
|
|||
{
|
||||
"groupName": "typescript",
|
||||
"matchPackageNames": ["typescript"]
|
||||
},
|
||||
{
|
||||
"matchDatasources": ["node-version"],
|
||||
"enabled": false
|
||||
}
|
||||
],
|
||||
"vulnerabilityAlerts": {
|
||||
|
|
|
|||
43
.github/workflows/ci.yml
vendored
43
.github/workflows/ci.yml
vendored
|
|
@ -1,43 +0,0 @@
|
|||
name: ci
|
||||
|
||||
permissions: {}
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
pull_request:
|
||||
branches:
|
||||
- main
|
||||
workflow_dispatch: {}
|
||||
merge_group: {}
|
||||
|
||||
jobs:
|
||||
ci:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
# workaround for npm registry key change
|
||||
# ref. `pnpm@10.1.0` / `pnpm@9.15.4` cannot be installed due to key id mismatch · Issue #612 · nodejs/corepack
|
||||
# - https://github.com/nodejs/corepack/issues/612#issuecomment-2629496091
|
||||
- run: npm i -g corepack@latest && corepack enable
|
||||
- uses: actions/setup-node@v4.4.0
|
||||
with:
|
||||
node-version-file: .nvmrc
|
||||
|
||||
- name: 📦 Install dependencies
|
||||
run: pnpm install --frozen-lockfile
|
||||
|
||||
- name: 🚧 Set up project
|
||||
run: pnpm nuxi prepare
|
||||
|
||||
- name: 🧪 Test project
|
||||
run: pnpm test:ci
|
||||
timeout-minutes: 10
|
||||
|
||||
- name: 📝 Lint
|
||||
run: pnpm lint
|
||||
|
||||
- name: 💪 Type check
|
||||
run: pnpm test:typecheck
|
||||
46
.github/workflows/docker.yml
vendored
46
.github/workflows/docker.yml
vendored
|
|
@ -1,46 +0,0 @@
|
|||
name: build & push docker container
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
tags:
|
||||
- '*'
|
||||
pull_request:
|
||||
branches:
|
||||
- main
|
||||
jobs:
|
||||
docker:
|
||||
runs-on: ubuntu-latest
|
||||
permissions:
|
||||
contents: read
|
||||
packages: write
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
- name: Docker meta
|
||||
id: metal
|
||||
uses: docker/metadata-action@v5
|
||||
with:
|
||||
images: |
|
||||
ghcr.io/${{ github.repository }}
|
||||
- name: Set up QEMU
|
||||
uses: docker/setup-qemu-action@v3
|
||||
- name: Set up Docker Buildx
|
||||
uses: docker/setup-buildx-action@v3
|
||||
- name: Login to GitHub Container Registry
|
||||
if: github.event_name != 'pull_request'
|
||||
uses: docker/login-action@v3
|
||||
with:
|
||||
registry: ghcr.io
|
||||
username: ${{ github.actor }}
|
||||
password: ${{ github.token }}
|
||||
- name: Build and push
|
||||
uses: docker/build-push-action@v6
|
||||
with:
|
||||
context: .
|
||||
platforms: linux/amd64,linux/arm64
|
||||
push: ${{ github.event_name != 'pull_request' }}
|
||||
tags: ${{ steps.metal.outputs.tags }}
|
||||
labels: ${{ steps.metal.outputs.labels }}
|
||||
cache-from: type=gha
|
||||
cache-to: type=gha,mode=max
|
||||
26
.github/workflows/release.yml
vendored
26
.github/workflows/release.yml
vendored
|
|
@ -1,26 +0,0 @@
|
|||
name: Release
|
||||
|
||||
permissions:
|
||||
contents: write
|
||||
|
||||
on:
|
||||
push:
|
||||
tags:
|
||||
- 'v*'
|
||||
|
||||
jobs:
|
||||
release:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
|
||||
- name: Set node
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version-file: .nvmrc
|
||||
|
||||
- run: npx changelogithub
|
||||
env:
|
||||
GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
|
||||
5
.gitignore
vendored
5
.gitignore
vendored
|
|
@ -2,17 +2,14 @@ node_modules
|
|||
*.log
|
||||
dist
|
||||
.output
|
||||
.pnpm-store
|
||||
.nuxt
|
||||
.env
|
||||
.DS_Store
|
||||
.idea/
|
||||
.vite-inspect
|
||||
.netlify/
|
||||
.eslintcache
|
||||
elk-translation-status.json
|
||||
|
||||
public/emojis
|
||||
public/shiki
|
||||
|
||||
*~
|
||||
*swp
|
||||
|
|
|
|||
3
.npmrc
3
.npmrc
|
|
@ -1,4 +1,3 @@
|
|||
shamefully-hoist=true
|
||||
strict-peer-dependencies=false
|
||||
shell-emulator=true
|
||||
ignore-workspace-root-check=true
|
||||
package-manager-strict=false
|
||||
|
|
|
|||
1
.nvmrc
1
.nvmrc
|
|
@ -1 +0,0 @@
|
|||
22
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"bot": {
|
||||
"issues": {
|
||||
"trigger": "all-issues"
|
||||
}
|
||||
}
|
||||
}
|
||||
61
.vscode/settings.json
vendored
61
.vscode/settings.json
vendored
|
|
@ -1,62 +1,27 @@
|
|||
{
|
||||
"prettier.enable": false,
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": true
|
||||
},
|
||||
"files.associations": {
|
||||
"*.css": "postcss"
|
||||
},
|
||||
"editor.formatOnSave": false,
|
||||
"cSpell.words": [
|
||||
"masto",
|
||||
"Nuxtodon",
|
||||
"unmute",
|
||||
"unstorage"
|
||||
],
|
||||
"files.associations": {
|
||||
"*.css": "postcss"
|
||||
},
|
||||
"i18n-ally.keysInUse": [
|
||||
"time_ago_options.*",
|
||||
"visibility.*"
|
||||
],
|
||||
"i18n-ally.keystyle": "nested",
|
||||
"i18n-ally.localesPaths": [
|
||||
"locales"
|
||||
],
|
||||
"i18n-ally.keystyle": "nested",
|
||||
"i18n-ally.sourceLanguage": "en-US",
|
||||
"i18n-ally.preferredDelimiter": "_",
|
||||
"i18n-ally.sortKeys": true,
|
||||
"i18n-ally.sourceLanguage": "en",
|
||||
|
||||
// Enable the ESlint flat config support
|
||||
"eslint.experimental.useFlatConfig": true,
|
||||
|
||||
// Disable the default formatter, use eslint instead
|
||||
"prettier.enable": false,
|
||||
"editor.formatOnSave": false,
|
||||
|
||||
// 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"
|
||||
"i18n-ally.keysInUse": [
|
||||
"time_ago_options.*",
|
||||
"visibility.*"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,45 +0,0 @@
|
|||
# Code Of Conduct
|
||||
|
||||
## Our Pledge
|
||||
|
||||
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, political party, or sexual identity and orientation. Note, however, that religion, political party, or other ideological affiliation provide no exemptions for the behavior we outline as unacceptable in this Code of Conduct.
|
||||
|
||||
## Our Standards
|
||||
|
||||
Examples of behavior that contributes to creating a positive environment include:
|
||||
|
||||
- Using welcoming and inclusive language
|
||||
- Being respectful of differing viewpoints and experiences
|
||||
- Gracefully accepting constructive criticism
|
||||
- Focusing on what is best for the community
|
||||
- Showing empathy towards other community members
|
||||
|
||||
Examples of unacceptable behavior by participants include:
|
||||
|
||||
- The use of sexualized language or imagery and unwelcome sexual attention or advances
|
||||
- Trolling, insulting/derogatory comments, and personal or political attacks
|
||||
- Public or private harassment
|
||||
- Publishing others' private information, such as a physical or electronic address, without explicit permission
|
||||
- Other conduct which could reasonably be considered inappropriate in a professional setting
|
||||
|
||||
## Our Responsibilities
|
||||
|
||||
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
|
||||
|
||||
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
|
||||
|
||||
## Scope
|
||||
|
||||
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
|
||||
|
||||
## Enforcement
|
||||
|
||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team by DM at [the Elk Discord](https://chat.elk.zone). All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
|
||||
|
||||
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
|
||||
|
||||
## Attribution
|
||||
|
||||
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
|
||||
|
||||
[homepage]: https://www.contributor-covenant.org
|
||||
183
CONTRIBUTING.md
183
CONTRIBUTING.md
|
|
@ -1,183 +0,0 @@
|
|||
# Contributing Guide
|
||||
|
||||
Hi! We are excited that you are interested in contributing to Elk. Before submitting your contribution, please make sure to take a moment and read through the following guide.
|
||||
|
||||
Refer also to https://github.com/antfu/contribute.
|
||||
|
||||
For guidelines on contributing to the documentation, refer to the [docs README](./docs/README.md).
|
||||
|
||||
### Local Setup
|
||||
|
||||
To develop and test the Elk package:
|
||||
|
||||
1. Fork the Elk repository to your own GitHub account and then clone it to your local device.
|
||||
|
||||
2. Ensure using the LTS version of Node.js.
|
||||
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/) v9. To use it you must first enable [Corepack](https://github.com/nodejs/corepack) by running `corepack enable`. (Note: on Linux in a standard Node 20+ 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:
|
||||
```shell
|
||||
git checkout -b my-new-branch
|
||||
```
|
||||
|
||||
1. Run `pnpm i` in Elk's root folder
|
||||
|
||||
2. Run `pnpm nuxi prepare` in Elk's root folder
|
||||
|
||||
3. Run `pnpm dev` in Elk's root folder to start dev server or `pnpm dev:mocked` to start dev server with `@elkdev@universeodon.com` user.
|
||||
|
||||
We recommend installing [ni](https://github.com/antfu/ni#ni), that will use the right package manager in each of your projects. If `ni` is installed, you can instead run:
|
||||
|
||||
```
|
||||
ni
|
||||
nr dev
|
||||
```
|
||||
|
||||
### Testing
|
||||
|
||||
Elk uses [Vitest](https://vitest.dev). You can run the test suite with:
|
||||
|
||||
```
|
||||
nr test
|
||||
```
|
||||
|
||||
### Running PWA on dev server
|
||||
|
||||
In order to run Elk with PWA enabled, run `pnpm dev:pwa` in Elk's root folder to start dev server or `pnpm dev:mocked:pwa` to start dev server with `@elkdev@universeodon.com` user.
|
||||
|
||||
You should test the Elk PWA application on private browsing mode on any Chromium-based browser: will not work on Firefox and Safari.
|
||||
|
||||
If not using private browsing mode, you will need to uninstall the PWA application from your browser once you finish testing:
|
||||
- Open `Dev Tools` (`Option + ⌘ + J` on macOS, `Shift + CTRL + J` on Windows/Linux)
|
||||
- Go to `Application > Storage`, you should check the following checkboxes:
|
||||
- Application: [x] Unregister service worker
|
||||
- Storage: [x] IndexedDB and [x] Local and session storage
|
||||
- Cache: [x] Cache storage and [x] Application cache
|
||||
- Click on `Clear site data` button
|
||||
- Go to `Application > Service Workers` and check if the current `service worker` is missing or has the state `deleted` or `redundant`
|
||||
|
||||
## CI errors
|
||||
|
||||
Sometimes when you push your changes to create a new pull request (PR), the CI can fail, but we cannot check the logs to see what went wrong.
|
||||
|
||||
If you are getting **Semantic Pull Request** error, please check the [Semantic Pull Request](https://www.conventionalcommits.org/en/v1.0.0/#summary) documentation.
|
||||
|
||||
You can run the following commands on your local environment to fix CI errors:
|
||||
- `pnpm test:unit` to run unit tests, maybe you also need to update snapshots
|
||||
- `pnpm test:typecheck` to run TypeScript checks run on CI
|
||||
|
||||
## RTL Support
|
||||
|
||||
Elk supports `right-to-left` languages, we need to make sure that the UI is working correctly in both directions.
|
||||
|
||||
Simple approach used by most websites of relying on direction set in HTML element does not work because direction for various items, such as timeline, does not always match direction set in HTML.
|
||||
|
||||
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 `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 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 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`.
|
||||
|
||||
## Internationalization
|
||||
|
||||
We are using [vue-i18n](https://vue-i18n.intlify.dev/) via [nuxt-i18n](https://i18n.nuxtjs.org/) to handle internationalization.
|
||||
|
||||
You can check the current [translation status](https://docs.elk.zone/guide/contributing#translation-status): more instructions on the table caption.
|
||||
|
||||
If you are updating a translation in your local environment, you can run the following commands to check the status:
|
||||
- from root folder: `nr prepare-translation-status`
|
||||
- change to `docs` folder and run docs dev server `nr dev`
|
||||
- open `http://localhost:3000/guide/contributing#translation-status` in your browser
|
||||
|
||||
### Adding a new language
|
||||
|
||||
1. Add a new file in [locales](./locales) folder with the language code as the filename.
|
||||
2. Copy [en](./locales/en.json) and translate the strings.
|
||||
3. Add the language to the `locales` array in [config/i18n.ts](./config/i18n.ts#L61), below `en` and `ar`:
|
||||
- If your language has multiple country variants, add the generic one for language only (only if there are a lot of common entries, you can always add it as a new one)
|
||||
- Add all country variants in [country variants object](./config/i18n.ts#L12)
|
||||
- Add all country variants files with empty `messages` object: `{}`
|
||||
- Translate the strings in the generic language file
|
||||
- Later, when anyone wants to add the corresponding translations for the country variant, just override any entry in the corresponding file: you can see an example with `en` variants.
|
||||
- If the generic language already exists:
|
||||
- If the translation doesn't differ from the generic language, then add the corresponding translations in the corresponding file
|
||||
- If the translation differs from the generic language, then add the corresponding translations in the corresponding file and remove it from the country variants entry
|
||||
4. If the language is `right-to-left`, add `dir` option with `rtl` value, for example, for [ar](./config/i18n.ts#L71)
|
||||
5. If the language requires special pluralization rules, add `pluralRule` callback option, for example, for [ar](./config/i18n.ts#L72)
|
||||
|
||||
Check [Pluralization rule callback](https://vue-i18n.intlify.dev/guide/essentials/pluralization.html#custom-pluralization) for more info.
|
||||
|
||||
### Messages interpolation
|
||||
|
||||
Most of the messages used in Elk do not require any interpolation, however, some messages require interpolation: check [Message Format Syntax](https://vue-i18n.intlify.dev/guide/essentials/syntax.html) for more info.
|
||||
|
||||
We're using these types of interpolation:
|
||||
- [List interpolation](https://vue-i18n.intlify.dev/guide/essentials/syntax.html#list-interpolation)
|
||||
- [Named interpolation](https://vue-i18n.intlify.dev/guide/essentials/syntax.html#interpolations)
|
||||
- [Linked messages](https://vue-i18n.intlify.dev/guide/essentials/syntax.html#linked-messages)
|
||||
- [Literal interpolation](https://vue-i18n.intlify.dev/guide/essentials/syntax.html#literal-interpolation)
|
||||
|
||||
#### List interpolation
|
||||
|
||||
You can access the elements of the list using the object notation using the index: for example, `{0}` for the first element, `{1}` for the second, `{2}` for the third and so on.
|
||||
|
||||
#### Named interpolation
|
||||
|
||||
Elk will use named interpolation only to handle plurals for number formatting. We have 2 scenarios for this:
|
||||
- using `plural` **with** `i18n-t` component
|
||||
- using `plural` **without** `i18n-t` component
|
||||
|
||||
Check [Custom Plural Number Formatting Entries](#custom-plural-number-formatting-entries) for custom plural entries in Elk with available values for interpolation.
|
||||
|
||||
When using plural number formatting, we'll have always `{n}` available in the message, for example, `You have {n} new notifications|You have {n} new notification|You have {n} new notifications` or `You have no new notifications|You have 1 new notification|You have {n} new notifications`.
|
||||
|
||||
We've included `v` named parameter, it will be used to pass the formatted number using [Intl.NumberFormat::format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format): will be the number with separators symbols. The exception to the previous rule is when we're using `plural` **with** `i18n-t` component, in this case, we'll need to use `{0}` instead `{v}` to access the number.
|
||||
|
||||
Additionally, Elk will use [compact notation for numbers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#parameters) for some entries, check `notation` and `compactDisplay` options: for example, `1K` for `1000`, `1M` for `1000000`, `1B` for `1000000000` and so on. That entry will be available in the message using `{v}` named parameter (or `{0}` if using the message **with** `i18n-t` component).
|
||||
|
||||
You can run this code in your browser console to see how it works:
|
||||
```ts
|
||||
[1, 12, 123, 1234, 12345, 123456, 1234567].forEach((n) => {
|
||||
const acc = {}
|
||||
|
||||
Array.from(['en-US', 'en-GB', 'de-DE', 'zh-CN', 'ja-JP', 'es-ES', 'fr-FR', 'cs-CZ', 'ar-EG']).forEach((l) => {
|
||||
const nf = new Intl.NumberFormat(l, {
|
||||
style: 'decimal',
|
||||
maximumFractionDigits: 0,
|
||||
})
|
||||
const nf2 = new Intl.NumberFormat(l, {
|
||||
notation: 'compact',
|
||||
compactDisplay: 'short',
|
||||
maximumFractionDigits: 1,
|
||||
})
|
||||
acc[l] = {
|
||||
number: n,
|
||||
format: nf.format(n),
|
||||
compact: nf2.format(n),
|
||||
}
|
||||
})
|
||||
console.table(acc)
|
||||
})
|
||||
```
|
||||
|
||||
#### Custom Plural Number Formatting Entries
|
||||
|
||||
**Warning**:
|
||||
Either **{0}** or **{v}** should be used with the exception being custom plurals entries using the `{n}` placeholder.
|
||||
|
||||
This is the full list of entries that will be available for number formatting in Elk:
|
||||
- `action.boost_count` (no need to be included, we should use always `en-US` entry): `{0}` for formatted number and `{n}` for raw number - **{0} should be used**
|
||||
- `action.favourite_count` (no need to be included, we should use always `en-US` entry): `{0}` for formatted number and `{n}` for raw number - **{0} should be used**
|
||||
- `action.reply_count` (no need to be included, we should use always `en-US` entry): `{0}` for formatted number and `{n}` for raw number - **{0} should be used**
|
||||
- `account.followers_count`: `{0}` for formatted number and `{n}` for raw number - **{0} should be used**
|
||||
- `account.following_count`: `{0}` for formatted number and `{n}` for raw number - **{0} should be used**
|
||||
- `account.posts_count`: `{0}` for formatted number and `{n}` for raw number - **{0} should be used**
|
||||
- `compose.drafts`: `{v}` for formatted number and `{n}` for raw number - **{v} should be used**
|
||||
- `notification.followed_you_count`: `{0}` for formatted number and `{n}` for raw number - **{0} should be used**
|
||||
- `status.poll.count`: `{0}` for formatted number and `{n}` for raw number - **{0} should be used**
|
||||
- `time_ago_options.*`: `{0}` for formatted number and `{n}` for raw number - **{0} should be used**: since numbers will be always small, we can also use `{n}`
|
||||
- `timeline.show_new_items`: `{v}` for formatted number and `{n}` for raw number - **{v} should be used**
|
||||
60
Dockerfile
60
Dockerfile
|
|
@ -1,60 +0,0 @@
|
|||
FROM docker.io/library/node:lts-alpine AS base
|
||||
|
||||
# Prepare work directory
|
||||
WORKDIR /elk
|
||||
|
||||
FROM base AS builder
|
||||
|
||||
# Prepare pnpm https://pnpm.io/installation#using-corepack
|
||||
# workaround for npm registry key change
|
||||
# ref. `pnpm@10.1.0` / `pnpm@9.15.4` cannot be installed due to key id mismatch · Issue #612 · nodejs/corepack
|
||||
# - https://github.com/nodejs/corepack/issues/612#issuecomment-2629496091
|
||||
RUN npm i -g corepack@latest && corepack enable
|
||||
|
||||
# Prepare deps
|
||||
RUN apk update
|
||||
RUN apk add git --no-cache
|
||||
|
||||
# Prepare build deps ( ignore postinstall scripts for now )
|
||||
COPY package.json ./
|
||||
COPY .npmrc ./
|
||||
COPY pnpm-lock.yaml ./
|
||||
COPY patches ./patches
|
||||
RUN pnpm i --frozen-lockfile --ignore-scripts
|
||||
|
||||
# Copy all source files
|
||||
COPY . ./
|
||||
|
||||
# Run full install with every postinstall script ( This needs project file )
|
||||
RUN pnpm i --frozen-lockfile
|
||||
|
||||
# Build
|
||||
RUN pnpm build
|
||||
|
||||
FROM base AS runner
|
||||
|
||||
ARG UID=911
|
||||
ARG GID=911
|
||||
|
||||
# Create a dedicated user and group
|
||||
RUN set -eux; \
|
||||
addgroup -g $GID elk; \
|
||||
adduser -u $UID -D -G elk elk;
|
||||
|
||||
USER elk
|
||||
|
||||
ENV NODE_ENV=production
|
||||
|
||||
COPY --from=builder /elk/.output ./.output
|
||||
|
||||
EXPOSE 5314/tcp
|
||||
|
||||
ENV PORT=5314
|
||||
|
||||
# Specify container only environment variables ( can be overwritten by runtime env )
|
||||
ENV NUXT_STORAGE_FS_BASE='/elk/data'
|
||||
|
||||
# Persistent storage data
|
||||
VOLUME [ "/elk/data" ]
|
||||
|
||||
CMD ["node", ".output/server/index.mjs"]
|
||||
88
README.md
88
README.md
|
|
@ -1,51 +1,35 @@
|
|||
# Yolk
|
||||
# Elk
|
||||
*A nimble Mastodon web client*
|
||||
|
||||
Hi! Yolk is my custom fork of [Elk](https://github.com/elk-zon/elk), a nimble Mastodon client.
|
||||
<p align="center">
|
||||
<a href="https://elk.zone" target="_blank" rel="noopener noreferrer">
|
||||
<img width="180" src="https://elk.zone/logo.svg" alt="Vite logo">
|
||||
</a>
|
||||
</p>
|
||||
<br/>
|
||||
<p align="center">
|
||||
<a href="https://chat.elk.zone"><img src="https://img.shields.io/badge/chat-discord-blue?style=flat&logo=discord" alt="discord chat"></a>
|
||||
<a href="https://pr.new/elk-zone/elk"><img src="https://developer.stackblitz.com/img/start_pr_dark_small.svg" alt="Start new PR in StackBlitz Codeflow"></a>
|
||||
</p>
|
||||
<br/>
|
||||
|
||||
I [decided](https://social.ayco.io/@ayo/114921112446517000) to have a personal fork of Elk because I really like the cross-account functionalities I use it for (e.g., I can open the Explore tab of my fosstodon account, then engage in a post with my self-hosted account, etc)... but I find sometimes I want to change little things which will make the app a bit more opinionated on my tastes (e.g., icons, colors, spacing, etc)... and some behavioral features.
|
||||
# Elk is in early alpha ⚠️
|
||||
|
||||
I think doing this will make me use it as my main app daily. I have been switching between multiple apps because each one have strengths & weaknesses of their own.
|
||||
It is already quite usable, but it isn't ready for wide adoption yet. We recommend you to use if if you would like to help us building it. We appreciate your feedback and contributions. Check out the [Open Issues](https://github.com/elk-zone/elk/issues) and jump in the action. Join the [Elk discord server](https://chat.elk.zone) to chat with us and learn more about the project.
|
||||
|
||||
Crucial fixes (if I find them), quality of life improvements, and mastodon API feature parity will still go upstream to the main Elk project.
|
||||
The client is deployed to [elk.zone](https://elk.zone), you can share screenshots on social media but we prefer you avoid sharing this URL directly until the app is more polished. Feel free to share the URL with your friedns and invite others you think could be interested in helping to improve Elk.
|
||||
|
||||
~ Ayo Ayco
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ Elk is in Alpha
|
||||
|
||||
It is already quite usable, but it isn't ready for wide adoption yet. We recommend you use it if you would like to help us build it. We appreciate your feedback and contributions. Check out the [Open Issues](https://github.com/elk-zone/elk/issues) and jump in the action. Join the [Elk discord server](https://chat.elk.zone) to chat with us and learn more about the project.
|
||||
|
||||
## Deployment
|
||||
|
||||
### Official Deployment
|
||||
|
||||
The Elk team maintains a deployment at:
|
||||
|
||||
- 🦌 Production: [elk.zone](https://elk.zone)
|
||||
- 🐙 Canary: [main.elk.zone](https://main.elk.zone) (deploys on every commit to `main` branch)
|
||||
|
||||
### Self-Host Docker Deployment
|
||||
|
||||
In order to host Elk yourself you can use the provided Dockerfile to build a container with elk. Be aware, that Elk only loads properly if the connection is done via SSL/TLS. The Docker container itself does not provide any SSL/TLS handling. You'll have to add this bit yourself.
|
||||
One could put Elk behind popular reverse proxies with SSL Handling like Traefik, NGINX etc.
|
||||
|
||||
1. checkout source ```git clone https://github.com/elk-zone/elk.git```
|
||||
1. got into new source dir: ```cd elk```
|
||||
1. create local storage directory for settings: ```mkdir elk-storage```
|
||||
1. adjust permissions of storage dir: ```sudo chown 911:911 ./elk-storage```
|
||||
1. start container: ```docker-compose up --build -d```
|
||||
|
||||
> [!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.
|
||||
|
||||
> **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.
|
||||
|
||||
## 🧑💻 Contributing
|
||||
# Contributing
|
||||
|
||||
We're really excited that you're interested in contributing to Elk! Before submitting your contribution, please read through the following guide.
|
||||
|
||||
### Local Setup
|
||||
## Online
|
||||
|
||||
You can use [StackBlitz CodeFlow](https://stackblitz.com/codeflow) to fix bugs or implement features. You'll also see a CodeFlow button on PRs to review them without a local setup.
|
||||
|
||||
[](https://pr.new/elk-zone/elk)
|
||||
|
||||
## Local Setup
|
||||
|
||||
Clone the repository and run on the root folder:
|
||||
|
||||
|
|
@ -54,8 +38,6 @@ pnpm i
|
|||
pnpm run dev
|
||||
```
|
||||
|
||||
`Warning`: you will need `corepack` enabled, check out the [Elk Contributing Guide](./CONTRIBUTING.md) for a detailed guide on how to set up the project locally.
|
||||
|
||||
We recommend installing [ni](https://github.com/antfu/ni#ni), that will use the right package manager in each of your projects. If `ni` is installed, you can instead run:
|
||||
|
||||
```
|
||||
|
|
@ -63,7 +45,7 @@ ni
|
|||
nr dev
|
||||
```
|
||||
|
||||
### Testing
|
||||
## Testing
|
||||
|
||||
Elk uses [Vitest](https://vitest.dev). You can run the test suite with:
|
||||
|
||||
|
|
@ -71,11 +53,7 @@ Elk uses [Vitest](https://vitest.dev). You can run the test suite with:
|
|||
nr test
|
||||
```
|
||||
|
||||
## 📲 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.
|
||||
|
||||
## 🦄 Stack
|
||||
# Stack
|
||||
|
||||
- [Vite](https://vitejs.dev/) - Next Generation Frontend Tooling
|
||||
- [Nuxt](https://nuxt.com/) - The Intuitive Web Framework
|
||||
|
|
@ -86,15 +64,9 @@ 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
|
||||
- [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
|
||||
- [shiki](https://shiki.style/) - A beautiful yet powerful syntax highlighter
|
||||
- [vite-plugin-pwa](https://github.com/vite-pwa/vite-plugin-pwa) - Prompt for update, Web Push Notifications and Web Share Target API
|
||||
- [shiki](https://shiki.matsu.io/) - A beautiful Syntax Highlighter
|
||||
- [vite-plugin-pwa](https://github.com/vite-pwa/vite-plugin-pwa) - Prompt for update and push notifications
|
||||
|
||||
## 👨💻 Contributors
|
||||
# License
|
||||
|
||||
<a href="https://github.com/elk-zone/elk/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=elk-zone/elk" />
|
||||
</a>
|
||||
|
||||
## 📄 License
|
||||
|
||||
[MIT](./LICENSE) © 2022-PRESENT Elk contributors
|
||||
MIT
|
||||
|
|
|
|||
15
app.vue
Normal file
15
app.vue
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<script setup lang="ts">
|
||||
setupPageHeader()
|
||||
provideGlobalCommands()
|
||||
|
||||
// We want to trigger rerendering the page when account changes
|
||||
const key = computed(() => `${currentUser.value?.server ?? currentServer.value}:${currentUser.value?.account.id || ''}`)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLoadingIndicator color="repeating-linear-gradient(to right,var(--c-primary) 0%,var(--c-primary-active) 100%)" />
|
||||
<NuxtLayout :key="key">
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
<AriaAnnouncer />
|
||||
</template>
|
||||
36
app/app.vue
36
app/app.vue
|
|
@ -1,36 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
setupPageHeader()
|
||||
provideGlobalCommands()
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
if (import.meta.server && !route.path.startsWith('/settings')) {
|
||||
const url = useRequestURL()
|
||||
|
||||
useHead({
|
||||
meta: [
|
||||
{ property: 'og:url', content: `${url.origin}${route.path}` },
|
||||
],
|
||||
})
|
||||
}
|
||||
|
||||
// We want to trigger rerendering the page when account changes
|
||||
const key = computed(() => `${currentUser.value?.server ?? currentServer.value}:${currentUser.value?.account.id || ''}`)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLoadingIndicator color="repeating-linear-gradient(to right,var(--c-primary) 0%,var(--c-primary-active) 100%)" />
|
||||
<NuxtLayout :key="key">
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
<AriaAnnouncer />
|
||||
|
||||
<!-- Avatar Mask -->
|
||||
<svg absolute op0 width="0" height="0">
|
||||
<defs>
|
||||
<clipPath id="avatar-mask" clipPathUnits="objectBoundingBox">
|
||||
<path d="M 0,0.5 C 0,0 0,0 0.5,0 S 1,0 1,0.5 1,1 0.5,1 0,1 0,0.5" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const { account } = defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
square?: boolean
|
||||
}>()
|
||||
|
||||
const loaded = ref(false)
|
||||
const error = ref(false)
|
||||
|
||||
const preferredMotion = usePreferredReducedMotion()
|
||||
const accountAvatarSrc = computed(() => {
|
||||
return preferredMotion.value === 'reduce' ? (account?.avatarStatic ?? account.avatar) : account.avatar
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<img
|
||||
:key="account.avatar"
|
||||
width="400"
|
||||
height="400"
|
||||
select-none
|
||||
:src="(error || !loaded) ? 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' : accountAvatarSrc"
|
||||
:alt="$t('account.avatar_description', [account.username])"
|
||||
loading="lazy"
|
||||
class="account-avatar object-cover"
|
||||
:class="(loaded ? 'bg-base' : 'bg-gray:10') + (square ? ' ' : ' rounded-full')"
|
||||
:style="{ 'clip-path': square ? `url(#avatar-mask)` : 'none' }"
|
||||
v-bind="$attrs"
|
||||
@load="loaded = true"
|
||||
@error="error = true"
|
||||
>
|
||||
</template>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
// Avatar with a background base achieving a 3px border to be used in status cards
|
||||
// The border is used for Avatar on Avatar for reblogs and connecting replies
|
||||
|
||||
defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
square?: boolean
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :key="account.avatar" v-bind="$attrs" :style="{ 'clip-path': square ? `url(#avatar-mask)` : 'none' }" :class="{ 'rounded-full': !square }" bg-base w-54px h-54px flex items-center justify-center>
|
||||
<AccountAvatar :account="account" w-48px h-48px :square="square" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
showLabel?: boolean
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
flex="~ gap1" items-center
|
||||
:class="{ 'border border-base rounded-md px-1': showLabel }"
|
||||
text-secondary-light
|
||||
>
|
||||
<slot name="prepend" />
|
||||
<CommonTooltip :content="$t('account.bot')" :disabled="showLabel">
|
||||
<div i-mdi:robot-outline />
|
||||
</CommonTooltip>
|
||||
<div v-if="showLabel">
|
||||
{{ $t('account.bot') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const { hideEmojis = false } = defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
hideEmojis?: boolean
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContentRich
|
||||
:content="getDisplayName(account, { rich: true })"
|
||||
:emojis="account.emojis"
|
||||
:hide-emojis="hideEmojis"
|
||||
:markdown="false"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
import { toggleFollowAccount, useRelationship } from '~/composables/masto/relationship'
|
||||
|
||||
const { account, context, command, ...props } = defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
relationship?: mastodon.v1.Relationship
|
||||
context?: 'followedBy' | 'following'
|
||||
command?: boolean
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const isSelf = useSelfAccount(() => account)
|
||||
const enable = computed(() => !isSelf.value && currentUser.value)
|
||||
const relationship = computed(() => props.relationship || useRelationship(account).value)
|
||||
const isLoading = computed(() => relationship.value === undefined)
|
||||
|
||||
const { client } = useMasto()
|
||||
|
||||
async function unblock() {
|
||||
relationship.value!.blocking = false
|
||||
try {
|
||||
const newRel = await client.value.v1.accounts.$select(account.id).unblock()
|
||||
Object.assign(relationship!, newRel)
|
||||
}
|
||||
catch (err) {
|
||||
console.error(err)
|
||||
// TODO error handling
|
||||
relationship.value!.blocking = true
|
||||
}
|
||||
}
|
||||
|
||||
async function unmute() {
|
||||
relationship.value!.muting = false
|
||||
try {
|
||||
const newRel = await client.value.v1.accounts.$select(account.id).unmute()
|
||||
Object.assign(relationship!, newRel)
|
||||
}
|
||||
catch (err) {
|
||||
console.error(err)
|
||||
// TODO error handling
|
||||
relationship.value!.muting = true
|
||||
}
|
||||
}
|
||||
|
||||
useCommand({
|
||||
scope: 'Actions',
|
||||
order: -2,
|
||||
visible: () => command && enable,
|
||||
name: () => `${relationship.value?.following ? t('account.unfollow') : t('account.follow')} ${getShortHandle(account)}`,
|
||||
icon: 'i-ri:star-line',
|
||||
onActivate: () => toggleFollowAccount(relationship.value!, account),
|
||||
})
|
||||
|
||||
const buttonStyle = computed(() => {
|
||||
if (relationship.value?.blocking)
|
||||
return 'text-inverted bg-red border-red'
|
||||
|
||||
if (relationship.value?.muting)
|
||||
return 'text-base bg-card border-base'
|
||||
|
||||
// If following, use a label style with a strong border for Mutuals
|
||||
if (relationship.value ? relationship.value.following : context === 'following')
|
||||
return `text-base ${relationship.value?.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
|
||||
return 'text-inverted bg-primary border-primary'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
v-if="enable"
|
||||
gap-1 items-center group
|
||||
border-1
|
||||
rounded-full flex="~ gap2 center" font-500 min-w-30 h-fit px3 py1
|
||||
:class="buttonStyle"
|
||||
: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)"
|
||||
>
|
||||
<template v-if="isLoading">
|
||||
<span i-svg-spinners-180-ring-with-bg />
|
||||
</template>
|
||||
<template v-else>
|
||||
<template v-if="relationship?.blocking">
|
||||
<span elk-group-hover="hidden">{{ $t('account.blocking') }}</span>
|
||||
<span hidden elk-group-hover="inline">{{ $t('account.unblock') }}</span>
|
||||
</template>
|
||||
<template v-if="relationship?.muting">
|
||||
<span elk-group-hover="hidden">{{ $t('account.muting') }}</span>
|
||||
<span hidden elk-group-hover="inline">{{ $t('account.unmute') }}</span>
|
||||
</template>
|
||||
<template v-else-if="relationship ? relationship.following : context === 'following'">
|
||||
<span elk-group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
|
||||
<span hidden elk-group-hover="inline">{{ $t('account.unfollow') }}</span>
|
||||
</template>
|
||||
<template v-else-if="relationship?.requested">
|
||||
<span elk-group-hover="hidden">{{ $t('account.follow_requested') }}</span>
|
||||
<span hidden elk-group-hover="inline">{{ $t('account.withdraw_follow_request') }}</span>
|
||||
</template>
|
||||
<template v-else-if="relationship ? relationship.followedBy : context === 'followedBy'">
|
||||
<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>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>{{ account.locked ? $t('account.request_follow') : $t('account.follow') }}</span>
|
||||
</template>
|
||||
</template>
|
||||
</button>
|
||||
</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')">
|
||||
<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')">
|
||||
<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>
|
||||
|
|
@ -1,276 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const { account } = defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
command?: boolean
|
||||
}>()
|
||||
|
||||
const { client } = useMasto()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const createdAt = useFormattedDateTime(() => account.createdAt, {
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
|
||||
const relationship = useRelationship(account)
|
||||
|
||||
const namedFields = ref<mastodon.v1.AccountField[]>([])
|
||||
const iconFields = ref<mastodon.v1.AccountField[]>([])
|
||||
const isEditingPersonalNote = ref<boolean>(false)
|
||||
const hasHeader = computed(() => !account.header.endsWith('/original/missing.png'))
|
||||
const isCopied = ref<boolean>(false)
|
||||
|
||||
function getFieldIconTitle(fieldName: string) {
|
||||
return fieldName === 'Joined' ? t('account.joined') : fieldName
|
||||
}
|
||||
|
||||
function getNotificationIconTitle() {
|
||||
return relationship.value?.notifying ? t('account.notifications_on_post_disable', { username: `@${account.username}` }) : t('account.notifications_on_post_enable', { username: `@${account.username}` })
|
||||
}
|
||||
|
||||
function previewHeader() {
|
||||
openMediaPreview([{
|
||||
id: `${account.acct}:header`,
|
||||
type: 'image',
|
||||
previewUrl: account.header,
|
||||
description: t('account.profile_description', [account.username]),
|
||||
}])
|
||||
}
|
||||
|
||||
function previewAvatar() {
|
||||
openMediaPreview([{
|
||||
id: `${account.acct}:avatar`,
|
||||
type: 'image',
|
||||
previewUrl: account.avatar,
|
||||
description: t('account.avatar_description', [account.username]),
|
||||
}])
|
||||
}
|
||||
|
||||
async function toggleNotifications() {
|
||||
relationship.value!.notifying = !relationship.value?.notifying
|
||||
try {
|
||||
const newRel = await client.value.v1.accounts.$select(account.id).follow({ notify: relationship.value?.notifying })
|
||||
Object.assign(relationship!, newRel)
|
||||
}
|
||||
catch {
|
||||
// TODO error handling
|
||||
relationship.value!.notifying = !relationship.value?.notifying
|
||||
}
|
||||
}
|
||||
|
||||
watchEffect(() => {
|
||||
const named: mastodon.v1.AccountField[] = []
|
||||
const icons: mastodon.v1.AccountField[] = []
|
||||
|
||||
account.fields?.forEach((field) => {
|
||||
const icon = getAccountFieldIcon(field.name)
|
||||
if (icon)
|
||||
icons.push(field)
|
||||
else
|
||||
named.push(field)
|
||||
})
|
||||
icons.push({
|
||||
name: 'Joined',
|
||||
value: createdAt.value,
|
||||
})
|
||||
|
||||
namedFields.value = named
|
||||
iconFields.value = icons
|
||||
})
|
||||
|
||||
const personalNoteDraft = ref(relationship.value?.note ?? '')
|
||||
watch(relationship, (relationship, oldValue) => {
|
||||
if (!oldValue && relationship)
|
||||
personalNoteDraft.value = relationship.note ?? ''
|
||||
})
|
||||
|
||||
async function editNote(event: Event) {
|
||||
if (!event.target || !('value' in event.target) || !relationship.value)
|
||||
return
|
||||
|
||||
const newNote = event.target?.value as string
|
||||
|
||||
if (relationship.value.note?.trim() === newNote.trim())
|
||||
return
|
||||
|
||||
const newNoteApiResult = await client.value.v1.accounts.$select(account.id).note.create({ comment: newNote })
|
||||
relationship.value.note = newNoteApiResult.note
|
||||
personalNoteDraft.value = relationship.value.note ?? ''
|
||||
}
|
||||
|
||||
const isSelf = useSelfAccount(() => account)
|
||||
const isNotifiedOnPost = computed(() => !!relationship.value?.notifying)
|
||||
|
||||
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>
|
||||
|
||||
<template>
|
||||
<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">
|
||||
<img h-50 height="200" w-full object-cover :src="account.header" :alt="t('account.profile_description', [account.username])">
|
||||
</component>
|
||||
<div p4 mt--18 flex flex-col gap-4>
|
||||
<div relative>
|
||||
<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">
|
||||
<AccountAvatar :square="isSelf" :account="account" hover:opacity-90 transition-opacity w-28 h-28 />
|
||||
</button>
|
||||
<div inset-ie-0 flex="~ wrap row-reverse" gap-2 items-center pt18 justify-start>
|
||||
<!-- Edit profile -->
|
||||
<NuxtLink
|
||||
v-if="isSelf"
|
||||
to="/settings/profile/appearance"
|
||||
gap-1 items-center border="1" rounded-full flex="~ gap2 center" font-500 min-w-30 h-fit px3 py1
|
||||
hover="border-primary text-primary bg-active"
|
||||
>
|
||||
{{ $t('settings.profile.appearance.title') }}
|
||||
</NuxtLink>
|
||||
<AccountFollowButton :account="account" :command="command" />
|
||||
<span inset-ie-0 flex gap-2 items-center>
|
||||
<AccountMoreButton
|
||||
:account="account" :command="command"
|
||||
@add-note="isEditingPersonalNote = true"
|
||||
@remove-note="() => { isEditingPersonalNote = false; personalNoteDraft = '' }"
|
||||
/>
|
||||
<CommonTooltip v-if="!isSelf && relationship?.following" :content="getNotificationIconTitle()">
|
||||
<button
|
||||
:aria-pressed="isNotifiedOnPost"
|
||||
:aria-label="t('account.notifications_on_post_enable', { username: `@${account.username}` })"
|
||||
rounded-full text-sm p2 border-1 transition-colors
|
||||
:class="isNotifiedOnPost ? 'text-primary border-primary hover:bg-red/20 hover:text-red hover:border-red' : 'border-base hover:text-primary'"
|
||||
@click="toggleNotifications"
|
||||
>
|
||||
<span v-if="isNotifiedOnPost" i-ri:notification-4-fill block text-current />
|
||||
<span v-else i-ri-notification-4-line block text-current />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
<CommonTooltip :content="$t('list.modify_account')">
|
||||
<VDropdown v-if="!isSelf && relationship?.following">
|
||||
<button
|
||||
:aria-label="$t('list.modify_account')"
|
||||
rounded-full text-sm p2 border-1 transition-colors
|
||||
border-base hover:text-primary
|
||||
>
|
||||
<span i-ri:play-list-add-fill block text-current />
|
||||
</button>
|
||||
<template #popper>
|
||||
<ListLists :user-id="account.id" />
|
||||
</template>
|
||||
</VDropdown>
|
||||
</CommonTooltip>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div flex="~ col gap1" pt2>
|
||||
<div flex gap2 items-center flex-wrap>
|
||||
<AccountDisplayName :account="account" font-bold sm:text-2xl text-xl />
|
||||
<AccountLockIndicator v-if="account.locked" show-label />
|
||||
<AccountBotIndicator v-if="account.bot" show-label />
|
||||
</div>
|
||||
|
||||
<div flex items-center gap-1>
|
||||
<AccountHandle :account="account" overflow-unset line-clamp-unset />
|
||||
<CommonTooltip placement="bottom" :content="$t('account.copy_account_name')" 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 self-start mt-1>
|
||||
<AccountRolesIndicator v-if="account.roles?.length" :account="account" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<label
|
||||
v-if="isEditingPersonalNote || (relationship?.note && relationship.note.length > 0)"
|
||||
space-y-2
|
||||
pb-4
|
||||
block
|
||||
border="b base"
|
||||
>
|
||||
<div flex flex-row space-x-2 flex-v-center>
|
||||
<div i-ri-edit-2-line />
|
||||
<p font-medium>
|
||||
{{ $t('account.profile_personal_note') }}
|
||||
</p>
|
||||
<p text-secondary text-sm :class="{ 'text-orange': personalNoteDraft.length > (personalNoteMaxLength - 100) }">
|
||||
{{ personalNoteDraft.length }} / {{ personalNoteMaxLength }}
|
||||
</p>
|
||||
</div>
|
||||
<div position-relative>
|
||||
<div
|
||||
input-base
|
||||
min-h-10ex
|
||||
whitespace-pre-wrap
|
||||
opacity-0
|
||||
:class="{ 'trailing-newline': personalNoteDraft.endsWith('\n') }"
|
||||
>
|
||||
{{ personalNoteDraft }}
|
||||
</div>
|
||||
<textarea
|
||||
v-model="personalNoteDraft"
|
||||
input-base
|
||||
position-absolute
|
||||
style="height: 100%"
|
||||
top-0
|
||||
resize-none
|
||||
:maxlength="personalNoteMaxLength"
|
||||
@change="editNote"
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
<div v-if="account.note" max-h-100 overflow-y-auto>
|
||||
<ContentRich text-4 text-base :content="account.note" :emojis="account.emojis" />
|
||||
</div>
|
||||
<div v-if="namedFields.length" flex="~ col wrap gap1">
|
||||
<div v-for="field in namedFields" :key="field.name" flex="~ gap-1" items-center>
|
||||
<div mt="0.5" text-secondary uppercase text-xs font-bold>
|
||||
<ContentRich :content="field.name" :emojis="account.emojis" />
|
||||
</div>
|
||||
<span text-secondary text-xs font-bold>|</span>
|
||||
<ContentRich :content="field.value" :emojis="account.emojis" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="iconFields.length" flex="~ wrap gap-2">
|
||||
<div v-for="field in iconFields" :key="field.name" flex="~ gap-1" px1 items-center :class="`${field.verifiedAt ? 'border-1 rounded-full border-dark' : ''}`">
|
||||
<CommonTooltip :content="getFieldIconTitle(field.name)">
|
||||
<div text-secondary :class="getAccountFieldIcon(field.name)" :title="getFieldIconTitle(field.name)" />
|
||||
</CommonTooltip>
|
||||
<ContentRich text-sm :content="field.value" :emojis="account.emojis" />
|
||||
</div>
|
||||
</div>
|
||||
<AccountPostsFollowers :account="account" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.trailing-newline::after {
|
||||
content: '\a';
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const { account } = defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
}>()
|
||||
|
||||
const relationship = useRelationship(account)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-show="relationship" flex="~ col gap2" rounded min-w-90 max-w-120 z-100 overflow-hidden p-4>
|
||||
<div flex="~ gap2" items-center>
|
||||
<NuxtLink :to="getAccountRoute(account)" flex-auto rounded-full hover:bg-active transition-100 pe5 me-a>
|
||||
<AccountInfo :account="account" :hover-card="false" />
|
||||
</NuxtLink>
|
||||
<AccountFollowButton text-sm :account="account" :relationship="relationship" />
|
||||
</div>
|
||||
<div v-if="account.note" max-h-100 overflow-y-auto>
|
||||
<ContentRich text-4 text-secondary :content="account.note" :emojis="account.emojis" />
|
||||
</div>
|
||||
<AccountPostsFollowers text-sm :account="account" :is-hover-card="true" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
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<{
|
||||
account?: mastodon.v1.Account | null
|
||||
handle?: string
|
||||
disabled?: boolean
|
||||
}>()
|
||||
|
||||
const accountHover = ref()
|
||||
const hovered = useElementHover(accountHover)
|
||||
const account = ref<mastodon.v1.Account | null | undefined>(props.account)
|
||||
|
||||
watch(
|
||||
() => [props.account, props.handle, hovered.value] satisfies WatcherType,
|
||||
([newAccount, newHandle, newVisible], oldProps) => {
|
||||
if (!newVisible || process.test)
|
||||
return
|
||||
|
||||
if (newAccount) {
|
||||
account.value = newAccount
|
||||
return
|
||||
}
|
||||
|
||||
if (newHandle) {
|
||||
const [_oldAccount, oldHandle, _oldVisible] = oldProps ?? [undefined, undefined, false]
|
||||
if (!oldHandle || newHandle !== oldHandle || !account.value) {
|
||||
// new handle can be wrong: using server instead of webDomain
|
||||
fetchAccountByHandle(newHandle).then((acc) => {
|
||||
if (newHandle === props.handle)
|
||||
account.value = acc
|
||||
})
|
||||
}
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
account.value = undefined
|
||||
},
|
||||
{ immediate: true, flush: 'post' },
|
||||
)
|
||||
|
||||
const userSettings = useUserSettings()
|
||||
</script>
|
||||
|
||||
<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"
|
||||
no-auto-focus
|
||||
>
|
||||
<slot />
|
||||
<template #popper>
|
||||
<AccountHoverCard v-if="account" :account="account" />
|
||||
</template>
|
||||
</VMenu>
|
||||
<slot v-else />
|
||||
</span>
|
||||
</template>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const { link = true, avatar = true } = defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
link?: boolean
|
||||
avatar?: boolean
|
||||
}>()
|
||||
|
||||
const userSettings = useUserSettings()
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AccountHoverWrapper :account="account">
|
||||
<NuxtLink
|
||||
:to="link ? getAccountRoute(account) : undefined"
|
||||
:class="link ? 'text-link-rounded -ml-1.5rem pl-1.5rem rtl-(ml0 pl-0.5rem -mr-1.5rem pr-1.5rem)' : ''"
|
||||
v-bind="$attrs"
|
||||
min-w-0 flex gap-2 items-center
|
||||
>
|
||||
<AccountAvatar v-if="avatar" :account="account" w-5 h-5 />
|
||||
<AccountDisplayName :account="account" :hide-emojis="getPreferences(userSettings, 'hideUsernameEmojis')" line-clamp-1 ws-pre-wrap break-all />
|
||||
</NuxtLink>
|
||||
</AccountHoverWrapper>
|
||||
</template>
|
||||
|
|
@ -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 content="Lock" :disabled="showLabel">
|
||||
<div i-ri:lock-line />
|
||||
</CommonTooltip>
|
||||
<div v-if="showLabel">
|
||||
{{ t('account.lock') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,215 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
import { toggleBlockAccount, toggleBlockDomain, toggleMuteAccount } from '~/composables/masto/relationship'
|
||||
|
||||
const { account } = defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
command?: boolean
|
||||
}>()
|
||||
const emit = defineEmits<{
|
||||
(evt: 'addNote'): void
|
||||
(evt: 'removeNote'): void
|
||||
}>()
|
||||
|
||||
const relationship = useRelationship(account)
|
||||
|
||||
const isSelf = useSelfAccount(() => account)
|
||||
|
||||
const { t } = useI18n()
|
||||
const { client } = useMasto()
|
||||
const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
|
||||
const { share, isSupported: isShareSupported } = useShare()
|
||||
|
||||
function shareAccount() {
|
||||
share({ url: location.href })
|
||||
}
|
||||
|
||||
async function toggleReblogs() {
|
||||
if (!relationship.value!.showingReblogs) {
|
||||
const dialogChoice = await openConfirmDialog({
|
||||
title: t('confirm.show_reblogs.title'),
|
||||
description: t('confirm.show_reblogs.description', [account.acct]),
|
||||
confirm: t('confirm.show_reblogs.confirm'),
|
||||
cancel: t('confirm.show_reblogs.cancel'),
|
||||
})
|
||||
if (dialogChoice.choice !== 'confirm')
|
||||
return
|
||||
}
|
||||
|
||||
const showingReblogs = !relationship.value?.showingReblogs
|
||||
relationship.value = await client.value.v1.accounts.$select(account.id).follow({ reblogs: showingReblogs })
|
||||
}
|
||||
|
||||
async function addUserNote() {
|
||||
emit('addNote')
|
||||
}
|
||||
|
||||
async function removeUserNote() {
|
||||
if (!relationship.value!.note || relationship.value!.note.length === 0)
|
||||
return
|
||||
|
||||
const newNote = await client.value.v1.accounts.$select(account.id).note.create({ comment: '' })
|
||||
relationship.value!.note = newNote.note
|
||||
emit('removeNote')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CommonDropdown :eager-mount="command">
|
||||
<button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group :aria-label="t('actions.more')">
|
||||
<div rounded-5 p2 elk-group-hover="bg-purple/10">
|
||||
<div i-ri:more-2-fill />
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<template #popper>
|
||||
<NuxtLink :to="account.url" external target="_blank">
|
||||
<CommonDropdownItem
|
||||
:text="$t('menu.open_in_original_site')"
|
||||
icon="i-ri:arrow-right-up-line"
|
||||
:command="command"
|
||||
/>
|
||||
</NuxtLink>
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
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="!isSelf">
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
:text="$t('menu.mention_account', [`@${account.acct}`])"
|
||||
icon="i-ri:at-line"
|
||||
:command="command"
|
||||
@click="mentionUser(account)"
|
||||
/>
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
:text="$t('menu.direct_message_account', [`@${account.acct}`])"
|
||||
icon="i-ri:message-3-line"
|
||||
:command="command"
|
||||
@click="directMessageUser(account)"
|
||||
/>
|
||||
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-if="!relationship?.showingReblogs"
|
||||
icon="i-ri:repeat-line"
|
||||
:text="$t('menu.show_reblogs', [`@${account.acct}`])"
|
||||
:command="command"
|
||||
@click="toggleReblogs()"
|
||||
/>
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-else
|
||||
:text="$t('menu.hide_reblogs', [`@${account.acct}`])"
|
||||
icon="i-ri:repeat-line"
|
||||
:command="command"
|
||||
@click="toggleReblogs()"
|
||||
/>
|
||||
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-if="!relationship?.note || relationship?.note?.length === 0"
|
||||
:text="$t('menu.add_personal_note', [`@${account.acct}`])"
|
||||
icon="i-ri-edit-2-line"
|
||||
:command="command"
|
||||
@click="addUserNote()"
|
||||
/>
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-else
|
||||
:text="$t('menu.remove_personal_note', [`@${account.acct}`])"
|
||||
icon="i-ri-edit-2-line"
|
||||
:command="command"
|
||||
@click="removeUserNote()"
|
||||
/>
|
||||
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-if="!relationship?.muting"
|
||||
:text="$t('menu.mute_account', [`@${account.acct}`])"
|
||||
icon="i-ri:volume-mute-line"
|
||||
:command="command"
|
||||
@click="toggleMuteAccount (relationship!, account)"
|
||||
/>
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-else
|
||||
:text="$t('menu.unmute_account', [`@${account.acct}`])"
|
||||
icon="i-ri:volume-up-fill"
|
||||
:command="command"
|
||||
@click="toggleMuteAccount (relationship!, account)"
|
||||
/>
|
||||
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-if="!relationship?.blocking"
|
||||
:text="$t('menu.block_account', [`@${account.acct}`])"
|
||||
icon="i-ri:forbid-2-line"
|
||||
:command="command"
|
||||
@click="toggleBlockAccount (relationship!, account)"
|
||||
/>
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-else
|
||||
:text="$t('menu.unblock_account', [`@${account.acct}`])"
|
||||
icon="i-ri:checkbox-circle-line"
|
||||
:command="command"
|
||||
@click="toggleBlockAccount (relationship!, account)"
|
||||
/>
|
||||
|
||||
<template v-if="getServerName(account) !== currentServer">
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-if="!relationship?.domainBlocking"
|
||||
:text="$t('menu.block_domain', [getServerName(account)])"
|
||||
icon="i-ri:shut-down-line"
|
||||
:command="command"
|
||||
@click="toggleBlockDomain(relationship!, account)"
|
||||
/>
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-else
|
||||
:text="$t('menu.unblock_domain', [getServerName(account)])"
|
||||
icon="i-ri:restart-line"
|
||||
:command="command"
|
||||
@click="toggleBlockDomain(relationship!, account)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
:text="$t('menu.report_account', [`@${account.acct}`])"
|
||||
icon="i-ri:flag-2-line"
|
||||
:command="command"
|
||||
@click="openReportDialog(account)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<NuxtLink to="/pinned">
|
||||
<CommonDropdownItem :text="$t('account.pinned')" icon="i-ri:pushpin-line" :command="command" />
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/favourites">
|
||||
<CommonDropdownItem :text="$t('account.favourites')" :icon="useStarFavoriteIcon ? 'i-ri:star-line' : 'i-ri:heart-3-line'" :command="command" />
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/mutes">
|
||||
<CommonDropdownItem :text="$t('account.muted_users')" icon="i-ri:volume-mute-line" :command="command" />
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/blocks">
|
||||
<CommonDropdownItem :text="$t('account.blocked_users')" icon="i-ri:forbid-2-line" :command="command" />
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/domain_blocks">
|
||||
<CommonDropdownItem :text="$t('account.blocked_domains')" icon="i-ri:shut-down-line" :command="command" />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</CommonDropdown>
|
||||
</template>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const { account, context } = defineProps<{
|
||||
paginator: mastodon.Paginator<mastodon.v1.Account[], mastodon.DefaultPaginationParams | undefined>
|
||||
context?: 'following' | 'followers'
|
||||
account?: mastodon.v1.Account
|
||||
relationshipContext?: 'followedBy' | 'following'
|
||||
}>()
|
||||
|
||||
const fallbackContext = computed(() => {
|
||||
return ['following', 'followers'].includes(context!)
|
||||
})
|
||||
const showOriginSite = computed(() =>
|
||||
account && account.id !== currentUser.value?.account.id && getServerName(account) !== currentServer.value,
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CommonPaginator :paginator="paginator">
|
||||
<template #default="{ item }">
|
||||
<AccountCard
|
||||
:account="item"
|
||||
:relationship-context="relationshipContext"
|
||||
hover-card
|
||||
border="b base" py2 px4
|
||||
/>
|
||||
</template>
|
||||
<template v-if="fallbackContext && showOriginSite" #done>
|
||||
<div p5 text-secondary text-center flex flex-col items-center gap1>
|
||||
<span italic>{{ $t(`account.view_other_${context}`) }}</span>
|
||||
<NuxtLink
|
||||
:href="account!.url" target="_blank" external
|
||||
flex="~ gap-1" items-center text-primary
|
||||
hover="underline text-primary-active"
|
||||
>
|
||||
<div i-ri:external-link-fill />
|
||||
{{ $t('menu.open_in_original_site') }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
</CommonPaginator>
|
||||
</template>
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
isHoverCard?: boolean
|
||||
}>()
|
||||
|
||||
const userSettings = useUserSettings()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div flex gap-5>
|
||||
<NuxtLink
|
||||
:to="getAccountRoute(account)"
|
||||
replace
|
||||
text-secondary
|
||||
exact-active-class="text-primary"
|
||||
>
|
||||
<template #default="{ isExactActive }">
|
||||
<CommonLocalizedNumber
|
||||
keypath="account.posts_count"
|
||||
:count="account.statusesCount"
|
||||
font-bold
|
||||
:class="isExactActive ? 'text-primary' : 'text-base'"
|
||||
/>
|
||||
</template>
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
v-if="!(isHoverCard && getPreferences(userSettings, 'hideFollowerCount'))"
|
||||
:to="getAccountFollowingRoute(account)"
|
||||
replace
|
||||
text-secondary exact-active-class="text-primary"
|
||||
>
|
||||
<template #default="{ isExactActive }">
|
||||
<template
|
||||
v-if="!getPreferences(userSettings, 'hideFollowerCount')"
|
||||
>
|
||||
<CommonLocalizedNumber
|
||||
v-if="account.followingCount >= 0"
|
||||
keypath="account.following_count"
|
||||
:count="account.followingCount"
|
||||
font-bold
|
||||
: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>
|
||||
</template>
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
v-if="!(isHoverCard && getPreferences(userSettings, 'hideFollowerCount'))"
|
||||
:to="getAccountFollowersRoute(account)"
|
||||
replace text-secondary
|
||||
exact-active-class="text-primary"
|
||||
>
|
||||
<template #default="{ isExactActive }">
|
||||
<template v-if="!getPreferences(userSettings, 'hideFollowerCount')">
|
||||
<CommonLocalizedNumber
|
||||
v-if="account.followersCount >= 0"
|
||||
keypath="account.followers_count"
|
||||
:count="account.followersCount"
|
||||
font-bold
|
||||
: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>
|
||||
</template>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -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,43 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { CommonRouteTabOption } from '#shared/types'
|
||||
|
||||
const { t } = useI18n()
|
||||
const route = useRoute()
|
||||
|
||||
const server = computed(() => route.params.server as string)
|
||||
const account = computed(() => route.params.account as string)
|
||||
|
||||
const tabs = computed<CommonRouteTabOption[]>(() => [
|
||||
{
|
||||
name: 'account-index',
|
||||
to: {
|
||||
name: 'account-index',
|
||||
params: { server: server.value, account: account.value },
|
||||
},
|
||||
display: t('tab.posts'),
|
||||
icon: 'i-ri:file-list-2-line',
|
||||
},
|
||||
{
|
||||
name: 'account-replies',
|
||||
to: {
|
||||
name: 'account-replies',
|
||||
params: { server: server.value, account: account.value },
|
||||
},
|
||||
display: t('tab.posts_with_replies'),
|
||||
icon: 'i-ri:chat-1-line',
|
||||
},
|
||||
{
|
||||
name: 'account-media',
|
||||
to: {
|
||||
name: 'account-media',
|
||||
params: { server: server.value, account: account.value },
|
||||
},
|
||||
display: t('tab.media'),
|
||||
icon: 'i-ri:camera-2-line',
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CommonRouteTabs force replace :options="tabs" prevent-scroll-top command border="base b" />
|
||||
</template>
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const { tagName } = 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"
|
||||
no-auto-focus
|
||||
>
|
||||
<slot />
|
||||
<template #popper>
|
||||
<TagCardSkeleton v-if="!tag" />
|
||||
<TagCard v-else :tag="tag" />
|
||||
</template>
|
||||
</VMenu>
|
||||
<slot v-else />
|
||||
</span>
|
||||
</template>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const emit = defineEmits<{
|
||||
(event: 'close'): void
|
||||
}>()
|
||||
const visible = defineModel<boolean>()
|
||||
|
||||
function close() {
|
||||
emit('close')
|
||||
visible.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
flex="~ gap-2" justify-between items-center
|
||||
border="b base" text-sm text-secondary px4 py2 sm:py4
|
||||
>
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
<button text-xl hover:text-primary bg-hover-overflow w="1.2em" h="1.2em" @click="close()">
|
||||
<div i-ri:close-line />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const { blurhash = '', shouldLoadImage = true } = defineProps<{
|
||||
blurhash?: string
|
||||
src: string
|
||||
srcset?: string
|
||||
shouldLoadImage?: boolean
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UnLazyImage v-bind="$attrs" :blurhash="blurhash" :src="src" :src-set="srcset" :lazy-load="shouldLoadImage" auto-sizes />
|
||||
</template>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
label?: string
|
||||
hover?: boolean
|
||||
iconChecked?: string
|
||||
iconUnchecked?: string
|
||||
checkedIconColor?: string
|
||||
prependCheckbox?: boolean
|
||||
}>()
|
||||
const modelValue = defineModel<boolean | null>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<label
|
||||
class="common-checkbox flex items-center cursor-pointer py-1 text-md w-full gap-y-1"
|
||||
:class="hover ? 'hover:bg-active ms--2 px-4 py-2' : null"
|
||||
v-bind="$attrs"
|
||||
@click.prevent="modelValue = !modelValue"
|
||||
>
|
||||
<span v-if="label && !prependCheckbox" flex-1 ms-2 pointer-events-none>{{ label }}</span>
|
||||
<span
|
||||
:class="[
|
||||
modelValue ? (iconChecked ?? 'i-ri:checkbox-line') : (iconUnchecked ?? 'i-ri:checkbox-blank-line'),
|
||||
modelValue && checkedIconColor,
|
||||
]"
|
||||
text-lg
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<input
|
||||
v-model="modelValue"
|
||||
type="checkbox"
|
||||
sr-only
|
||||
>
|
||||
<span v-if="label && prependCheckbox" flex-1 ms-2 pointer-events-none>{{ label }}</span>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.common-checkbox:focus-within {
|
||||
outline: none;
|
||||
border-bottom: 1px solid var(--c-text-base);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{ describedBy: string }>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
role="alert"
|
||||
aria-live="polite"
|
||||
:aria-describedby="describedBy"
|
||||
flex="~ col"
|
||||
gap-1 text-sm
|
||||
pt-1 ps-2 pe-1 pb-2
|
||||
text-red-600 dark:text-red-400
|
||||
border="~ base rounded red-600 dark:red-400"
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,106 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { FileWithHandle } from 'browser-fs-access'
|
||||
import { fileOpen } from 'browser-fs-access'
|
||||
|
||||
const {
|
||||
original,
|
||||
allowedFileTypes = ['image/jpeg', 'image/png'],
|
||||
allowedFileSize = 1024 * 1024 * 5, // 5 MB
|
||||
} = defineProps<{
|
||||
/** The image src before change */
|
||||
original?: string
|
||||
/** Allowed file types */
|
||||
allowedFileTypes?: string[]
|
||||
/** Allowed file size */
|
||||
allowedFileSize?: number
|
||||
imgClass?: string
|
||||
loading?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'pick', value: FileWithHandle): void
|
||||
(event: 'error', code: number, message: string): void
|
||||
}>()
|
||||
|
||||
const file = defineModel<FileWithHandle | null>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const defaultImage = computed(() => original || '')
|
||||
/** Preview of selected images */
|
||||
const previewImage = ref('')
|
||||
/** The current images on display */
|
||||
const imageSrc = computed<string>(() => previewImage.value || defaultImage.value)
|
||||
|
||||
async function pickImage() {
|
||||
if (import.meta.server)
|
||||
return
|
||||
const image = await fileOpen({
|
||||
description: 'Image',
|
||||
mimeTypes: allowedFileTypes,
|
||||
})
|
||||
|
||||
if (!allowedFileTypes.includes(image.type)) {
|
||||
emit('error', 1, t('error.unsupported_file_format'))
|
||||
return
|
||||
}
|
||||
else if (image.size > allowedFileSize) {
|
||||
emit('error', 2, t('error.file_size_cannot_exceed_n_mb', [5]))
|
||||
return
|
||||
}
|
||||
|
||||
file.value = image
|
||||
emit('pick', file.value)
|
||||
}
|
||||
|
||||
watch(file, (image, _, onCleanup) => {
|
||||
let expired = false
|
||||
onCleanup(() => expired = true)
|
||||
|
||||
if (!image) {
|
||||
previewImage.value = ''
|
||||
return
|
||||
}
|
||||
const reader = new FileReader()
|
||||
reader.readAsDataURL(image)
|
||||
reader.onload = (evt) => {
|
||||
if (expired)
|
||||
return
|
||||
previewImage.value = evt.target?.result as string
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<label
|
||||
class="bg-slate-500/10 focus-within:(outline outline-primary)"
|
||||
relative
|
||||
flex justify-center items-center
|
||||
cursor-pointer
|
||||
of-hidden
|
||||
@click="pickImage"
|
||||
>
|
||||
<img
|
||||
v-if="imageSrc"
|
||||
:src="imageSrc"
|
||||
:class="imgClass || ''"
|
||||
object-cover
|
||||
w-full
|
||||
h-full
|
||||
>
|
||||
<span absolute bg="black/50" text-white rounded-full text-xl w12 h12 flex justify-center items-center hover="bg-black/40 text-primary">
|
||||
<span block i-ri:upload-line />
|
||||
</span>
|
||||
|
||||
<span
|
||||
v-if="loading"
|
||||
absolute inset-0
|
||||
bg="black/30" text-white
|
||||
flex justify-center items-center
|
||||
>
|
||||
<span class="animate-spin animate-duration-[2.5s] preserve-3d">
|
||||
<span block i-ri:loader-4-line text-4xl />
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</template>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const {
|
||||
zIndex = 100,
|
||||
background = 'transparent',
|
||||
} = defineProps<{
|
||||
zIndex?: number
|
||||
background?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div fixed top-0 bottom-0 left-0 right-0 :style="{ background, zIndex }" />
|
||||
</template>
|
||||
|
|
@ -1,121 +0,0 @@
|
|||
<script setup lang="ts" generic="T, O, U = T">
|
||||
import type { mastodon } from 'masto'
|
||||
// @ts-expect-error missing types
|
||||
import { DynamicScroller } from 'vue-virtual-scroller'
|
||||
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
|
||||
|
||||
const {
|
||||
paginator,
|
||||
keyProp = 'id',
|
||||
virtualScroller = false,
|
||||
stream,
|
||||
eventType,
|
||||
preprocess,
|
||||
endMessage = true,
|
||||
} = defineProps<{
|
||||
paginator: mastodon.Paginator<T[], O>
|
||||
keyProp?: keyof T
|
||||
virtualScroller?: boolean
|
||||
stream?: mastodon.streaming.Subscription
|
||||
eventType?: 'update' | 'notification'
|
||||
preprocess?: (items: (U | T)[]) => U[]
|
||||
endMessage?: boolean | string
|
||||
}>()
|
||||
|
||||
defineSlots<{
|
||||
default: (props: {
|
||||
items: U[]
|
||||
item: U
|
||||
index: number
|
||||
active?: boolean
|
||||
older: U
|
||||
newer: U // newer is undefined when index === 0
|
||||
}) => void
|
||||
items: (props: {
|
||||
items: U[]
|
||||
}) => void
|
||||
updater: (props: {
|
||||
number: number
|
||||
update: () => void
|
||||
}) => void
|
||||
loading: (props: object) => void
|
||||
done: (props: { items: U[] }) => void
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const nuxtApp = useNuxtApp()
|
||||
|
||||
const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, toRef(() => stream), eventType, preprocess)
|
||||
|
||||
nuxtApp.hook('elk-logo:click', () => {
|
||||
update()
|
||||
nuxtApp.$scrollToTop()
|
||||
})
|
||||
|
||||
function createEntry(item: any) {
|
||||
items.value = [...items.value, preprocess?.([item]) ?? item]
|
||||
}
|
||||
|
||||
function updateEntry(item: any) {
|
||||
const id = item[keyProp]
|
||||
const index = items.value.findIndex(i => (i as any)[keyProp] === id)
|
||||
if (index > -1)
|
||||
items.value = [...items.value.slice(0, index), preprocess?.([item]) ?? item, ...items.value.slice(index + 1)]
|
||||
}
|
||||
|
||||
function removeEntry(entryId: any) {
|
||||
items.value = items.value.filter(i => (i as any)[keyProp] !== entryId)
|
||||
}
|
||||
|
||||
defineExpose({ createEntry, removeEntry, updateEntry })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<slot v-if="prevItems.length" name="updater" v-bind="{ number: prevItems.length, update }" />
|
||||
<slot name="items" :items="items as U[]">
|
||||
<template v-if="virtualScroller">
|
||||
<DynamicScroller
|
||||
v-slot="{ item, active, index }"
|
||||
:items="items"
|
||||
:min-item-size="200"
|
||||
:key-field="keyProp"
|
||||
page-mode
|
||||
>
|
||||
<slot
|
||||
v-bind="{ key: item[keyProp] }"
|
||||
:item="item"
|
||||
:active="active"
|
||||
:older="items[index + 1] as U"
|
||||
:newer="items[index - 1] as U"
|
||||
:index="index"
|
||||
:items="items as U[]"
|
||||
/>
|
||||
</DynamicScroller>
|
||||
</template>
|
||||
<template v-else>
|
||||
<slot
|
||||
v-for="(item, index) of items"
|
||||
v-bind="{ key: (item as U)[keyProp as keyof U] }"
|
||||
:item="item as U"
|
||||
:older="items[index + 1] as U"
|
||||
:newer="items[index - 1] as U"
|
||||
:index="index"
|
||||
:items="items as U[]"
|
||||
/>
|
||||
</template>
|
||||
</slot>
|
||||
<div ref="endAnchor" />
|
||||
<slot v-if="state === 'loading'" name="loading">
|
||||
<TimelineSkeleton />
|
||||
</slot>
|
||||
<slot v-else-if="state === 'done' && endMessage !== false" name="done" :items="items as U[]">
|
||||
<div p5 text-secondary italic text-center>
|
||||
{{ t(typeof endMessage === 'string' && items.length <= 0 ? endMessage : 'common.end_of_list') }}
|
||||
</div>
|
||||
</slot>
|
||||
<div v-else-if="state === 'error'" p5 text-secondary>
|
||||
{{ t('common.error') }}: {{ error }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const build = useBuildInfo()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
m-2 p5 bg-rose:10 relative
|
||||
rounded-lg of-hidden
|
||||
flex="~ col gap-3"
|
||||
>
|
||||
<h2 font-bold text-rose>
|
||||
{{ $t('help.build_preview.title') }}
|
||||
</h2>
|
||||
<p>
|
||||
<i18n-t keypath="help.build_preview.desc1">
|
||||
<NuxtLink :href="`https://github.com/elk-zone/elk/commit/${build.commit}`" target="_blank" text-rose hover:underline>
|
||||
<code>{{ build.shortCommit }}</code>
|
||||
</NuxtLink>
|
||||
</i18n-t>
|
||||
</p>
|
||||
<p>{{ $t('help.build_preview.desc2') }}</p>
|
||||
<p font-bold>
|
||||
{{ $t('help.build_preview.desc3') }}
|
||||
</p>
|
||||
<div i-ri-git-pull-request-line absolute text-10em bottom--10 inset-ie--10 text-rose op10 class="-z-1" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { CommonRouteTabMoreOption, CommonRouteTabOption } from '#shared/types'
|
||||
|
||||
const { options, command, preventScrollTop = false } = defineProps<{
|
||||
options: CommonRouteTabOption[]
|
||||
moreOptions?: CommonRouteTabMoreOption
|
||||
command?: boolean
|
||||
replace?: boolean
|
||||
preventScrollTop?: boolean
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const router = useRouter()
|
||||
|
||||
useCommands(() => command
|
||||
? options.map(tab => ({
|
||||
scope: 'Tabs',
|
||||
name: tab.display,
|
||||
icon: tab.icon ?? 'i-ri:file-list-2-line',
|
||||
onActivate: () => router.replace(tab.to),
|
||||
}))
|
||||
: [])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div flex w-full items-center lg:text-lg of-x-auto scrollbar-hide border="b base">
|
||||
<template
|
||||
v-for="(option, index) in options.filter(item => !item.hide)"
|
||||
:key="option?.name || index"
|
||||
>
|
||||
<NuxtLink
|
||||
v-if="!option.disabled"
|
||||
:to="option.to"
|
||||
:replace="replace"
|
||||
relative flex flex-auto cursor-pointer sm:px6 px2 rounded transition-all
|
||||
tabindex="0"
|
||||
hover:bg-active transition-100
|
||||
exact-active-class="children:(text-secondary !border-primary !op100 !text-base)"
|
||||
@click="!preventScrollTop && $scrollToTop()"
|
||||
>
|
||||
<span ws-nowrap mxa sm:px2 sm:py3 xl:pb4 xl:pt5 py2 text-center border-b-3 text-secondary-light hover:text-secondary border-transparent>{{ option.display || ' ' }}</span>
|
||||
</NuxtLink>
|
||||
<div v-else flex flex-auto sm:px6 px2 xl:pb4 xl:pt5>
|
||||
<span ws-nowrap mxa sm:px2 sm:py3 py2 text-center text-secondary-light op50>{{ option.display }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="isHydrated && moreOptions?.options?.length">
|
||||
<CommonDropdown placement="bottom" flex cursor-pointer mx-1.25rem>
|
||||
<CommonTooltip placement="top" :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>
|
||||
</template>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const {
|
||||
history,
|
||||
maxDay = 2,
|
||||
} = defineProps<{
|
||||
history: mastodon.v1.TagHistory[]
|
||||
maxDay?: number
|
||||
}>()
|
||||
|
||||
const ongoingHot = computed(() => history.slice(0, maxDay))
|
||||
|
||||
const people = computed(() =>
|
||||
ongoingHot.value.reduce((total: number, item) => total + (Number(item.accounts) || 0), 0),
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<p>
|
||||
{{ $t('command.n_people_in_the_past_n_days', [people, maxDay]) }}
|
||||
</p>
|
||||
</template>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
import sparkline from '@fnando/sparkline'
|
||||
|
||||
const {
|
||||
history,
|
||||
width = 60,
|
||||
height = 40,
|
||||
} = defineProps<{
|
||||
history?: mastodon.v1.TagHistory[]
|
||||
width?: number
|
||||
height?: number
|
||||
}>()
|
||||
|
||||
const historyNum = computed(() => {
|
||||
if (!history)
|
||||
return [1, 1, 1, 1, 1, 1, 1]
|
||||
return [...history].reverse().map(item => Number(item.accounts) || 0)
|
||||
})
|
||||
|
||||
const sparklineEl = ref<SVGSVGElement>()
|
||||
const sparklineFn = typeof sparkline !== 'function' ? (sparkline as any).default : sparkline
|
||||
|
||||
watch([historyNum, sparklineEl], ([historyNum, sparklineEl]) => {
|
||||
if (!sparklineEl)
|
||||
return
|
||||
sparklineFn(sparklineEl, historyNum)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg ref="sparklineEl" class="sparkline" :width="width" :height="height" stroke-width="3" />
|
||||
</template>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const { count } = defineProps<{
|
||||
count: number
|
||||
keypath: string
|
||||
}>()
|
||||
|
||||
const { formatHumanReadableNumber, formatNumber, forSR } = useHumanReadableNumber()
|
||||
|
||||
const useSR = computed(() => forSR(count))
|
||||
const rawNumber = computed(() => formatNumber(count))
|
||||
const humanReadableNumber = computed(() => formatHumanReadableNumber(count))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<i18n-t :keypath="keypath" :plural="count" tag="span" class="flex gap-x-1">
|
||||
<CommonTooltip v-if="useSR" :content="rawNumber" placement="bottom">
|
||||
<span aria-hidden="true" v-bind="$attrs">{{ humanReadableNumber }}</span>
|
||||
<span sr-only>{{ rawNumber }}</span>
|
||||
</CommonTooltip>
|
||||
<span v-else v-bind="$attrs">{{ humanReadableNumber }}</span>
|
||||
</i18n-t>
|
||||
</template>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { InjectionKeyDropdownContext } from '~/constants/symbols'
|
||||
|
||||
defineProps<{
|
||||
placement?: string
|
||||
autoBoundaryMaxSize?: boolean
|
||||
}>()
|
||||
|
||||
const dropdown = ref<any>()
|
||||
const colorMode = useColorMode()
|
||||
|
||||
function hide() {
|
||||
return dropdown.value.hide()
|
||||
}
|
||||
provide(InjectionKeyDropdownContext, {
|
||||
hide,
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
hide,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VDropdown v-bind="$attrs" ref="dropdown" :class="colorMode.value" :placement="placement || 'auto'" :auto-boundary-max-size="autoBoundaryMaxSize">
|
||||
<slot />
|
||||
<template #popper="scope">
|
||||
<slot name="popper" v-bind="scope" />
|
||||
</template>
|
||||
</VDropdown>
|
||||
</template>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const { code, lang } = defineProps<{
|
||||
code: string
|
||||
lang?: string
|
||||
}>()
|
||||
|
||||
const raw = computed(() => decodeURIComponent(code).replace(/'/g, '\''))
|
||||
|
||||
const langMap: Record<string, string> = {
|
||||
js: 'javascript',
|
||||
ts: 'typescript',
|
||||
vue: 'html',
|
||||
}
|
||||
|
||||
const highlighted = computed(() => {
|
||||
return lang ? highlightCode(raw.value, (langMap[lang] || lang) as any) : raw
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<pre v-if="lang" class="code-block" v-html="highlighted" />
|
||||
<pre v-else class="code-block">{{ raw }}</pre>
|
||||
</template>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
replying?: boolean
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<p flex="~ gap-1 wrap" items-center text-sm :class="{ 'zen-none': !replying }">
|
||||
<span i-ri-arrow-right-line ml--1 text-secondary-light /><slot />
|
||||
</p>
|
||||
</template>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import type { mastodon } from 'masto'
|
||||
|
||||
defineOptions({
|
||||
name: 'ContentRich',
|
||||
})
|
||||
|
||||
const {
|
||||
content,
|
||||
emojis,
|
||||
hideEmojis = false,
|
||||
markdown = true,
|
||||
} = defineProps<{
|
||||
content: string
|
||||
emojis?: mastodon.v1.CustomEmoji[]
|
||||
hideEmojis?: boolean
|
||||
markdown?: boolean
|
||||
}>()
|
||||
|
||||
const emojisObject = useEmojisFallback(() => emojis)
|
||||
|
||||
export default () => h(
|
||||
'span',
|
||||
{ class: 'content-rich', dir: 'auto' },
|
||||
contentToVNode(content, {
|
||||
emojis: emojisObject.value,
|
||||
hideEmojis,
|
||||
markdown,
|
||||
}),
|
||||
)
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
defineProps<{
|
||||
paginator: mastodon.Paginator<mastodon.v1.Conversation[], mastodon.DefaultPaginationParams>
|
||||
}>()
|
||||
|
||||
function preprocess(items: mastodon.v1.Conversation[]): mastodon.v1.Conversation[] {
|
||||
const isAuthored = (conversation: mastodon.v1.Conversation) => conversation.lastStatus ? conversation.lastStatus.account.id === currentUser.value?.account.id : false
|
||||
return items.filter(item => isAuthored(item) || !item.lastStatus?.filtered?.find(
|
||||
filter => filter.filter.filterAction === 'hide' && filter.filter.context.includes('thread'),
|
||||
))
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CommonPaginator :paginator="paginator" :preprocess="preprocess">
|
||||
<template #default="{ item }">
|
||||
<ConversationCard
|
||||
:conversation="item"
|
||||
border="b base" py-1
|
||||
/>
|
||||
</template>
|
||||
</CommonPaginator>
|
||||
</template>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const { 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>
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const emit = defineEmits<{
|
||||
(event: 'close'): void
|
||||
}>()
|
||||
|
||||
const vAutoFocus = (el: HTMLElement) => el.focus()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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="$t('action.close')" @click="emit('close')">
|
||||
<span i-ri:close-line />
|
||||
</button>
|
||||
|
||||
<img :alt="$t('app_logo')" :src="`/${''}logo.svg`" w-20 h-20 height="80" width="80" mxa class="rtl-flip">
|
||||
<h1 mxa text-4xl mb4>
|
||||
{{ $t('help.title') }}
|
||||
</h1>
|
||||
<p>
|
||||
{{ $t('help.desc_para1') }}
|
||||
</p>
|
||||
<p>
|
||||
<b text-primary>{{ $t('help.desc_highlight') }}</b>
|
||||
{{ $t('help.desc_para2') }}
|
||||
</p>
|
||||
<p>
|
||||
{{ $t('help.desc_para4') }}
|
||||
<NuxtLink font-bold text-primary href="https://github.com/elk-zone/elk" target="_blank">
|
||||
{{ $t('help.desc_para5') }}
|
||||
</NuxtLink>
|
||||
{{ $t('help.desc_para6') }}
|
||||
</p>
|
||||
<NuxtLink hover:text-primary href="https://github.com/sponsors/elk-zone" target="_blank">
|
||||
{{ $t('help.desc_para3') }}
|
||||
</NuxtLink>
|
||||
<p flex="~ gap-2 wrap justify-center" mxa>
|
||||
<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">
|
||||
<img :src="`/avatars/${team.github}-100x100.png`" :alt="team.display" rounded-full w-15 h-15 height="60" width="60">
|
||||
</NuxtLink>
|
||||
</template>
|
||||
</p>
|
||||
<p italic flex justify-center w-full>
|
||||
<NuxtLink href="https://github.com/sponsors/elk-zone" target="_blank">
|
||||
<span text-xl font-script hover:text-primary transition duration-300>{{ $t('help.footer_team') }}</span>
|
||||
</NuxtLink>
|
||||
</p>
|
||||
|
||||
<button type="button" btn-solid mxa @click="emit('close')">
|
||||
{{ $t('action.enter_app') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const { account, list } = defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
hoverCard?: boolean
|
||||
list: string
|
||||
}>()
|
||||
|
||||
cacheAccount(account)
|
||||
|
||||
const client = useMastoClient()
|
||||
|
||||
const isRemoved = ref(false)
|
||||
|
||||
async function edit() {
|
||||
try {
|
||||
if (isRemoved.value)
|
||||
await client.v1.lists.$select(list).accounts.create({ accountIds: [account.id] })
|
||||
else
|
||||
await client.v1.lists.$select(list).accounts.remove({ accountIds: [account.id] })
|
||||
isRemoved.value = !isRemoved.value
|
||||
}
|
||||
catch (err) {
|
||||
console.error(err)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div flex justify-between hover:bg-active transition-100 items-center>
|
||||
<AccountInfo
|
||||
:account="account" hover p1 as="router-link"
|
||||
:hover-card="hoverCard"
|
||||
shrink
|
||||
overflow-hidden
|
||||
:to="getAccountRoute(account)"
|
||||
/>
|
||||
<div>
|
||||
<CommonTooltip
|
||||
:content="isRemoved ? $t('list.add_account') : $t('list.remove_account')"
|
||||
:hover="isRemoved ? 'text-green' : 'text-red'"
|
||||
>
|
||||
<button
|
||||
text-sm p2 border-1 transition-colors
|
||||
border-dark
|
||||
bg-base
|
||||
btn-action-icon
|
||||
@click="edit"
|
||||
>
|
||||
<span :class="isRemoved ? 'i-ri:user-add-line' : 'i-ri:user-unfollow-line'" />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { SearchResult } from '~/composables/masto/search'
|
||||
|
||||
defineProps<{
|
||||
result: SearchResult
|
||||
active: boolean
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CommonScrollIntoView
|
||||
as="div"
|
||||
:active="active"
|
||||
py2 block px2
|
||||
:aria-selected="active"
|
||||
:class="{ 'bg-active': active }"
|
||||
>
|
||||
<AccountInfo
|
||||
v-if="result.type === 'account'"
|
||||
:account="result.data"
|
||||
/>
|
||||
</CommonScrollIntoView>
|
||||
</template>
|
||||
|
|
@ -1,211 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
import { useForm } from 'slimeform'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'listUpdated', list: mastodon.v1.List): void
|
||||
(e: 'listRemoved', id: string): void
|
||||
}>()
|
||||
const list = defineModel<mastodon.v1.List>({ required: true })
|
||||
|
||||
const { t } = useI18n()
|
||||
const client = useMastoClient()
|
||||
|
||||
const { form, isDirty, submitter, reset } = useForm({
|
||||
form: () => ({ ...list.value }),
|
||||
})
|
||||
|
||||
const isEditing = ref<boolean>(false)
|
||||
const deleting = ref<boolean>(false)
|
||||
const actionError = ref<string | undefined>(undefined)
|
||||
|
||||
const input = ref<HTMLInputElement>()
|
||||
const editBtn = ref<HTMLButtonElement>()
|
||||
const deleteBtn = ref<HTMLButtonElement>()
|
||||
|
||||
async function prepareEdit() {
|
||||
isEditing.value = true
|
||||
actionError.value = undefined
|
||||
await nextTick()
|
||||
input.value?.focus()
|
||||
}
|
||||
async function cancelEdit() {
|
||||
isEditing.value = false
|
||||
actionError.value = undefined
|
||||
|
||||
await nextTick()
|
||||
reset()
|
||||
editBtn.value?.focus()
|
||||
}
|
||||
|
||||
const { submit, submitting } = submitter(async () => {
|
||||
try {
|
||||
list.value = await client.v1.lists.$select(form.id).update({
|
||||
title: form.title,
|
||||
})
|
||||
cancelEdit()
|
||||
}
|
||||
catch (err) {
|
||||
console.error(err)
|
||||
actionError.value = (err as Error).message
|
||||
await nextTick()
|
||||
input.value?.focus()
|
||||
}
|
||||
})
|
||||
|
||||
async function removeList() {
|
||||
if (deleting.value)
|
||||
return
|
||||
|
||||
const confirmDelete = await openConfirmDialog({
|
||||
title: t('confirm.delete_list.title'),
|
||||
description: t('confirm.delete_list.description', [list.value.title]),
|
||||
confirm: t('confirm.delete_list.confirm'),
|
||||
cancel: t('confirm.delete_list.cancel'),
|
||||
})
|
||||
|
||||
deleting.value = true
|
||||
actionError.value = undefined
|
||||
await nextTick()
|
||||
|
||||
if (confirmDelete.choice === 'confirm') {
|
||||
await nextTick()
|
||||
try {
|
||||
await client.v1.lists.$select(list.value.id).remove()
|
||||
emit('listRemoved', list.value.id)
|
||||
}
|
||||
catch (err) {
|
||||
console.error(err)
|
||||
actionError.value = (err as Error).message
|
||||
await nextTick()
|
||||
deleteBtn.value?.focus()
|
||||
}
|
||||
finally {
|
||||
deleting.value = false
|
||||
}
|
||||
}
|
||||
else {
|
||||
deleting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function clearError() {
|
||||
actionError.value = undefined
|
||||
await nextTick()
|
||||
if (isEditing.value)
|
||||
input.value?.focus()
|
||||
else
|
||||
deleteBtn.value?.focus()
|
||||
}
|
||||
|
||||
onDeactivated(cancelEdit)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form
|
||||
hover:bg-active flex justify-between items-center gap-x-2
|
||||
:aria-describedby="actionError ? `action-list-error-${list.id}` : undefined"
|
||||
:class="actionError ? 'border border-base border-rounded rounded-be-is-0 rounded-be-ie-0 border-b-unset border-$c-danger-active' : null"
|
||||
@submit.prevent="submit"
|
||||
>
|
||||
<div
|
||||
v-if="isEditing"
|
||||
bg-base border="~ base" h10 m2 ps-1 pe-4 rounded-3 w-full flex="~ row"
|
||||
items-center relative focus-within:box-shadow-outline gap-3
|
||||
>
|
||||
<CommonTooltip v-if="isEditing" :content="$t('list.cancel_edit')">
|
||||
<button
|
||||
type="button"
|
||||
rounded-full text-sm p2 transition-colors
|
||||
hover:text-primary
|
||||
@click="cancelEdit()"
|
||||
>
|
||||
<span block text-current i-ri:close-fill />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
<input
|
||||
ref="input"
|
||||
v-model="form.title"
|
||||
rounded-3 w-full bg-transparent
|
||||
outline="focus:none" pe-4 pb="1px"
|
||||
flex-1 placeholder-text-secondary
|
||||
@keydown.esc="cancelEdit()"
|
||||
>
|
||||
</div>
|
||||
<NuxtLink v-else :to="`list/${list.id}`" block grow p4>
|
||||
{{ form.title }}
|
||||
</NuxtLink>
|
||||
<div mr4 flex gap2>
|
||||
<CommonTooltip v-if="isEditing" :content="$t('list.save')">
|
||||
<button
|
||||
type="submit"
|
||||
text-sm p2 border-1 transition-colors
|
||||
border-dark hover:text-primary
|
||||
btn-action-icon
|
||||
:disabled="deleting || !isDirty || submitting"
|
||||
>
|
||||
<template v-if="isEditing">
|
||||
<span v-if="submitting" aria-hidden="true" block animate animate-spin preserve-3d class="rtl-flip">
|
||||
<span block i-ri:loader-2-fill aria-hidden="true" />
|
||||
</span>
|
||||
<span v-else block text-current i-ri:save-2-fill class="rtl-flip" />
|
||||
</template>
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
<CommonTooltip v-else :content="$t('list.edit')">
|
||||
<button
|
||||
ref="editBtn"
|
||||
type="button"
|
||||
text-sm p2 border-1 transition-colors
|
||||
border-dark hover:text-primary
|
||||
btn-action-icon
|
||||
@click.prevent="prepareEdit"
|
||||
>
|
||||
<span block text-current i-ri:edit-2-line class="rtl-flip" />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
<CommonTooltip :content="$t('list.delete')">
|
||||
<button
|
||||
type="button"
|
||||
text-sm p2 border-1 transition-colors
|
||||
border-dark hover:text-primary
|
||||
btn-action-icon
|
||||
:disabled="isEditing"
|
||||
@click.prevent="removeList"
|
||||
>
|
||||
<span v-if="deleting" aria-hidden="true" block animate animate-spin preserve-3d class="rtl-flip">
|
||||
<span block i-ri:loader-2-fill aria-hidden="true" />
|
||||
</span>
|
||||
<span v-else block text-current i-ri:delete-bin-2-line class="rtl-flip" />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
</div>
|
||||
</form>
|
||||
<CommonErrorMessage
|
||||
v-if="actionError"
|
||||
:id="`action-list-error-${list.id}`"
|
||||
:described-by="`action-list-failed-${list.id}`"
|
||||
class="rounded-bs-is-0 rounded-bs-ie-0 border-t-dashed m-b-2"
|
||||
>
|
||||
<header :id="`action-list-failed-${list.id}`" flex justify-between>
|
||||
<div flex items-center gap-x-2 font-bold>
|
||||
<div aria-hidden="true" i-ri:error-warning-fill />
|
||||
<p>{{ $t(`list.${isEditing ? 'edit_error' : 'delete_error'}`) }}</p>
|
||||
</div>
|
||||
<CommonTooltip placement="bottom" :content="$t('list.clear_error')">
|
||||
<button
|
||||
flex rounded-4 p1 hover:bg-active cursor-pointer transition-100 :aria-label="$t('list.clear_error')"
|
||||
@click="clearError"
|
||||
>
|
||||
<span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
</header>
|
||||
<ol ps-2 sm:ps-1>
|
||||
<li flex="~ col sm:row" gap-y-1 sm:gap-x-2>
|
||||
<strong sr-only>{{ $t('list.error_prefix') }}</strong>
|
||||
<span>{{ actionError }}</span>
|
||||
</li>
|
||||
</ol>
|
||||
</CommonErrorMessage>
|
||||
</template>
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const { userId } = defineProps<{
|
||||
userId: string
|
||||
}>()
|
||||
|
||||
const { client } = useMasto()
|
||||
const paginator = client.value.v1.lists.list()
|
||||
const listsWithUser = ref((await client.value.v1.accounts.$select(userId).lists.list()).map(list => list.id))
|
||||
|
||||
function indexOfUserInList(listId: string) {
|
||||
return listsWithUser.value.indexOf(listId)
|
||||
}
|
||||
|
||||
async function edit(listId: string) {
|
||||
try {
|
||||
const index = indexOfUserInList(listId)
|
||||
if (index === -1) {
|
||||
await client.value.v1.lists.$select(listId).accounts.create({ accountIds: [userId] })
|
||||
listsWithUser.value.push(listId)
|
||||
}
|
||||
else {
|
||||
await client.value.v1.lists.$select(listId).accounts.remove({ accountIds: [userId] })
|
||||
listsWithUser.value = listsWithUser.value.filter(id => id !== listId)
|
||||
}
|
||||
}
|
||||
catch (err) {
|
||||
console.error(err)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CommonPaginator :paginator="paginator">
|
||||
<template #default="{ item }">
|
||||
<div p4 hover:bg-active block w="100%" flex justify-between items-center gap-4>
|
||||
<p>{{ item.title }}</p>
|
||||
<CommonTooltip
|
||||
:content="indexOfUserInList(item.id) === -1 ? $t('list.add_account') : $t('list.remove_account')"
|
||||
:hover="indexOfUserInList(item.id) === -1 ? 'text-green' : 'text-red'"
|
||||
>
|
||||
<button
|
||||
text-sm p2 border-1 transition-colors
|
||||
border-dark
|
||||
btn-action-icon
|
||||
@click="() => edit(item.id)"
|
||||
>
|
||||
<span :class="indexOfUserInList(item.id) === -1 ? 'i-ri:user-add-line' : 'i-ri:user-unfollow-line'" />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
</div>
|
||||
</template>
|
||||
<template #done>
|
||||
<NuxtLink
|
||||
p4 hover:bg-active block w="100%" flex justify-between items-center gap-4
|
||||
to="/lists"
|
||||
>
|
||||
<p>{{ $t('list.manage') }}</p>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
</CommonPaginator>
|
||||
</template>
|
||||
|
|
@ -1,166 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const emit = defineEmits(['close'])
|
||||
const { t } = useI18n()
|
||||
|
||||
/* TODOs:
|
||||
* - I18n
|
||||
*/
|
||||
|
||||
interface ShortcutDef {
|
||||
keys: string[]
|
||||
isSequence: boolean
|
||||
}
|
||||
|
||||
interface ShortcutItem {
|
||||
description: string
|
||||
shortcut: ShortcutDef
|
||||
}
|
||||
|
||||
interface ShortcutItemGroup {
|
||||
name: string
|
||||
items: ShortcutItem[]
|
||||
}
|
||||
|
||||
const isMac = useIsMac()
|
||||
const modifierKeyName = computed(() => isMac.value ? '⌘' : 'Ctrl')
|
||||
|
||||
const shortcutItemGroups = computed<ShortcutItemGroup[]>(() => [
|
||||
{
|
||||
name: t('magic_keys.groups.navigation.title'),
|
||||
items: [
|
||||
{
|
||||
description: t('magic_keys.groups.navigation.shortcut_help'),
|
||||
shortcut: { keys: ['?'], isSequence: false },
|
||||
},
|
||||
{
|
||||
description: t('magic_keys.groups.navigation.next_status'),
|
||||
shortcut: { keys: ['j'], isSequence: false },
|
||||
},
|
||||
{
|
||||
description: t('magic_keys.groups.navigation.previous_status'),
|
||||
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'),
|
||||
shortcut: { keys: ['g', 'h'], isSequence: true },
|
||||
},
|
||||
{
|
||||
description: t('magic_keys.groups.navigation.go_to_notifications'),
|
||||
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'),
|
||||
items: [
|
||||
{
|
||||
description: t('magic_keys.groups.actions.search'),
|
||||
shortcut: { keys: [modifierKeyName.value, 'k'], isSequence: false },
|
||||
},
|
||||
{
|
||||
description: t('magic_keys.groups.actions.command_mode'),
|
||||
shortcut: { keys: [modifierKeyName.value, '/'], isSequence: false },
|
||||
},
|
||||
{
|
||||
description: t('magic_keys.groups.actions.compose'),
|
||||
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'),
|
||||
shortcut: { keys: ['f'], isSequence: false },
|
||||
},
|
||||
{
|
||||
description: t('magic_keys.groups.actions.boost'),
|
||||
shortcut: { keys: ['b'], isSequence: false },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: t('magic_keys.groups.media.title'),
|
||||
items: [],
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div px-3 sm:px-5 py-2 sm:py-4 max-w-220 relative max-h-screen>
|
||||
<button btn-action-icon absolute top-1 sm:top-2 right-1 sm:right-2 m1 :aria-label="$t('modals.aria_label_close')" @click="emit('close')">
|
||||
<div i-ri:close-fill />
|
||||
</button>
|
||||
<h2 text-xl font-700 mb3>
|
||||
{{ $t('magic_keys.dialog_header') }}
|
||||
</h2>
|
||||
<div mb2 grid grid-cols-1 md:grid-cols-3 gap-y- md:gap-x-6 lg:gap-x-8>
|
||||
<div
|
||||
v-for="group in shortcutItemGroups"
|
||||
:key="group.name"
|
||||
>
|
||||
<h3 font-700 my-2 text-lg>
|
||||
{{ group.name }}
|
||||
</h3>
|
||||
<div
|
||||
v-for="item in group.items"
|
||||
:key="item.description"
|
||||
flex my-1 lg:my-2 justify-between place-items-center max-w-full text-base
|
||||
>
|
||||
<div mr-2 break-words overflow-hidden leading-4 h-full inline-block align-middle>
|
||||
{{ item.description }}
|
||||
</div>
|
||||
<div>
|
||||
<template
|
||||
v-for="(key, idx) in item.shortcut.keys"
|
||||
:key="idx"
|
||||
>
|
||||
<span v-if="idx !== 0" mx1 text-sm op80>{{ item.shortcut.isSequence ? $t('magic_keys.sequence_then') : '+' }}</span>
|
||||
<code class="px2 md:px1.5 lg:px2 lg:px2 py0 lg:py-0.5" rounded bg-code border="px $c-border-code" shadow-sm my1 font-mono font-600>{{ key }}</code>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
/** Show the back button on small screens */
|
||||
backOnSmallScreen?: boolean
|
||||
/** Show the back button on both small and big screens */
|
||||
back?: boolean
|
||||
/** Do not applying overflow hidden to let use floatable components in title */
|
||||
noOverflowHidden?: boolean
|
||||
}>()
|
||||
|
||||
const container = ref()
|
||||
const route = useRoute()
|
||||
const userSettings = useUserSettings()
|
||||
const { height: windowHeight } = useWindowSize()
|
||||
const { height: containerHeight } = useElementBounding(container)
|
||||
const wideLayout = computed(() => route.meta.wideLayout ?? false)
|
||||
const sticky = computed(() => route.path?.startsWith('/settings/'))
|
||||
const containerClass = computed(() => {
|
||||
// we keep original behavior when not in settings page and when the window height is smaller than the container height
|
||||
if (!isHydrated.value || !sticky.value || (windowHeight.value < containerHeight.value))
|
||||
return null
|
||||
|
||||
return 'lg:sticky lg:top-0'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="container" :class="containerClass">
|
||||
<div
|
||||
sticky top-0 z-20
|
||||
pt="[env(safe-area-inset-top,0)]"
|
||||
bg="[rgba(var(--rgb-bg-base),0.7)]"
|
||||
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 gap-2 min-h-53px px5 py1 :class="{ 'xl:hidden': $route.name !== 'tag' }" class="native:xl:flex" border="b base">
|
||||
<div flex gap-2 items-center :overflow-hidden="!noOverflowHidden ? '' : false" w-full>
|
||||
<button
|
||||
v-if="backOnSmallScreen || back"
|
||||
btn-text flex items-center ms="-3" p-3 xl:hidden
|
||||
:aria-label="$t('nav.back')"
|
||||
@click="$router.go(-1)"
|
||||
>
|
||||
<div text-lg i-ri:arrow-left-line class="rtl-flip" />
|
||||
</button>
|
||||
<div :truncate="!noOverflowHidden ? '' : false" flex w-full data-tauri-drag-region class="native-mac:justify-start native-mac:text-center">
|
||||
<slot name="title" />
|
||||
</div>
|
||||
<div sm:hidden h-7 w-1px />
|
||||
</div>
|
||||
<div flex items-center flex-shrink-0 gap-x-2>
|
||||
<slot name="actions" />
|
||||
<PwaBadge xl:hidden />
|
||||
<NavUser v-if="isHydrated" />
|
||||
<NavUserSkeleton v-else />
|
||||
</div>
|
||||
</div>
|
||||
<slot name="header">
|
||||
<div hidden />
|
||||
</slot>
|
||||
</div>
|
||||
<PwaInstallPrompt xl:hidden />
|
||||
<div :class="isHydrated && wideLayout ? 'xl:w-full sm:max-w-600px' : 'sm:max-w-600px md:shrink-0'" m-auto>
|
||||
<div hidden :class="{ 'xl:block': $route.name !== 'tag' && !$slots.header }" h-6 />
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -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,56 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { ConfirmDialogChoice, ConfirmDialogOptions } from '#shared/types'
|
||||
|
||||
const { extraOptionType } = defineProps<ConfirmDialogOptions>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(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(() => 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>
|
||||
|
||||
<template>
|
||||
<div flex="~ col" gap-6>
|
||||
<div font-bold text-lg>
|
||||
{{ title }}
|
||||
</div>
|
||||
<div v-if="description">
|
||||
{{ description }}
|
||||
</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" />
|
||||
<ModalDurationPicker 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>
|
||||
<button btn-text @click="handleChoice('cancel')">
|
||||
{{ cancel || $t('confirm.common.cancel') }}
|
||||
</button>
|
||||
<button btn-solid :disabled="!isValidDuration" @click="handleChoice('confirm')">
|
||||
{{ confirm || $t('confirm.common.confirm') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,111 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { ConfirmDialogChoice } from '#shared/types'
|
||||
import type { mastodon } from 'masto'
|
||||
import {
|
||||
isCommandPanelOpen,
|
||||
isConfirmDialogOpen,
|
||||
isEditHistoryDialogOpen,
|
||||
isErrorDialogOpen,
|
||||
isFavouritedBoostedByDialogOpen,
|
||||
isKeyboardShortcutsDialogOpen,
|
||||
isMediaPreviewOpen,
|
||||
isPreviewHelpOpen,
|
||||
isPublishDialogOpen,
|
||||
isReportDialogOpen,
|
||||
isSigninDialogOpen,
|
||||
} from '~/composables/dialog'
|
||||
|
||||
const isMac = useIsMac()
|
||||
|
||||
// TODO: temporary, await for keybind system
|
||||
// open search panel
|
||||
// listen to ctrl+k on windows/linux or cmd+k on mac
|
||||
// open command panel
|
||||
// listen to ctrl+/ on windows/linux or cmd+/ on mac
|
||||
// or shift+ctrl+k on windows/linux or shift+cmd+k on mac
|
||||
useEventListener('keydown', (e: KeyboardEvent) => {
|
||||
if ((e.key === 'k' || e.key === 'л') && (isMac.value ? e.metaKey : e.ctrlKey)) {
|
||||
e.preventDefault()
|
||||
openCommandPanel(e.shiftKey)
|
||||
}
|
||||
if ((e.key === '/' || e.key === ',') && (isMac.value ? e.metaKey : e.ctrlKey)) {
|
||||
e.preventDefault()
|
||||
openCommandPanel(true)
|
||||
}
|
||||
})
|
||||
|
||||
function handlePublished(status: mastodon.v1.Status) {
|
||||
lastPublishDialogStatus.value = status
|
||||
isPublishDialogOpen.value = false
|
||||
}
|
||||
|
||||
function handlePublishClose() {
|
||||
lastPublishDialogStatus.value = null
|
||||
}
|
||||
|
||||
function handleConfirmChoice(choice: ConfirmDialogChoice) {
|
||||
confirmDialogChoice.value = choice
|
||||
isConfirmDialogOpen.value = false
|
||||
}
|
||||
|
||||
function handleFavouritedBoostedByClose() {
|
||||
isFavouritedBoostedByDialogOpen.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="isHydrated">
|
||||
<ModalDialog v-model="isSigninDialogOpen" py-4 px-8 max-w-125>
|
||||
<UserSignIn />
|
||||
</ModalDialog>
|
||||
<ModalDialog v-model="isPreviewHelpOpen" keep-alive max-w-125>
|
||||
<HelpPreview @close="closePreviewHelp()" />
|
||||
</ModalDialog>
|
||||
<ModalDialog
|
||||
v-model="isPublishDialogOpen"
|
||||
max-w-180 flex w-full
|
||||
@close="handlePublishClose"
|
||||
>
|
||||
<PublishWidgetList
|
||||
v-if="dialogDraftKey"
|
||||
:draft-key="dialogDraftKey"
|
||||
expanded
|
||||
class="flex-1"
|
||||
@published="handlePublished"
|
||||
/>
|
||||
</ModalDialog>
|
||||
<ModalDialog
|
||||
:model-value="isMediaPreviewOpen"
|
||||
w-full max-w-full h-full max-h-full
|
||||
bg-transparent border-0 shadow-none
|
||||
@update:model-value="closeMediaPreview"
|
||||
>
|
||||
<ModalMediaPreview v-if="isMediaPreviewOpen" @close="closeMediaPreview()" />
|
||||
</ModalDialog>
|
||||
<ModalDialog v-model="isEditHistoryDialogOpen" max-w-125>
|
||||
<StatusEditPreview v-if="statusEdit" :edit="statusEdit" />
|
||||
</ModalDialog>
|
||||
<ModalDialog v-model="isCommandPanelOpen" max-w-fit flex>
|
||||
<CommandPanel @close="closeCommandPanel()" />
|
||||
</ModalDialog>
|
||||
<ModalDialog v-model="isConfirmDialogOpen" py-4 px-8 max-w-125>
|
||||
<ModalConfirm v-if="confirmDialogLabel" v-bind="confirmDialogLabel" @choice="handleConfirmChoice" />
|
||||
</ModalDialog>
|
||||
<ModalDialog v-model="isErrorDialogOpen" py-4 px-8 max-w-125>
|
||||
<ModalError v-if="errorDialogData" v-bind="errorDialogData" />
|
||||
</ModalDialog>
|
||||
<ModalDialog
|
||||
v-model="isFavouritedBoostedByDialogOpen"
|
||||
max-w-180
|
||||
@close="handleFavouritedBoostedByClose"
|
||||
>
|
||||
<StatusFavouritedBoostedBy />
|
||||
</ModalDialog>
|
||||
<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()" />
|
||||
</ModalDialog>
|
||||
<ModalDialog v-model="isReportDialogOpen" keep-alive max-w-175>
|
||||
<ReportModal v-if="reportAccount" :account="reportAccount" :status="reportStatus" @close="closeReportDialog()" />
|
||||
</ModalDialog>
|
||||
</template>
|
||||
</template>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { ErrorDialogData } from '#shared/types'
|
||||
|
||||
defineProps<ErrorDialogData>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div flex="~ col" gap-6>
|
||||
<div font-bold text-lg text-center>
|
||||
{{ title }}
|
||||
</div>
|
||||
<div
|
||||
flex="~ col"
|
||||
gap-1 text-sm
|
||||
pt-1 ps-2 pe-1 pb-2
|
||||
text-red-600 dark:text-red-400
|
||||
border="~ base rounded red-600 dark:red-400"
|
||||
>
|
||||
<ol ps-2 sm:ps-1>
|
||||
<li v-for="(message, i) in messages" :key="i" flex="~ col sm:row" gap-y-1 sm:gap-x-2>
|
||||
{{ message }}
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div flex justify-end gap-2>
|
||||
<button btn-text @click="closeErrorDialog()">
|
||||
{{ close }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,286 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { Vector2 } from '@vueuse/gesture'
|
||||
import type { mastodon } from 'masto'
|
||||
import { useGesture } from '@vueuse/gesture'
|
||||
import { useReducedMotion } from '@vueuse/motion'
|
||||
|
||||
const { media = [] } = defineProps<{
|
||||
media?: mastodon.v1.MediaAttachment[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'close'): void
|
||||
}>()
|
||||
|
||||
const modelValue = defineModel<number>({ required: true })
|
||||
|
||||
const slideGap = 20
|
||||
const doubleTapThreshold = 250
|
||||
|
||||
const view = ref()
|
||||
const slider = ref()
|
||||
const slide = ref()
|
||||
const image = ref()
|
||||
|
||||
const reduceMotion = import.meta.server ? ref(false) : useReducedMotion()
|
||||
const isInitialScrollDone = useTimeout(350)
|
||||
const canAnimate = computed(() => isInitialScrollDone.value && !reduceMotion.value)
|
||||
|
||||
const scale = ref(1)
|
||||
const x = ref(0)
|
||||
const y = ref(0)
|
||||
|
||||
const isDragging = ref(false)
|
||||
const isPinching = ref(false)
|
||||
|
||||
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(() => {
|
||||
const slideGapAsScale = slideGap / view.value.clientWidth
|
||||
maxZoomOut.value = 1 - slideGapAsScale
|
||||
|
||||
goToFocusedSlide()
|
||||
})
|
||||
watch(modelValue, goToFocusedSlide)
|
||||
|
||||
let lastOrigin = [0, 0]
|
||||
let initialScale = 0
|
||||
useGesture({
|
||||
onPinch({ first, initial: [initialDistance], movement: [deltaDistance], da: [distance], origin, touches }) {
|
||||
isPinching.value = true
|
||||
|
||||
if (first) {
|
||||
initialScale = scale.value
|
||||
}
|
||||
else {
|
||||
if (touches === 0)
|
||||
handleMouseWheelZoom(initialScale, deltaDistance, origin)
|
||||
else
|
||||
handlePinchZoom(initialScale, initialDistance, distance, origin)
|
||||
}
|
||||
|
||||
lastOrigin = origin
|
||||
},
|
||||
onPinchEnd() {
|
||||
isPinching.value = false
|
||||
isDragging.value = false
|
||||
|
||||
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,
|
||||
eventOptions: {
|
||||
passive: false,
|
||||
},
|
||||
})
|
||||
|
||||
const shiftRestrictions = computed(() => {
|
||||
const focusedImage = image.value[modelValue.value]
|
||||
const focusedSlide = slide.value[modelValue.value]
|
||||
|
||||
const scaledImageWidth = focusedImage.offsetWidth * scale.value
|
||||
const scaledHorizontalOverflow = scaledImageWidth / 2 - view.value.clientWidth / 2 + slideGap
|
||||
const horizontalOverflow = Math.max(0, scaledHorizontalOverflow / scale.value)
|
||||
|
||||
const scaledImageHeight = focusedImage.offsetHeight * scale.value
|
||||
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) {
|
||||
scale.value = initialScale * (distance / initialDistance)
|
||||
scale.value = Math.max(maxZoomOut.value, scale.value)
|
||||
|
||||
const deltaCenterX = originX - lastOrigin[0]
|
||||
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>
|
||||
|
||||
<template>
|
||||
<div ref="view" flex flex-row h-full w-full overflow-hidden>
|
||||
<div ref="slider" :style="sliderStyle" w-full h-full flex items-center>
|
||||
<div
|
||||
v-for="item in media"
|
||||
: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>
|
||||
</template>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { Component } from 'vue'
|
||||
import type { NavButtonName } from '../../composables/settings'
|
||||
|
||||
import {
|
||||
NavButtonBookmark,
|
||||
NavButtonCompose,
|
||||
NavButtonExplore,
|
||||
NavButtonFavorite,
|
||||
NavButtonFederated,
|
||||
NavButtonHashtag,
|
||||
NavButtonHome,
|
||||
NavButtonList,
|
||||
NavButtonLocal,
|
||||
NavButtonMention,
|
||||
NavButtonMoreMenu,
|
||||
NavButtonNotification,
|
||||
NavButtonSearch,
|
||||
} from '#components'
|
||||
|
||||
import { STORAGE_KEY_BOTTOM_NAV_BUTTONS } from '~/constants'
|
||||
|
||||
interface NavButton {
|
||||
name: string
|
||||
component: Component
|
||||
}
|
||||
|
||||
const navButtons: NavButton[] = [
|
||||
{ name: 'home', component: NavButtonHome },
|
||||
{ name: 'search', component: NavButtonSearch },
|
||||
{ name: 'notification', component: NavButtonNotification },
|
||||
{ name: 'mention', component: NavButtonMention },
|
||||
{ name: 'favorite', component: NavButtonFavorite },
|
||||
{ name: 'bookmark', component: NavButtonBookmark },
|
||||
{ name: 'compose', component: NavButtonCompose },
|
||||
{ name: 'explore', component: NavButtonExplore },
|
||||
{ name: 'local', component: NavButtonLocal },
|
||||
{ name: 'federated', component: NavButtonFederated },
|
||||
{ name: 'list', component: NavButtonList },
|
||||
{ name: 'hashtag', component: NavButtonHashtag },
|
||||
{ name: 'moreMenu', component: NavButtonMoreMenu },
|
||||
]
|
||||
|
||||
const defaultSelectedNavButtonNames: NavButtonName[] = currentUser.value
|
||||
? ['home', 'search', 'notification', 'mention', 'moreMenu']
|
||||
: ['explore', 'local', 'federated', 'moreMenu']
|
||||
const selectedNavButtonNames = useLocalStorage<NavButtonName[]>(STORAGE_KEY_BOTTOM_NAV_BUTTONS, defaultSelectedNavButtonNames)
|
||||
|
||||
const selectedNavButtons = computed(() => selectedNavButtonNames.value.map(name => navButtons.find(navButton => navButton.name === name)))
|
||||
|
||||
// only one icon can be lit up at the same time
|
||||
const moreMenuVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- This weird styles above are used for scroll locking, don't change it unless you know exactly what you're doing. -->
|
||||
<nav
|
||||
h-14 border="t base" flex flex-row text-xl
|
||||
of-y-scroll scrollbar-hide overscroll-none
|
||||
class="after-content-empty after:(h-[calc(100%+0.5px)] w-0.1px pointer-events-none)"
|
||||
>
|
||||
<Component :is="navButton!.component" v-for="navButton in selectedNavButtons" :key="navButton!.name" :active-class="moreMenuVisible ? '' : 'text-primary'" />
|
||||
</nav>
|
||||
</template>
|
||||
|
|
@ -1,194 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { invoke } from '@vueuse/core'
|
||||
|
||||
const modelValue = defineModel<boolean>({ required: true })
|
||||
const colorMode = useColorMode()
|
||||
|
||||
const userSettings = useUserSettings()
|
||||
|
||||
const drawerEl = ref<HTMLDivElement>()
|
||||
|
||||
function toggleVisible() {
|
||||
modelValue.value = !modelValue.value
|
||||
}
|
||||
|
||||
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
|
||||
* @param mouse
|
||||
*/
|
||||
function clickEvent(mouse: MouseEvent) {
|
||||
if (mouse.target && !buttonEl.value?.children[0].contains(mouse.target as any)) {
|
||||
if (modelValue.value) {
|
||||
document.removeEventListener('click', clickEvent)
|
||||
modelValue.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function toggleDark() {
|
||||
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
|
||||
}
|
||||
|
||||
watch(modelValue, (val) => {
|
||||
if (val && typeof document !== 'undefined')
|
||||
document.addEventListener('click', clickEvent)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
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>
|
||||
|
||||
<template>
|
||||
<div ref="buttonEl" flex items-center static>
|
||||
<slot :toggle-visible="toggleVisible" :show="modelValue" />
|
||||
|
||||
<!-- Drawer -->
|
||||
<Transition
|
||||
enter-active-class="transition duration-250 ease-out"
|
||||
enter-from-class="opacity-0 children:(translate-y-full)"
|
||||
enter-to-class="opacity-100 children:(translate-y-0)"
|
||||
leave-active-class="transition duration-250 ease-in"
|
||||
leave-from-class="opacity-100 children:(translate-y-0)"
|
||||
leave-to-class="opacity-0 children:(translate-y-full)"
|
||||
>
|
||||
<div
|
||||
v-show="modelValue"
|
||||
absolute inset-x-0 top-auto bottom-full z-20 h-100vh
|
||||
flex items-end of-y-scroll of-x-hidden scrollbar-hide overscroll-none
|
||||
bg="black/50"
|
||||
>
|
||||
<!-- The style `scrollbar-hide overscroll-none overflow-y-scroll mb="-1px"` and `h="[calc(100%+0.5px)]"` is used to implement scroll locking, -->
|
||||
<!-- corresponding to issue: #106, so please don't remove it. -->
|
||||
<div absolute inset-0 opacity-0 h="[calc(100vh+0.5px)]" />
|
||||
<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"
|
||||
of-y-auto scrollbar-hide overscroll-none max-h="[calc(100vh-200px)]"
|
||||
rounded-t-lg bg="white/85 dark:neutral-900/85" backdrop-filter
|
||||
border-t-1 border-base
|
||||
>
|
||||
<!-- Nav -->
|
||||
<NavSide />
|
||||
|
||||
<!-- Divider line -->
|
||||
<div border="neutral-300 dark:neutral-700 t-1" m="x-3 y-2" />
|
||||
|
||||
<!-- Function menu -->
|
||||
<div flex="~ col gap2">
|
||||
<!-- Toggle Theme -->
|
||||
<button
|
||||
flex flex-row items-center
|
||||
block px-5 py-2 focus-blue w-full
|
||||
text-sm text-base capitalize text-left whitespace-nowrap
|
||||
transition-colors duration-200 transform
|
||||
hover="bg-gray-100 dark:(bg-gray-700 text-white)"
|
||||
@click="toggleDark()"
|
||||
>
|
||||
<span class="i-ri:sun-line dark:i-ri:moon-line flex-shrink-0 text-xl me-4 !align-middle" />
|
||||
{{ colorMode.value === 'light' ? $t('menu.toggle_theme.dark') : $t('menu.toggle_theme.light') }}
|
||||
</button>
|
||||
|
||||
<!-- Zen Mode -->
|
||||
<button
|
||||
flex flex-row items-center
|
||||
block px-5 py-2 focus-blue w-full
|
||||
text-sm text-base capitalize text-left whitespace-nowrap
|
||||
transition-colors duration-200 transform
|
||||
hover="bg-gray-100 dark:(bg-gray-700 text-white)"
|
||||
:aria-label="$t('nav.zen_mode')"
|
||||
@click="togglePreferences('zenMode')"
|
||||
>
|
||||
<span :class="getPreferences(userSettings, 'zenMode') ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line'" class="flex-shrink-0 text-xl me-4 !align-middle" />
|
||||
{{ $t('nav.zen_mode') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const buildInfo = useBuildInfo()
|
||||
const timeAgoOptions = useTimeAgoOptions()
|
||||
const config = useRuntimeConfig()
|
||||
const userSettings = useUserSettings()
|
||||
|
||||
const buildTimeDate = new Date(buildInfo.time)
|
||||
const buildTimeAgo = useTimeAgo(buildTimeDate, timeAgoOptions)
|
||||
|
||||
const colorMode = useColorMode()
|
||||
function toggleDark() {
|
||||
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer p4 text-sm text-secondary-light flex="~ col">
|
||||
<div flex="~ gap2" items-center mb4>
|
||||
<CommonTooltip :content="$t('nav.toggle_theme')">
|
||||
<button flex i-ri:sun-line dark-i-ri:moon-line text-lg :aria-label="$t('nav.toggle_theme')" @click="toggleDark()" />
|
||||
</CommonTooltip>
|
||||
<CommonTooltip :content="$t('nav.zen_mode')">
|
||||
<button
|
||||
flex
|
||||
text-lg
|
||||
:class="getPreferences(userSettings, 'zenMode') ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line'"
|
||||
:aria-label="$t('nav.zen_mode')"
|
||||
@click="togglePreferences('zenMode')"
|
||||
/>
|
||||
</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')">
|
||||
<NuxtLink
|
||||
flex
|
||||
text-lg
|
||||
i-ri-heart-3-line hover="i-ri-heart-3-fill text-rose"
|
||||
:aria-label="$t('settings.about.sponsor_action')"
|
||||
href="https://github.com/sponsors/elk-zone"
|
||||
target="_blank"
|
||||
/>
|
||||
</CommonTooltip>
|
||||
</div>
|
||||
<div>
|
||||
<i18n-t v-if="isHydrated" keypath="nav.built_at">
|
||||
<time :datetime="String(buildTimeDate)" :title="$d(buildTimeDate, 'long')">{{ buildTimeAgo }}</time>
|
||||
</i18n-t>
|
||||
<span v-else>
|
||||
{{ $t('nav.built_at', [$d(buildTimeDate, 'shortDate')]) }}
|
||||
</span>
|
||||
·
|
||||
<NuxtLink
|
||||
v-if="buildInfo.env === 'release'"
|
||||
external
|
||||
:href="`https://github.com/elk-zone/elk/releases/tag/v${buildInfo.version}`"
|
||||
target="_blank"
|
||||
font-mono
|
||||
>
|
||||
v{{ buildInfo.version }}
|
||||
</NuxtLink>
|
||||
<span v-else>{{ buildInfo.env }}</span>
|
||||
<template v-if="buildInfo.commit && buildInfo.branch !== 'release'">
|
||||
·
|
||||
<NuxtLink
|
||||
external
|
||||
:href="`https://github.com/elk-zone/elk/commit/${buildInfo.commit}`"
|
||||
target="_blank"
|
||||
font-mono
|
||||
>
|
||||
{{ buildInfo.shortCommit }}
|
||||
</NuxtLink>
|
||||
</template>
|
||||
</div>
|
||||
<div>
|
||||
<NuxtLink cursor-pointer hover:underline to="/settings/about">
|
||||
{{ $t('settings.about.label') }}
|
||||
</NuxtLink>
|
||||
<template v-if="config.public.privacyPolicyUrl">
|
||||
·
|
||||
<NuxtLink cursor-pointer hover:underline :to="config.public.privacyPolicyUrl">
|
||||
{{ $t('nav.privacy') }}
|
||||
</NuxtLink>
|
||||
</template>
|
||||
·
|
||||
<NuxtLink href="/m.webtoo.ls/@elk" target="_blank">
|
||||
Mastodon
|
||||
</NuxtLink>
|
||||
·
|
||||
<NuxtLink href="https://chat.elk.zone" target="_blank" external>
|
||||
Discord
|
||||
</NuxtLink>
|
||||
·
|
||||
<NuxtLink href="https://github.com/elk-zone/elk" target="_blank" external>
|
||||
GitHub
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span shrink-0 aspect="1/1" sm:h-8 xl:h-10 class="rtl-flip">
|
||||
<!-- <svg
|
||||
xmlns="http://www.w3.org/2000/svg" w-full
|
||||
aspect="1/1" sm:h-8 xl:h-10 sm:w-8 xl:w-10 viewBox="0 0 250 250" fill="none"
|
||||
> -->
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><defs><mask id="ipTEgg0"><g fill="none" stroke="#fff" stroke-width="4"><circle cx="24" cy="24" r="10" fill="#555555" stroke-linecap="round" stroke-linejoin="round" /><path d="M44 24c0 2.633-.508 5.146-1.433 7.448c-.936 2.331-4.129.071-7.346 3.521c-3.216 3.45-.71 6.267-3.204 7.36A19.9 19.9 0 0 1 24 44C12.954 44 4 35.046 4 24S12.954 4 24 4s20 8.954 20 20Z" /><path stroke-linecap="round" d="M20 25s.21 1.21 1 2s2 1 2 1" /></g></mask></defs><path fill="#ff8d00" d="M0 0h48v48H0z" mask="url(#ipTEgg0)" /></svg>
|
||||
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
svg path.wood {
|
||||
fill: var(--c-primary);
|
||||
}
|
||||
svg path.body {
|
||||
fill: var(--c-text-secondary);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE } from '~/constants'
|
||||
|
||||
defineProps<{
|
||||
command?: boolean
|
||||
}>()
|
||||
const { notifications } = useNotifications()
|
||||
const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
|
||||
const lastAccessedNotificationRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE, '')
|
||||
const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, '')
|
||||
|
||||
const notificationsLink = computed(() => {
|
||||
const hydrated = isHydrated.value
|
||||
const user = currentUser.value
|
||||
const lastRoute = lastAccessedNotificationRoute.value
|
||||
if (!hydrated || !user || !lastRoute) {
|
||||
return '/notifications'
|
||||
}
|
||||
|
||||
return `/notifications/${lastRoute}`
|
||||
})
|
||||
const exploreLink = computed(() => {
|
||||
const hydrated = isHydrated.value
|
||||
const server = currentServer.value
|
||||
let lastRoute = lastAccessedExploreRoute.value
|
||||
if (!hydrated) {
|
||||
return '/explore'
|
||||
}
|
||||
|
||||
if (lastRoute.length) {
|
||||
lastRoute = `/${lastRoute}`
|
||||
}
|
||||
|
||||
return server ? `/${server}/explore${lastRoute}` : `/explore${lastRoute}`
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav sm:px3 flex="~ col gap2" shrink text-size-base leading-normal md:text-lg h-full mt-1 overflow-y-auto>
|
||||
<NavSideItem :text="$t('nav.search')" to="/search" icon="i-ri:search-line" xl:hidden :command="command" />
|
||||
|
||||
<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.notifications')" :to="notificationsLink" icon="i-ri:notification-4-line" user-only :command="command">
|
||||
<template #icon>
|
||||
<div flex relative>
|
||||
<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>
|
||||
{{ notifications < 10 ? notifications : '•' }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</NavSideItem>
|
||||
<NavSideItem :text="$t('nav.conversations')" to="/conversations" icon="i-ri:at-line" user-only :command="command" />
|
||||
<NavSideItem :text="$t('nav.favourites')" to="/favourites" :icon="useStarFavoriteIcon ? 'i-ri:star-line' : 'i-ri:heart-3-line'" user-only :command="command" />
|
||||
<NavSideItem :text="$t('nav.bookmarks')" to="/bookmarks" icon="i-ri:bookmark-line" user-only :command="command" />
|
||||
|
||||
<div class="spacer" shrink hidden sm:block />
|
||||
<NavSideItem :text="$t('action.compose')" to="/compose" icon="i-ri:quill-pen-line" user-only :command="command" />
|
||||
|
||||
<div class="spacer" shrink hidden sm:block />
|
||||
<NavSideItem :text="$t('nav.explore')" :to="exploreLink" icon="i-ri:compass-3-line" :command="command" />
|
||||
<NavSideItem :text="$t('nav.local')" :to="isHydrated ? `/${currentServer}/public/local` : '/public/local'" icon="i-ri:group-2-line " :command="command" />
|
||||
<NavSideItem :text="$t('nav.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.hashtags')" to="/hashtags" icon="i-ri:hashtag" user-only :command="command" />
|
||||
|
||||
<div class="spacer" shrink hidden sm:block />
|
||||
<NavSideItem :text="$t('nav.settings')" to="/settings" icon="i-ri:settings-3-line" :command="command" />
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.spacer {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
@media screen and ( max-height: 920px ) and ( min-width: 640px ) {
|
||||
.spacer {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,108 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const { text, icon, to, userOnly = false, command } = defineProps<{
|
||||
text?: string
|
||||
icon: string
|
||||
to: string | Record<string, string>
|
||||
userOnly?: boolean
|
||||
command?: boolean
|
||||
}>()
|
||||
|
||||
defineSlots<{
|
||||
icon: (props: object) => void
|
||||
default: (props: object) => void
|
||||
}>()
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
useCommand({
|
||||
scope: 'Navigation',
|
||||
|
||||
name: () => text ?? (typeof to === 'string' ? to as string : to.name),
|
||||
icon: () => icon,
|
||||
visible: () => command,
|
||||
|
||||
onActivate() {
|
||||
router.push(to)
|
||||
},
|
||||
})
|
||||
|
||||
const activeClass = ref('text-primary')
|
||||
onHydrated(async () => {
|
||||
// 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
|
||||
activeClass.value = ''
|
||||
await nextTick()
|
||||
activeClass.value = 'text-primary'
|
||||
})
|
||||
|
||||
// Optimize rendering for the common case of being logged in, only show visual feedback for disabled user-only items
|
||||
// when we know there is no user.
|
||||
const noUserDisable = computed(() => !isHydrated.value || (userOnly && !currentUser.value))
|
||||
const noUserVisual = computed(() => isHydrated.value && userOnly && !currentUser.value)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink
|
||||
:to="to"
|
||||
:disabled="noUserDisable"
|
||||
:class="noUserVisual ? 'op25 pointer-events-none ' : ''"
|
||||
:active-class="activeClass"
|
||||
group focus:outline-none disabled:pointer-events-none
|
||||
:tabindex="noUserDisable ? -1 : null"
|
||||
@click="$scrollToTop"
|
||||
>
|
||||
<CommonTooltip :disabled="!isMediumOrLargeScreen" :content="text" placement="right">
|
||||
<div
|
||||
class="item"
|
||||
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
|
||||
px2 mx3 sm:mxa
|
||||
transition-100
|
||||
elk-group-hover-bg-active
|
||||
group-focus-visible:ring-2
|
||||
group-focus-visible:ring-current
|
||||
`"
|
||||
>
|
||||
<slot name="icon">
|
||||
<div :class="icon" text-xl />
|
||||
</slot>
|
||||
<slot>
|
||||
<span block sm:hidden xl:block select-none>{{ isHydrated ? text : ' ' }}</span>
|
||||
</slot>
|
||||
</div>
|
||||
</CommonTooltip>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.item {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
@media screen and ( max-height: 820px ) and ( min-width: 1280px ) {
|
||||
.item {
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
}
|
||||
@media screen and ( max-height: 780px ) and ( min-width: 640px ) {
|
||||
.item {
|
||||
padding-top: 0.35rem;
|
||||
padding-bottom: 0.35rem;
|
||||
}
|
||||
}
|
||||
@media screen and ( max-height: 780px ) and ( min-width: 1280px ) {
|
||||
.item {
|
||||
padding-top: 0.05rem;
|
||||
padding-bottom: 0.05rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const { env } = useBuildInfo()
|
||||
const router = useRouter()
|
||||
const back = ref<any>('')
|
||||
|
||||
const nuxtApp = useNuxtApp()
|
||||
|
||||
function onClickLogo() {
|
||||
nuxtApp.hooks.callHook('elk-logo:click')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
back.value = router.options.history.state.back
|
||||
})
|
||||
router.afterEach(() => {
|
||||
back.value = router.options.history.state.back
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div flex justify-between sticky top-0 bg-base z-1 py-4 native:py-7 data-tauri-drag-region>
|
||||
<NuxtLink
|
||||
flex items-end gap-3
|
||||
py2 px-5
|
||||
text-2xl
|
||||
select-none
|
||||
focus-visible:ring="2 current"
|
||||
to="/home"
|
||||
@click.prevent="onClickLogo"
|
||||
>
|
||||
<NavLogo shrink-0 aspect="1/1" sm:h-8 xl:h-10 class="rtl-flip" />
|
||||
<div v-show="isHydrated" hidden xl:block>
|
||||
<span pr-1>{{ $t('app_name') }}</span>
|
||||
<sup text-sm italic mt-1>{{ env === 'release' ? 'alpha' : env }}</sup>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
<div hidden xl:flex items-center me-6 mt-2 gap-1>
|
||||
<CommonTooltip :content="$t('nav.back')" :distance="0">
|
||||
<button
|
||||
type="button"
|
||||
:aria-label="$t('nav.back')"
|
||||
btn-text p-3 :class="{ 'pointer-events-none op0': !back || back === '/', 'xl:flex': $route.name !== 'tag' }"
|
||||
@click="$router.go(-1)"
|
||||
>
|
||||
<div text-xl i-ri:arrow-left-line class="rtl-flip" />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const { busy, oauth, singleInstanceServer } = useSignIn()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VDropdown v-if="isHydrated && currentUser" sm:hidden>
|
||||
<div style="-webkit-touch-callout: none;">
|
||||
<AccountAvatar
|
||||
:account="currentUser.account"
|
||||
h-8
|
||||
w-8
|
||||
:draggable="false"
|
||||
square
|
||||
/>
|
||||
</div>
|
||||
|
||||
<template #popper="{ hide }">
|
||||
<UserSwitcher @click="hide()" />
|
||||
</template>
|
||||
</VDropdown>
|
||||
<template v-else>
|
||||
<button
|
||||
v-if="singleInstanceServer"
|
||||
flex="~ row"
|
||||
gap-x-1 items-center justify-center btn-solid text-sm px-2 py-1 xl:hidden
|
||||
:disabled="busy"
|
||||
@click="oauth()"
|
||||
>
|
||||
<span v-if="busy" aria-hidden="true" block animate animate-spin preserve-3d class="rtl-flip">
|
||||
<span block i-ri:loader-2-fill aria-hidden="true" />
|
||||
</span>
|
||||
<span v-else aria-hidden="true" block i-ri:login-circle-line class="rtl-flip" />
|
||||
<i18n-t keypath="action.sign_in_to">
|
||||
<strong>{{ currentServer }}</strong>
|
||||
</i18n-t>
|
||||
</button>
|
||||
<button
|
||||
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') }}
|
||||
</button>
|
||||
</template>
|
||||
</template>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<template>
|
||||
<div bg-base h-8 w-8 rounded-full />
|
||||
</template>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
activeClass: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink to="/bookmarks" :aria-label="$t('nav.bookmarks')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
|
||||
<div i-ri:bookmark-line />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
activeClass: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink to="/compose" :aria-label="$t('nav.favourites')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
|
||||
<div i-ri:quill-pen-line />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE } from '~/constants'
|
||||
|
||||
defineProps<{
|
||||
activeClass: string
|
||||
}>()
|
||||
|
||||
const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, '')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink :to="`/${currentServer}/explore/${lastAccessedExploreRoute}`" :aria-label="$t('nav.explore')" :active-class="activeClass" 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 />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
activeClass: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink to="/favourites" :aria-label="$t('nav.favourites')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
|
||||
<div i-ri:heart-line />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
activeClass: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink :to="`/${currentServer}/public`" :aria-label="$t('nav.federated')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
|
||||
<div i-ri:earth-line />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
activeClass: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink to="/hashtags" :aria-label="$t('nav.hashtags')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
|
||||
<div i-ri:hashtag />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
activeClass: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink to="/home" :aria-label="$t('nav.home')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
|
||||
<div i-ri:home-5-line />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
activeClass: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink
|
||||
to="/lists"
|
||||
:aria-label="$t('nav.lists')"
|
||||
:active-class="activeClass"
|
||||
flex flex-row items-center place-content-center h-full flex-1
|
||||
class="coarse-pointer:select-none" @click="$scrollToTop"
|
||||
>
|
||||
<div i-ri:list-check />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
activeClass: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink group :to="`/${currentServer}/public/local`" :aria-label="$t('nav.local')" :active-class="activeClass" 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 />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
activeClass: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink
|
||||
to="/conversations" :aria-label="$t('nav.conversations')"
|
||||
:active-class="activeClass" flex flex-row items-center place-content-center h-full
|
||||
flex-1 class="coarse-pointer:select-none" @click="$scrollToTop"
|
||||
>
|
||||
<div i-ri:at-line />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const model = defineModel<boolean>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NavBottomMoreMenu
|
||||
v-slot="{ toggleVisible, show }" v-model="model!" flex flex-row items-center
|
||||
place-content-center h-full flex-1 cursor-pointer
|
||||
>
|
||||
<button
|
||||
flex items-center place-content-center h-full flex-1 class="select-none"
|
||||
:class="show ? '!text-primary' : ''"
|
||||
:aria-label="$t('nav.more_menu')"
|
||||
@click="toggleVisible"
|
||||
>
|
||||
<span :class="show ? 'i-ri:close-fill' : 'i-ri:more-fill'" />
|
||||
</button>
|
||||
</NavBottomMoreMenu>
|
||||
</template>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE } from '~/constants'
|
||||
|
||||
defineProps<{
|
||||
activeClass: string
|
||||
}>()
|
||||
|
||||
const { notifications } = useNotifications()
|
||||
const lastAccessedNotificationRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE, '')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink :to="`/notifications/${lastAccessedNotificationRoute}`" :aria-label="$t('nav.notifications')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
|
||||
<div flex relative>
|
||||
<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>
|
||||
{{ notifications < 10 ? notifications : '•' }}
|
||||
</div>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
activeClass: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink to="/search" :aria-label="$t('nav.search')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
|
||||
<div i-ri:search-line />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
|
@ -1,154 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
// Add undocumented 'annual_report' type introduced in v4.3
|
||||
// ref. https://github.com/mastodon/documentation/issues/1211#:~:text=api/v1/annual_reports
|
||||
type NotificationType = mastodon.v1.Notification['type'] | 'annual_report'
|
||||
type Notification = Omit<mastodon.v1.Notification, 'type'> & { type: NotificationType }
|
||||
|
||||
const { notification } = defineProps<{
|
||||
notification: Notification
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// list of notification types Elk currently implemented
|
||||
// type 'favourite' and 'reblog' should always rendered by NotificationGroupedLikes
|
||||
const supportedNotificationTypes: NotificationType[] = [
|
||||
'follow',
|
||||
'admin.sign_up',
|
||||
'admin.report',
|
||||
'follow_request',
|
||||
'update',
|
||||
'mention',
|
||||
'poll',
|
||||
'update',
|
||||
'status',
|
||||
'annual_report',
|
||||
]
|
||||
|
||||
// well-known emoji reactions types Elk does not support yet
|
||||
const unsupportedEmojiReactionTypes = ['pleroma:emoji_reaction', 'reaction']
|
||||
|
||||
if (unsupportedEmojiReactionTypes.includes(notification.type) || !supportedNotificationTypes.includes(notification.type)) {
|
||||
console.warn(`[DEV] ${t('notification.missing_type')} '${notification.type}' (notification.id: ${notification.id})`)
|
||||
}
|
||||
|
||||
const timeAgoOptions = useTimeAgoOptions(true)
|
||||
const timeAgo = useTimeAgo(() => notification.createdAt, timeAgoOptions)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article flex flex-col relative>
|
||||
<template v-if="notification.type === 'follow'">
|
||||
<NuxtLink :to="getAccountRoute(notification.account)">
|
||||
<div
|
||||
flex items-center absolute
|
||||
ps-3 pe-4 inset-is-0
|
||||
rounded-ie-be-3
|
||||
py-3 bg-base top-0
|
||||
>
|
||||
<div i-ri-user-3-line text-xl me-3 color-blue />
|
||||
<AccountDisplayName :account="notification.account" text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all />
|
||||
<span ws-nowrap>
|
||||
{{ $t('notification.followed_you') }}
|
||||
<time text-secondary :datetime="notification.createdAt">
|
||||
・{{ timeAgo }}
|
||||
</time>
|
||||
</span>
|
||||
</div>
|
||||
<AccountBigCard
|
||||
ms10
|
||||
:account="notification.account"
|
||||
/>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
<template v-else-if="notification.type === 'admin.sign_up'">
|
||||
<NuxtLink :to="getAccountRoute(notification.account)">
|
||||
<div flex p4 items-center bg-shaded>
|
||||
<div i-ri:user-add-line text-xl me-2 color-purple />
|
||||
<AccountDisplayName
|
||||
:account="notification.account"
|
||||
text-purple me-1 font-bold line-clamp-1 ws-pre-wrap break-all
|
||||
/>
|
||||
<span>{{ $t("notification.signed_up") }}
|
||||
<time text-secondary :datetime="notification.createdAt">
|
||||
・{{ timeAgo }}
|
||||
</time>
|
||||
</span>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
<template v-else-if="notification.type === 'admin.report'">
|
||||
<NuxtLink :to="getReportRoute(notification.report?.id!)">
|
||||
<div flex p4 items-center bg-shaded>
|
||||
<div i-ri:flag-line text-xl me-2 color-purple />
|
||||
<i18n-t keypath="notification.reported">
|
||||
<AccountDisplayName
|
||||
:account="notification.account"
|
||||
text-purple me-1 font-bold line-clamp-1 ws-pre-wrap break-all
|
||||
/>
|
||||
<AccountDisplayName
|
||||
:account="notification.report?.targetAccount!"
|
||||
text-purple ms-1 font-bold line-clamp-1 ws-pre-wrap break-all
|
||||
/>
|
||||
</i18n-t>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
<template v-else-if="notification.type === 'follow_request'">
|
||||
<div flex px-3 py-2>
|
||||
<div i-ri-user-shared-line text-xl me-3 color-blue />
|
||||
<AccountDisplayName
|
||||
: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') }}
|
||||
<time text-secondary :datetime="notification.createdAt">
|
||||
・{{ timeAgo }}
|
||||
</time>
|
||||
</span>
|
||||
</div>
|
||||
<AccountCard p="s-2 e-4 b-2" hover-card :account="notification.account">
|
||||
<AccountFollowRequestButton :account="notification.account" />
|
||||
</AccountCard>
|
||||
</template>
|
||||
<template v-else-if="notification.type === 'update'">
|
||||
<StatusCard :status="notification.status!" :in-notification="true" :actions="false">
|
||||
<template #meta>
|
||||
<div flex="~" gap-1 items-center mt1>
|
||||
<div i-ri:edit-2-fill text-xl me-1 text-secondary />
|
||||
<AccountInlineInfo :account="notification.account" me1 />
|
||||
<span ws-nowrap>
|
||||
{{ $t('notification.update_status') }}
|
||||
<time text-secondary :datetime="notification.createdAt">
|
||||
・{{ timeAgo }}
|
||||
</time>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</StatusCard>
|
||||
</template>
|
||||
<template v-else-if="notification.type === 'mention' || notification.type === 'poll' || notification.type === 'status'">
|
||||
<StatusCard :status="notification.status!" />
|
||||
</template>
|
||||
<template v-else-if="notification.type === 'annual_report'">
|
||||
<div flex p4 items-center bg-shaded>
|
||||
<div i-mdi:party-popper text-xl me-4 color-purple />
|
||||
<div class="content-rich">
|
||||
<p>
|
||||
Your 2024 <NuxtLink to="/tags/Wrapstodon">
|
||||
#Wrapstodon
|
||||
</NuxtLink> awaits! Unveil your year's highlights and memorable moments on Mastodon!
|
||||
</p>
|
||||
<p>
|
||||
<NuxtLink :to="`https://${currentServer}/notifications`" target="_blank">
|
||||
View #Wrapstodon on Mastodon
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</article>
|
||||
</template>
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { useMediaQuery } from '@vueuse/core'
|
||||
|
||||
defineProps<{
|
||||
closeableHeader?: boolean
|
||||
busy?: boolean
|
||||
animate?: boolean
|
||||
}>()
|
||||
|
||||
defineEmits(['hide', 'subscribe'])
|
||||
|
||||
defineSlots<{
|
||||
error: (props: object) => void
|
||||
}>()
|
||||
|
||||
const xl = useMediaQuery('(min-width: 1280px)')
|
||||
|
||||
const isLegacyAccount = computed(() => !currentUser.value?.vapidKey)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
flex="~ col"
|
||||
gap-y-2
|
||||
role="alert"
|
||||
aria-labelledby="notifications-warning"
|
||||
:class="closeableHeader ? 'border-b border-base' : 'px6 px4'"
|
||||
>
|
||||
<header flex items-center pb-2>
|
||||
<h2 id="notifications-warning" text-md font-bold w-full>
|
||||
{{ $t('settings.notifications.push_notifications.warning.enable_title') }}
|
||||
</h2>
|
||||
<button
|
||||
v-if="closeableHeader"
|
||||
flex rounded-4
|
||||
type="button"
|
||||
:title="$t('settings.notifications.push_notifications.warning.enable_close')"
|
||||
hover:bg-active cursor-pointer transition-100
|
||||
:disabled="busy"
|
||||
@click="$emit('hide')"
|
||||
>
|
||||
<span aria-hidden="true" i-ri:close-line />
|
||||
</button>
|
||||
</header>
|
||||
<template v-if="closeableHeader">
|
||||
<p xl:hidden>
|
||||
{{ $t('settings.notifications.push_notifications.warning.enable_description') }}
|
||||
</p>
|
||||
<p xl:hidden>
|
||||
{{ $t('settings.notifications.push_notifications.warning.enable_description_mobile') }}
|
||||
</p>
|
||||
<p :class="xl ? null : 'hidden'">
|
||||
{{ $t('settings.notifications.push_notifications.warning.enable_description_desktop') }}
|
||||
</p>
|
||||
</template>
|
||||
<p v-else>
|
||||
{{ $t('settings.notifications.push_notifications.warning.enable_description_settings') }}
|
||||
</p>
|
||||
<p v-if="isLegacyAccount">
|
||||
{{ $t('settings.notifications.push_notifications.warning.re_auth') }}
|
||||
</p>
|
||||
<button
|
||||
btn-outline rounded-full font-bold py4 flex="~ gap2 center" m5
|
||||
type="button"
|
||||
:class="busy || isLegacyAccount ? 'border-transparent' : null"
|
||||
:disabled="busy || isLegacyAccount"
|
||||
@click="$emit('subscribe')"
|
||||
>
|
||||
<span v-if="busy && animate" aria-hidden="true" block animate-spin preserve-3d>
|
||||
<span block i-ri:loader-2-fill aria-hidden="true" />
|
||||
</span>
|
||||
<span v-else aria-hidden="true" block i-ri:check-line />
|
||||
<span>{{ $t('settings.notifications.push_notifications.warning.enable_desktop') }}</span>
|
||||
</button>
|
||||
<slot name="error" />
|
||||
</div>
|
||||
</template>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue