Compare commits

..

1 commit

Author SHA1 Message Date
Daniel Roe
264c796e2f
fix: autoload new items when at top of timeline 2022-11-29 15:25:45 +00:00
566 changed files with 9058 additions and 56822 deletions

View file

@ -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

View file

@ -1,21 +1,6 @@
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'
NUXT_STORAGE_DRIVER=
NUXT_STORAGE_FS_BASE=
NUXT_ADMIN_KEY=
NUXT_PUBLIC_DISABLE_VERSION_CHECK=
NUXT_GITHUB_CLIENT_ID=
NUXT_GITHUB_CLIENT_SECRET=
NUXT_GITHUB_INVITE_TOKEN=

View file

@ -1 +1 @@
MOCK_USER='{"user":{"server":"universeodon.com","token":"yZcpj0FmnsEkUvBiXSCb_KQnccl2IU0kx9TfDbcxPJY","vapidKey":"BJwtUVlyCabpMnLI6HOyu-qMfJswxEq_c8pgRymxjTN_vCzMWfGrRHrwNczj9LIokAHtxh6Ziw1Kq7_ERDoriz0=","account":{"id":"109424142224653388","username":"elkdev","acct":"elkdev@universeodon.com","displayName":"Elk Dev Team","locked":false,"bot":false,"discoverable":null,"group":false,"createdAt":"2022-11-28T00:00:00.000Z","note":"","url":"https://universeodon.com/@elkdev","avatar":"https://universeodon.com/avatars/original/missing.png","avatarStatic":"https://universeodon.com/avatars/original/missing.png","header":"https://universeodon.com/headers/original/missing.png","headerStatic":"https://universeodon.com/headers/original/missing.png","followersCount":3,"followingCount":4,"statusesCount":20,"lastStatusAt":"2022-12-13","noindex":false,"source":{"privacy":"public","sensitive":false,"language":null,"note":"","fields":[],"followRequestsCount":0},"emojis":[],"fields":[],"role":{"id":"-99","name":"","permissions":"65536","color":"","highlighted":false}}},"server":{"universeodon.com":{"uri":"universeodon.com","title":"Universeodon","shortDescription":"Be one with the fediverse.","description":"","email":"novae@universeodon.com","version":"4.0.2","urls":{"streamingApi":"wss://universeodon.com"},"stats":{"userCount":57026,"statusCount":283364,"domainCount":11515},"thumbnail":"https://media.universeodon.com/site_uploads/files/000/000/003/@1x/9de6fc1bbd150b05.png","languages":["en"],"registrations":true,"approvalRequired":false,"invitesEnabled":true,"configuration":{"accounts":{"maxFeaturedTags":10},"statuses":{"maxCharacters":500,"maxMediaAttachments":4,"charactersReservedPerUrl":23},"mediaAttachments":{"supportedMimeTypes":["image/jpeg","image/png","image/gif","image/heic","image/heif","image/webp","image/avif","video/webm","video/mp4","video/quicktime","video/ogg","audio/wave","audio/wav","audio/x-wav","audio/x-pn-wave","audio/vnd.wave","audio/ogg","audio/vorbis","audio/mpeg","audio/mp3","audio/webm","audio/flac","audio/aac","audio/m4a","audio/x-m4a","audio/mp4","audio/3gpp","video/x-ms-asf"],"imageSizeLimit":10485760,"imageMatrixLimit":16777216,"videoSizeLimit":41943040,"videoFrameRateLimit":60,"videoMatrixLimit":2304000},"polls":{"maxOptions":4,"maxCharactersPerOption":50,"minExpiration":300,"maxExpiration":2629746}},"contactAccount":{"id":"109287809647205395","username":"supernovae","acct":"supernovae","displayName":"Supernovae","locked":false,"bot":false,"discoverable":true,"group":false,"createdAt":"2022-11-04T00:00:00.000Z","note":"","url":"https://universeodon.com/@supernovae","avatar":"https://media.universeodon.com/accounts/avatars/109/287/809/647/205/395/original/551eafba585d19e5.jpg","avatarStatic":"https://media.universeodon.com/accounts/avatars/109/287/809/647/205/395/original/551eafba585d19e5.jpg","header":"https://media.universeodon.com/accounts/headers/109/287/809/647/205/395/original/5de388c5945925c5.jpg","headerStatic":"https://media.universeodon.com/accounts/headers/109/287/809/647/205/395/original/5de388c5945925c5.jpg","followersCount":6387,"followingCount":305,"statusesCount":1753,"lastStatusAt":"2022-11-28","noindex":false,"emojis":[],"fields":[]},"rules":[]}}}'
MOCK_USER='{"user":{"server":"universeodon.com","token":"BLMfvYGgiEPgLpiunVS0JYxxqzga3S58C60DDwu1jvw","account":{"id":"109424142224653388","username":"elkdev","acct":"elkdev","displayName":"Elk Dev Team","locked":false,"bot":false,"discoverable":null,"group":false,"createdAt":"2022-11-28T00:00:00.000Z","note":"","url":"https://universeodon.com/@elkdev","avatar":"https://universeodon.com/avatars/original/missing.png","avatarStatic":"https://universeodon.com/avatars/original/missing.png","header":"https://universeodon.com/headers/original/missing.png","headerStatic":"https://universeodon.com/headers/original/missing.png","followersCount":0,"followingCount":0,"statusesCount":0,"lastStatusAt":null,"noindex":false,"source":{"privacy":"public","sensitive":false,"language":null,"note":"","fields":[],"followRequestsCount":0},"emojis":[],"fields":[],"role":{"id":"-99","name":"","permissions":"65536","color":"","highlighted":false}}},"server":{"109424142224653388":{"uri":"universeodon.com","title":"Universeodon","shortDescription":"Be one with the fediverse.","description":"","email":"novae@universeodon.com","version":"4.0.2","urls":{"streamingApi":"wss://universeodon.com"},"stats":{"userCount":57026,"statusCount":283364,"domainCount":11515},"thumbnail":"https://media.universeodon.com/site_uploads/files/000/000/003/@1x/9de6fc1bbd150b05.png","languages":["en"],"registrations":true,"approvalRequired":false,"invitesEnabled":true,"configuration":{"accounts":{"maxFeaturedTags":10},"statuses":{"maxCharacters":500,"maxMediaAttachments":4,"charactersReservedPerUrl":23},"mediaAttachments":{"supportedMimeTypes":["image/jpeg","image/png","image/gif","image/heic","image/heif","image/webp","image/avif","video/webm","video/mp4","video/quicktime","video/ogg","audio/wave","audio/wav","audio/x-wav","audio/x-pn-wave","audio/vnd.wave","audio/ogg","audio/vorbis","audio/mpeg","audio/mp3","audio/webm","audio/flac","audio/aac","audio/m4a","audio/x-m4a","audio/mp4","audio/3gpp","video/x-ms-asf"],"imageSizeLimit":10485760,"imageMatrixLimit":16777216,"videoSizeLimit":41943040,"videoFrameRateLimit":60,"videoMatrixLimit":2304000},"polls":{"maxOptions":4,"maxCharactersPerOption":50,"minExpiration":300,"maxExpiration":2629746}},"contactAccount":{"id":"109287809647205395","username":"supernovae","acct":"supernovae","displayName":"Supernovae","locked":false,"bot":false,"discoverable":true,"group":false,"createdAt":"2022-11-04T00:00:00.000Z","note":"","url":"https://universeodon.com/@supernovae","avatar":"https://media.universeodon.com/accounts/avatars/109/287/809/647/205/395/original/551eafba585d19e5.jpg","avatarStatic":"https://media.universeodon.com/accounts/avatars/109/287/809/647/205/395/original/551eafba585d19e5.jpg","header":"https://media.universeodon.com/accounts/headers/109/287/809/647/205/395/original/5de388c5945925c5.jpg","headerStatic":"https://media.universeodon.com/accounts/headers/109/287/809/647/205/395/original/5de388c5945925c5.jpg","followersCount":6387,"followingCount":305,"statusesCount":1753,"lastStatusAt":"2022-11-28","noindex":false,"emojis":[],"fields":[]},"rules":[]}}}'

4
.eslintrc Normal file
View file

@ -0,0 +1,4 @@
{
"extends": "@antfu",
"ignorePatterns": ["!pages/public"]
}

1
.gitattributes vendored
View file

@ -1 +0,0 @@
* text=auto eol=lf

3
.github/FUNDING.yml vendored
View file

@ -1,2 +1 @@
github: [elk-zone]
open_collective: elk
github: [antfu, patak-dev, sxzz, danielroe]

View file

@ -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
View 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.

View file

@ -1,5 +0,0 @@
---
name: 🚀 New feature proposal
about: Propose a new feature
labels: 's: pending triage'
---

View 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
View 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
---

View file

@ -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",
@ -64,10 +56,6 @@
{
"groupName": "typescript",
"matchPackageNames": ["typescript"]
},
{
"matchDatasources": ["node-version"],
"enabled": false
}
],
"vulnerabilityAlerts": {

View file

@ -1,41 +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
- run: corepack enable
- uses: actions/setup-node@v4
with:
node-version: 20
cache: pnpm
- 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

View file

@ -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@v5
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

View file

@ -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: 18
- run: npx changelogithub
env:
GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

View file

@ -19,6 +19,6 @@ jobs:
name: Semantic Pull Request
steps:
- name: Validate PR title
uses: amannn/action-semantic-pull-request@v5.4.0
uses: amannn/action-semantic-pull-request@v5.0.2
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

12
.github/workflows/wip.yml vendored Normal file
View file

@ -0,0 +1,12 @@
name: WIP
on:
pull_request:
types: [opened, synchronize, reopened, edited]
jobs:
wip:
runs-on: ubuntu-latest
steps:
- uses: wip/action@v1
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

10
.gitignore vendored
View file

@ -2,18 +2,10 @@ node_modules
*.log
dist
.output
.pnpm-store
.nuxt
.env
.DS_Store
.idea/
.vite-inspect
.netlify/
.eslintcache
elk-translation-status.json
public/emojis
*~
*swp
*swo
public/shiki

2
.npmrc
View file

@ -1,3 +1,3 @@
shamefully-hoist=true
strict-peer-dependencies=false
shell-emulator=true
ignore-workspace-root-check=true

1
.nvmrc
View file

@ -1 +0,0 @@
20

View file

@ -1,7 +0,0 @@
{
"bot": {
"issues": {
"trigger": "all-issues"
}
}
}

64
.vscode/settings.json vendored
View file

@ -1,62 +1,22 @@
{
"cSpell.words": [
"masto",
"Nuxtodon",
"unmute",
"unstorage"
],
"prettier.enable": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"files.associations": {
"*.css": "postcss"
},
"i18n-ally.keysInUse": [
"time_ago_options.*",
"visibility.*"
"editor.formatOnSave": false,
"cSpell.words": [
"masto",
"Nuxtodon",
"unmute"
],
"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.sortKeys": true
}

View file

@ -1,22 +0,0 @@
steps:
- name: build docker
image: docker:25-cli
secrets: [user, pass]
commands:
- apk add git
- REPO=$(echo "$CI_REPO" | tr '[:upper:]' '[:lower:]')
- REGISTRY="dev.cat-enby.club"
- MAJOR=$(echo ${CI_COMMIT_TAG} | cut -d '.' -f 1 | tr -d 'v')
- MINOR=$(echo ${CI_COMMIT_TAG} | cut -d '.' -f 2)
- PATCH=$(echo ${CI_COMMIT_TAG} | cut -d '.' -f 3 | cut -d '-' -f 1)
- docker buildx build -t $${REGISTRY}/$${REPO}:v$${MAJOR:-0}.$${MINOR:-0}.$${PATCH-0} -t $${REGISTRY}/$${REPO}:v$${MAJOR:-0}.$${MINOR} -t $${REGISTRY}/$$REPO:v$${MAJOR:-0} -t $${REGISTRY}/$$REPO:latest .
- docker login --username $USER --password $PASS $${REGISTRY}
- docker push $${REGISTRY}/$${REPO}:v$${MAJOR:-0}.$${MINOR:-0}.$${PATCH-0}
- docker push $${REGISTRY}/$${REPO}:v$${MAJOR:-0}.$${MINOR}
- docker push $${REGISTRY}/$${REPO}:v$${MAJOR:-0}
- docker push $${REGISTRY}/$${REPO}:latest
volumes:
- /var/run/docker.sock:/var/run/docker.sock
when:
- repo: nikurasu:elk-test-ci
- event: tag

View file

@ -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

View file

@ -1,189 +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).
### Online
You can use [StackBlitz Codeflow](https://stackblitz.com/codeflow) to fix bugs or implement features. You'll also see a Codeflow button on PRs to review them without a local setup. Once the elk repo has been cloned in Codeflow, the dev server will start automatically and print the URL to open the App. You should receive a prompt in the bottom-right suggesting to open it in the Editor or in another Tab. To learn more, check out the [Codeflow docs](https://developer.stackblitz.com/codeflow/what-is-codeflow).
[![Open in Codeflow](https://developer.stackblitz.com/img/open_in_codeflow.svg)](https://pr.new/elk-zone/elk)
### 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 latest Node.js (16.x).
If you have [nvm](https://github.com/nvm-sh/nvm), you can run `nvm i` to install the required version.
3. The package manager used to install and link dependencies must be [pnpm](https://pnpm.io/) v7. To use it you must first enable [Corepack](https://github.com/nodejs/corepack) by running `corepack enable`. (Note: on Linux in a standard Node 16+ environment, you should follow the instructions to install via Node's `corepack` rather than using the `curl` command)
4. Check out a branch where you can work and commit your changes:
```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://v8.i18n.nuxtjs.org/) to handle internationalization.
You can check the current [translation status](https://docs.elk.zone/docs/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/docs/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**

View file

@ -1,57 +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
RUN 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"]

130
README.md
View file

@ -1,116 +1,39 @@
<p align="center">
<a href="https://elk.zone" target="_blank" rel="noopener noreferrer">
<img width="160" height="160" src="./public/logo.svg" alt="Elk logo">
<a href="https://viteconf.org" target="_blank" rel="noopener noreferrer">
<img width="180" src="https://elk.zone/logo.svg" alt="Vite logo">
</a>
</p>
<h1 align="center"/>Elk <sup><em>alpha</em></sup></h1>
<p align="center">
A nimble Mastodon web client
</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>
<a href="https://volta.net/elk-zone/elk?utm_source=elk_readme"><img src="https://user-images.githubusercontent.com/904724/209143798-32345f6c-3cf8-4e06-9659-f4ace4a6acde.svg" alt="Open board on Volta"></a>
</p>
<br/>
<p align="center">
<a href="https://elk.zone/" target="_blank" rel="noopener noreferrer" >
<img src="./public/elk-og.png" alt="Elk screenshots" width="600" height="auto">
</a>
</p>
# Elk
## ⚠️ Elk is in Alpha
A nimble Mastodon web client made with 🧡
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.
Elk is in early alpha, but it is already quite usable. We would love your feedback and contributions.
## Deployment
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 learn more and get involved!
### Official Deployment
The client is deployed to [elk.zone](https://elk.zone), you can share screenshots on social media but avoid sharing this URL or the discord server until we open the repo.
The Elk team maintains a deployment at:
> **Note**
> If you would like to contribute, until the repo is open, please create branches in the main repository and send a PR from there.
- 🦌 Production: [elk.zone](https://elk.zone)
- 🐙 Canary: [main.elk.zone](https://main.elk.zone) (deploys on every commit to `main` branch)
# Contributing
### Self-Host Docker Deployment
Hi! We're really excited that you're interested in contributing to Elk! Before submitting your contribution, please read through the following guide.
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.
## Online
1. checkout source ```git clone https://github.com/elk-zone/elk.git```
1. got into new source dir: ```cd elk```
1. build Docker image: ```docker build .```
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 -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.
### Ecosystem
These are known deployments using Elk as an alternative Web client for Mastodon servers or as a base for other projects in the fediverse:
- [elk.fedified.com](https://elk.fedified.com) - Use Elk to log into any compatible instance
- [elk.me.uk](https://elk.me.uk) - Use Elk to log into any compatible instance, hosted on Google Cloud Run with no Cloudflare proxy
- [elk.h4.io](https://elk.h4.io) - Use Elk for the `h4.io` Server
- [elk.universeodon.com](https://elk.universeodon.com) - Use Elk for the Universeodon Server
- [elk.vmst.io](https://elk.vmst.io) - Use Elk for the `vmst.io` Server
- [elk.hostux.social](https://elk.hostux.social) - Use Elk for the `hostux.social` Server
- [elk.cupoftea.social](https://elk.cupoftea.social) - Use Elk for the `cupoftea.social` Server
- [elk.aus.social](https://elk.aus.social) - Use Elk for the `aus.social` Server
- [elk.mstdn.ca](https://elk.mstdn.ca) - Use Elk for the `mstdn.ca` Server
- [elk.mastodonapp.uk](https://elk.mastodonapp.uk) - Use Elk for the `mastodonapp.uk` Server
- [elk.bolha.us](https://elk.bolha.us) - Use Elk for the `bolha.us` Server
> **Note**: Community deployments are **NOT** maintained by the Elk team. It may not be synced with Elk's source code. Please do your own research about the host servers before using them.
## 💖 Sponsors
We are grateful for the generous sponsorship and help of:
<a href="https://nuxtlabs.com/" target="_blank" rel="noopener noreferrer" >
<img src="./images/nuxtlabs.svg" alt="NuxtLabs" height="85">
</a>
<br><br>
<a href="https://stackblitz.com/" target="_blank" rel="noopener noreferrer" >
<img src="./images/stackblitz.svg" alt="StackBlitz" height="85">
</a>
<br><br>
And all the companies and individuals sponsoring Elk Team and the members. If you're enjoying the app, consider sponsoring us:
- [Elk Team's GitHub Sponsors](https://github.com/sponsors/elk-zone)
Or you can sponsor our core team members individually:
- [Anthony Fu](https://github.com/sponsors/antfu)
- [Daniel Roe](https://github.com/sponsors/danielroe)
- [三咲智子 Kevin Deng](https://github.com/sponsors/sxzz)
- [Patak](https://github.com/sponsors/patak-dev)
We would also appreciate sponsoring other contributors to the Elk project. If someone helps you solve an issue or implement a feature you wanted, supporting them would help make this project and OS more sustainable.
## 📍 Roadmap
[Open board on Volta](https://volta.net/elk-zone/elk)
## 🧑‍💻 Contributing
We're really excited that you're interested in contributing to Elk! Before submitting your contribution, please read through the following guide.
### Online
You can use [StackBlitz Codeflow](https://stackblitz.com/codeflow) to fix bugs or implement features. You'll also see a Codeflow button on PRs to review them without a local setup. Once the elk repo has been cloned in Codeflow, the dev server will start automatically and print the URL to open the App. You should receive a prompt in the bottom-right suggesting to open it in the Editor or in another Tab. To learn more, check out the [Codeflow docs](https://developer.stackblitz.com/codeflow/what-is-codeflow).
You can use [StackBlitz CodeFlow](https://stackblitz.com/codeflow) to fix bugs or implement features. You'll also see a CodeFlow button on PRs to review them without a local setup.
[![Open in Codeflow](https://developer.stackblitz.com/img/open_in_codeflow.svg)](https://pr.new/elk-zone/elk)
### Local Setup
## Local Setup
Clone the repository and run on the root folder:
@ -119,8 +42,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:
```
@ -128,7 +49,7 @@ ni
nr dev
```
### Testing
## Testing
Elk uses [Vitest](https://vitest.dev). You can run the test suite with:
@ -136,14 +57,10 @@ 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
- [Nuxt](https://nuxtjs.org/) - The Intuitive Vue Framework
- [Vue](https://vuejs.org/) - The Progressive JavaScript Framework
- [VueUse](https://vueuse.org/) - Collection of Vue Composition Utilities
- [Pinia](https://pinia.vuejs.org/) - The Vue Store that you will enjoy using
@ -151,15 +68,8 @@ 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
## 👨‍💻 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) &copy; 2022-PRESENT Elk contributors
MIT

32
app.vue
View file

@ -1,21 +1,8 @@
<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}` },
],
})
}
<script setup>
usePageHeader()
// We want to trigger rerendering the page when account changes
const key = computed(() => `${currentUser.value?.server ?? currentServer.value}:${currentUser.value?.account.id || ''}`)
const key = computed(() => useMasto().instances.config.url || 'default')
</script>
<template>
@ -23,14 +10,7 @@ const key = computed(() => `${currentUser.value?.server ?? currentServer.value}:
<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>
<TeleportTarget
id="teleport-end"
/>
</template>

View file

@ -1,29 +1,22 @@
<script setup lang="ts">
import type { mastodon } from 'masto'
import type { Account } from 'masto'
defineProps<{
account: mastodon.v1.Account
square?: boolean
account: Account
}>()
const loaded = ref(false)
const error = ref(false)
const loaded = $ref(false)
</script>
<template>
<img
:key="account.avatar"
width="400"
height="400"
select-none
:src="(error || !loaded) ? 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' : account.avatar"
:alt="$t('account.avatar_description', [account.username])"
:src="account.avatar"
:alt="account.username"
loading="lazy"
class="account-avatar"
:class="(loaded ? 'bg-base' : 'bg-gray:10') + (square ? ' ' : ' rounded-full')"
:style="{ 'clip-path': square ? `url(#avatar-mask)` : 'none' }"
rounded-full
:class="loaded ? 'bg-gray' : 'bg-gray:10'"
v-bind="$attrs"
@load="loaded = true"
@error="error = true"
>
</template>

View file

@ -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>

View file

@ -1,55 +0,0 @@
<script lang="ts" setup>
import type { mastodon } from 'masto'
defineOptions({
inheritAttrs: false,
})
const { account, as = 'div' } = defineProps<{
account: mastodon.v1.Account
as?: string
}>()
cacheAccount(account)
</script>
<template>
<component :is="as" block focus:outline-none focus-visible:ring="2 primary" v-bind="$attrs">
<!-- Banner -->
<div px2 pt2>
<div rounded of-hidden bg="gray-500/20" aspect="3.19">
<img h-full w-full object-cover :src="account.header" :alt="$t('account.profile_description', [account.username])">
</div>
</div>
<div px-4 pb-4 space-y-2>
<!-- User info -->
<div flex sm:flex-row flex-col flex-gap-2>
<div flex items-center justify-between>
<div w-17 h-17 rounded-full border-4 border-bg-base z-2 mt--2 ms--1>
<AccountAvatar :account="account" />
</div>
<NuxtLink block sm:hidden href="javascript:;" @click.stop>
<AccountFollowButton :account="account" />
</NuxtLink>
</div>
<div sm:mt-2>
<AccountDisplayName :account="account" font-bold text-lg line-clamp-1 ws-pre-wrap break-all />
<AccountHandle text-sm :account="account" />
</div>
</div>
<!-- Note -->
<div v-if="account.note" max-h-100 overflow-y-auto>
<ContentRich
:content="account.note" :emojis="account.emojis"
/>
</div>
<!-- Follow info -->
<div flex justify-between items-center>
<AccountPostsFollowers text-sm :account="account" />
<NuxtLink sm:block hidden href="javascript:;" @click.stop>
<AccountFollowButton :account="account" />
</NuxtLink>
</div>
</div>
</component>
</template>

View file

@ -1,30 +0,0 @@
<template>
<div>
<!-- Banner -->
<div px2 pt2>
<div rounded of-hidden aspect="3.19" class="flex skeleton-loading-bg" />
<div px-4 pb-4 flex="~ col gap-2">
<!-- User info -->
<div flex sm:flex-row flex-col flex-gap-2>
<div flex items-center justify-between>
<div w-17 h-17 rounded-full border-4 border-bg-base z-2 mt--2 ms--1 of-hidden bg-base>
<div class="flex skeleton-loading-bg" w-full h-full />
</div>
<div block sm:hidden class="skeleton-loading-bg" h-8 w-30 rounded-full />
</div>
<div sm:mt-2 flex="~ col 1 gap-2">
<div flex class="skeleton-loading-bg" h-5 w-20 rounded />
<div flex class="skeleton-loading-bg" h-4 w-40 rounded />
</div>
</div>
<!-- Note -->
<div flex class="skeleton-loading-bg" h-4 my3 w="3/5" rounded />
<!-- Follow info -->
<div flex justify-between items-center>
<div flex class="skeleton-loading-bg" h-4 w="sm:1/2 full" rounded />
<div sm:flex hidden class="skeleton-loading-bg" h-8 w-30 rounded-full />
</div>
</div>
</div>
</div>
</template>

View file

@ -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 no-auto-focus :content="$t('account.bot')" :disabled="showLabel">
<div i-mdi:robot-outline />
</CommonTooltip>
<div v-if="showLabel">
{{ $t('account.bot') }}
</div>
</div>
</template>

View file

@ -1,10 +1,9 @@
<script setup lang="ts">
import type { mastodon } from 'masto'
import type { Account } from 'masto'
const { account } = defineProps<{
account: mastodon.v1.Account
account: Account
hoverCard?: boolean
relationshipContext?: 'followedBy' | 'following'
}>()
cacheAccount(account)
@ -15,14 +14,10 @@ cacheAccount(account)
<AccountInfo
:account="account" hover p1 as="router-link"
:hover-card="hoverCard"
shrink
overflow-hidden
:to="getAccountRoute(account)"
:to="getAccountPath(account)"
/>
<slot>
<div h-full p1 shrink-0>
<AccountFollowButton :account="account" :context="relationshipContext" />
</div>
</slot>
<div h-full p1>
<AccountFollowButton :account="account" />
</div>
</div>
</template>

View file

@ -1,17 +0,0 @@
<script setup lang="ts">
import type { mastodon } from 'masto'
const { account, 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>

View file

@ -1,114 +1,62 @@
<script setup lang="ts">
import type { mastodon } from 'masto'
import { toggleFollowAccount, useRelationship } from '~~/composables/masto/relationship'
import type { Account } from 'masto'
const { account, command, context, ...props } = defineProps<{
account: mastodon.v1.Account
relationship?: mastodon.v1.Relationship
context?: 'followedBy' | 'following'
const { account, command } = defineProps<{
account: Account
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 isSelf = $computed(() => currentUser.value?.account.id === account.id)
const enable = $computed(() => !isSelf && currentUser.value)
let relationship = $(useRelationship(account))
const { client } = useMasto()
async function unblock() {
relationship.value!.blocking = false
async function toggleFollow() {
relationship!.following = !relationship!.following
try {
const newRel = await client.value.v1.accounts.$select(account.id).unblock()
Object.assign(relationship!, newRel)
relationship = await useMasto().accounts[relationship!.following ? 'follow' : 'unfollow'](account.id)
}
catch (err) {
console.error(err)
catch {
// 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
relationship!.following = !relationship!.following
}
}
useCommand({
scope: 'Actions',
order: -2,
visible: () => command && enable,
name: () => `${relationship.value?.following ? t('account.unfollow') : t('account.follow')} ${getShortHandle(account)}`,
name: () => `${relationship?.following ? 'Unfollow' : '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'
onActivate: () => toggleFollow(),
})
</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)"
flex gap-1 items-center h-fit rounded hover="op100 text-white b-orange" group btn-base
:disabled="relationship?.requested"
@click="toggleFollow"
>
<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>
<div rounded w-28 p2 :group-hover="relationship?.following ? 'bg-red/75' : 'bg-orange/40'" :class="!relationship?.following ? relationship?.followedBy ? 'bg-orange/20' : 'bg-white/10' : relationship?.followedBy ? ' bg-orange/70' : 'bg-orange/50'">
<template v-if="relationship?.following">
<span group-hover="hidden">{{ relationship?.followedBy ? 'Mutuals' : 'Following' }}</span>
<span hidden 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>
<span>{{ $t('account.follow_requested') }}</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 v-else-if="relationship?.followedBy">
<span group-hover="hidden">{{ $t('account.follows_you') }}</span>
<span hidden group-hover="inline">{{ $t('account.follow_back') }}</span>
</template>
<template v-else>
<span>{{ account.locked ? $t('account.request_follow') : $t('account.follow') }}</span>
<span>{{ $t('account.follow') }}</span>
</template>
</template>
</div>
</button>
</template>

View file

@ -1,68 +0,0 @@
<script setup lang="ts">
import type { mastodon } from 'masto'
const { account, ...props } = defineProps<{
account: mastodon.v1.Account
relationship?: mastodon.v1.Relationship
}>()
const relationship = computed(() => props.relationship || useRelationship(account).value)
const { client } = useMasto()
async function authorizeFollowRequest() {
relationship.value!.requestedBy = false
relationship.value!.followedBy = true
try {
const newRel = await client.value.v1.followRequests.$select(account.id).authorize()
Object.assign(relationship!, newRel)
}
catch (err) {
console.error(err)
relationship.value!.requestedBy = true
relationship.value!.followedBy = false
}
}
async function rejectFollowRequest() {
relationship.value!.requestedBy = false
try {
const newRel = await client.value.v1.followRequests.$select(account.id).reject()
Object.assign(relationship!, newRel)
}
catch (err) {
console.error(err)
relationship.value!.requestedBy = true
}
}
</script>
<template>
<div flex gap-4>
<template v-if="relationship?.requestedBy">
<CommonTooltip :content="$t('account.authorize')" no-auto-focus>
<button
type="button"
rounded-full text-sm p2 border-1
hover:text-green transition-colors
@click="authorizeFollowRequest"
>
<span block text-current i-ri:check-fill />
</button>
</CommonTooltip>
<CommonTooltip :content="$t('account.reject')" no-auto-focus>
<button
type="button"
rounded-full text-sm p2 border-1
hover:text-red transition-colors
@click="rejectFollowRequest"
>
<span block text-current i-ri:close-fill />
</button>
</CommonTooltip>
</template>
<template v-else>
<span text-secondary>
{{ relationship?.followedBy ? $t('account.authorized') : $t('account.rejected') }}
</span>
</template>
</div>
</template>

View file

@ -1,16 +1,15 @@
<script setup lang="ts">
import type { mastodon } from 'masto'
import type { Account } from 'masto'
const { account } = defineProps<{
account: mastodon.v1.Account
account: Account
}>()
const serverName = computed(() => getServerName(account))
const serverName = $computed(() => getServerName(account))
</script>
<template>
<p line-clamp-1 whitespace-pre-wrap break-all text-secondary-light leading-tight dir="ltr">
<!-- fix: #274 only line-clamp-1 can be used here, using text-ellipsis is not valid -->
<p>
<span text-secondary>{{ getShortHandle(account) }}</span>
<span v-if="serverName" text-secondary-light>@{{ serverName }}</span>
</p>

View file

@ -1,73 +1,63 @@
<script setup lang="ts">
import type { mastodon } from 'masto'
import type { Account, Field } from 'masto'
const { account } = defineProps<{
account: mastodon.v1.Account
account: Account
command?: boolean
}>()
const { client } = useMasto()
const { t } = useI18n()
const createdAt = useFormattedDateTime(() => account.createdAt, {
const createdAt = $(useFormattedDateTime(() => account.createdAt, {
month: 'long',
day: 'numeric',
year: 'numeric',
})
}))
const relationship = useRelationship(account)
const namedFields = ref<Field[]>([])
const iconFields = ref<Field[]>([])
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
const fieldNameIcons: Record<string, string> = {
github: 'i-ri:github-fill',
twitter: 'i-ri:twitter-line',
mastodon: 'i-ri:mastodon-line',
youtube: 'i-ri:youtube-line',
twitch: 'i-ri:twitch-line',
instagram: 'i-ri:instagram-line',
website: 'i-ri:link',
site: 'i-ri:link',
portfolio: 'i-ri:link',
blog: 'i-ri:newspaper-line',
home: 'i-ri:home-2-line',
sponsors: 'i-ri:heart-3-line',
location: 'i-ri:map-pin-2-line',
city: 'i-ri:map-pin-2-line',
joined: 'i-ri:user-add-line',
birth: 'i-ri:calendar-line',
tumblr: 'i-ri:tumblr-fill',
linkedin: 'i-ri:linkedin-box-fill',
facebook: 'i-ri:facebook-fill',
patreon: 'i-ri:patreon-fill',
}
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 getFieldNameIcon(fieldName: string) {
const name = fieldName.trim().toLowerCase()
if (fieldNameIcons[name])
return fieldNameIcons[name]
}
function previewHeader() {
openMediaPreview([{
id: `${account.acct}:header`,
type: 'image',
previewUrl: account.header,
description: t('account.profile_description', [account.username]),
}])
openImagePreviewDialog({ src: account.header, alt: `${account.username}'s profile header` })
}
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
}
openImagePreviewDialog({ src: account.avatar, alt: account.username })
}
watchEffect(() => {
const named: mastodon.v1.AccountField[] = []
const icons: mastodon.v1.AccountField[] = []
const named: Field[] = []
const icons: Field[] = []
account.fields?.forEach((field) => {
const icon = getAccountFieldIcon(field.name)
const icon = getFieldNameIcon(field.name)
if (icon)
icons.push(field)
else
@ -75,200 +65,58 @@ watchEffect(() => {
})
icons.push({
name: 'Joined',
value: createdAt.value,
value: createdAt,
})
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>
<button border="b base" z-1>
<img h-50 w-full object-cover :src="account.header" @click="previewHeader">
</button>
<div p4 mt--17 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 />
<div flex="~ col gap-2 1">
<button w-30 h-30 rounded-full border-4 border-bg-base z-2 @click="previewAvatar">
<AccountAvatar :account="account" hover:opacity-90 transition-opacity />
</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 flex flex-col>
<ContentRich font-bold text-2xl break-words :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
<AccountHandle :account="account" />
</div>
</div>
<div flex="~ col gap1" pt2>
<div flex gap2 items-center flex-wrap>
<AccountDisplayName :account="account" font-bold sm:text-2xl text-xl />
<AccountRolesIndicator v-if="account.roles?.length" :account="account" />
<AccountLockIndicator v-if="account.locked" show-label />
<AccountBotIndicator v-if="account.bot" show-label />
</div>
<div flex items-center gap-1>
<AccountHandle :account="account" overflow-unset line-clamp-unset />
<CommonTooltip placement="bottom" :content="$t('account.copy_account_name')" no-auto-focus flex>
<button text-secondary-light text-sm :class="isCopied ? 'i-ri:check-fill text-green' : 'i-ri:file-copy-line'" @click="copyAccountName">
<span sr-only>{{ $t('account.copy_account_name') }}</span>
</button>
</CommonTooltip>
</div>
<div absolute top="1/2" right-0 translate-y="-1/2" flex gap-2 items-center>
<AccountMoreButton :account="account" :command="command" />
<AccountFollowButton :account="account" :command="command" />
<!-- <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group>
<div rounded p2 group-hover="bg-rose/10">
<div i-ri:bell-line />
</div>
</button> -->
</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 v-if="account.note">
<ContentRich text-4 text-secondary :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 text-secondary uppercase text-xs font-bold>
{{ field.name }} |
</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 v-if="iconFields.length" flex="~ wrap gap-4">
<div v-for="field in iconFields" :key="field.name" flex="~ gap-1" items-center>
<div text-secondary :class="getFieldNameIcon(field.name)" :title="field.name" />
<ContentRich text-sm filter-saturate-0 :content="field.value" :emojis="account.emojis" />
</div>
</div>
<AccountPostsFollowers :account="account" />
</div>
</div>
</template>
<style>
.trailing-newline::after {
content: '\a';
}
</style>

View file

@ -1,24 +1,20 @@
<script setup lang="ts">
import type { mastodon } from 'masto'
import type { Account } from 'masto'
const { account } = defineProps<{
account: mastodon.v1.Account
defineProps<{
account: 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="~ 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>
<NuxtLink :to="getAccountPath(account)" flex-auto rounded-full hover:bg-active transition-100 pr5 mr-a>
<AccountInfo :account="account" />
</NuxtLink>
<AccountFollowButton text-sm :account="account" :relationship="relationship" />
<AccountFollowButton text-sm :account="account" />
</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" />
<ContentRich text-4 text-secondary :content="account.note" :emojis="account.emojis" />
<AccountPostsFollowers text-sm :account="account" />
</div>
</template>

View file

@ -1,69 +1,18 @@
<script setup lang="ts">
import type { mastodon } from 'masto'
import { fetchAccountByHandle } from '~/composables/cache'
import type { Account } from 'masto'
type WatcherType = [acc?: mastodon.v1.Account | null, h?: string, v?: boolean]
defineOptions({
inheritAttrs: false,
})
const props = defineProps<{
account?: mastodon.v1.Account | null
handle?: string
defineProps<{
account: Account
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"
>
<slot />
<template #popper>
<AccountHoverCard v-if="account" :account="account" />
</template>
</VMenu>
<slot v-else />
</span>
<VMenu v-if="!disabled" placement="bottom-start" :delay="{ show: 500, hide: 100 }">
<slot />
<template #popper>
<AccountHoverCard :account="account" />
</template>
</VMenu>
<slot v-else />
</template>

View file

@ -1,16 +1,15 @@
<script setup lang="ts">
import type { mastodon } from 'masto'
import type { Account } from 'masto'
const { account, as = 'div' } = defineProps<{
account: Account
as?: string
hoverCard?: boolean
}>()
defineOptions({
inheritAttrs: false,
})
const { account, as = 'div' } = defineProps<{
account: mastodon.v1.Account
as?: string
hoverCard?: boolean
square?: boolean
}>()
</script>
<!-- TODO: Make this work for both buttons and links -->
@ -18,16 +17,11 @@ const { account, as = 'div' } = defineProps<{
<template>
<component :is="as" flex gap-3 v-bind="$attrs">
<AccountHoverWrapper :disabled="!hoverCard" :account="account">
<AccountBigAvatar :account="account" shrink-0 :square="square" />
<AccountAvatar :account="account" w-12 h-12 />
</AccountHoverWrapper>
<div flex="~ col" shrink pt-1 h-full overflow-hidden justify-center leading-none select-none>
<div flex="~" gap-2>
<AccountDisplayName :account="account" font-bold line-clamp-1 ws-pre-wrap break-all text-lg />
<AccountRolesIndicator v-if="account.roles?.length" :account="account" :limit="1" />
<AccountLockIndicator v-if="account.locked" text-xs />
<AccountBotIndicator v-if="account.bot" text-xs />
</div>
<AccountHandle :account="account" text-secondary-light />
<div flex="~ col">
<ContentRich font-bold :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
<AccountHandle :account="account" text-sm />
</div>
</component>
</template>

View file

@ -1,31 +1,21 @@
<script setup lang="ts">
import type { mastodon } from 'masto'
import type { Account } from 'masto'
const { link = true, avatar = true } = defineProps<{
account: mastodon.v1.Account
const { link = true } = defineProps<{
account: 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
:to="link ? getAccountPath(account) : undefined"
:class="link ? 'text-link-rounded ml-0 pl-0' : ''"
min-w-0 flex gap-1 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 />
<AccountAvatar :account="account" w-5 h-5 />
<ContentRich :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
</NuxtLink>
</AccountHoverWrapper>
</template>

View file

@ -1,23 +0,0 @@
<script setup lang="ts">
defineProps<{
showLabel?: boolean
}>()
const { t } = useI18n()
</script>
<template>
<div
flex="~ gap1" items-center
:class="{ 'border border-base rounded-md px-1': showLabel }"
text-secondary-light
>
<slot name="prepend" />
<CommonTooltip no-auto-focus content="Lock" :disabled="showLabel">
<div i-ri:lock-line />
</CommonTooltip>
<div v-if="showLabel">
{{ t('account.lock') }}
</div>
</div>
</template>

View file

@ -1,82 +1,56 @@
<script setup lang="ts">
import type { mastodon } from 'masto'
import { toggleBlockAccount, toggleBlockDomain, toggleMuteAccount } from '~~/composables/masto/relationship'
import type { Account } from 'masto'
const { account } = defineProps<{
account: mastodon.v1.Account
account: Account
command?: boolean
}>()
const emit = defineEmits<{
(evt: 'addNote'): void
(evt: 'removeNote'): void
}>()
let relationship = $(useRelationship(account))
const relationship = useRelationship(account)
const isSelf = $computed(() => currentUser.value?.account.id === account.id)
const isSelf = useSelfAccount(() => account)
const toggleMute = async () => {
// TODO: Add confirmation
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'),
relationship!.muting = !relationship!.muting
relationship = relationship!.muting
? await useMasto().accounts.mute(account.id, {
// TODO support more options
})
if (dialogChoice.choice !== 'confirm')
return
}
const showingReblogs = !relationship.value?.showingReblogs
relationship.value = await client.value.v1.accounts.$select(account.id).follow({ reblogs: showingReblogs })
: await useMasto().accounts.unmute(account.id)
}
async function addUserNote() {
emit('addNote')
const toggleBlockUser = async () => {
// TODO: Add confirmation
relationship!.blocking = !relationship!.blocking
relationship = await useMasto().accounts[relationship!.blocking ? 'block' : 'unblock'](account.id)
}
async function removeUserNote() {
if (!relationship.value!.note || relationship.value!.note.length === 0)
return
const toggleBlockDomain = async () => {
// TODO: Add confirmation
const newNote = await client.value.v1.accounts.$select(account.id).note.create({ comment: '' })
relationship.value!.note = newNote.note
emit('removeNote')
relationship!.domainBlocking = !relationship!.domainBlocking
await useMasto().domainBlocks[relationship!.domainBlocking ? 'block' : 'unblock'](getServerName(account))
}
</script>
<template>
<CommonDropdown :eager-mount="command">
<button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group aria-label="More actions">
<div rounded-5 p2 elk-group-hover="bg-purple/10">
<button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group>
<div rounded-5 p2 group-hover="bg-purple/10">
<div i-ri:more-2-fill />
</div>
</button>
<template #popper>
<NuxtLink :to="account.url" external target="_blank">
<NuxtLink :to="account.url" target="_blank">
<CommonDropdownItem
:text="$t('menu.open_in_original_site')"
icon="i-ri:arrow-right-up-line"
:command="command"
/>
</NuxtLink>
<CommonDropdownItem
v-if="isShareSupported"
:text="$t('menu.share_account', [`@${account.acct}`])"
icon="i-ri:share-line"
:command="command"
@click="shareAccount()"
/>
<template v-if="currentUser">
<template v-if="!isSelf">
@ -93,49 +67,19 @@ async function removeUserNote() {
@click="directMessageUser(account)"
/>
<CommonDropdownItem
v-if="!relationship?.showingReblogs"
icon="i-ri:repeat-line"
:text="$t('menu.show_reblogs', [`@${account.acct}`])"
:command="command"
@click="toggleReblogs()"
/>
<CommonDropdownItem
v-else
:text="$t('menu.hide_reblogs', [`@${account.acct}`])"
icon="i-ri:repeat-line"
:command="command"
@click="toggleReblogs()"
/>
<CommonDropdownItem
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
v-else
:text="$t('menu.remove_personal_note', [`@${account.acct}`])"
icon="i-ri-edit-2-line"
:command="command"
@click="removeUserNote()"
/>
<CommonDropdownItem
v-if="!relationship?.muting"
:text="$t('menu.mute_account', [`@${account.acct}`])"
icon="i-ri:volume-mute-line"
icon="i-ri:volume-up-fill"
:command="command"
@click="toggleMuteAccount (relationship!, account)"
@click="toggleMute"
/>
<CommonDropdownItem
v-else
:text="$t('menu.unmute_account', [`@${account.acct}`])"
icon="i-ri:volume-up-fill"
icon="i-ri:volume-mute-line"
:command="command"
@click="toggleMuteAccount (relationship!, account)"
@click="toggleMute"
/>
<CommonDropdownItem
@ -143,14 +87,14 @@ async function removeUserNote() {
:text="$t('menu.block_account', [`@${account.acct}`])"
icon="i-ri:forbid-2-line"
:command="command"
@click="toggleBlockAccount (relationship!, account)"
@click="toggleBlockUser"
/>
<CommonDropdownItem
v-else
:text="$t('menu.unblock_account', [`@${account.acct}`])"
icon="i-ri:checkbox-circle-line"
:command="command"
@click="toggleBlockAccount (relationship!, account)"
@click="toggleBlockUser"
/>
<template v-if="getServerName(account) !== currentServer">
@ -159,23 +103,16 @@ async function removeUserNote() {
:text="$t('menu.block_domain', [getServerName(account)])"
icon="i-ri:shut-down-line"
:command="command"
@click="toggleBlockDomain(relationship!, account)"
@click="toggleBlockDomain"
/>
<CommonDropdownItem
v-else
:text="$t('menu.unblock_domain', [getServerName(account)])"
icon="i-ri:restart-line"
:command="command"
@click="toggleBlockDomain(relationship!, account)"
@click="toggleBlockDomain"
/>
</template>
<CommonDropdownItem
:text="$t('menu.report_account', [`@${account.acct}`])"
icon="i-ri:flag-2-line"
:command="command"
@click="openReportDialog(account)"
/>
</template>
<template v-else>
@ -183,7 +120,7 @@ async function removeUserNote() {
<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" />
<CommonDropdownItem :text="$t('account.favourites')" icon="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" />

View file

@ -1,28 +0,0 @@
<script setup lang="ts">
import type { mastodon } from 'masto'
defineProps<{
account: mastodon.v1.Account
}>()
</script>
<template>
<div flex="~ col gap-2" p4>
<div flex="~ gap-1" justify-center>
<AccountInlineInfo :account="account" :link="false" />
{{ $t('account.moved_title') }}
</div>
<div flex>
<NuxtLink :to="getAccountRoute(account.moved!)">
<AccountInfo :account="account.moved!" />
</NuxtLink>
<div flex-auto />
<div flex items-center>
<NuxtLink :to="getAccountRoute(account.moved as any)" btn-solid inline-block h-fit>
{{ $t('account.go_to_profile') }}
</NuxtLink>
</div>
</div>
</div>
</template>

View file

@ -1,19 +1,9 @@
<script setup lang="ts">
import type { mastodon } from 'masto'
import type { Account, Paginator } from 'masto'
const { paginator, account, context } = defineProps<{
paginator: mastodon.Paginator<mastodon.v1.Account[], mastodon.DefaultPaginationParams | undefined>
context?: 'following' | 'followers'
account?: mastodon.v1.Account
relationshipContext?: 'followedBy' | 'following'
const { paginator } = defineProps<{
paginator: Paginator<any, Account[]>
}>()
const fallbackContext = computed(() => {
return ['following', 'followers'].includes(context!)
})
const showOriginSite = computed(() =>
account && account.id !== currentUser.value?.account.id && getServerName(account) !== currentServer.value,
)
</script>
<template>
@ -21,23 +11,9 @@ const showOriginSite = computed(() =>
<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>

View file

@ -1,77 +1,32 @@
<script setup lang="ts">
import type { mastodon } from 'masto'
import type { Account } from 'masto'
defineProps<{
account: mastodon.v1.Account
isHoverCard?: boolean
account: Account
}>()
const userSettings = useUserSettings()
</script>
<template>
<div flex gap-5>
<NuxtLink
:to="getAccountRoute(account)"
replace
text-secondary
exact-active-class="text-primary"
>
<NuxtLink :to="getAccountPath(account)" 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'"
/>
<i18n-t keypath="account.posts_count">
<span font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ formattedNumber(account.statusesCount) }}</span>
</i18n-t>
</template>
</NuxtLink>
<NuxtLink
v-if="!(isHoverCard && getPreferences(userSettings, 'hideFollowerCount'))"
:to="getAccountFollowingRoute(account)"
replace
text-secondary exact-active-class="text-primary"
>
<NuxtLink :to="`${getAccountPath(account)}/following`" 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>
<i18n-t keypath="account.following_count">
<span font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ humanReadableNumber(account.followingCount) }}</span>
</i18n-t>
</template>
</NuxtLink>
<NuxtLink
v-if="!(isHoverCard && getPreferences(userSettings, 'hideFollowerCount'))"
:to="getAccountFollowersRoute(account)"
replace text-secondary
exact-active-class="text-primary"
>
<NuxtLink :to="`${getAccountPath(account)}/followers`" 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>
<i18n-t keypath="account.followers_count">
<span font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ humanReadableNumber(account.followersCount) }}</span>
</i18n-t>
</template>
</NuxtLink>
</div>

View file

@ -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>

View file

@ -1,43 +0,0 @@
<script setup lang="ts">
import type { CommonRouteTabOption } from '~/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>

View file

@ -1,45 +0,0 @@
<script setup lang="ts">
import type { mastodon } from 'masto'
defineOptions({
inheritAttrs: false,
})
const { tagName, disabled } = defineProps<{
tagName?: string
disabled?: boolean
}>()
const tag = ref<mastodon.v1.Tag>()
const tagHover = ref()
const hovered = useElementHover(tagHover)
watch(hovered, (newHovered) => {
if (newHovered && tagName) {
fetchTag(tagName).then((t) => {
tag.value = t
})
}
})
const userSettings = useUserSettings()
</script>
<template>
<span ref="tagHover">
<VMenu
v-if="!disabled && !getPreferences(userSettings, 'hideTagHoverCard')"
placement="bottom-start"
:delay="{ show: 500, hide: 100 }"
v-bind="$attrs"
:close-on-content-click="false"
>
<slot />
<template #popper>
<TagCardSkeleton v-if="!tag" />
<TagCard v-else :tag="tag" />
</template>
</VMenu>
<slot v-else />
</span>
</template>

View file

@ -1,55 +0,0 @@
<script setup lang="ts">
import type { LocaleObject } from '@nuxtjs/i18n'
import type { AriaAnnounceType, AriaLive } from '~/composables/aria'
const router = useRouter()
const { t, locale, locales } = useI18n()
const { ariaAnnouncer, announce } = useAriaAnnouncer()
const localeMap = (locales.value as LocaleObject[]).reduce((acc, l) => {
acc[l.code!] = l.name!
return acc
}, {} as Record<string, string>)
const ariaLive = ref<AriaLive>('polite')
const ariaMessage = ref<string>('')
function onMessage(event: AriaAnnounceType, message?: string) {
if (event === 'announce')
ariaMessage.value = message!
else if (event === 'mute')
ariaLive.value = 'off'
else
ariaLive.value = 'polite'
}
watch(locale, (l, ol) => {
if (ol) {
announce(t('a11y.locale_changing', [localeMap[ol] ?? ol]))
setTimeout(() => {
announce(t('a11y.locale_changed', [localeMap[l] ?? l]))
}, 1000)
}
}, { immediate: true })
onMounted(() => {
ariaAnnouncer.on(onMessage)
router.beforeEach(() => {
announce(t('a11y.loading_page'))
})
router.afterEach((to, from) => {
from && setTimeout(() => {
requestAnimationFrame(() => {
const title = document.title.trim().split('|')
announce(t('a11y.route_loaded', [title[0]]))
})
}, 512)
})
})
</script>
<template>
<p sr-only role="status" :aria-live="ariaLive">
{{ ariaMessage }}
</p>
</template>

View file

@ -1,39 +0,0 @@
<script setup lang="ts">
import type { AriaLive } from '~/composables/aria'
// tsc complaining when using $defineProps
withDefaults(defineProps<{
title: string
ariaLive?: AriaLive
messageKey?: (message: any) => any
heading?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
}>(), {
heading: 'h2',
messageKey: (message: any) => message,
ariaLive: 'polite',
})
const { announceLogs, appendLogs, clearLogs, logs } = useAriaLog()
defineExpose({
announceLogs,
appendLogs,
clearLogs,
})
</script>
<template>
<slot />
<div sr-only role="log" :aria-live="ariaLive">
<component :is="heading">
{{ title }}
</component>
<ul>
<li v-for="log in logs" :key="messageKey(log)">
<slot name="log" :log="log">
{{ log }}
</slot>
</li>
</ul>
</div>
</template>

View file

@ -1,26 +0,0 @@
<script setup lang="ts">
import type { AriaLive } from '~/composables/aria'
// tsc complaining when using $defineProps
withDefaults(defineProps<{
ariaLive?: AriaLive
}>(), {
ariaLive: 'polite',
})
const { announceStatus, clearStatus, status } = useAriaStatus()
defineExpose({
announceStatus,
clearStatus,
})
</script>
<template>
<slot />
<p sr-only role="status" :aria-live="ariaLive">
<slot name="status" :status="status">
{{ status }}
</slot>
</p>
</template>

View file

@ -1,58 +0,0 @@
<script lang="ts" setup>
import type { ResolvedCommand } from '~/composables/command'
const {
cmd,
index,
active = false,
} = defineProps<{
cmd: ResolvedCommand
index: number
active?: boolean
}>()
const emit = defineEmits<{
(event: 'activate'): void
}>()
</script>
<template>
<div
class="flex px-3 py-2 my-1 items-center rounded-lg hover:bg-active transition-all duration-65 ease-in-out cursor-pointer scroll-m-10"
:class="{ 'bg-active': active }"
:data-index="index"
@click="emit('activate')"
>
<div v-if="cmd.icon" me-2 :class="cmd.icon" />
<div class="flex-1 flex items-baseline gap-2">
<div :class="{ 'font-medium': active }">
{{ cmd.name }}
</div>
<div v-if="cmd.description" class="text-xs text-secondary">
{{ cmd.description }}
</div>
</div>
<div
v-if="cmd.onComplete"
class="flex items-center gap-1 transition-all duration-65 ease-in-out"
:class="active ? 'opacity-100' : 'opacity-0'"
>
<div class="text-xs text-secondary">
{{ $t('command.complete') }}
</div>
<CommandKey name="Tab" />
</div>
<div
v-if="cmd.onActivate"
class="flex items-center gap-1 transition-all duration-65 ease-in-out"
:class="active ? 'opacity-100' : 'opacity-0'"
>
<div class="text-xs text-secondary">
{{ $t('command.activate') }}
</div>
<CommandKey name="Enter" />
</div>
</div>
</template>

View file

@ -1,246 +0,0 @@
<script setup lang="ts">
import type { SearchResult as SearchResultType } from '~/composables/masto/search'
import type { CommandScope, QueryResult, QueryResultItem } from '~/composables/command'
const emit = defineEmits<{
(event: 'close'): void
}>()
const registry = useCommandRegistry()
const router = useRouter()
const inputEl = ref<HTMLInputElement>()
const resultEl = ref<HTMLDivElement>()
const scopes = ref<CommandScope[]>([])
const input = commandPanelInput
onMounted(() => {
inputEl.value?.focus()
})
const commandMode = computed(() => input.value.startsWith('>'))
const query = computed(() => commandMode.value ? '' : input.value.trim())
const { accounts, hashtags, loading } = useSearch(query)
function toSearchQueryResultItem(search: SearchResultType): QueryResultItem {
return {
index: 0,
type: 'search',
search,
onActivate: () => router.push(search.to),
}
}
const searchResult = computed<QueryResult>(() => {
if (query.value.length === 0 || loading.value)
return { length: 0, items: [], grouped: {} as any }
// TODO extract this scope
// duplicate in SearchWidget.vue
const hashtagList = hashtags.value.slice(0, 3).map(toSearchQueryResultItem)
const accountList = accounts.value.map(toSearchQueryResultItem)
const grouped: QueryResult['grouped'] = new Map()
grouped.set('Hashtags', hashtagList)
grouped.set('Users', accountList)
let index = 0
for (const items of grouped.values()) {
for (const item of items)
item.index = index++
}
return {
grouped,
items: [...hashtagList, ...accountList],
length: hashtagList.length + accountList.length,
}
})
const result = computed<QueryResult>(() => commandMode.value
? registry.query(scopes.value.map(s => s.id).join('.'), input.value.slice(1).trim())
: searchResult.value,
)
const isMac = useIsMac()
const modifierKeyName = computed(() => isMac.value ? '⌘' : 'Ctrl')
const active = ref(0)
watch(result, (n, o) => {
if (n.length !== o.length || !n.items.every((i, idx) => i === o.items[idx]))
active.value = 0
})
function findItemEl(index: number) {
return resultEl.value?.querySelector(`[data-index="${index}"]`) as HTMLDivElement | null
}
function onCommandActivate(item: QueryResultItem) {
if (item.onActivate) {
item.onActivate()
emit('close')
}
else if (item.onComplete) {
scopes.value.push(item.onComplete())
input.value = '> '
}
}
function onCommandComplete(item: QueryResultItem) {
if (item.onComplete) {
scopes.value.push(item.onComplete())
input.value = '> '
}
else if (item.onActivate) {
item.onActivate()
emit('close')
}
}
function intoView(index: number) {
const el = findItemEl(index)
if (el)
el.scrollIntoView({ block: 'nearest' })
}
function setActive(index: number) {
const len = result.value.length
active.value = (index + len) % len
intoView(active.value)
}
function onKeyDown(e: KeyboardEvent) {
switch (e.key) {
case 'p':
case 'ArrowUp': {
if (e.key === 'p' && !e.ctrlKey)
break
e.preventDefault()
setActive(active.value - 1)
break
}
case 'n':
case 'ArrowDown': {
if (e.key === 'n' && !e.ctrlKey)
break
e.preventDefault()
setActive(active.value + 1)
break
}
case 'Home': {
e.preventDefault()
active.value = 0
intoView(active.value)
break
}
case 'End': {
e.preventDefault()
setActive(result.value.length - 1)
break
}
case 'Enter': {
e.preventDefault()
const cmd = result.value.items[active.value]
if (cmd)
onCommandActivate(cmd)
break
}
case 'Tab': {
e.preventDefault()
const cmd = result.value.items[active.value]
if (cmd)
onCommandComplete(cmd)
break
}
case 'Backspace': {
if (input.value === '>' && scopes.value.length) {
e.preventDefault()
scopes.value.pop()
}
break
}
}
}
</script>
<template>
<div class="flex flex-col w-50vw max-w-180 h-50vh max-h-120">
<!-- Input -->
<label class="flex mx-3 my-1 items-center">
<div mx-1 i-ri:search-line />
<div v-for="scope in scopes" :key="scope.id" class="flex items-center mx-1 gap-2">
<div class="text-sm">{{ scope.display }}</div>
<span class="text-secondary">/</span>
</div>
<input
ref="inputEl"
v-model="input"
class="focus:outline-none flex-1 p-2 rounded bg-base"
placeholder="Search"
@keydown="onKeyDown"
>
<CommandKey name="Escape" />
</label>
<div class="w-full border-b-1 border-base" />
<!-- Results -->
<div ref="resultEl" class="flex-1 mx-1 overflow-y-auto">
<template v-if="loading">
<SearchResultSkeleton />
<SearchResultSkeleton />
<SearchResultSkeleton />
</template>
<template v-else-if="result.length">
<template v-for="[scope, group] in result.grouped" :key="scope">
<div class="mt-2 px-2 py-1 text-sm text-secondary">
{{ scope }}
</div>
<template v-for="item in group" :key="item.index">
<SearchResult v-if="item.type === 'search'" :active="active === item.index" :result="item.search" />
<CommandItem v-else :index="item.index" :cmd="item.cmd" :active="active === item.index" @activate="onCommandActivate(item)" />
</template>
</template>
</template>
<div v-else p5 text-center text-secondary italic>
{{
input.trim().length
? $t('common.not_found')
: $t('search.search_desc')
}}
</div>
</div>
<div class="w-full border-b-1 border-base" />
<!-- Footer -->
<div class="flex items-center px-3 py-1 text-xs">
<div i-ri:lightbulb-flash-line /> Tip: Use
<CommandKey :name="`${modifierKeyName}+K`" /> to search,
<CommandKey :name="`${modifierKeyName}+/`" /> to activate command mode.
</div>
</div>
</template>

View file

@ -5,7 +5,7 @@ const props = defineProps<{
const isMac = useIsMac()
const keys = computed(() => props.name.toLowerCase().split('+'))
const keys = $computed(() => props.name.toLowerCase().split('+'))
</script>
<template>

View file

@ -0,0 +1,253 @@
<script setup lang="ts">
import type { CommandScope, QueryIndexedCommand } from '@/composables/command'
const isMac = useIsMac()
const registry = useCommandRegistry()
const inputEl = $ref<HTMLInputElement>()
const resultEl = $ref<HTMLDivElement>()
let show = $ref(false)
let scopes = $ref<CommandScope[]>([])
let input = $ref('')
// listen to ctrl+/ on windows/linux or cmd+/ on mac
useEventListener('keydown', async (e: KeyboardEvent) => {
if (e.key === '/' && (isMac.value ? e.metaKey : e.ctrlKey)) {
e.preventDefault()
show = true
scopes = []
input = '>'
await nextTick()
inputEl?.focus()
}
})
onKeyStroke('Escape', (e) => {
e.preventDefault()
show = false
}, { target: document })
const commandMode = $computed(() => input.startsWith('>'))
const result = $computed(() => commandMode
? registry.query(scopes.map(s => s.id).join('.'), input.slice(1))
: { length: 0, items: [], grouped: {} })
let active = $ref(0)
watch($$(result), (n, o) => {
if (n.length !== o.length || !n.items.every((i, idx) => i === o.items[idx]))
active = 0
})
const findItemEl = (index: number) =>
resultEl?.querySelector(`[data-index="${index}"]`) as HTMLDivElement | null
const onCommandActivate = (item: QueryIndexedCommand) => {
if (item.onActivate) {
item.onActivate()
show = false
}
else if (item.onComplete) {
scopes.push(item.onComplete())
input = '>'
}
}
const onCommandComplete = (item: QueryIndexedCommand) => {
if (item.onComplete) {
scopes.push(item.onComplete())
input = '>'
}
else if (item.onActivate) {
item.onActivate()
}
}
const intoView = (index: number) => {
const el = findItemEl(index)
if (el)
el.scrollIntoView({ block: 'nearest' })
}
const onKeyDown = (e: KeyboardEvent) => {
switch (e.key) {
case 'ArrowUp': {
e.preventDefault()
active = Math.max(0, active - 1)
intoView(active)
break
}
case 'ArrowDown': {
e.preventDefault()
active = Math.min(result.length - 1, active + 1)
intoView(active)
break
}
case 'Home': {
e.preventDefault()
active = 0
intoView(active)
break
}
case 'End': {
e.preventDefault()
active = result.length - 1
intoView(active)
break
}
case 'Enter': {
e.preventDefault()
const cmd = result.items[active]
if (cmd)
onCommandActivate(cmd)
break
}
case 'Tab': {
e.preventDefault()
const cmd = result.items[active]
if (cmd)
onCommandComplete(cmd)
break
}
case 'Backspace': {
if (input === '>' && scopes.length) {
e.preventDefault()
scopes.pop()
}
break
}
}
}
</script>
<template>
<!-- Overlay -->
<Transition
enter-active-class="transition duration-200 ease-out"
enter-from-class="transform opacity-0"
enter-to-class="transform opacity-100"
leave-active-class="transition duration-100 ease-in"
leave-from-class="transform opacity-100"
leave-to-class="transform opacity-0"
>
<div
v-if="show"
class="z-100 fixed inset-0 opacity-70 bg-base"
@click="show = false"
/>
</Transition>
<!-- Panel -->
<Transition
enter-active-class="transition duration-65 ease-out"
enter-from-class="transform scale-95"
enter-to-class="transform scale-100"
leave-active-class="transition duration-100 ease-in"
leave-from-class="transform scale-100"
leave-to-class="transform scale-95"
>
<div v-if="show" class="z-100 fixed inset-0 grid place-items-center pointer-events-none">
<div
class="flex flex-col w-50vw h-50vh rounded-md bg-base shadow-lg pointer-events-auto"
border="1 base"
>
<!-- Input -->
<label class="flex mx-3 my-1 items-center">
<div mx-1 i-ri:search-line />
<div v-for="scope in scopes" :key="scope.id" class="flex items-center mx-1 gap-2">
<div class="text-sm">{{ scope.display }}</div>
<span class="text-secondary">/</span>
</div>
<input
ref="inputEl"
v-model="input"
class="focus:outline-none flex-1 p-2 rounded bg-base"
placeholder="Search"
@keydown="onKeyDown"
>
<CommandKey name="Escape" />
</label>
<div class="w-full border-b-1 border-base" />
<!-- Results -->
<div ref="resultEl" class="flex-1 mx-1 overflow-y-auto">
<template v-for="[scope, group] in result.grouped" :key="scope">
<div class="mt-2 px-2 py-1 text-sm text-secondary">
{{ scope }}
</div>
<template v-for="cmd in group" :key="cmd.index">
<div
class="flex px-3 py-2 my-1 items-center rounded-lg hover:bg-active transition-all duration-65 ease-in-out cursor-pointer scroll-m-10"
:class="{ 'bg-active': active === cmd.index }"
:data-index="cmd.index"
@click="onCommandActivate(cmd)"
>
<div v-if="cmd.icon" mr-2 :class="cmd.icon" />
<div class="flex-1 flex items-baseline gap-2">
<div :class="{ 'font-medium': active === cmd.index }">
{{ cmd.name }}
</div>
<div v-if="cmd.description" class="text-xs text-secondary">
{{ cmd.description }}
</div>
</div>
<div
v-if="cmd.onComplete"
class="flex items-center gap-1 transition-all duration-65 ease-in-out"
:class="active === cmd.index ? 'opacity-100' : 'opacity-0'"
>
<div class="text-xs text-secondary">
Complete
</div>
<CommandKey name="Tab" />
</div>
<div
v-if="cmd.onActivate"
class="flex items-center gap-1 transition-all duration-65 ease-in-out"
:class="active === cmd.index ? 'opacity-100' : 'opacity-0'"
>
<div class="text-xs text-secondary">
Activate
</div>
<CommandKey name="Enter" />
</div>
</div>
</template>
</template>
</div>
<div class="w-full border-b-1 border-base" />
<!-- Footer -->
<div class="flex items-center px-3 py-1 text-xs">
<div i-ri:lightbulb-flash-line /> Tip: Use
<!-- <CommandKey name="Ctrl+K" /> to search, -->
<CommandKey name="Ctrl+/" /> to activate command mode.
</div>
</div>
</div>
</Transition>
</template>

View file

@ -0,0 +1,7 @@
<script setup lang="ts">
provideGlobalCommands()
</script>
<template>
<CommandPanel />
</template>

View file

@ -1,14 +0,0 @@
<script setup lang="ts">
defineProps<{
increased?: boolean
}>()
</script>
<template>
<div of-hidden h="1.25rem">
<div flex="~ col" transition-transform duration-300 :class="increased ? 'translate-y--1/2' : 'translate-y-0'">
<slot />
<slot name="next" />
</div>
</div>
</template>

View file

@ -1,25 +0,0 @@
<script lang="ts" setup>
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>

View file

@ -0,0 +1,41 @@
import { decode } from 'blurhash'
import { getDataUrlFromArr } from '~/composables/utils'
export default defineComponent({
inheritAttrs: false,
props: {
blurhash: {
type: String,
required: true,
},
src: {
type: String,
required: true,
},
},
setup(props, { attrs }) {
const placeholderSrc = ref<string>()
const isLoaded = ref(false)
onMounted(() => {
const img = document.createElement('img')
isLoaded.value = img.complete
img.onload = () => {
isLoaded.value = true
}
img.src = props.src
setTimeout(() => {
isLoaded.value = true
}, 3_000)
if (props.blurhash) {
const pixels = decode(props.blurhash, 32, 32)
placeholderSrc.value = getDataUrlFromArr(pixels, 32, 32)
}
})
return () => isLoaded.value || !placeholderSrc.value
? h('img', { ...attrs, src: props.src })
: h('img', { ...attrs, src: placeholderSrc.value })
},
})

View file

@ -1,16 +0,0 @@
<script setup lang="ts">
defineOptions({
inheritAttrs: false,
})
const { blurhash = '', src, srcset, 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>

View file

@ -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>

View file

@ -1,103 +0,0 @@
<script lang="ts" setup>
import type { Boundaries } from 'vue-advanced-cropper'
import { Cropper } from 'vue-advanced-cropper'
import 'vue-advanced-cropper/dist/style.css'
export interface Props {
/** Crop frame aspect ratio (width/height), default 1/1 */
stencilAspectRatio?: number
/** The ratio of the longest edge of the cut box to the length of the cut screen, default 0.9, not more than 1 */
stencilSizePercentage?: number
}
const props = withDefaults(defineProps<Props>(), {
stencilAspectRatio: 1 / 1,
stencilSizePercentage: 0.9,
})
const file = defineModel<File | null>()
const cropperDialog = ref(false)
const cropper = ref<InstanceType<typeof Cropper>>()
const cropperFlag = ref(false)
const cropperImage = reactive({
src: '',
type: 'image/jpg',
})
function stencilSize({ boundaries }: { boundaries: Boundaries }) {
return {
width: boundaries.width * props.stencilSizePercentage,
height: boundaries.height * props.stencilSizePercentage,
}
}
watch(file, (file, _, onCleanup) => {
let expired = false
onCleanup(() => expired = true)
if (file && !cropperFlag.value) {
cropperDialog.value = true
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = (e) => {
if (expired)
return
cropperImage.src = e.target?.result as string
cropperImage.type = file.type
}
}
cropperFlag.value = false
})
function cropImage() {
if (cropper.value && file.value) {
cropperFlag.value = true
cropperDialog.value = false
const { canvas } = cropper.value.getResult()
canvas?.toBlob((blob) => {
file.value = new File([blob as any], `cropped${file.value?.name}` as string, { type: blob?.type })
}, cropperImage.type)
}
}
</script>
<template>
<ModalDialog v-model="cropperDialog" :use-v-if="false" max-w-500px flex>
<div flex-1 w-0>
<div text-lg text-center my2 px3>
<h1>
{{ $t('action.edit') }}
</h1>
</div>
<div aspect-ratio-1>
<Cropper
ref="cropper"
class="overflow-hidden w-full h-full"
:src="cropperImage.src"
:resize-image="{
adjustStencil: false,
}"
:stencil-size="stencilSize"
:stencil-props="{
aspectRatio: props.stencilAspectRatio,
movable: false,
resizable: false,
handlers: {},
}"
image-restriction="stencil"
/>
</div>
<div m-4>
<button
btn-solid w-full rounded text-sm
@click="cropImage()"
>
{{ $t('action.confirm') }}
</button>
</div>
</div>
</ModalDialog>
</template>

View file

@ -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>

View file

@ -1,106 +0,0 @@
<script lang="ts" setup>
import { fileOpen } from 'browser-fs-access'
import type { FileWithHandle } from 'browser-fs-access'
const props = withDefaults(defineProps<{
/** The image src before change */
original?: string
/** Allowed file types */
allowedFileTypes?: string[]
/** Allowed file size */
allowedFileSize?: number
imgClass?: string
loading?: boolean
}>(), {
allowedFileTypes: () => ['image/jpeg', 'image/png'],
allowedFileSize: 1024 * 1024 * 5, // 5 MB
})
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(() => props.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: props.allowedFileTypes,
})
if (!props.allowedFileTypes.includes(image.type)) {
emit('error', 1, t('error.unsupported_file_format'))
return
}
else if (image.size > props.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>

View file

@ -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>

View file

@ -1,122 +1,64 @@
<script setup lang="ts" generic="T, O, U = T">
<script setup lang="ts">
// @ts-expect-error missing types
import { DynamicScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import type { mastodon } from 'masto'
import type { UnwrapRef } from 'vue'
import type { Paginator, WsEvents } from 'masto'
const {
paginator,
stream,
eventType,
keyProp = 'id',
virtualScroller = false,
preprocess,
endMessage = true,
} = defineProps<{
paginator: mastodon.Paginator<T[], O>
keyProp?: keyof T
const { paginator, stream, keyProp = 'id', virtualScroller = false } = defineProps<{
paginator: Paginator<any, any[]>
keyProp?: string
virtualScroller?: boolean
stream?: mastodon.streaming.Subscription
eventType?: 'update' | 'notification'
preprocess?: (items: (U | T)[]) => U[]
endMessage?: boolean | string
stream?: WsEvents
}>()
defineSlots<{
default: (props: {
items: U[]
item: U
index: number
default: {
item: any
active?: boolean
older: U
newer: U // newer is undefined when index === 0
}) => void
items: (props: {
items: UnwrapRef<U[]>
}) => void
updater: (props: {
}
updater: {
number: number
update: () => void
}) => void
loading: (props: object) => void
done: (props: { items: U[] }) => void
}
loading: {}
}>()
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 })
const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, stream)
</script>
<template>
<div>
<slot v-if="prevItems.length" name="updater" v-bind="{ number: prevItems.length, update }" />
<slot name="items" :items="items">
<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>
<template v-if="virtualScroller">
<DynamicScroller
v-slot="{ item, active }"
:items="items"
:min-item-size="200"
:key-field="keyProp"
page-mode
>
<slot :item="item" :active="active" />
</DynamicScroller>
</template>
<template v-else>
<slot
v-for="item of items"
:key="item[keyProp]"
:item="item"
/>
</template>
<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 p5 text-center flex="~ col" items-center animate-pulse>
<div text-secondary i-ri:loader-2-fill animate-spin text-2xl />
<span text-secondary>Loading...</span>
</div>
</slot>
<div v-else-if="state === 'done'" p5 text-secondary italic text-center>
{{ $t('common.end_of_list') }}
</div>
<div v-else-if="state === 'error'" p5 text-secondary>
{{ t('common.error') }}: {{ error }}
{{ $t('common.error') }}: {{ error }}
</div>
</div>
</template>

View file

@ -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>

View file

@ -1,35 +0,0 @@
<script setup lang="ts">
defineProps<{
label: string
value: any
hover?: boolean
}>()
const modelValue = defineModel()
</script>
<template>
<label
class="common-radio 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"
@click.prevent="modelValue = value"
>
<span flex-1 ms-2 pointer-events-none>{{ label }}</span>
<span
:class="modelValue === value ? 'i-ri:radio-button-line' : 'i-ri:checkbox-blank-circle-line'"
aria-hidden="true"
/>
<input
v-model="modelValue"
type="radio"
:value="value"
sr-only
>
</label>
</template>
<style>
.common-radio:focus-within {
outline: none;
border-bottom: 1px solid var(--c-text-base);
}
</style>

View file

@ -1,86 +0,0 @@
<script setup lang="ts">
import type { CommonRouteTabMoreOption, CommonRouteTabOption } from '~/types'
const { options, command, replace, preventScrollTop = false, moreOptions } = 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 || '&nbsp;' }}</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" no-auto-focus :content="moreOptions.tooltip || t('action.more')">
<button
cursor-pointer
flex
gap-1
w-12
rounded
hover:bg-active
btn-action-icon
op75
px4
group
:aria-label="t('action.more')"
:class="moreOptions.match ? 'text-primary' : 'text-secondary'"
>
<span v-if="moreOptions.icon" :class="moreOptions.icon" text-sm me--1 block />
<span i-ri:arrow-down-s-line text-sm me--1 block />
</button>
</CommonTooltip>
<template #popper>
<NuxtLink
v-for="(option, index) in moreOptions.options.filter(item => !item.hide)"
:key="option?.name || index"
:to="option.to"
>
<CommonDropdownItem>
<span flex="~ row" gap-x-4 items-center :class="option.match ? 'text-primary' : ''">
<span v-if="option.icon" :class="[option.icon, option.match ? 'text-primary' : 'text.secondary']" text-md me--1 block />
<span v-else block>&#160;</span>
<span>{{ option.display }}</span>
</span>
</CommonDropdownItem>
</NuxtLink>
</template>
</commondropdown>
</template>
</div>
</template>

View file

@ -1,21 +0,0 @@
<script setup lang="ts">
const { as = 'div', active } = defineProps<{
as: any
active: boolean
}>()
const el = ref()
watch(() => active, (active) => {
const _el = unrefElement(el)
if (active && _el)
_el.scrollIntoView({ block: 'nearest', inline: 'start' })
})
</script>
<template>
<component :is="as" ref="el">
<slot />
</component>
</template>

View file

@ -8,9 +8,11 @@ const { options, command } = defineProps<{
command?: boolean
}>()
const modelValue = defineModel<string>({ required: true })
const { modelValue } = defineModel<{
modelValue: string
}>()
const tabs = computed(() => {
const tabs = $computed(() => {
return options.map((option) => {
if (typeof option === 'string')
return { name: option, display: option }
@ -19,12 +21,12 @@ const tabs = computed(() => {
})
})
function toValidName(option: string) {
return option.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-')
function toValidName(otpion: string) {
return otpion.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-')
}
useCommands(() => command
? tabs.value.map(tab => ({
? tabs.map(tab => ({
scope: 'Tabs',
name: tab.display,
@ -49,12 +51,12 @@ useCommands(() => command
><label
flex flex-auto cursor-pointer px3 m1 rounded transition-all
:for="`tab-${toValidName(option.name)}`"
tabindex="0"
tabindex="1"
hover:bg-active transition-100
@keypress.enter="modelValue = option.name"
><span
mxa px4 py3 text-center border-b-3
:class="modelValue === option.name ? 'font-bold border-primary' : 'op50 hover:op50 border-transparent'"
mxa px4 py3 text-center
:class="modelValue === option.name ? 'font-bold border-b-3 border-primary' : 'op50 hover:op50'"
>{{ option.display }}</span>
</label>
</template>

View file

@ -1,18 +1,12 @@
<script setup lang="ts">
import type { Popper as VTooltipType } from 'floating-vue'
export interface Props extends Partial<typeof VTooltipType> {
defineProps<{
content?: string
}
defineProps<Props>()
}>()
</script>
<template>
<VTooltip
v-if="isHydrated"
v-bind="$attrs"
auto-hide
>
<slot />
<template #popper>

View file

@ -1,23 +0,0 @@
<script lang="ts" setup>
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>

View file

@ -1,33 +0,0 @@
<script lang="ts" setup>
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>

View file

@ -1,26 +0,0 @@
<script setup lang="ts">
defineOptions({
inheritAttrs: false,
})
const props = defineProps<{
count: number
keypath: string
}>()
const { formatHumanReadableNumber, formatNumber, forSR } = useHumanReadableNumber()
const useSR = computed(() => forSR(props.count))
const rawNumber = computed(() => formatNumber(props.count))
const humanReadableNumber = computed(() => formatHumanReadableNumber(props.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>

View file

@ -1,14 +0,0 @@
<script setup lang="ts">
const online = useOnline()
</script>
<template>
<div
v-if="!online"
w-full min-h-30px px4 py3 text-primary bg-base
border="t base" flex="~ gap-2 center"
>
<div i-ri:wifi-off-line />
{{ $t('common.offline_desc') }}
</div>
</template>

View file

@ -1,28 +1,15 @@
<script setup lang="ts">
import { InjectionKeyDropdownContext } from '~/constants/symbols'
import { dropdownContextKey } from './ctx'
defineProps<{
placement?: string
autoBoundaryMaxSize?: boolean
}>()
const dropdown = $ref<any>()
const dropdown = ref<any>()
const colorMode = useColorMode()
function hide() {
return dropdown.value.hide()
}
provide(InjectionKeyDropdownContext, {
hide,
})
defineExpose({
hide,
provide(dropdownContextKey, {
hide: () => dropdown.hide(),
})
</script>
<template>
<VDropdown v-bind="$attrs" ref="dropdown" :class="colorMode.value" :placement="placement || 'auto'" :auto-boundary-max-size="autoBoundaryMaxSize">
<VDropdown v-bind="$attrs" ref="dropdown" :class="{ dark: isDark }">
<slot />
<template #popper="scope">
<slot name="popper" v-bind="scope" />

View file

@ -1,21 +1,20 @@
<script setup lang="ts">
const props = withDefaults(defineProps<{
is?: string
import { dropdownContextKey } from './ctx'
const props = defineProps<{
text?: string
description?: string
icon?: string
checked?: boolean
command?: boolean
}>(), {
is: 'div',
})
}>()
const emit = defineEmits(['click'])
const { hide } = useDropdownContext() || {}
const { hide } = inject(dropdownContextKey, undefined) || {}
const el = ref<HTMLDivElement>()
function handleClick(evt: MouseEvent) {
const handleClick = (evt: MouseEvent) => {
hide?.()
emit('click', evt)
}
@ -42,15 +41,10 @@ useCommand({
</script>
<template>
<component
v-bind="$attrs"
:is="is"
ref="el"
w-full
<div
v-bind="$attrs" ref="el"
flex gap-3 items-center cursor-pointer px4 py3
select-none
hover-bg-active
:aria-label="text"
@click="handleClick"
>
<div v-if="icon" :class="icon" />
@ -73,5 +67,5 @@ useCommand({
<div v-if="checked" i-ri:check-line />
<slot name="actions" />
</component>
</div>
</template>

View file

@ -0,0 +1,5 @@
import type { InjectionKey } from 'vue'
export const dropdownContextKey: InjectionKey<{
hide: () => void
}> = Symbol('dropdownContextKey')

View file

@ -1,10 +1,10 @@
<script setup lang="ts">
const props = defineProps<{
code: string
lang?: string
lang: string
}>()
const raw = computed(() => decodeURIComponent(props.code).replace(/&#39;/g, '\''))
const raw = $computed(() => decodeURIComponent(props.code).replace(/&#39;/g, '\''))
const langMap: Record<string, string> = {
js: 'javascript',
@ -13,11 +13,10 @@ const langMap: Record<string, string> = {
}
const highlighted = computed(() => {
return props.lang ? highlightCode(raw.value, (langMap[props.lang] || props.lang) as any) : raw
return props.lang ? highlightCode(raw, langMap[props.lang] || props.lang as any) : raw
})
</script>
<template>
<pre v-if="lang" class="code-block" v-html="highlighted" />
<pre v-else class="code-block">{{ raw }}</pre>
<pre class="code-block" v-html="highlighted" />
</template>

View file

@ -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>

View file

@ -1,29 +1,17 @@
import type { mastodon } from 'masto'
import type { Emoji } from 'masto'
import { emojisArrayToObject } from '~/composables/utils'
defineOptions({
name: 'ContentRich',
})
const {
content,
emojis,
hideEmojis = false,
markdown = true,
} = defineProps<{
const props = defineProps<{
content: string
emojis?: mastodon.v1.CustomEmoji[]
hideEmojis?: boolean
markdown?: boolean
emojis?: Emoji[]
}>()
const emojisObject = useEmojisFallback(() => emojis)
export default () => h(
'span',
{ class: 'content-rich', dir: 'auto' },
contentToVNode(content, {
emojis: emojisObject.value,
hideEmojis,
markdown,
}),
{ class: 'content-rich' },
contentToVNode(props.content, emojisArrayToObject(props.emojis || [])),
)

View file

@ -1,26 +1,17 @@
<script setup lang="ts">
import type { mastodon } from 'masto'
import type { Conversation } from 'masto'
const { conversation } = defineProps<{
conversation: mastodon.v1.Conversation
const props = defineProps<{
conversation: Conversation
}>()
const withAccounts = computed(() =>
conversation.accounts.filter(account => account.id !== conversation.lastStatus?.account.id),
)
</script>
<template>
<article v-if="conversation.lastStatus" flex flex-col gap-2>
<StatusCard v-if="conversation.lastStatus" :status="conversation.lastStatus" :actions="false">
<template #meta>
<div flex gap-2 text-sm text-secondary font-bold>
<p me-1>
{{ $t('conversation.with') }}
</p>
<AccountAvatar v-for="account in withAccounts" :key="account.id" h-5 w-5 :account="account" />
</div>
</template>
</StatusCard>
<article flex flex-col gap-2>
<div flex gap-2 flex-wrap text-sm px-2>
with
<AccountInlineInfo v-for="account in conversation.accounts" :key="account.id" :account="account" />
</div>
<StatusCard v-if="conversation.lastStatus" :status="conversation.lastStatus" :actions="false" />
</article>
</template>

View file

@ -1,20 +1,13 @@
<script setup lang="ts">
import type { mastodon } from 'masto'
import type { Conversation, Paginator } from 'masto'
const { paginator } = defineProps<{
paginator: mastodon.Paginator<mastodon.v1.Conversation[], mastodon.DefaultPaginationParams>
paginator: Paginator<any, Conversation[]>
}>()
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">
<CommonPaginator :paginator="paginator">
<template #default="{ item }">
<ConversationCard
:conversation="item"

View file

@ -1,30 +0,0 @@
<script setup lang="ts">
const { as, alt, dataEmojiId } = defineProps<{
as: string
alt?: string
dataEmojiId?: string
}>()
const title = ref<string | undefined>()
if (alt) {
if (alt.startsWith(':')) {
title.value = alt.replace(/:/g, '')
}
else {
import('node-emoji').then(({ find }) => {
title.value = find(alt)?.key.replace(/_/g, ' ')
})
}
}
// if it has a data-emoji-id, use that as the title instead
if (dataEmojiId)
title.value = dataEmojiId
</script>
<template>
<component :is="as" v-bind="$attrs" :alt="alt" :data-emoji-id="dataEmojiId" :title="title">
<slot />
</component>
</template>

View file

@ -1,52 +1,76 @@
<script setup lang="ts">
interface Team {
github: string
display: string
twitter: string
mastodon: string
}
const emit = defineEmits<{
(event: 'close'): void
}>()
const vAutoFocus = (el: HTMLElement) => el.focus()
const teams: Team[] = [
{
github: 'antfu',
display: 'Anthony Fu',
twitter: 'antfu7',
mastodon: 'antfu@mas.to',
},
{
github: 'patak-dev',
display: 'Patak',
twitter: 'patak_dev',
mastodon: 'patak@mas.to',
},
{
github: 'danielroe',
display: 'Daniel Roe',
twitter: 'danielcroe',
mastodon: 'daniel@daniel.roe',
},
{
github: 'sxzz',
display: 'sxzz',
twitter: 'sxzz',
mastodon: 'sxzz@mas.to',
},
].sort(() => Math.random() - 0.5)
</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="Close" @click="emit('close')">
<span i-ri:close-line />
<div p8 flex="~ col gap-4" relative max-h-screen of-auto>
<button btn-action-icon absolute top-0 right-0 m1 @click="emit('close')">
<div i-ri:close-fill />
</button>
<img :alt="$t('app_logo')" :src="`/${''}logo.svg`" w-20 h-20 height="80" width="80" mxa class="rtl-flip">
<img src="/logo.svg" w-20 h-20 mxa alt="logo">
<h1 mxa text-4xl mb4>
{{ $t('help.title') }}
Elk is in Preview!
</h1>
<p>
{{ $t('help.desc_para1') }}
Thank you for interested in trying out Elk, our working in progress generic Mastodon client!
</p>
<p>
<b text-primary>{{ $t('help.desc_highlight') }}</b>
{{ $t('help.desc_para2') }}
<b text-primary>You shall expect to see some features missing or some bugs here and there.</b>
We are working hard to make develop and improve it.
And we will soon invite you to join the force once we make it open source soon!
</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') }}
Before that, to help boosting out development, you can sponsor our team members with the links below.
</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>
<p flex="~ gap-2 wrap" mxa>
<template v-for="team of teams" :key="team.github">
<a :href="`https://github.com/sponsors/${team.github}`" target="_blank" rounded-full>
<img :src="`https://github.com/${team.github}.png`" :alt="team.display" rounded-full w-15 h-15>
</a>
</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 italic text-2xl>
<span text-lg font-script>The Elk Team</span>
</p>
<button type="button" btn-solid mxa @click="emit('close')">
<button btn-solid mxa @click="emit('close')">
{{ $t('action.enter_app') }}
</button>
</div>

View file

@ -1,55 +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 {
isRemoved.value
? await client.v1.lists.$select(list).accounts.create({ accountIds: [account.id] })
: 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'"
no-auto-focus
>
<button
text-sm p2 border-1 transition-colors
border-dark
btn-action-icon
@click="edit"
>
<span :class="isRemoved ? 'i-ri:user-add-line' : 'i-ri:user-unfollow-line'" />
</button>
</CommonTooltip>
</div>
</div>
</template>

View file

@ -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
reset()
await nextTick()
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')" no-auto-focus>
<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')" no-auto-focus>
<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')" no-auto-focus>
<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')" no-auto-focus>
<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')" no-auto-focus>
<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>

View file

@ -1,53 +0,0 @@
<script lang="ts" setup>
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 :end-message="false" :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>
</CommonPaginator>
</template>

View file

@ -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>

View file

@ -1,69 +1,31 @@
<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 relative>
<div
sticky top-0 z10
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'),
}"
border="b base" bg-base
:class="isZenMode ? 'op0 hover:op100 transition duration-300' : ''"
>
<div flex justify-between px5 py2 :class="{ 'xl:hidden': $route.name !== 'tag' }" class="native:xl:flex" border="b base">
<div flex gap-3 items-center :overflow-hidden="!noOverflowHidden ? '' : false" py2 w-full>
<NuxtLink
v-if="backOnSmallScreen || back" flex="~ gap1" items-center btn-text p-0 xl:hidden
:aria-label="$t('nav.back')"
@click="$router.go(-1)"
>
<div i-ri:arrow-left-line class="rtl-flip" />
<div flex justify-between px5 py4>
<div flex gap-3 items-center>
<NuxtLink v-if="back" flex="~ gap1" items-center btn-text p-0 @click="$router.go(-1)">
<div i-ri:arrow-left-line />
</NuxtLink>
<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 />
<slot name="title" />
<div h-7 w-1px />
</div>
<div flex items-center flex-shrink-0 gap-x-2>
<div flex items-center>
<slot name="actions" />
<PwaBadge xl:hidden />
<NavUser v-if="isHydrated" />
<NavUserSkeleton v-else />
<NavUser v-if="isSmallScreen" />
</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 />
<slot name="header" />
</div>
<slot />
</div>
</template>

View file

@ -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>

View file

@ -1,57 +0,0 @@
<script setup lang="ts">
import type { ConfirmDialogChoice, ConfirmDialogOptions } from '~/types'
import DurationPicker from '~/components/modal/DurationPicker.vue'
const props = 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(() => props.extraOptionType === 'mute')
function handleChoice(choice: ConfirmDialogChoice['choice']) {
const dialogChoice = {
choice,
...isMute.value && {
extraOptions: {
mute: {
duration: hasDuration.value ? duration.value : 0,
notifications: shouldMuteNotifications.value,
},
},
},
}
emit('choice', dialogChoice)
}
</script>
<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" />
<DurationPicker v-if="hasDuration" v-model="duration" v-model:is-valid="isValidDuration" />
<CommonCheckbox v-model="shouldMuteNotifications" :label="$t('confirm.mute_account.notifications')" prepend-checkbox checked-icon-color="text-primary" />
</div>
<div flex justify-end gap-2>
<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>

View file

@ -1,110 +1,27 @@
<script setup lang="ts">
import type { mastodon } from 'masto'
import type { ConfirmDialogChoice } from '~/types'
import {
isCommandPanelOpen,
isConfirmDialogOpen,
isEditHistoryDialogOpen,
isErrorDialogOpen,
isFavouritedBoostedByDialogOpen,
isKeyboardShortcutsDialogOpen,
isMediaPreviewOpen,
isImagePreviewDialogOpen,
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
@close="handlePublishClose"
>
<!-- This `w-0` style is used to avoid overflow problems in flex layoutsso don't remove it unless you know what you're doing -->
<PublishWidget
v-if="dialogDraftKey"
:draft-key="dialogDraftKey" expanded flex-1 w-0
@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>
<ModalDialog v-model="isSigninDialogOpen">
<UserSignIn m6 />
</ModalDialog>
<ModalDialog v-model="isPreviewHelpOpen" :type="isSmallScreen ? 'bottom' : 'dialog'">
<HelpPreview @close="closePreviewHelp()" />
</ModalDialog>
<ModalDialog v-model="isPublishDialogOpen">
<PublishWidget :draft-key="dialogDraftKey" expanded min-w-180 />
</ModalDialog>
<ModalDialog v-model="isImagePreviewDialogOpen">
<img :src="imagePreview.src" :alt="imagePreview.alt" max-w-95vw max-h-95vh>
</ModalDialog>
<ModalDialog v-model="isEditHistoryDialogOpen">
<StatusEditPreview :edit="statusEdit" />
</ModalDialog>
</template>

View file

@ -1,219 +1,133 @@
<script lang="ts" setup>
<script setup lang='ts'>
import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
export interface Props {
/**
* level of depth
*
* @default 100
*/
zIndex?: number
type DialogType = 'top' | 'right' | 'bottom' | 'left' | 'dialog'
/**
* whether to allow close dialog by clicking mask layer
*
* @default true
*/
closeByMask?: boolean
/**
* use v-if, destroy all the internal elements after closed
*
* @default true
*/
useVIf?: boolean
/**
* keep the dialog opened even when in other views
*
* @default false
*/
keepAlive?: boolean
/**
* The aria-labelledby id for the dialog.
*/
dialogLabelledBy?: string
}
defineOptions({
inheritAttrs: false,
})
const props = withDefaults(defineProps<Props>(), {
zIndex: 100,
closeByMask: true,
useVIf: true,
keepAlive: false,
})
const emit = defineEmits<{
/** v-model dialog visibility */
(event: 'close'): void
const {
type = 'dialog',
} = defineProps<{
type?: DialogType
}>()
const visible = defineModel<boolean>({ required: true })
const { modelValue } = defineModel<{
modelValue: boolean
closeButton?: boolean
}>()
const deactivated = useDeactivated()
const route = useRoute()
const userSettings = useUserSettings()
let isVisible = $ref(modelValue.value)
let isOut = $ref(!modelValue.value)
/** scrollable HTML element */
const elDialogMain = ref<HTMLDivElement>()
const elDialogRoot = ref<HTMLDivElement>()
const { activate } = useFocusTrap(elDialogRoot, {
immediate: false,
allowOutsideClick: true,
clickOutsideDeactivates: true,
escapeDeactivates: true,
preventScroll: true,
returnFocusOnDeactivate: true,
const positionClass = computed(() => {
switch (type) {
case 'dialog':
return 'border rounded top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2'
case 'bottom':
return 'bottom-0 left-0 right-0 border-t'
case 'top':
return 'top-0 left-0 right-0 border-b'
case 'left':
return 'bottom-0 left-0 top-0 border-r'
case 'right':
return 'bottom-0 top-0 right-0 border-l'
default:
return ''
}
})
defineExpose({
elDialogRoot,
elDialogMain,
const transformClass = computed(() => {
if (isOut) {
switch (type) {
case 'dialog':
return 'op0'
case 'bottom':
return 'translate-y-[100%]'
case 'top':
return 'translate-y-[100%]'
case 'left':
return 'translate-x-[-100%]'
case 'right':
return 'translate-x-[100%]'
default:
return ''
}
}
})
/** close the dialog */
const target = ref<HTMLElement | null>(null)
const { activate, deactivate } = useFocusTrap(target)
function close() {
if (!visible.value)
return
visible.value = false
emit('close')
modelValue.value = false
}
function clickMask() {
if (props.closeByMask)
close()
}
const routePath = ref(route.path)
watch(visible, (value) => {
if (value)
routePath.value = route.path
watchEffect(() => {
if (modelValue)
activate()
else
deactivate()
})
const notInCurrentPage = computed(() => deactivated.value || routePath.value !== route.path)
watch(notInCurrentPage, (value) => {
if (props.keepAlive)
return
if (value)
close()
})
// controls the state of v-if.
// when useVIf is toggled, v-if has the same state as modelValue, otherwise v-if is true
const isVIf = computed(() => {
return props.useVIf
? visible.value
: true
})
// controls the state of v-show.
// when useVIf is toggled, v-show is true, otherwise it has the same state as modelValue
const isVShow = computed(() => {
return !props.useVIf
? visible.value
: true
})
function bindTypeToAny($attrs: any) {
return $attrs as any
}
function trapFocusDialog() {
if (isVShow.value)
nextTick().then(() => activate())
}
useEventListener('keydown', (e: KeyboardEvent) => {
if (!visible.value)
if (!modelValue.value)
return
if (e.key === 'Escape') {
close()
e.preventDefault()
}
})
watch(modelValue, async (v) => {
if (v) {
isOut = true
isVisible = true
setTimeout(() => {
isOut = false
}, 10)
}
else {
isOut = true
}
})
function onTransitionEnd() {
if (!modelValue.value)
isVisible = false
}
</script>
<template>
<Teleport to="body">
<!-- Dialog component -->
<Transition name="dialog-visible" @transitionend="trapFocusDialog">
<SafeTeleport to="#teleport-end">
<div
v-if="isVisible"
class="scrollbar-hide"
fixed top-0 bottom-0 left-0 right-0 z-10 overscroll-none overflow-y-scroll
:class="modelValue ? '' : 'pointer-events-none'"
>
<!-- The style `scrollbar-hide overscroll-none overflow-y-scroll` and `h="[calc(100%+0.5px)]"` is used to implement scroll locking, -->
<!-- corresponding to issue: #106, so please don't remove it. -->
<div
v-if="isVIf"
v-show="isVShow"
ref="elDialogRoot"
aria-modal="true"
:aria-labelledby="dialogLabelledBy"
:style="{
'z-index': zIndex,
}"
fixed inset-0 of-y-auto scrollbar-hide overscroll-none
bg-base bottom-0 left-0 right-0 top-0 absolute transition-opacity duration-500 ease-out
h="[calc(100%+0.5px)]"
:class="isOut ? 'opacity-0' : 'opacity-85'"
@click="close"
/>
<div
ref="target"
bg-base border-base absolute transition-all duration-200 ease-out transform
:class="`${positionClass} ${transformClass}`"
@transitionend="onTransitionEnd"
>
<!-- The style `scrollbar-hide overscroll-none overflow-y-scroll` and `h="[calc(100%+0.5px)]"` is used to implement scroll locking, -->
<!-- corresponding to issue: #106, so please don't remove it. -->
<!-- Mask layer: blur -->
<div
class="dialog-mask"
:class="{
'backdrop-blur-sm': !getPreferences(userSettings, 'optimizeForLowPerformanceDevice'),
}"
absolute inset-0 z-0 bg-transparent opacity-100 backdrop-filter touch-none
/>
<!-- Mask layer: dimming -->
<div class="dialog-mask" absolute inset-0 z-0 bg-black opacity-48 touch-none h="[calc(100%+0.5px)]" @click="clickMask" />
<!-- Dialog container -->
<div class="p-safe-area" absolute inset-0 z-1 pointer-events-none opacity-100 flex>
<div flex-1 flex items-center justify-center p-4>
<!-- We use `class` here to make v-bind being able to be override them -->
<div
ref="elDialogMain"
class="dialog-main rounded shadow-lg pointer-events-auto isolate bg-base border-base border-1px border-solid w-full max-h-full of-y-auto overscroll-contain touch-pan-y touch-pan-x"
v-bind="bindTypeToAny($attrs)"
>
<slot />
</div>
</div>
</div>
<slot />
</div>
</Transition>
</Teleport>
</div>
</SafeTeleport>
</template>
<style lang="postcss" scoped>
.dialog-visible-enter-active,
.dialog-visible-leave-active {
transition-duration: 0.25s;
.dialog-mask {
transition: opacity 0.25s ease;
}
.dialog-main {
transition: opacity 0.25s ease, transform 0.25s ease;
}
<style socped>
.scrollbar-hide {
scrollbar-width: none;
}
.dialog-visible-enter-from,
.dialog-visible-leave-to {
.dialog-mask {
opacity: 0;
}
.dialog-main {
transform: translateY(50px);
opacity: 0;
}
}
.p-safe-area {
padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
</style>

View file

@ -1,31 +0,0 @@
<script setup lang="ts">
import type { ErrorDialogData } from '~/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>

View file

@ -1,81 +0,0 @@
<script setup lang="ts">
const emit = defineEmits(['close'])
const locked = useScrollLock(document.body)
// Use to avoid strange error when directlying assigning to v-model on ModelMediaPreviewCarousel
const index = mediaPreviewIndex
const current = computed(() => mediaPreviewList.value[mediaPreviewIndex.value])
const hasNext = computed(() => index.value < mediaPreviewList.value.length - 1)
const hasPrev = computed(() => index.value > 0)
const keys = useMagicKeys()
whenever(keys.arrowLeft, prev)
whenever(keys.arrowRight, next)
function next() {
if (hasNext.value)
index.value++
}
function prev() {
if (hasPrev.value)
index.value--
}
function onClick(e: MouseEvent) {
const path = e.composedPath() as HTMLElement[]
const el = path.find(el => ['A', 'BUTTON', 'IMG', 'VIDEO', 'P'].includes(el.tagName?.toUpperCase()))
if (!el)
emit('close')
}
onMounted(() => locked.value = true)
onUnmounted(() => locked.value = false)
</script>
<template>
<div relative h-full w-full flex pt-12 @click="onClick">
<button
v-if="hasNext" pointer-events-auto btn-action-icon bg="black/20" :aria-label="$t('action.previous')"
hover:bg="black/40" dark:bg="white/30" dark-hover:bg="white/20" absolute top="1/2" right-1 z5
:title="$t('action.next')" @click="next"
>
<div i-ri:arrow-right-s-line text-white />
</button>
<button
v-if="hasPrev" pointer-events-auto btn-action-icon bg="black/20" aria-label="action.next"
hover:bg="black/40" dark:bg="white/30" dark:hover-bg="white/20" absolute top="1/2" left-1 z5
:title="$t('action.prev')" @click="prev"
>
<div i-ri:arrow-left-s-line text-white />
</button>
<div flex="~ col center" h-full w-full>
<ModalMediaPreviewCarousel v-model="index" :media="mediaPreviewList" @close="emit('close')" />
<div bg="black/30" dark:bg="white/10" mb-6 mt-4 text-white rounded-full flex="~ center shrink-0" overflow-hidden>
<div v-if="mediaPreviewList.length > 1" p="y-1 x-3" rounded-r-0 shrink-0>
{{ index + 1 }} / {{ mediaPreviewList.length }}
</div>
<p
v-if="current.description" bg="dark/30" dark:bg="white/10" p="y-1 x-3" rounded-ie-full line-clamp-1
ws-pre-wrap break-all :title="current.description" w-full
>
{{ current.description }}
</p>
</div>
</div>
<div absolute top-0 w-full flex justify-end>
<button
btn-action-icon bg="black/30" aria-label="action.close" hover:bg="black/40" dark:bg="white/30"
dark:hover-bg="white/20" pointer-events-auto shrink-0 @click="emit('close')"
>
<div i-ri:close-line text-white />
</button>
</div>
</div>
</template>

Some files were not shown because too many files have changed in this diff Show more