Merge branch 'elk-zone:main' into main

pull/3389/head
Adityawarman Dewa Putra 2025-07-02 11:28:35 +07:00 zatwierdzone przez GitHub
commit 067a0df25e
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: B5690EEEBB952194
471 zmienionych plików z 28709 dodań i 16081 usunięć

Wyświetl plik

@ -1,15 +0,0 @@
*.css
*.png
*.ico
*.toml
*.patch
*.txt
Dockerfile
public/
public-dev/
public-staging/
https-dev-config/localhost.crt
https-dev-config/localhost.key
Dockerfile
elk-translation-status.json
docs/translation-status.json

Wyświetl plik

@ -1,19 +0,0 @@
{
"extends": "@antfu",
"ignorePatterns": ["!pages/public"],
"overrides": [
{
"files": ["locales/**.json"],
"rules": {
"jsonc/sort-keys": "error"
}
}
],
"rules": {
"vue/no-restricted-syntax":["error", {
"selector": "VElement[name='a']",
"message": "Use NuxtLink instead."
}],
"n/prefer-global/process": "off"
}
}

1
.gitattributes vendored 100644
Wyświetl plik

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

Wyświetl plik

@ -2,4 +2,4 @@
name: 🚀 New feature proposal name: 🚀 New feature proposal
about: Propose a new feature about: Propose a new feature
labels: 's: pending triage' labels: 's: pending triage'
--- ---

Wyświetl plik

@ -40,7 +40,6 @@
"groupName": "lint", "groupName": "lint",
"matchPackageNames": [ "matchPackageNames": [
"@antfu/eslint-config", "@antfu/eslint-config",
"@types/prettier",
"eslint", "eslint",
"prettier" "prettier"
] ]

Wyświetl plik

@ -18,11 +18,13 @@ jobs:
steps: steps:
- uses: actions/checkout@v4 - uses: actions/checkout@v4
- run: corepack enable # workaround for npm registry key change
- uses: actions/setup-node@v4 # ref. `pnpm@10.1.0` / `pnpm@9.15.4` cannot be installed due to key id mismatch · Issue #612 · nodejs/corepack
# - https://github.com/nodejs/corepack/issues/612#issuecomment-2629496091
- run: npm i -g corepack@latest && corepack enable
- uses: actions/setup-node@v4.4.0
with: with:
node-version: 18 node-version-file: .nvmrc
cache: pnpm
- name: 📦 Install dependencies - name: 📦 Install dependencies
run: pnpm install --frozen-lockfile run: pnpm install --frozen-lockfile
@ -32,6 +34,7 @@ jobs:
- name: 🧪 Test project - name: 🧪 Test project
run: pnpm test:ci run: pnpm test:ci
timeout-minutes: 10
- name: 📝 Lint - name: 📝 Lint
run: pnpm lint run: pnpm lint

Wyświetl plik

@ -35,10 +35,10 @@ jobs:
username: ${{ github.actor }} username: ${{ github.actor }}
password: ${{ github.token }} password: ${{ github.token }}
- name: Build and push - name: Build and push
uses: docker/build-push-action@v5 uses: docker/build-push-action@v6
with: with:
context: . context: .
platforms: linux/amd64 platforms: linux/amd64,linux/arm64
push: ${{ github.event_name != 'pull_request' }} push: ${{ github.event_name != 'pull_request' }}
tags: ${{ steps.metal.outputs.tags }} tags: ${{ steps.metal.outputs.tags }}
labels: ${{ steps.metal.outputs.labels }} labels: ${{ steps.metal.outputs.labels }}

Wyświetl plik

@ -19,7 +19,7 @@ jobs:
- name: Set node - name: Set node
uses: actions/setup-node@v4 uses: actions/setup-node@v4
with: with:
node-version: 18 node-version-file: .nvmrc
- run: npx changelogithub - run: npx changelogithub
env: env:

Wyświetl plik

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

1
.npmrc
Wyświetl plik

@ -1,3 +1,4 @@
shamefully-hoist=true shamefully-hoist=true
shell-emulator=true shell-emulator=true
ignore-workspace-root-check=true ignore-workspace-root-check=true
package-manager-strict=false

2
.nvmrc
Wyświetl plik

@ -1 +1 @@
20 22

45
.vscode/settings.json vendored
Wyświetl plik

@ -5,10 +5,6 @@
"unmute", "unmute",
"unstorage" "unstorage"
], ],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": false,
"files.associations": { "files.associations": {
"*.css": "postcss" "*.css": "postcss"
}, },
@ -23,7 +19,44 @@
"i18n-ally.preferredDelimiter": "_", "i18n-ally.preferredDelimiter": "_",
"i18n-ally.sortKeys": true, "i18n-ally.sortKeys": true,
"i18n-ally.sourceLanguage": "en", "i18n-ally.sourceLanguage": "en",
// Enable the ESlint flat config support
"eslint.experimental.useFlatConfig": true,
// Disable the default formatter, use eslint instead
"prettier.enable": false, "prettier.enable": false,
"volar.completion.preferredTagNameCase": "pascal", "editor.formatOnSave": false,
"volar.completion.preferredAttrNameCase": "kebab"
// Auto fix
"editor.codeActionsOnSave": {
"source.fixAll": "explicit",
"source.organizeImports": "never"
},
// Silent the stylistic rules in you IDE, but still auto fix them
"eslint.rules.customizations": [
{ "rule": "style/*", "severity": "off" },
{ "rule": "*-indent", "severity": "off" },
{ "rule": "*-spacing", "severity": "off" },
{ "rule": "*-spaces", "severity": "off" },
{ "rule": "*-order", "severity": "off" },
{ "rule": "*-dangle", "severity": "off" },
{ "rule": "*-newline", "severity": "off" },
{ "rule": "*quotes", "severity": "off" },
{ "rule": "*semi", "severity": "off" }
],
// Enable eslint for all supported languages
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"html",
"markdown",
"json",
"jsonc",
"yaml"
]
} }

Wyświetl plik

@ -6,23 +6,16 @@ Refer also to https://github.com/antfu/contribute.
For guidelines on contributing to the documentation, refer to the [docs README](./docs/README.md). 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 ### Local Setup
To develop and test the Elk package: 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. 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). 2. Ensure using the LTS version of Node.js.
If you have [nvm](https://github.com/nvm-sh/nvm), you can run `nvm i` to install the required version. If you have [nvm](https://github.com/nvm-sh/nvm), you can run `nvm i` to install the required version.
3. The package manager used to install and link dependencies must be [pnpm](https://pnpm.io/) v9. To use it you must first enable [Corepack](https://github.com/nodejs/corepack) by running `corepack enable`. (Note: on Linux in a standard Node 20+ environment, you should follow the instructions to install via Node's `corepack` rather than using the `curl` command)
3. The package manager used to install and link dependencies must be [pnpm](https://pnpm.io/) v7. To use it you must first enable [Corepack](https://github.com/nodejs/corepack) by running `corepack enable`. (Note: on Linux in a standard Node 16+ environment, you should follow the instructions to install via Node's `corepack` rather than using the `curl` command)
4. Check out a branch where you can work and commit your changes: 4. Check out a branch where you can work and commit your changes:
```shell ```shell
@ -84,21 +77,21 @@ Simple approach used by most websites of relying on direction set in HTML elemen
We've added some `UnoCSS` utilities styles to help you with that: We've added some `UnoCSS` utilities styles to help you with that:
- Do not use `left/right` padding and margin: for example `pl-1`. Use `padding-inline-start/end` instead. So `pl-1` should be `ps-1`, `pr-1` should be `pe-1`. The same rules apply to margin. - Do not use `left/right` padding and margin: for example `pl-1`. Use `padding-inline-start/end` instead. So `pl-1` should be `ps-1`, `pr-1` should be `pe-1`. The same rules apply to margin.
- Do not use `rtl-` classes, such as `rtl-left-0`. - Do not use `rtl-` classes, such as `rtl-left-0`.
- For icons that should be rotated for RTL, add `class="rtl-flip"`. This can only be used for icons outside of elements with `dir="auto"`, such as timeline, and is the only exception from the rule above. For icons inside the timeline, it might not work as expected. - For icons that should be rotated for RTL, add `class="rtl-flip"`. This can only be used for icons outside of elements with `dir="auto"`, such as timeline, and is the only exception 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`. - For absolute positioned elements, don't use `left/right`: for example `left-0`. Use `inset-inline-start/end` instead. `UnoCSS` shortcuts are `inset-is` for `inset-inline-start` and `inset-ie` for `inset-inline-end`. Example: `left-0` should be replaced with `inset-is-0`.
- If you need to change the border radius for an entire left or right side, use `border-inline-start/end`. `UnoCSS` shortcuts are `rounded-is` for left side, `rounded-ie` for right side. Example: `rounded-l-5` should be replaced with `rounded-ie-5`. - If you need to change the border radius for an entire left or right side, use `border-inline-start/end`. `UnoCSS` shortcuts are `rounded-is` for left side, `rounded-ie` for right side. Example: `rounded-l-5` should be replaced with `rounded-ie-5`.
- If you need to change the border radius for one corner, use `border-start-end-radius` and similar rules. `UnoCSS` shortcuts are `rounded` + top/bottom as either `-bs` (top) or `-be` (bottom) + left/right as either `-is` (left) or `-ie` (right). Example: `rounded-tl-0` should be replaced with `rounded-bs-is-0`. - If you need to change the border radius for one corner, use `border-start-end-radius` and similar rules. `UnoCSS` shortcuts are `rounded` + top/bottom as either `-bs` (top) or `-be` (bottom) + left/right as either `-is` (left) or `-ie` (right). Example: `rounded-tl-0` should be replaced with `rounded-bs-is-0`.
## Internationalization ## Internationalization
We are using [vue-i18n](https://vue-i18n.intlify.dev/) via [nuxt-i18n](https://v8.i18n.nuxtjs.org/) to handle internationalization. We are using [vue-i18n](https://vue-i18n.intlify.dev/) via [nuxt-i18n](https://i18n.nuxtjs.org/) to handle internationalization.
You can check the current [translation status](https://docs.elk.zone/docs/guide/contributing#translation-status): more instructions on the table caption. You can check the current [translation status](https://docs.elk.zone/guide/contributing#translation-status): more instructions on the table caption.
If you are updating a translation in your local environment, you can run the following commands to check the status: 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` - from root folder: `nr prepare-translation-status`
- change to `docs` folder and run docs dev server `nr dev` - change to `docs` folder and run docs dev server `nr dev`
- open `http://localhost:3000/docs/guide/contributing#translation-status` in your browser - open `http://localhost:3000/guide/contributing#translation-status` in your browser
### Adding a new language ### Adding a new language

Wyświetl plik

@ -6,7 +6,10 @@ WORKDIR /elk
FROM base AS builder FROM base AS builder
# Prepare pnpm https://pnpm.io/installation#using-corepack # Prepare pnpm https://pnpm.io/installation#using-corepack
RUN corepack enable # workaround for npm registry key change
# ref. `pnpm@10.1.0` / `pnpm@9.15.4` cannot be installed due to key id mismatch · Issue #612 · nodejs/corepack
# - https://github.com/nodejs/corepack/issues/612#issuecomment-2629496091
RUN npm i -g corepack@latest && corepack enable
# Prepare deps # Prepare deps
RUN apk update RUN apk update

Wyświetl plik

@ -13,7 +13,6 @@ A nimble Mastodon web client
<br/> <br/>
<p align="center"> <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://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> <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> </p>
<br/> <br/>
@ -39,25 +38,24 @@ The Elk team maintains a deployment at:
### Self-Host Docker Deployment ### Self-Host Docker Deployment
In order to host Elk yourself you can use the provided Dockerfile to build a container with elk. Be aware, that Elk only loads properly if the connection is done via SSL/TLS. The Docker container itself does not provide any SSL/TLS handling. You'll have to add this bit yourself. In order to host Elk yourself you can use the provided Dockerfile to build a container with elk. Be aware, that Elk only loads properly if the connection is done via SSL/TLS. The Docker container itself does not provide any SSL/TLS handling. You'll have to add this bit yourself.
One could put Elk behind popular reverse proxies with SSL Handling like Traefik, NGINX etc. One could put Elk behind popular reverse proxies with SSL Handling like Traefik, NGINX etc.
1. checkout source ```git clone https://github.com/elk-zone/elk.git``` 1. checkout source ```git clone https://github.com/elk-zone/elk.git```
1. got into new source dir: ```cd elk``` 1. got into new source dir: ```cd elk```
1. build Docker image: ```docker build .```
1. create local storage directory for settings: ```mkdir elk-storage``` 1. create local storage directory for settings: ```mkdir elk-storage```
1. adjust permissions of storage dir: ```sudo chown 911:911 ./elk-storage``` 1. adjust permissions of storage dir: ```sudo chown 911:911 ./elk-storage```
1. start container: ```docker-compose up -d``` 1. start container: ```docker-compose up --build -d```
> [!NOTE] > [!NOTE]
> The provided Dockerfile creates a container which will eventually run Elk as non-root user and create a persistent named Docker volume upon first start (if that volume does not yet exist). This volume is always created with root permission. Failing to change the permissions of ```/elk/data``` inside this volume to UID:GID 911 (as specified for Elk in the Dockerfile) will prevent Elk from storing it's config for user accounts. You either have to fix the permission in the created named volume, or mount a directory with the correct permission to ```/elk/data``` into the container. > The provided Dockerfile creates a container which will eventually run Elk as non-root user and create a persistent named Docker volume upon first start (if that volume does not yet exist). This volume is always created with root permission. Failing to change the permissions of ```/elk/data``` inside this volume to UID:GID 911 (as specified for Elk in the Dockerfile) will prevent Elk from storing it's config for user accounts. You either have to fix the permission in the created named volume, or mount a directory with the correct permission to ```/elk/data``` into the container.
### Ecosystem ### Ecosystem
These are known deployments using Elk as an alternative Web client for Mastodon servers or as a base for other projects in the fediverse: These are known deployments using Elk as an alternative Web client for Mastodon servers or as a base for other projects in the fediverse:
- [elk.fedified.com](https://elk.fedified.com) - Use Elk to log into any compatible instance - [elk.fedified.com](https://elk.fedified.com) - Use Elk to log into any compatible instance
- [elk.mastodon.com.pl](https://elk.mastodon.com.pl) - Use Elk for the `mastodon.com.pl` Server
- [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.me.uk](https://elk.me.uk) - Use Elk to log into any compatible instance, hosted on Google Cloud Run with no Cloudflare proxy
- [elk.h4.io](https://elk.h4.io) - Use Elk for the `h4.io` Server - [elk.h4.io](https://elk.h4.io) - Use Elk for the `h4.io` Server
- [elk.universeodon.com](https://elk.universeodon.com) - Use Elk for the Universeodon Server - [elk.universeodon.com](https://elk.universeodon.com) - Use Elk for the Universeodon Server
@ -68,6 +66,7 @@ These are known deployments using Elk as an alternative Web client for Mastodon
- [elk.mstdn.ca](https://elk.mstdn.ca) - Use Elk for the `mstdn.ca` 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.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 - [elk.bolha.us](https://elk.bolha.us) - Use Elk for the `bolha.us` Server
- [crab.bumscode.com](https://crab.bumscode.com) - Use [crab](https://github.com/maybeanerd/crab) - a soft fork of Elk - for the `bumscode.com` Server
> **Note**: Community deployments are **NOT** maintained by the Elk team. It may not be synced with Elk's source code. Please do your own research about the host servers before using them. > **Note**: Community deployments are **NOT** maintained by the Elk team. It may not be synced with Elk's source code. Please do your own research about the host servers before using them.
@ -105,12 +104,6 @@ We would also appreciate sponsoring other contributors to the Elk project. If so
We're really excited that you're interested in contributing to Elk! Before submitting your contribution, please read through the following guide. 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).
[![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: Clone the repository and run on the root folder:
@ -152,14 +145,14 @@ You can consult the [PWA documentation](https://docs.elk.zone/pwa) to learn more
- [UnoCSS](https://uno.antfu.me/) - The instant on-demand atomic CSS engine - [UnoCSS](https://uno.antfu.me/) - The instant on-demand atomic CSS engine
- [Iconify](https://github.com/iconify/icon-sets#iconify-icon-sets-in-json-format) - Iconify icon sets in JSON format - [Iconify](https://github.com/iconify/icon-sets#iconify-icon-sets-in-json-format) - Iconify icon sets in JSON format
- [Masto.js](https://neet.github.io/masto.js) - Mastodon API client in TypeScript - [Masto.js](https://neet.github.io/masto.js) - Mastodon API client in TypeScript
- [shikiji](https://shikiji.netlify.app/) - A beautiful and powerful syntax highlighter - [shiki](https://shiki.style/) - A beautiful yet powerful syntax highlighter
- [vite-plugin-pwa](https://github.com/vite-pwa/vite-plugin-pwa) - Prompt for update, Web Push Notifications and Web Share Target API - [vite-plugin-pwa](https://github.com/vite-pwa/vite-plugin-pwa) - Prompt for update, Web Push Notifications and Web Share Target API
## 👨‍💻 Contributors ## 👨‍💻 Contributors
<a href="https://github.com/elk-zone/elk/graphs/contributors"> <a href="https://github.com/elk-zone/elk/graphs/contributors">
<img src="https://contrib.rocks/image?repo=elk-zone/elk" /> <img src="https://contrib.rocks/image?repo=elk-zone/elk" />
</a> </a>
## 📄 License ## 📄 License

Wyświetl plik

@ -4,7 +4,7 @@ provideGlobalCommands()
const route = useRoute() const route = useRoute()
if (process.server && !route.path.startsWith('/settings')) { if (import.meta.server && !route.path.startsWith('/settings')) {
const url = useRequestURL() const url = useRequestURL()
useHead({ useHead({

Wyświetl plik

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

Wyświetl plik

@ -1,11 +1,11 @@
<script lang="ts" setup> <script setup lang="ts">
import type { mastodon } from 'masto' import type { mastodon } from 'masto'
defineOptions({ defineOptions({
inheritAttrs: false, inheritAttrs: false,
}) })
const { account, as = 'div' } = $defineProps<{ const { account, as = 'div' } = defineProps<{
account: mastodon.v1.Account account: mastodon.v1.Account
as?: string as?: string
}>() }>()

Wyświetl plik

@ -11,7 +11,7 @@ defineProps<{
text-secondary-light text-secondary-light
> >
<slot name="prepend" /> <slot name="prepend" />
<CommonTooltip no-auto-focus :content="$t('account.bot')" :disabled="showLabel"> <CommonTooltip :content="$t('account.bot')" :disabled="showLabel">
<div i-mdi:robot-outline /> <div i-mdi:robot-outline />
</CommonTooltip> </CommonTooltip>
<div v-if="showLabel"> <div v-if="showLabel">

Wyświetl plik

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import type { mastodon } from 'masto' import type { mastodon } from 'masto'
const { account, hideEmojis = false } = defineProps<{ const { hideEmojis = false } = defineProps<{
account: mastodon.v1.Account account: mastodon.v1.Account
hideEmojis?: boolean hideEmojis?: boolean
}>() }>()

Wyświetl plik

@ -0,0 +1,114 @@
<script setup lang="ts">
import type { mastodon } from 'masto'
import { toggleFollowAccount, useRelationship } from '~/composables/masto/relationship'
const { account, context, command, ...props } = defineProps<{
account: mastodon.v1.Account
relationship?: mastodon.v1.Relationship
context?: 'followedBy' | 'following'
command?: boolean
}>()
const { t } = useI18n()
const isSelf = useSelfAccount(() => account)
const enable = computed(() => !isSelf.value && currentUser.value)
const relationship = computed(() => props.relationship || useRelationship(account).value)
const isLoading = computed(() => relationship.value === undefined)
const { client } = useMasto()
async function unblock() {
relationship.value!.blocking = false
try {
const newRel = await client.value.v1.accounts.$select(account.id).unblock()
Object.assign(relationship!, newRel)
}
catch (err) {
console.error(err)
// TODO error handling
relationship.value!.blocking = true
}
}
async function unmute() {
relationship.value!.muting = false
try {
const newRel = await client.value.v1.accounts.$select(account.id).unmute()
Object.assign(relationship!, newRel)
}
catch (err) {
console.error(err)
// TODO error handling
relationship.value!.muting = true
}
}
useCommand({
scope: 'Actions',
order: -2,
visible: () => command && enable,
name: () => `${relationship.value?.following ? t('account.unfollow') : t('account.follow')} ${getShortHandle(account)}`,
icon: 'i-ri:star-line',
onActivate: () => toggleFollowAccount(relationship.value!, account),
})
const buttonStyle = computed(() => {
if (relationship.value?.blocking)
return 'text-inverted bg-red border-red'
if (relationship.value?.muting)
return 'text-base bg-card border-base'
// If following, use a label style with a strong border for Mutuals
if (relationship.value ? relationship.value.following : context === 'following')
return `text-base ${relationship.value?.followedBy ? 'border-strong' : 'border-base'}`
// If loading, use a plain style
if (isLoading.value)
return 'text-base border-base'
// If not following, use a button style
return 'text-inverted bg-primary border-primary'
})
</script>
<template>
<button
v-if="enable"
gap-1 items-center group
border-1
rounded-full flex="~ gap2 center" font-500 min-w-30 h-fit px3 py1
:class="buttonStyle"
:hover="!relationship?.blocking && !relationship?.muting && relationship?.following ? 'border-red text-red' : 'bg-base border-primary text-primary'"
@click="relationship?.blocking ? unblock() : relationship?.muting ? unmute() : toggleFollowAccount(relationship!, account)"
>
<template v-if="isLoading">
<span i-svg-spinners-180-ring-with-bg />
</template>
<template v-else>
<template v-if="relationship?.blocking">
<span elk-group-hover="hidden">{{ $t('account.blocking') }}</span>
<span hidden elk-group-hover="inline">{{ $t('account.unblock') }}</span>
</template>
<template v-if="relationship?.muting">
<span elk-group-hover="hidden">{{ $t('account.muting') }}</span>
<span hidden elk-group-hover="inline">{{ $t('account.unmute') }}</span>
</template>
<template v-else-if="relationship ? relationship.following : context === 'following'">
<span elk-group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
<span hidden elk-group-hover="inline">{{ $t('account.unfollow') }}</span>
</template>
<template v-else-if="relationship?.requested">
<span elk-group-hover="hidden">{{ $t('account.follow_requested') }}</span>
<span hidden elk-group-hover="inline">{{ $t('account.withdraw_follow_request') }}</span>
</template>
<template v-else-if="relationship ? relationship.followedBy : context === 'followedBy'">
<span elk-group-hover="hidden">{{ $t('account.follows_you') }}</span>
<span hidden elk-group-hover="inline">{{ account.locked ? $t('account.request_follow') : $t('account.follow_back') }}</span>
</template>
<template v-else>
<span>{{ account.locked ? $t('account.request_follow') : $t('account.follow') }}</span>
</template>
</template>
</button>
</template>

Wyświetl plik

@ -5,32 +5,32 @@ const { account, ...props } = defineProps<{
account: mastodon.v1.Account account: mastodon.v1.Account
relationship?: mastodon.v1.Relationship relationship?: mastodon.v1.Relationship
}>() }>()
const relationship = $computed(() => props.relationship || useRelationship(account).value) const relationship = computed(() => props.relationship || useRelationship(account).value)
const { client } = $(useMasto()) const { client } = useMasto()
async function authorizeFollowRequest() { async function authorizeFollowRequest() {
relationship!.requestedBy = false relationship.value!.requestedBy = false
relationship!.followedBy = true relationship.value!.followedBy = true
try { try {
const newRel = await client.v1.followRequests.$select(account.id).authorize() const newRel = await client.value.v1.followRequests.$select(account.id).authorize()
Object.assign(relationship!, newRel) Object.assign(relationship!, newRel)
} }
catch (err) { catch (err) {
console.error(err) console.error(err)
relationship!.requestedBy = true relationship.value!.requestedBy = true
relationship!.followedBy = false relationship.value!.followedBy = false
} }
} }
async function rejectFollowRequest() { async function rejectFollowRequest() {
relationship!.requestedBy = false relationship.value!.requestedBy = false
try { try {
const newRel = await client.v1.followRequests.$select(account.id).reject() const newRel = await client.value.v1.followRequests.$select(account.id).reject()
Object.assign(relationship!, newRel) Object.assign(relationship!, newRel)
} }
catch (err) { catch (err) {
console.error(err) console.error(err)
relationship!.requestedBy = true relationship.value!.requestedBy = true
} }
} }
</script> </script>
@ -38,7 +38,7 @@ async function rejectFollowRequest() {
<template> <template>
<div flex gap-4> <div flex gap-4>
<template v-if="relationship?.requestedBy"> <template v-if="relationship?.requestedBy">
<CommonTooltip :content="$t('account.authorize')" no-auto-focus> <CommonTooltip :content="$t('account.authorize')">
<button <button
type="button" type="button"
rounded-full text-sm p2 border-1 rounded-full text-sm p2 border-1
@ -48,7 +48,7 @@ async function rejectFollowRequest() {
<span block text-current i-ri:check-fill /> <span block text-current i-ri:check-fill />
</button> </button>
</CommonTooltip> </CommonTooltip>
<CommonTooltip :content="$t('account.reject')" no-auto-focus> <CommonTooltip :content="$t('account.reject')">
<button <button
type="button" type="button"
rounded-full text-sm p2 border-1 rounded-full text-sm p2 border-1

Wyświetl plik

@ -5,7 +5,7 @@ const { account } = defineProps<{
account: mastodon.v1.Account account: mastodon.v1.Account
}>() }>()
const serverName = $computed(() => getServerName(account)) const serverName = computed(() => getServerName(account))
</script> </script>
<template> <template>

Wyświetl plik

@ -6,22 +6,22 @@ const { account } = defineProps<{
command?: boolean command?: boolean
}>() }>()
const { client } = $(useMasto()) const { client } = useMasto()
const { t } = useI18n() const { t } = useI18n()
const createdAt = $(useFormattedDateTime(() => account.createdAt, { const createdAt = useFormattedDateTime(() => account.createdAt, {
month: 'long', month: 'long',
day: 'numeric', day: 'numeric',
year: 'numeric', year: 'numeric',
})) })
const relationship = $(useRelationship(account)) const relationship = useRelationship(account)
const namedFields = ref<mastodon.v1.AccountField[]>([]) const namedFields = ref<mastodon.v1.AccountField[]>([])
const iconFields = ref<mastodon.v1.AccountField[]>([]) const iconFields = ref<mastodon.v1.AccountField[]>([])
const isEditingPersonalNote = ref<boolean>(false) const isEditingPersonalNote = ref<boolean>(false)
const hasHeader = $computed(() => !account.header.endsWith('/original/missing.png')) const hasHeader = computed(() => !account.header.endsWith('/original/missing.png'))
const isCopied = ref<boolean>(false) const isCopied = ref<boolean>(false)
function getFieldIconTitle(fieldName: string) { function getFieldIconTitle(fieldName: string) {
@ -29,7 +29,7 @@ function getFieldIconTitle(fieldName: string) {
} }
function getNotificationIconTitle() { function getNotificationIconTitle() {
return relationship?.notifying ? t('account.notifications_on_post_disable', { username: `@${account.username}` }) : t('account.notifications_on_post_enable', { username: `@${account.username}` }) return relationship.value?.notifying ? t('account.notifications_on_post_disable', { username: `@${account.username}` }) : t('account.notifications_on_post_enable', { username: `@${account.username}` })
} }
function previewHeader() { function previewHeader() {
@ -51,14 +51,14 @@ function previewAvatar() {
} }
async function toggleNotifications() { async function toggleNotifications() {
relationship!.notifying = !relationship?.notifying relationship.value!.notifying = !relationship.value?.notifying
try { try {
const newRel = await client.v1.accounts.$select(account.id).follow({ notify: relationship?.notifying }) const newRel = await client.value.v1.accounts.$select(account.id).follow({ notify: relationship.value?.notifying })
Object.assign(relationship!, newRel) Object.assign(relationship!, newRel)
} }
catch { catch {
// TODO error handling // TODO error handling
relationship!.notifying = !relationship?.notifying relationship.value!.notifying = !relationship.value?.notifying
} }
} }
@ -75,35 +75,35 @@ watchEffect(() => {
}) })
icons.push({ icons.push({
name: 'Joined', name: 'Joined',
value: createdAt, value: createdAt.value,
}) })
namedFields.value = named namedFields.value = named
iconFields.value = icons iconFields.value = icons
}) })
const personalNoteDraft = ref(relationship?.note ?? '') const personalNoteDraft = ref(relationship.value?.note ?? '')
watch($$(relationship), (relationship, oldValue) => { watch(relationship, (relationship, oldValue) => {
if (!oldValue && relationship) if (!oldValue && relationship)
personalNoteDraft.value = relationship.note ?? '' personalNoteDraft.value = relationship.note ?? ''
}) })
async function editNote(event: Event) { async function editNote(event: Event) {
if (!event.target || !('value' in event.target) || !relationship) if (!event.target || !('value' in event.target) || !relationship.value)
return return
const newNote = event.target?.value as string const newNote = event.target?.value as string
if (relationship.note?.trim() === newNote.trim()) if (relationship.value.note?.trim() === newNote.trim())
return return
const newNoteApiResult = await client.v1.accounts.$select(account.id).note.create({ comment: newNote }) const newNoteApiResult = await client.value.v1.accounts.$select(account.id).note.create({ comment: newNote })
relationship.note = newNoteApiResult.note relationship.value.note = newNoteApiResult.note
personalNoteDraft.value = relationship.note ?? '' personalNoteDraft.value = relationship.value.note ?? ''
} }
const isSelf = $(useSelfAccount(() => account)) const isSelf = useSelfAccount(() => account)
const isNotifiedOnPost = $computed(() => !!relationship?.notifying) const isNotifiedOnPost = computed(() => !!relationship.value?.notifying)
const personalNoteMaxLength = 2000 const personalNoteMaxLength = 2000
@ -189,19 +189,21 @@ async function copyAccountName() {
<div flex="~ col gap1" pt2> <div flex="~ col gap1" pt2>
<div flex gap2 items-center flex-wrap> <div flex gap2 items-center flex-wrap>
<AccountDisplayName :account="account" font-bold sm:text-2xl text-xl /> <AccountDisplayName :account="account" font-bold sm:text-2xl text-xl />
<AccountRolesIndicator v-if="account.roles?.length" :account="account" />
<AccountLockIndicator v-if="account.locked" show-label /> <AccountLockIndicator v-if="account.locked" show-label />
<AccountBotIndicator v-if="account.bot" show-label /> <AccountBotIndicator v-if="account.bot" show-label />
</div> </div>
<div flex items-center gap-1> <div flex items-center gap-1>
<AccountHandle :account="account" overflow-unset line-clamp-unset /> <AccountHandle :account="account" overflow-unset line-clamp-unset />
<CommonTooltip placement="bottom" :content="$t('account.copy_account_name')" no-auto-focus flex> <CommonTooltip placement="bottom" :content="$t('account.copy_account_name')" flex>
<button text-secondary-light text-sm :class="isCopied ? 'i-ri:check-fill text-green' : 'i-ri:file-copy-line'" @click="copyAccountName"> <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> <span sr-only>{{ $t('account.copy_account_name') }}</span>
</button> </button>
</CommonTooltip> </CommonTooltip>
</div> </div>
<div self-start mt-1>
<AccountRolesIndicator v-if="account.roles?.length" :account="account" />
</div>
</div> </div>
</div> </div>
<label <label

Wyświetl plik

@ -5,14 +5,14 @@ const { account } = defineProps<{
account: mastodon.v1.Account account: mastodon.v1.Account
}>() }>()
const relationship = $(useRelationship(account)) const relationship = useRelationship(account)
</script> </script>
<template> <template>
<div v-show="relationship" flex="~ col gap2" rounded min-w-90 max-w-120 z-100 overflow-hidden p-4> <div v-show="relationship" flex="~ col gap2" rounded min-w-90 max-w-120 z-100 overflow-hidden p-4>
<div flex="~ gap2" items-center> <div flex="~ gap2" items-center>
<NuxtLink :to="getAccountRoute(account)" flex-auto rounded-full hover:bg-active transition-100 pe5 me-a> <NuxtLink :to="getAccountRoute(account)" flex-auto rounded-full hover:bg-active transition-100 pe5 me-a>
<AccountInfo :account="account" /> <AccountInfo :account="account" :hover-card="false" />
</NuxtLink> </NuxtLink>
<AccountFollowButton text-sm :account="account" :relationship="relationship" /> <AccountFollowButton text-sm :account="account" :relationship="relationship" />
</div> </div>

Wyświetl plik

@ -0,0 +1,70 @@
<script setup lang="ts">
import type { mastodon } from 'masto'
import { fetchAccountByHandle } from '~/composables/cache'
type WatcherType = [acc?: mastodon.v1.Account | null, h?: string, v?: boolean]
defineOptions({
inheritAttrs: false,
})
const props = defineProps<{
account?: mastodon.v1.Account | null
handle?: string
disabled?: boolean
}>()
const accountHover = ref()
const hovered = useElementHover(accountHover)
const account = ref<mastodon.v1.Account | null | undefined>(props.account)
watch(
() => [props.account, props.handle, hovered.value] satisfies WatcherType,
([newAccount, newHandle, newVisible], oldProps) => {
if (!newVisible || process.test)
return
if (newAccount) {
account.value = newAccount
return
}
if (newHandle) {
const [_oldAccount, oldHandle, _oldVisible] = oldProps ?? [undefined, undefined, false]
if (!oldHandle || newHandle !== oldHandle || !account.value) {
// new handle can be wrong: using server instead of webDomain
fetchAccountByHandle(newHandle).then((acc) => {
if (newHandle === props.handle)
account.value = acc
})
}
return
}
account.value = undefined
},
{ immediate: true, flush: 'post' },
)
const userSettings = useUserSettings()
</script>
<template>
<span ref="accountHover">
<VMenu
v-if="!disabled && account && !getPreferences(userSettings, 'hideAccountHoverCard')"
placement="bottom-start"
:delay="{ show: 500, hide: 100 }"
v-bind="$attrs"
:close-on-content-click="false"
no-auto-focus
>
<slot />
<template #popper>
<AccountHoverCard v-if="account" :account="account" />
</template>
</VMenu>
<slot v-else />
</span>
</template>

Wyświetl plik

@ -5,7 +5,7 @@ defineOptions({
inheritAttrs: false, inheritAttrs: false,
}) })
const { account, as = 'div' } = defineProps<{ const { as = 'div' } = defineProps<{
account: mastodon.v1.Account account: mastodon.v1.Account
as?: string as?: string
hoverCard?: boolean hoverCard?: boolean
@ -16,18 +16,20 @@ const { account, as = 'div' } = defineProps<{
<!-- TODO: Make this work for both buttons and links --> <!-- TODO: Make this work for both buttons and links -->
<!-- This is sometimes (like in the sidebar) used directly as a button, and sometimes, like in follow notifications, as a link. I think this component may need a second refactor that either lets an implementation pass in a link or an action and adapt to what's passed in, or the implementations need to be updated to wrap in the action they want to take and this be just the layout for these items --> <!-- This is sometimes (like in the sidebar) used directly as a button, and sometimes, like in follow notifications, as a link. I think this component may need a second refactor that either lets an implementation pass in a link or an action and adapt to what's passed in, or the implementations need to be updated to wrap in the action they want to take and this be just the layout for these items -->
<template> <template>
<component :is="as" flex gap-3 v-bind="$attrs"> <component :is="as" flex items-center gap-3 v-bind="$attrs">
<AccountHoverWrapper :disabled="!hoverCard" :account="account"> <AccountHoverWrapper :disabled="!hoverCard" :account="account">
<AccountBigAvatar :account="account" shrink-0 :square="square" /> <AccountBigAvatar :account="account" shrink-0 :square="square" />
</AccountHoverWrapper> </AccountHoverWrapper>
<div flex="~ col" shrink pt-1 h-full overflow-hidden justify-center leading-none select-none> <div flex="~ col" shrink h-full overflow-hidden justify-center leading-none select-none p-1>
<div flex="~" gap-2> <div flex="~" gap-2>
<AccountDisplayName :account="account" font-bold line-clamp-1 ws-pre-wrap break-all text-lg /> <AccountDisplayName :account="account" font-bold line-clamp-1 ws-pre-wrap break-all text-lg />
<AccountRolesIndicator v-if="account.roles?.length" :account="account" :limit="1" />
<AccountLockIndicator v-if="account.locked" text-xs /> <AccountLockIndicator v-if="account.locked" text-xs />
<AccountBotIndicator v-if="account.bot" text-xs /> <AccountBotIndicator v-if="account.bot" text-xs />
</div> </div>
<AccountHandle :account="account" text-secondary-light /> <AccountHandle :account="account" text-secondary-light />
<div self-start mt-1>
<AccountRolesIndicator v-if="account.roles?.length" :account="account" :limit="1" />
</div>
</div> </div>
</component> </component>
</template> </template>

Wyświetl plik

@ -2,6 +2,8 @@
defineProps<{ defineProps<{
showLabel?: boolean showLabel?: boolean
}>() }>()
const { t } = useI18n()
</script> </script>
<template> <template>
@ -11,11 +13,11 @@ defineProps<{
text-secondary-light text-secondary-light
> >
<slot name="prepend" /> <slot name="prepend" />
<CommonTooltip no-auto-focus content="Lock" :disabled="showLabel"> <CommonTooltip content="Lock" :disabled="showLabel">
<div i-ri:lock-line /> <div i-ri:lock-line />
</CommonTooltip> </CommonTooltip>
<div v-if="showLabel"> <div v-if="showLabel">
Lock {{ t('account.lock') }}
</div> </div>
</div> </div>
</template> </template>

Wyświetl plik

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { mastodon } from 'masto' import type { mastodon } from 'masto'
import { toggleBlockAccount, toggleBlockDomain, toggleMuteAccount } from '~~/composables/masto/relationship' import { toggleBlockAccount, toggleBlockDomain, toggleMuteAccount } from '~/composables/masto/relationship'
const { account } = defineProps<{ const { account } = defineProps<{
account: mastodon.v1.Account account: mastodon.v1.Account
@ -11,12 +11,12 @@ const emit = defineEmits<{
(evt: 'removeNote'): void (evt: 'removeNote'): void
}>() }>()
let relationship = $(useRelationship(account)) const relationship = useRelationship(account)
const isSelf = $(useSelfAccount(() => account)) const isSelf = useSelfAccount(() => account)
const { t } = useI18n() const { t } = useI18n()
const { client } = $(useMasto()) const { client } = useMasto()
const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon') const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
const { share, isSupported: isShareSupported } = useShare() const { share, isSupported: isShareSupported } = useShare()
@ -25,16 +25,19 @@ function shareAccount() {
} }
async function toggleReblogs() { async function toggleReblogs() {
if (!relationship!.showingReblogs && await openConfirmDialog({ if (!relationship.value!.showingReblogs) {
title: t('confirm.show_reblogs.title'), const dialogChoice = await openConfirmDialog({
description: t('confirm.show_reblogs.description', [account.acct]), title: t('confirm.show_reblogs.title'),
confirm: t('confirm.show_reblogs.confirm'), description: t('confirm.show_reblogs.description', [account.acct]),
cancel: t('confirm.show_reblogs.cancel'), confirm: t('confirm.show_reblogs.confirm'),
}) !== 'confirm') cancel: t('confirm.show_reblogs.cancel'),
return })
if (dialogChoice.choice !== 'confirm')
return
}
const showingReblogs = !relationship?.showingReblogs const showingReblogs = !relationship.value?.showingReblogs
relationship = await client.v1.accounts.$select(account.id).follow({ reblogs: showingReblogs }) relationship.value = await client.value.v1.accounts.$select(account.id).follow({ reblogs: showingReblogs })
} }
async function addUserNote() { async function addUserNote() {
@ -42,18 +45,18 @@ async function addUserNote() {
} }
async function removeUserNote() { async function removeUserNote() {
if (!relationship!.note || relationship!.note.length === 0) if (!relationship.value!.note || relationship.value!.note.length === 0)
return return
const newNote = await client.v1.accounts.$select(account.id).note.create({ comment: '' }) const newNote = await client.value.v1.accounts.$select(account.id).note.create({ comment: '' })
relationship!.note = newNote.note relationship.value!.note = newNote.note
emit('removeNote') emit('removeNote')
} }
</script> </script>
<template> <template>
<CommonDropdown :eager-mount="command"> <CommonDropdown :eager-mount="command">
<button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group aria-label="More actions"> <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group :aria-label="t('actions.more')">
<div rounded-5 p2 elk-group-hover="bg-purple/10"> <div rounded-5 p2 elk-group-hover="bg-purple/10">
<div i-ri:more-2-fill /> <div i-ri:more-2-fill />
</div> </div>
@ -68,6 +71,7 @@ async function removeUserNote() {
/> />
</NuxtLink> </NuxtLink>
<CommonDropdownItem <CommonDropdownItem
is="button"
v-if="isShareSupported" v-if="isShareSupported"
:text="$t('menu.share_account', [`@${account.acct}`])" :text="$t('menu.share_account', [`@${account.acct}`])"
icon="i-ri:share-line" icon="i-ri:share-line"
@ -78,12 +82,14 @@ async function removeUserNote() {
<template v-if="currentUser"> <template v-if="currentUser">
<template v-if="!isSelf"> <template v-if="!isSelf">
<CommonDropdownItem <CommonDropdownItem
is="button"
:text="$t('menu.mention_account', [`@${account.acct}`])" :text="$t('menu.mention_account', [`@${account.acct}`])"
icon="i-ri:at-line" icon="i-ri:at-line"
:command="command" :command="command"
@click="mentionUser(account)" @click="mentionUser(account)"
/> />
<CommonDropdownItem <CommonDropdownItem
is="button"
:text="$t('menu.direct_message_account', [`@${account.acct}`])" :text="$t('menu.direct_message_account', [`@${account.acct}`])"
icon="i-ri:message-3-line" icon="i-ri:message-3-line"
:command="command" :command="command"
@ -91,6 +97,7 @@ async function removeUserNote() {
/> />
<CommonDropdownItem <CommonDropdownItem
is="button"
v-if="!relationship?.showingReblogs" v-if="!relationship?.showingReblogs"
icon="i-ri:repeat-line" icon="i-ri:repeat-line"
:text="$t('menu.show_reblogs', [`@${account.acct}`])" :text="$t('menu.show_reblogs', [`@${account.acct}`])"
@ -98,6 +105,7 @@ async function removeUserNote() {
@click="toggleReblogs()" @click="toggleReblogs()"
/> />
<CommonDropdownItem <CommonDropdownItem
is="button"
v-else v-else
:text="$t('menu.hide_reblogs', [`@${account.acct}`])" :text="$t('menu.hide_reblogs', [`@${account.acct}`])"
icon="i-ri:repeat-line" icon="i-ri:repeat-line"
@ -106,6 +114,7 @@ async function removeUserNote() {
/> />
<CommonDropdownItem <CommonDropdownItem
is="button"
v-if="!relationship?.note || relationship?.note?.length === 0" v-if="!relationship?.note || relationship?.note?.length === 0"
:text="$t('menu.add_personal_note', [`@${account.acct}`])" :text="$t('menu.add_personal_note', [`@${account.acct}`])"
icon="i-ri-edit-2-line" icon="i-ri-edit-2-line"
@ -113,6 +122,7 @@ async function removeUserNote() {
@click="addUserNote()" @click="addUserNote()"
/> />
<CommonDropdownItem <CommonDropdownItem
is="button"
v-else v-else
:text="$t('menu.remove_personal_note', [`@${account.acct}`])" :text="$t('menu.remove_personal_note', [`@${account.acct}`])"
icon="i-ri-edit-2-line" icon="i-ri-edit-2-line"
@ -121,6 +131,7 @@ async function removeUserNote() {
/> />
<CommonDropdownItem <CommonDropdownItem
is="button"
v-if="!relationship?.muting" v-if="!relationship?.muting"
:text="$t('menu.mute_account', [`@${account.acct}`])" :text="$t('menu.mute_account', [`@${account.acct}`])"
icon="i-ri:volume-mute-line" icon="i-ri:volume-mute-line"
@ -128,6 +139,7 @@ async function removeUserNote() {
@click="toggleMuteAccount (relationship!, account)" @click="toggleMuteAccount (relationship!, account)"
/> />
<CommonDropdownItem <CommonDropdownItem
is="button"
v-else v-else
:text="$t('menu.unmute_account', [`@${account.acct}`])" :text="$t('menu.unmute_account', [`@${account.acct}`])"
icon="i-ri:volume-up-fill" icon="i-ri:volume-up-fill"
@ -136,6 +148,7 @@ async function removeUserNote() {
/> />
<CommonDropdownItem <CommonDropdownItem
is="button"
v-if="!relationship?.blocking" v-if="!relationship?.blocking"
:text="$t('menu.block_account', [`@${account.acct}`])" :text="$t('menu.block_account', [`@${account.acct}`])"
icon="i-ri:forbid-2-line" icon="i-ri:forbid-2-line"
@ -143,6 +156,7 @@ async function removeUserNote() {
@click="toggleBlockAccount (relationship!, account)" @click="toggleBlockAccount (relationship!, account)"
/> />
<CommonDropdownItem <CommonDropdownItem
is="button"
v-else v-else
:text="$t('menu.unblock_account', [`@${account.acct}`])" :text="$t('menu.unblock_account', [`@${account.acct}`])"
icon="i-ri:checkbox-circle-line" icon="i-ri:checkbox-circle-line"
@ -152,6 +166,7 @@ async function removeUserNote() {
<template v-if="getServerName(account) !== currentServer"> <template v-if="getServerName(account) !== currentServer">
<CommonDropdownItem <CommonDropdownItem
is="button"
v-if="!relationship?.domainBlocking" v-if="!relationship?.domainBlocking"
:text="$t('menu.block_domain', [getServerName(account)])" :text="$t('menu.block_domain', [getServerName(account)])"
icon="i-ri:shut-down-line" icon="i-ri:shut-down-line"
@ -159,6 +174,7 @@ async function removeUserNote() {
@click="toggleBlockDomain(relationship!, account)" @click="toggleBlockDomain(relationship!, account)"
/> />
<CommonDropdownItem <CommonDropdownItem
is="button"
v-else v-else
:text="$t('menu.unblock_domain', [getServerName(account)])" :text="$t('menu.unblock_domain', [getServerName(account)])"
icon="i-ri:restart-line" icon="i-ri:restart-line"
@ -168,6 +184,7 @@ async function removeUserNote() {
</template> </template>
<CommonDropdownItem <CommonDropdownItem
is="button"
:text="$t('menu.report_account', [`@${account.acct}`])" :text="$t('menu.report_account', [`@${account.acct}`])"
icon="i-ri:flag-2-line" icon="i-ri:flag-2-line"
:command="command" :command="command"

Wyświetl plik

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

Wyświetl plik

@ -1,18 +1,18 @@
<script setup lang="ts"> <script setup lang="ts">
import type { CommonRouteTabOption } from '../common/CommonRouteTabs.vue' import type { CommonRouteTabOption } from '#shared/types'
const { t } = useI18n() const { t } = useI18n()
const route = useRoute() const route = useRoute()
const server = $(computedEager(() => route.params.server as string)) const server = computed(() => route.params.server as string)
const account = $(computedEager(() => route.params.account as string)) const account = computed(() => route.params.account as string)
const tabs = $computed<CommonRouteTabOption[]>(() => [ const tabs = computed<CommonRouteTabOption[]>(() => [
{ {
name: 'account-index', name: 'account-index',
to: { to: {
name: 'account-index', name: 'account-index',
params: { server, account }, params: { server: server.value, account: account.value },
}, },
display: t('tab.posts'), display: t('tab.posts'),
icon: 'i-ri:file-list-2-line', icon: 'i-ri:file-list-2-line',
@ -21,7 +21,7 @@ const tabs = $computed<CommonRouteTabOption[]>(() => [
name: 'account-replies', name: 'account-replies',
to: { to: {
name: 'account-replies', name: 'account-replies',
params: { server, account }, params: { server: server.value, account: account.value },
}, },
display: t('tab.posts_with_replies'), display: t('tab.posts_with_replies'),
icon: 'i-ri:chat-1-line', icon: 'i-ri:chat-1-line',
@ -30,7 +30,7 @@ const tabs = $computed<CommonRouteTabOption[]>(() => [
name: 'account-media', name: 'account-media',
to: { to: {
name: 'account-media', name: 'account-media',
params: { server, account }, params: { server: server.value, account: account.value },
}, },
display: t('tab.media'), display: t('tab.media'),
icon: 'i-ri:camera-2-line', icon: 'i-ri:camera-2-line',

Wyświetl plik

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

Wyświetl plik

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { LocaleObject } from '@nuxtjs/i18n'
import type { AriaAnnounceType, AriaLive } from '~/composables/aria' import type { AriaAnnounceType, AriaLive } from '~/composables/aria'
import type { LocaleObject } from '#i18n'
const router = useRouter() const router = useRouter()
const { t, locale, locales } = useI18n() const { t, locale, locales } = useI18n()
@ -11,16 +11,16 @@ const localeMap = (locales.value as LocaleObject[]).reduce((acc, l) => {
return acc return acc
}, {} as Record<string, string>) }, {} as Record<string, string>)
let ariaLive = $ref<AriaLive>('polite') const ariaLive = ref<AriaLive>('polite')
let ariaMessage = $ref<string>('') const ariaMessage = ref<string>('')
function onMessage(event: AriaAnnounceType, message?: string) { function onMessage(event: AriaAnnounceType, message?: string) {
if (event === 'announce') if (event === 'announce')
ariaMessage = message! ariaMessage.value = message!
else if (event === 'mute') else if (event === 'mute')
ariaLive = 'off' ariaLive.value = 'off'
else else
ariaLive = 'polite' ariaLive.value = 'polite'
} }
watch(locale, (l, ol) => { watch(locale, (l, ol) => {
@ -38,12 +38,14 @@ onMounted(() => {
announce(t('a11y.loading_page')) announce(t('a11y.loading_page'))
}) })
router.afterEach((to, from) => { router.afterEach((to, from) => {
from && setTimeout(() => { if (from) {
requestAnimationFrame(() => { setTimeout(() => {
const title = document.title.trim().split('|') requestAnimationFrame(() => {
announce(t('a11y.route_loaded', [title[0]])) const title = document.title.trim().split('|')
}) announce(t('a11y.route_loaded', [title[0]]))
}, 512) })
}, 512)
}
}) })
}) })
</script> </script>

Wyświetl plik

@ -1,17 +1,16 @@
<script setup lang="ts"> <script setup lang="ts">
import type { AriaLive } from '~/composables/aria' import type { AriaLive } from '~/composables/aria'
// tsc complaining when using $defineProps const {
withDefaults(defineProps<{ ariaLive = 'polite',
title: string heading = 'h2',
messageKey = (message: any) => message,
} = defineProps<{
ariaLive?: AriaLive ariaLive?: AriaLive
messageKey?: (message: any) => any
heading?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6' heading?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
}>(), { title: string
heading: 'h2', messageKey?: (message: any) => any
messageKey: (message: any) => message, }>()
ariaLive: 'polite',
})
const { announceLogs, appendLogs, clearLogs, logs } = useAriaLog() const { announceLogs, appendLogs, clearLogs, logs } = useAriaLog()

Wyświetl plik

@ -1,12 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import type { AriaLive } from '~/composables/aria' import type { AriaLive } from '~/composables/aria'
// tsc complaining when using $defineProps const { ariaLive = 'polite' } = defineProps<{
withDefaults(defineProps<{
ariaLive?: AriaLive ariaLive?: AriaLive
}>(), { }>()
ariaLive: 'polite',
})
const { announceStatus, clearStatus, status } = useAriaStatus() const { announceStatus, clearStatus, status } = useAriaStatus()

Wyświetl plik

@ -1,19 +1,15 @@
<script lang="ts" setup> <script setup lang="ts">
import type { ResolvedCommand } from '~/composables/command' import type { ResolvedCommand } from '~/composables/command'
const emit = defineEmits<{ const { active = false } = defineProps<{
(event: 'activate'): void
}>()
const {
cmd,
index,
active = false,
} = $defineProps<{
cmd: ResolvedCommand cmd: ResolvedCommand
index: number index: number
active?: boolean active?: boolean
}>() }>()
const emit = defineEmits<{
(event: 'activate'): void
}>()
</script> </script>
<template> <template>

Wyświetl plik

@ -1,11 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
const props = defineProps<{ const { name } = defineProps<{
name: string name: string
}>() }>()
const isMac = useIsMac() const isMac = useIsMac()
const keys = $computed(() => props.name.toLowerCase().split('+')) const keys = computed(() => name.toLowerCase().split('+'))
</script> </script>
<template> <template>

Wyświetl plik

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { SearchResult as SearchResultType } from '~/composables/masto/search'
import type { CommandScope, QueryResult, QueryResultItem } from '~/composables/command' import type { CommandScope, QueryResult, QueryResultItem } from '~/composables/command'
import type { SearchResult as SearchResultType } from '~/composables/masto/search'
const emit = defineEmits<{ const emit = defineEmits<{
(event: 'close'): void (event: 'close'): void
@ -10,21 +10,21 @@ const registry = useCommandRegistry()
const router = useRouter() const router = useRouter()
const inputEl = $ref<HTMLInputElement>() const inputEl = ref<HTMLInputElement>()
const resultEl = $ref<HTMLDivElement>() const resultEl = ref<HTMLDivElement>()
const scopes = $ref<CommandScope[]>([]) const scopes = ref<CommandScope[]>([])
let input = $(commandPanelInput) const input = commandPanelInput
onMounted(() => { onMounted(() => {
inputEl?.focus() inputEl.value?.focus()
}) })
const commandMode = $computed(() => input.startsWith('>')) const commandMode = computed(() => input.value.startsWith('>'))
const query = $computed(() => commandMode ? '' : input.trim()) const query = computed(() => commandMode.value ? '' : input.value.trim())
const { accounts, hashtags, loading } = useSearch($$(query)) const { accounts, hashtags, loading } = useSearch(query)
function toSearchQueryResultItem(search: SearchResultType): QueryResultItem { function toSearchQueryResultItem(search: SearchResultType): QueryResultItem {
return { return {
@ -35,8 +35,8 @@ function toSearchQueryResultItem(search: SearchResultType): QueryResultItem {
} }
} }
const searchResult = $computed<QueryResult>(() => { const searchResult = computed<QueryResult>(() => {
if (query.length === 0 || loading.value) if (query.value.length === 0 || loading.value)
return { length: 0, items: [], grouped: {} as any } return { length: 0, items: [], grouped: {} as any }
// TODO extract this scope // TODO extract this scope
@ -61,22 +61,22 @@ const searchResult = $computed<QueryResult>(() => {
} }
}) })
const result = $computed<QueryResult>(() => commandMode const result = computed<QueryResult>(() => commandMode.value
? registry.query(scopes.map(s => s.id).join('.'), input.slice(1).trim()) ? registry.query(scopes.value.map(s => s.id).join('.'), input.value.slice(1).trim())
: searchResult, : searchResult.value,
) )
const isMac = useIsMac() const isMac = useIsMac()
const modifierKeyName = $computed(() => isMac.value ? '⌘' : 'Ctrl') const modifierKeyName = computed(() => isMac.value ? '⌘' : 'Ctrl')
let active = $ref(0) const active = ref(0)
watch($$(result), (n, o) => { watch(result, (n, o) => {
if (n.length !== o.length || !n.items.every((i, idx) => i === o.items[idx])) if (n.length !== o.length || !n.items.every((i, idx) => i === o.items[idx]))
active = 0 active.value = 0
}) })
function findItemEl(index: number) { function findItemEl(index: number) {
return resultEl?.querySelector(`[data-index="${index}"]`) as HTMLDivElement | null return resultEl.value?.querySelector(`[data-index="${index}"]`) as HTMLDivElement | null
} }
function onCommandActivate(item: QueryResultItem) { function onCommandActivate(item: QueryResultItem) {
if (item.onActivate) { if (item.onActivate) {
@ -84,14 +84,14 @@ function onCommandActivate(item: QueryResultItem) {
emit('close') emit('close')
} }
else if (item.onComplete) { else if (item.onComplete) {
scopes.push(item.onComplete()) scopes.value.push(item.onComplete())
input = '> ' input.value = '> '
} }
} }
function onCommandComplete(item: QueryResultItem) { function onCommandComplete(item: QueryResultItem) {
if (item.onComplete) { if (item.onComplete) {
scopes.push(item.onComplete()) scopes.value.push(item.onComplete())
input = '> ' input.value = '> '
} }
else if (item.onActivate) { else if (item.onActivate) {
item.onActivate() item.onActivate()
@ -105,9 +105,9 @@ function intoView(index: number) {
} }
function setActive(index: number) { function setActive(index: number) {
const len = result.length const len = result.value.length
active = (index + len) % len active.value = (index + len) % len
intoView(active) intoView(active.value)
} }
function onKeyDown(e: KeyboardEvent) { function onKeyDown(e: KeyboardEvent) {
@ -118,7 +118,7 @@ function onKeyDown(e: KeyboardEvent) {
break break
e.preventDefault() e.preventDefault()
setActive(active - 1) setActive(active.value - 1)
break break
} }
@ -128,7 +128,7 @@ function onKeyDown(e: KeyboardEvent) {
break break
e.preventDefault() e.preventDefault()
setActive(active + 1) setActive(active.value + 1)
break break
} }
@ -136,9 +136,9 @@ function onKeyDown(e: KeyboardEvent) {
case 'Home': { case 'Home': {
e.preventDefault() e.preventDefault()
active = 0 active.value = 0
intoView(active) intoView(active.value)
break break
} }
@ -146,7 +146,7 @@ function onKeyDown(e: KeyboardEvent) {
case 'End': { case 'End': {
e.preventDefault() e.preventDefault()
setActive(result.length - 1) setActive(result.value.length - 1)
break break
} }
@ -154,7 +154,7 @@ function onKeyDown(e: KeyboardEvent) {
case 'Enter': { case 'Enter': {
e.preventDefault() e.preventDefault()
const cmd = result.items[active] const cmd = result.value.items[active.value]
if (cmd) if (cmd)
onCommandActivate(cmd) onCommandActivate(cmd)
@ -164,7 +164,7 @@ function onKeyDown(e: KeyboardEvent) {
case 'Tab': { case 'Tab': {
e.preventDefault() e.preventDefault()
const cmd = result.items[active] const cmd = result.value.items[active.value]
if (cmd) if (cmd)
onCommandComplete(cmd) onCommandComplete(cmd)
@ -172,9 +172,9 @@ function onKeyDown(e: KeyboardEvent) {
} }
case 'Backspace': { case 'Backspace': {
if (input === '>' && scopes.length) { if (input.value === '>' && scopes.value.length) {
e.preventDefault() e.preventDefault()
scopes.pop() scopes.value.pop()
} }
break break
} }

Wyświetl plik

@ -1,4 +1,4 @@
<script lang="ts" setup> <script setup lang="ts">
const emit = defineEmits<{ const emit = defineEmits<{
(event: 'close'): void (event: 'close'): void
}>() }>()

Wyświetl plik

@ -3,7 +3,7 @@ defineOptions({
inheritAttrs: false, inheritAttrs: false,
}) })
const { blurhash = '', src, srcset, shouldLoadImage = true } = defineProps<{ const { blurhash = '', shouldLoadImage = true } = defineProps<{
blurhash?: string blurhash?: string
src: string src: string
srcset?: string srcset?: string

Wyświetl plik

@ -4,6 +4,8 @@ defineProps<{
hover?: boolean hover?: boolean
iconChecked?: string iconChecked?: string
iconUnchecked?: string iconUnchecked?: string
checkedIconColor?: string
prependCheckbox?: boolean
}>() }>()
const modelValue = defineModel<boolean | null>() const modelValue = defineModel<boolean | null>()
</script> </script>
@ -15,9 +17,12 @@ const modelValue = defineModel<boolean | null>()
v-bind="$attrs" v-bind="$attrs"
@click.prevent="modelValue = !modelValue" @click.prevent="modelValue = !modelValue"
> >
<span v-if="label" flex-1 ms-2 pointer-events-none>{{ label }}</span> <span v-if="label && !prependCheckbox" flex-1 ms-2 pointer-events-none>{{ label }}</span>
<span <span
:class="modelValue ? (iconChecked ?? 'i-ri:checkbox-line') : (iconUnchecked ?? 'i-ri:checkbox-blank-line')" :class="[
modelValue ? (iconChecked ?? 'i-ri:checkbox-line') : (iconUnchecked ?? 'i-ri:checkbox-blank-line'),
modelValue && checkedIconColor,
]"
text-lg text-lg
aria-hidden="true" aria-hidden="true"
/> />
@ -26,6 +31,7 @@ const modelValue = defineModel<boolean | null>()
type="checkbox" type="checkbox"
sr-only sr-only
> >
<span v-if="label && prependCheckbox" flex-1 ms-2 pointer-events-none>{{ label }}</span>
</label> </label>
</template> </template>

Wyświetl plik

@ -1,27 +1,20 @@
<script lang="ts" setup> <script setup lang="ts">
import type { Boundaries } from 'vue-advanced-cropper' import type { Boundaries } from 'vue-advanced-cropper'
import { Cropper } from 'vue-advanced-cropper' import { Cropper } from 'vue-advanced-cropper'
import 'vue-advanced-cropper/dist/style.css' import 'vue-advanced-cropper/dist/style.css'
export interface Props { const { stencilAspectRatio = 1 / 1, stencilSizePercentage = 0.9 } = defineProps<{
/** Crop frame aspect ratio (width/height), default 1/1 */ /** Crop frame aspect ratio (width/height), default 1/1 */
stencilAspectRatio?: number 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 */ /** 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 stencilSizePercentage?: number
} }>()
const props = withDefaults(defineProps<Props>(), {
stencilAspectRatio: 1 / 1,
stencilSizePercentage: 0.9,
})
const file = defineModel<File | null>() const file = defineModel<File | null>()
const cropperDialog = ref(false) const cropperDialog = ref(false)
const cropper = ref<InstanceType<typeof Cropper>>() const cropper = ref<InstanceType<typeof Cropper>>()
const cropperFlag = ref(false) const cropperFlag = ref(false)
const cropperImage = reactive({ const cropperImage = reactive({
src: '', src: '',
type: 'image/jpg', type: 'image/jpg',
@ -29,8 +22,8 @@ const cropperImage = reactive({
function stencilSize({ boundaries }: { boundaries: Boundaries }) { function stencilSize({ boundaries }: { boundaries: Boundaries }) {
return { return {
width: boundaries.width * props.stencilSizePercentage, width: boundaries.width * stencilSizePercentage,
height: boundaries.height * props.stencilSizePercentage, height: boundaries.height * stencilSizePercentage,
} }
} }
@ -82,7 +75,7 @@ function cropImage() {
}" }"
:stencil-size="stencilSize" :stencil-size="stencilSize"
:stencil-props="{ :stencil-props="{
aspectRatio: props.stencilAspectRatio, aspectRatio: stencilAspectRatio,
movable: false, movable: false,
resizable: false, resizable: false,
handlers: {}, handlers: {},

Wyświetl plik

@ -1,22 +1,22 @@
<script lang="ts" setup> <script setup lang="ts">
import { fileOpen } from 'browser-fs-access'
import type { FileWithHandle } from 'browser-fs-access' import type { FileWithHandle } from 'browser-fs-access'
import { fileOpen } from 'browser-fs-access'
const props = withDefaults(defineProps<{ const {
original,
allowedFileTypes = ['image/jpeg', 'image/png'],
allowedFileSize = 1024 * 1024 * 5, // 5 MB
} = defineProps<{
/** The image src before change */ /** The image src before change */
original?: string original?: string
/** Allowed file types */ /** Allowed file types */
allowedFileTypes?: string[] allowedFileTypes?: string[]
/** Allowed file size */ /** Allowed file size */
allowedFileSize?: number allowedFileSize?: number
imgClass?: string imgClass?: string
loading?: boolean loading?: boolean
}>(), { }>()
allowedFileTypes: () => ['image/jpeg', 'image/png'],
allowedFileSize: 1024 * 1024 * 5, // 5 MB
})
const emit = defineEmits<{ const emit = defineEmits<{
(event: 'pick', value: FileWithHandle): void (event: 'pick', value: FileWithHandle): void
(event: 'error', code: number, message: string): void (event: 'error', code: number, message: string): void
@ -26,25 +26,25 @@ const file = defineModel<FileWithHandle | null>()
const { t } = useI18n() const { t } = useI18n()
const defaultImage = computed(() => props.original || '') const defaultImage = computed(() => original || '')
/** Preview of selected images */ /** Preview of selected images */
const previewImage = ref('') const previewImage = ref('')
/** The current images on display */ /** The current images on display */
const imageSrc = computed<string>(() => previewImage.value || defaultImage.value) const imageSrc = computed<string>(() => previewImage.value || defaultImage.value)
async function pickImage() { async function pickImage() {
if (process.server) if (import.meta.server)
return return
const image = await fileOpen({ const image = await fileOpen({
description: 'Image', description: 'Image',
mimeTypes: props.allowedFileTypes, mimeTypes: allowedFileTypes,
}) })
if (!props.allowedFileTypes.includes(image.type)) { if (!allowedFileTypes.includes(image.type)) {
emit('error', 1, t('error.unsupported_file_format')) emit('error', 1, t('error.unsupported_file_format'))
return return
} }
else if (image.size > props.allowedFileSize) { else if (image.size > allowedFileSize) {
emit('error', 2, t('error.file_size_cannot_exceed_n_mb', [5])) emit('error', 2, t('error.file_size_cannot_exceed_n_mb', [5]))
return return
} }

Wyświetl plik

@ -2,7 +2,7 @@
const { const {
zIndex = 100, zIndex = 100,
background = 'transparent', background = 'transparent',
} = $defineProps<{ } = defineProps<{
zIndex?: number zIndex?: number
background?: string background?: string
}>() }>()

Wyświetl plik

@ -1,15 +1,15 @@
<script setup lang="ts" generic="T, O, U = T"> <script setup lang="ts" generic="T, O, U = T">
import type { mastodon } from 'masto'
// @ts-expect-error missing types // @ts-expect-error missing types
import { DynamicScroller } from 'vue-virtual-scroller' import { DynamicScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css' import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import type { mastodon } from 'masto'
import type { UnwrapRef } from 'vue'
const { const {
paginator, paginator,
stream,
keyProp = 'id', keyProp = 'id',
virtualScroller = false, virtualScroller = false,
stream,
eventType,
preprocess, preprocess,
endMessage = true, endMessage = true,
} = defineProps<{ } = defineProps<{
@ -17,6 +17,7 @@ const {
keyProp?: keyof T keyProp?: keyof T
virtualScroller?: boolean virtualScroller?: boolean
stream?: mastodon.streaming.Subscription stream?: mastodon.streaming.Subscription
eventType?: 'update' | 'notification'
preprocess?: (items: (U | T)[]) => U[] preprocess?: (items: (U | T)[]) => U[]
endMessage?: boolean | string endMessage?: boolean | string
}>() }>()
@ -31,7 +32,7 @@ defineSlots<{
newer: U // newer is undefined when index === 0 newer: U // newer is undefined when index === 0
}) => void }) => void
items: (props: { items: (props: {
items: UnwrapRef<U[]> items: U[]
}) => void }) => void
updater: (props: { updater: (props: {
number: number number: number
@ -44,7 +45,7 @@ defineSlots<{
const { t } = useI18n() const { t } = useI18n()
const nuxtApp = useNuxtApp() const nuxtApp = useNuxtApp()
const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, $$(stream), preprocess) const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, toRef(() => stream), eventType, preprocess)
nuxtApp.hook('elk-logo:click', () => { nuxtApp.hook('elk-logo:click', () => {
update() update()
@ -72,7 +73,7 @@ defineExpose({ createEntry, removeEntry, updateEntry })
<template> <template>
<div> <div>
<slot v-if="prevItems.length" name="updater" v-bind="{ number: prevItems.length, update }" /> <slot v-if="prevItems.length" name="updater" v-bind="{ number: prevItems.length, update }" />
<slot name="items" :items="items"> <slot name="items" :items="items as U[]">
<template v-if="virtualScroller"> <template v-if="virtualScroller">
<DynamicScroller <DynamicScroller
v-slot="{ item, active, index }" v-slot="{ item, active, index }"
@ -94,8 +95,8 @@ defineExpose({ createEntry, removeEntry, updateEntry })
</template> </template>
<template v-else> <template v-else>
<slot <slot
v-for="item, index of items" v-for="(item, index) of items"
v-bind="{ key: item[keyProp as keyof U] }" v-bind="{ key: (item as U)[keyProp as keyof U] }"
:item="item as U" :item="item as U"
:older="items[index + 1] as U" :older="items[index + 1] as U"
:newer="items[index - 1] as U" :newer="items[index - 1] as U"

Wyświetl plik

@ -1,24 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import type { RouteLocationRaw } from 'vue-router' import type { CommonRouteTabMoreOption, CommonRouteTabOption } from '#shared/types'
const { t } = useI18n() const { options, command, preventScrollTop = false } = defineProps<{
export interface CommonRouteTabOption {
to: RouteLocationRaw
display: string
disabled?: boolean
name?: string
icon?: string
hide?: boolean
match?: boolean
}
export interface CommonRouteTabMoreOption {
options: CommonRouteTabOption[]
icon?: string
tooltip?: string
match?: boolean
}
const { options, command, replace, preventScrollTop = false, moreOptions } = $defineProps<{
options: CommonRouteTabOption[] options: CommonRouteTabOption[]
moreOptions?: CommonRouteTabMoreOption moreOptions?: CommonRouteTabMoreOption
command?: boolean command?: boolean
@ -26,15 +9,16 @@ const { options, command, replace, preventScrollTop = false, moreOptions } = $de
preventScrollTop?: boolean preventScrollTop?: boolean
}>() }>()
const { t } = useI18n()
const router = useRouter() const router = useRouter()
useCommands(() => command useCommands(() => command
? options.map(tab => ({ ? options.map(tab => ({
scope: 'Tabs', scope: 'Tabs',
name: tab.display, name: tab.display,
icon: tab.icon ?? 'i-ri:file-list-2-line', icon: tab.icon ?? 'i-ri:file-list-2-line',
onActivate: () => router.replace(tab.to), onActivate: () => router.replace(tab.to),
})) }))
: []) : [])
</script> </script>
@ -49,7 +33,7 @@ useCommands(() => command
:to="option.to" :to="option.to"
:replace="replace" :replace="replace"
relative flex flex-auto cursor-pointer sm:px6 px2 rounded transition-all relative flex flex-auto cursor-pointer sm:px6 px2 rounded transition-all
tabindex="1" tabindex="0"
hover:bg-active transition-100 hover:bg-active transition-100
exact-active-class="children:(text-secondary !border-primary !op100 !text-base)" exact-active-class="children:(text-secondary !border-primary !op100 !text-base)"
@click="!preventScrollTop && $scrollToTop()" @click="!preventScrollTop && $scrollToTop()"
@ -60,7 +44,7 @@ useCommands(() => command
<span ws-nowrap mxa sm:px2 sm:py3 py2 text-center text-secondary-light op50>{{ option.display }}</span> <span ws-nowrap mxa sm:px2 sm:py3 py2 text-center text-secondary-light op50>{{ option.display }}</span>
</div> </div>
</template> </template>
<template v-if="moreOptions?.options?.length"> <template v-if="isHydrated && moreOptions?.options?.length">
<CommonDropdown placement="bottom" flex cursor-pointer mx-1.25rem> <CommonDropdown placement="bottom" flex cursor-pointer mx-1.25rem>
<CommonTooltip placement="top" :content="moreOptions.tooltip || t('action.more')"> <CommonTooltip placement="top" :content="moreOptions.tooltip || t('action.more')">
<button <button

Wyświetl plik

@ -1,5 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
const { as = 'div', active } = defineProps<{ as: any; active: boolean }>() const { as = 'div', active } = defineProps<{
as: any
active: boolean
}>()
const el = ref() const el = ref()
watch(() => active, (active) => { watch(() => active, (active) => {

Wyświetl plik

@ -10,7 +10,7 @@ const { options, command } = defineProps<{
const modelValue = defineModel<string>({ required: true }) const modelValue = defineModel<string>({ required: true })
const tabs = $computed(() => { const tabs = computed(() => {
return options.map((option) => { return options.map((option) => {
if (typeof option === 'string') if (typeof option === 'string')
return { name: option, display: option } return { name: option, display: option }
@ -19,19 +19,19 @@ const tabs = $computed(() => {
}) })
}) })
function toValidName(otpion: string) { function toValidName(option: string) {
return otpion.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-') return option.toLowerCase().replace(/[^a-z0-9]/gi, '-')
} }
useCommands(() => command useCommands(() => command
? tabs.map(tab => ({ ? tabs.value.map(tab => ({
scope: 'Tabs', scope: 'Tabs',
name: tab.display, name: tab.display,
icon: tab.icon ?? 'i-ri:file-list-2-line', icon: tab.icon ?? 'i-ri:file-list-2-line',
onActivate: () => modelValue.value = tab.name, onActivate: () => modelValue.value = tab.name,
})) }))
: []) : [])
</script> </script>
@ -49,7 +49,7 @@ useCommands(() => command
><label ><label
flex flex-auto cursor-pointer px3 m1 rounded transition-all flex flex-auto cursor-pointer px3 m1 rounded transition-all
:for="`tab-${toValidName(option.name)}`" :for="`tab-${toValidName(option.name)}`"
tabindex="1" tabindex="0"
hover:bg-active transition-100 hover:bg-active transition-100
@keypress.enter="modelValue = option.name" @keypress.enter="modelValue = option.name"
><span ><span

Wyświetl plik

@ -10,8 +10,10 @@ defineProps<Props>()
<template> <template>
<VTooltip <VTooltip
v-if="isHydrated"
v-bind="$attrs" v-bind="$attrs"
auto-hide auto-hide
no-auto-focus
> >
<slot /> <slot />
<template #popper> <template #popper>

Wyświetl plik

@ -1,18 +1,18 @@
<script lang="ts" setup> <script setup lang="ts">
import type { mastodon } from 'masto' import type { mastodon } from 'masto'
const { const {
history, history,
maxDay = 2, maxDay = 2,
} = $defineProps<{ } = defineProps<{
history: mastodon.v1.TagHistory[] history: mastodon.v1.TagHistory[]
maxDay?: number maxDay?: number
}>() }>()
const ongoingHot = $computed(() => history.slice(0, maxDay)) const ongoingHot = computed(() => history.slice(0, maxDay))
const people = $computed(() => const people = computed(() =>
ongoingHot.reduce((total: number, item) => total + (Number(item.accounts) || 0), 0), ongoingHot.value.reduce((total: number, item) => total + (Number(item.accounts) || 0), 0),
) )
</script> </script>

Wyświetl plik

@ -1,4 +1,4 @@
<script lang="ts" setup> <script setup lang="ts">
import type { mastodon } from 'masto' import type { mastodon } from 'masto'
import sparkline from '@fnando/sparkline' import sparkline from '@fnando/sparkline'
@ -6,22 +6,22 @@ const {
history, history,
width = 60, width = 60,
height = 40, height = 40,
} = $defineProps<{ } = defineProps<{
history?: mastodon.v1.TagHistory[] history?: mastodon.v1.TagHistory[]
width?: number width?: number
height?: number height?: number
}>() }>()
const historyNum = $computed(() => { const historyNum = computed(() => {
if (!history) if (!history)
return [1, 1, 1, 1, 1, 1, 1] return [1, 1, 1, 1, 1, 1, 1]
return [...history].reverse().map(item => Number(item.accounts) || 0) return [...history].reverse().map(item => Number(item.accounts) || 0)
}) })
const sparklineEl = $ref<SVGSVGElement>() const sparklineEl = ref<SVGSVGElement>()
const sparklineFn = typeof sparkline !== 'function' ? (sparkline as any).default : sparkline const sparklineFn = typeof sparkline !== 'function' ? (sparkline as any).default : sparkline
watch([$$(historyNum), $$(sparklineEl)], ([historyNum, sparklineEl]) => { watch([historyNum, sparklineEl], ([historyNum, sparklineEl]) => {
if (!sparklineEl) if (!sparklineEl)
return return
sparklineFn(sparklineEl, historyNum) sparklineFn(sparklineEl, historyNum)

Wyświetl plik

@ -3,16 +3,16 @@ defineOptions({
inheritAttrs: false, inheritAttrs: false,
}) })
const props = defineProps<{ const { count } = defineProps<{
count: number count: number
keypath: string keypath: string
}>() }>()
const { formatHumanReadableNumber, formatNumber, forSR } = useHumanReadableNumber() const { formatHumanReadableNumber, formatNumber, forSR } = useHumanReadableNumber()
const useSR = $computed(() => forSR(props.count)) const useSR = computed(() => forSR(count))
const rawNumber = $computed(() => formatNumber(props.count)) const rawNumber = computed(() => formatNumber(count))
const humanReadableNumber = $computed(() => formatHumanReadableNumber(props.count)) const humanReadableNumber = computed(() => formatHumanReadableNumber(count))
</script> </script>
<template> <template>

Wyświetl plik

@ -6,11 +6,11 @@ defineProps<{
autoBoundaryMaxSize?: boolean autoBoundaryMaxSize?: boolean
}>() }>()
const dropdown = $ref<any>() const dropdown = ref<any>()
const colorMode = useColorMode() const colorMode = useColorMode()
function hide() { function hide() {
return dropdown.hide() return dropdown.value.hide()
} }
provide(InjectionKeyDropdownContext, { provide(InjectionKeyDropdownContext, {
hide, hide,

Wyświetl plik

@ -1,16 +1,23 @@
<script setup lang="ts"> <script setup lang="ts">
const props = withDefaults(defineProps<{ const {
is = 'div',
text,
description,
icon,
command,
} = defineProps<{
is?: string is?: string
text?: string text?: string
description?: string description?: string
icon?: string icon?: string
checked?: boolean checked?: boolean
command?: boolean command?: boolean
}>(), { }>()
is: 'div',
})
const emit = defineEmits(['click']) const emit = defineEmits(['click'])
const type = computed(() => is === 'button' ? 'button' : null)
const { hide } = useDropdownContext() || {} const { hide } = useDropdownContext() || {}
const el = ref<HTMLDivElement>() const el = ref<HTMLDivElement>()
@ -24,11 +31,11 @@ useCommand({
scope: 'Actions', scope: 'Actions',
order: -1, order: -1,
visible: () => props.command && props.text, visible: () => command && text,
name: () => props.text!, name: () => text!,
icon: () => props.icon ?? 'i-ri:question-line', icon: () => icon ?? 'i-ri:question-line',
description: () => props.description, description: () => description,
onActivate() { onActivate() {
const clickEvent = new MouseEvent('click', { const clickEvent = new MouseEvent('click', {
@ -46,6 +53,7 @@ useCommand({
v-bind="$attrs" v-bind="$attrs"
:is="is" :is="is"
ref="el" ref="el"
:type="type"
w-full w-full
flex gap-3 items-center cursor-pointer px4 py3 flex gap-3 items-center cursor-pointer px4 py3
select-none select-none

Wyświetl plik

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

Wyświetl plik

@ -5,7 +5,7 @@ const { conversation } = defineProps<{
conversation: mastodon.v1.Conversation conversation: mastodon.v1.Conversation
}>() }>()
const withAccounts = $computed(() => const withAccounts = computed(() =>
conversation.accounts.filter(account => account.id !== conversation.lastStatus?.account.id), conversation.accounts.filter(account => account.id !== conversation.lastStatus?.account.id),
) )
</script> </script>

Wyświetl plik

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import type { mastodon } from 'masto' import type { mastodon } from 'masto'
const { paginator } = defineProps<{ defineProps<{
paginator: mastodon.Paginator<mastodon.v1.Conversation[], mastodon.DefaultPaginationParams> paginator: mastodon.Paginator<mastodon.v1.Conversation[], mastodon.DefaultPaginationParams>
}>() }>()

Wyświetl plik

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

Wyświetl plik

@ -2,12 +2,14 @@
const emit = defineEmits<{ const emit = defineEmits<{
(event: 'close'): void (event: 'close'): void
}>() }>()
const vAutoFocus = (el: HTMLElement) => el.focus()
</script> </script>
<template> <template>
<div my-8 px-3 sm:px-8 md:max-w-200 flex="~ col gap-4" relative> <div my-8 px-3 sm:px-8 md:max-w-200 flex="~ col gap-4" relative>
<button btn-action-icon absolute top--8 right-0 m1 aria-label="Close" @click="emit('close')"> <button v-auto-focus type="button" btn-action-icon absolute top--8 right-0 m1 :aria-label="$t('action.close')" @click="emit('close')">
<div i-ri:close-line /> <span i-ri:close-line />
</button> </button>
<img :alt="$t('app_logo')" :src="`/${''}logo.svg`" w-20 h-20 height="80" width="80" mxa class="rtl-flip"> <img :alt="$t('app_logo')" :src="`/${''}logo.svg`" w-20 h-20 height="80" width="80" mxa class="rtl-flip">
@ -28,10 +30,12 @@ const emit = defineEmits<{
</NuxtLink> </NuxtLink>
{{ $t('help.desc_para6') }} {{ $t('help.desc_para6') }}
</p> </p>
{{ $t('help.desc_para3') }} <NuxtLink hover:text-primary href="https://github.com/sponsors/elk-zone" target="_blank">
<p flex="~ gap-2 wrap" mxa> {{ $t('help.desc_para3') }}
</NuxtLink>
<p flex="~ gap-2 wrap justify-center" mxa>
<template v-for="team of elkTeamMembers" :key="team.github"> <template v-for="team of elkTeamMembers" :key="team.github">
<NuxtLink :href="`https://github.com/sponsors/${team.github}`" target="_blank" external rounded-full transition duration-300 border="~ transparent" hover="scale-105 border-primary"> <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"> <img :src="`/avatars/${team.github}-100x100.png`" :alt="team.display" rounded-full w-15 h-15 height="60" width="60">
</NuxtLink> </NuxtLink>
</template> </template>
@ -42,7 +46,7 @@ const emit = defineEmits<{
</NuxtLink> </NuxtLink>
</p> </p>
<button btn-solid mxa tabindex="2" @click="emit('close')"> <button type="button" btn-solid mxa @click="emit('close')">
{{ $t('action.enter_app') }} {{ $t('action.enter_app') }}
</button> </button>
</div> </div>

Wyświetl plik

@ -15,9 +15,10 @@ const isRemoved = ref(false)
async function edit() { async function edit() {
try { try {
isRemoved.value if (isRemoved.value)
? await client.v1.lists.$select(list).accounts.create({ accountIds: [account.id] }) await client.v1.lists.$select(list).accounts.create({ accountIds: [account.id] })
: await client.v1.lists.$select(list).accounts.remove({ accountIds: [account.id] }) else
await client.v1.lists.$select(list).accounts.remove({ accountIds: [account.id] })
isRemoved.value = !isRemoved.value isRemoved.value = !isRemoved.value
} }
catch (err) { catch (err) {
@ -39,11 +40,11 @@ async function edit() {
<CommonTooltip <CommonTooltip
:content="isRemoved ? $t('list.add_account') : $t('list.remove_account')" :content="isRemoved ? $t('list.add_account') : $t('list.remove_account')"
:hover="isRemoved ? 'text-green' : 'text-red'" :hover="isRemoved ? 'text-green' : 'text-red'"
no-auto-focus
> >
<button <button
text-sm p2 border-1 transition-colors text-sm p2 border-1 transition-colors
border-dark border-dark
bg-base
btn-action-icon btn-action-icon
@click="edit" @click="edit"
> >

Wyświetl plik

@ -0,0 +1,23 @@
<script setup lang="ts">
import type { SearchResult } from '~/composables/masto/search'
defineProps<{
result: SearchResult
active: boolean
}>()
</script>
<template>
<CommonScrollIntoView
as="div"
:active="active"
py2 block px2
:aria-selected="active"
:class="{ 'bg-active': active }"
>
<AccountInfo
v-if="result.type === 'account'"
:account="result.data"
/>
</CommonScrollIntoView>
</template>

Wyświetl plik

@ -15,26 +15,26 @@ const { form, isDirty, submitter, reset } = useForm({
form: () => ({ ...list.value }), form: () => ({ ...list.value }),
}) })
let isEditing = $ref<boolean>(false) const isEditing = ref<boolean>(false)
let deleting = $ref<boolean>(false) const deleting = ref<boolean>(false)
let actionError = $ref<string | undefined>(undefined) const actionError = ref<string | undefined>(undefined)
const input = ref<HTMLInputElement>() const input = ref<HTMLInputElement>()
const editBtn = ref<HTMLButtonElement>() const editBtn = ref<HTMLButtonElement>()
const deleteBtn = ref<HTMLButtonElement>() const deleteBtn = ref<HTMLButtonElement>()
async function prepareEdit() { async function prepareEdit() {
isEditing = true isEditing.value = true
actionError = undefined actionError.value = undefined
await nextTick() await nextTick()
input.value?.focus() input.value?.focus()
} }
async function cancelEdit() { async function cancelEdit() {
isEditing = false isEditing.value = false
actionError = undefined actionError.value = undefined
reset()
await nextTick() await nextTick()
reset()
editBtn.value?.focus() editBtn.value?.focus()
} }
@ -47,14 +47,14 @@ const { submit, submitting } = submitter(async () => {
} }
catch (err) { catch (err) {
console.error(err) console.error(err)
actionError = (err as Error).message actionError.value = (err as Error).message
await nextTick() await nextTick()
input.value?.focus() input.value?.focus()
} }
}) })
async function removeList() { async function removeList() {
if (deleting) if (deleting.value)
return return
const confirmDelete = await openConfirmDialog({ const confirmDelete = await openConfirmDialog({
@ -64,11 +64,11 @@ async function removeList() {
cancel: t('confirm.delete_list.cancel'), cancel: t('confirm.delete_list.cancel'),
}) })
deleting = true deleting.value = true
actionError = undefined actionError.value = undefined
await nextTick() await nextTick()
if (confirmDelete === 'confirm') { if (confirmDelete.choice === 'confirm') {
await nextTick() await nextTick()
try { try {
await client.v1.lists.$select(list.value.id).remove() await client.v1.lists.$select(list.value.id).remove()
@ -76,23 +76,23 @@ async function removeList() {
} }
catch (err) { catch (err) {
console.error(err) console.error(err)
actionError = (err as Error).message actionError.value = (err as Error).message
await nextTick() await nextTick()
deleteBtn.value?.focus() deleteBtn.value?.focus()
} }
finally { finally {
deleting = false deleting.value = false
} }
} }
else { else {
deleting = false deleting.value = false
} }
} }
async function clearError() { async function clearError() {
actionError = undefined actionError.value = undefined
await nextTick() await nextTick()
if (isEditing) if (isEditing.value)
input.value?.focus() input.value?.focus()
else else
deleteBtn.value?.focus() deleteBtn.value?.focus()
@ -113,7 +113,7 @@ onDeactivated(cancelEdit)
bg-base border="~ base" h10 m2 ps-1 pe-4 rounded-3 w-full flex="~ row" 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 items-center relative focus-within:box-shadow-outline gap-3
> >
<CommonTooltip v-if="isEditing" :content="$t('list.cancel_edit')" no-auto-focus> <CommonTooltip v-if="isEditing" :content="$t('list.cancel_edit')">
<button <button
type="button" type="button"
rounded-full text-sm p2 transition-colors rounded-full text-sm p2 transition-colors
@ -136,7 +136,7 @@ onDeactivated(cancelEdit)
{{ form.title }} {{ form.title }}
</NuxtLink> </NuxtLink>
<div mr4 flex gap2> <div mr4 flex gap2>
<CommonTooltip v-if="isEditing" :content="$t('list.save')" no-auto-focus> <CommonTooltip v-if="isEditing" :content="$t('list.save')">
<button <button
type="submit" type="submit"
text-sm p2 border-1 transition-colors text-sm p2 border-1 transition-colors
@ -152,7 +152,7 @@ onDeactivated(cancelEdit)
</template> </template>
</button> </button>
</CommonTooltip> </CommonTooltip>
<CommonTooltip v-else :content="$t('list.edit')" no-auto-focus> <CommonTooltip v-else :content="$t('list.edit')">
<button <button
ref="editBtn" ref="editBtn"
type="button" type="button"
@ -164,7 +164,7 @@ onDeactivated(cancelEdit)
<span block text-current i-ri:edit-2-line class="rtl-flip" /> <span block text-current i-ri:edit-2-line class="rtl-flip" />
</button> </button>
</CommonTooltip> </CommonTooltip>
<CommonTooltip :content="$t('list.delete')" no-auto-focus> <CommonTooltip :content="$t('list.delete')">
<button <button
type="button" type="button"
text-sm p2 border-1 transition-colors text-sm p2 border-1 transition-colors
@ -192,7 +192,7 @@ onDeactivated(cancelEdit)
<div aria-hidden="true" i-ri:error-warning-fill /> <div aria-hidden="true" i-ri:error-warning-fill />
<p>{{ $t(`list.${isEditing ? 'edit_error' : 'delete_error'}`) }}</p> <p>{{ $t(`list.${isEditing ? 'edit_error' : 'delete_error'}`) }}</p>
</div> </div>
<CommonTooltip placement="bottom" :content="$t('list.clear_error')" no-auto-focus> <CommonTooltip placement="bottom" :content="$t('list.clear_error')">
<button <button
flex rounded-4 p1 hover:bg-active cursor-pointer transition-100 :aria-label="$t('list.clear_error')" flex rounded-4 p1 hover:bg-active cursor-pointer transition-100 :aria-label="$t('list.clear_error')"
@click="clearError" @click="clearError"

Wyświetl plik

@ -1,11 +1,11 @@
<script lang="ts" setup> <script setup lang="ts">
const { userId } = defineProps<{ const { userId } = defineProps<{
userId: string userId: string
}>() }>()
const { client } = $(useMasto()) const { client } = useMasto()
const paginator = client.v1.lists.list() const paginator = client.value.v1.lists.list()
const listsWithUser = ref((await client.v1.accounts.$select(userId).lists.list()).map(list => list.id)) const listsWithUser = ref((await client.value.v1.accounts.$select(userId).lists.list()).map(list => list.id))
function indexOfUserInList(listId: string) { function indexOfUserInList(listId: string) {
return listsWithUser.value.indexOf(listId) return listsWithUser.value.indexOf(listId)
@ -15,11 +15,11 @@ async function edit(listId: string) {
try { try {
const index = indexOfUserInList(listId) const index = indexOfUserInList(listId)
if (index === -1) { if (index === -1) {
await client.v1.lists.$select(listId).accounts.create({ accountIds: [userId] }) await client.value.v1.lists.$select(listId).accounts.create({ accountIds: [userId] })
listsWithUser.value.push(listId) listsWithUser.value.push(listId)
} }
else { else {
await client.v1.lists.$select(listId).accounts.remove({ accountIds: [userId] }) await client.value.v1.lists.$select(listId).accounts.remove({ accountIds: [userId] })
listsWithUser.value = listsWithUser.value.filter(id => id !== listId) listsWithUser.value = listsWithUser.value.filter(id => id !== listId)
} }
} }
@ -30,7 +30,7 @@ async function edit(listId: string) {
</script> </script>
<template> <template>
<CommonPaginator :end-message="false" :paginator="paginator"> <CommonPaginator :paginator="paginator">
<template #default="{ item }"> <template #default="{ item }">
<div p4 hover:bg-active block w="100%" flex justify-between items-center gap-4> <div p4 hover:bg-active block w="100%" flex justify-between items-center gap-4>
<p>{{ item.title }}</p> <p>{{ item.title }}</p>
@ -49,5 +49,13 @@ async function edit(listId: string) {
</CommonTooltip> </CommonTooltip>
</div> </div>
</template> </template>
<template #done>
<NuxtLink
p4 hover:bg-active block w="100%" flex justify-between items-center gap-4
to="/lists"
>
<p>{{ $t('list.manage') }}</p>
</NuxtLink>
</template>
</CommonPaginator> </CommonPaginator>
</template> </template>

Wyświetl plik

@ -22,9 +22,9 @@ interface ShortcutItemGroup {
} }
const isMac = useIsMac() const isMac = useIsMac()
const modifierKeyName = $computed(() => isMac.value ? '⌘' : 'Ctrl') const modifierKeyName = computed(() => isMac.value ? '⌘' : 'Ctrl')
const shortcutItemGroups: ShortcutItemGroup[] = [ const shortcutItemGroups = computed<ShortcutItemGroup[]>(() => [
{ {
name: t('magic_keys.groups.navigation.title'), name: t('magic_keys.groups.navigation.title'),
items: [ items: [
@ -32,14 +32,18 @@ const shortcutItemGroups: ShortcutItemGroup[] = [
description: t('magic_keys.groups.navigation.shortcut_help'), description: t('magic_keys.groups.navigation.shortcut_help'),
shortcut: { keys: ['?'], isSequence: false }, shortcut: { keys: ['?'], isSequence: false },
}, },
// { {
// description: t('magic_keys.groups.navigation.next_status'), description: t('magic_keys.groups.navigation.next_status'),
// shortcut: { keys: ['j'], isSequence: false }, shortcut: { keys: ['j'], isSequence: false },
// }, },
// { {
// description: t('magic_keys.groups.navigation.previous_status'), description: t('magic_keys.groups.navigation.previous_status'),
// shortcut: { keys: ['k'], isSequence: false }, shortcut: { keys: ['k'], isSequence: false },
// }, },
{
description: t('magic_keys.groups.navigation.go_to_search'),
shortcut: { keys: ['/'], isSequence: false },
},
{ {
description: t('magic_keys.groups.navigation.go_to_home'), description: t('magic_keys.groups.navigation.go_to_home'),
shortcut: { keys: ['g', 'h'], isSequence: true }, shortcut: { keys: ['g', 'h'], isSequence: true },
@ -48,6 +52,42 @@ const shortcutItemGroups: ShortcutItemGroup[] = [
description: t('magic_keys.groups.navigation.go_to_notifications'), description: t('magic_keys.groups.navigation.go_to_notifications'),
shortcut: { keys: ['g', 'n'], isSequence: true }, shortcut: { keys: ['g', 'n'], isSequence: true },
}, },
{
description: t('magic_keys.groups.navigation.go_to_conversations'),
shortcut: { keys: ['g', 'c'], isSequence: true },
},
{
description: t('magic_keys.groups.navigation.go_to_favourites'),
shortcut: { keys: ['g', 'f'], isSequence: true },
},
{
description: t('magic_keys.groups.navigation.go_to_bookmarks'),
shortcut: { keys: ['g', 'b'], isSequence: true },
},
{
description: t('magic_keys.groups.navigation.go_to_explore'),
shortcut: { keys: ['g', 'e'], isSequence: true },
},
{
description: t('magic_keys.groups.navigation.go_to_local'),
shortcut: { keys: ['g', 'l'], isSequence: true },
},
{
description: t('magic_keys.groups.navigation.go_to_federated'),
shortcut: { keys: ['g', 't'], isSequence: true },
},
{
description: t('magic_keys.groups.navigation.go_to_lists'),
shortcut: { keys: ['g', 'i'], isSequence: true },
},
{
description: t('magic_keys.groups.navigation.go_to_settings'),
shortcut: { keys: ['g', 's'], isSequence: true },
},
{
description: t('magic_keys.groups.navigation.go_to_profile'),
shortcut: { keys: ['g', 'p'], isSequence: true },
},
], ],
}, },
{ {
@ -55,16 +95,20 @@ const shortcutItemGroups: ShortcutItemGroup[] = [
items: [ items: [
{ {
description: t('magic_keys.groups.actions.search'), description: t('magic_keys.groups.actions.search'),
shortcut: { keys: [modifierKeyName, 'k'], isSequence: false }, shortcut: { keys: [modifierKeyName.value, 'k'], isSequence: false },
}, },
{ {
description: t('magic_keys.groups.actions.command_mode'), description: t('magic_keys.groups.actions.command_mode'),
shortcut: { keys: [modifierKeyName, '/'], isSequence: false }, shortcut: { keys: [modifierKeyName.value, '/'], isSequence: false },
}, },
{ {
description: t('magic_keys.groups.actions.compose'), description: t('magic_keys.groups.actions.compose'),
shortcut: { keys: ['c'], isSequence: false }, shortcut: { keys: ['c'], isSequence: false },
}, },
{
description: t('magic_keys.groups.actions.show_new_items'),
shortcut: { keys: ['.'], isSequence: false },
},
{ {
description: t('magic_keys.groups.actions.favourite'), description: t('magic_keys.groups.actions.favourite'),
shortcut: { keys: ['f'], isSequence: false }, shortcut: { keys: ['f'], isSequence: false },
@ -79,7 +123,7 @@ const shortcutItemGroups: ShortcutItemGroup[] = [
name: t('magic_keys.groups.media.title'), name: t('magic_keys.groups.media.title'),
items: [], items: [],
}, },
] ])
</script> </script>
<template> <template>

Wyświetl plik

@ -27,7 +27,7 @@ const containerClass = computed(() => {
<template> <template>
<div ref="container" :class="containerClass"> <div ref="container" :class="containerClass">
<div <div
sticky top-0 z10 sticky top-0 z-20
pt="[env(safe-area-inset-top,0)]" pt="[env(safe-area-inset-top,0)]"
bg="[rgba(var(--rgb-bg-base),0.7)]" bg="[rgba(var(--rgb-bg-base),0.7)]"
class="native:lg:w-[calc(100vw-5rem)] native:xl:w-[calc(135%+(100vw-1200px)/2)]" class="native:lg:w-[calc(100vw-5rem)] native:xl:w-[calc(135%+(100vw-1200px)/2)]"

Wyświetl plik

@ -0,0 +1,45 @@
<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>

Wyświetl plik

@ -0,0 +1,56 @@
<script setup lang="ts">
import type { ConfirmDialogChoice, ConfirmDialogOptions } from '#shared/types'
const { extraOptionType } = defineProps<ConfirmDialogOptions>()
const emit = defineEmits<{
(evt: 'choice', choice: ConfirmDialogChoice): void
}>()
const hasDuration = ref(false)
const isValidDuration = ref(true)
const duration = ref(60 * 60) // default to 1 hour
const shouldMuteNotifications = ref(true)
const isMute = computed(() => extraOptionType === 'mute')
function handleChoice(choice: ConfirmDialogChoice['choice']) {
const dialogChoice = {
choice,
...isMute.value && {
extraOptions: {
mute: {
duration: hasDuration.value ? duration.value : 0,
notifications: shouldMuteNotifications.value,
},
},
},
}
emit('choice', dialogChoice)
}
</script>
<template>
<div flex="~ col" gap-6>
<div font-bold text-lg>
{{ title }}
</div>
<div v-if="description">
{{ description }}
</div>
<div v-if="isMute" flex-col flex gap-4>
<CommonCheckbox v-model="hasDuration" :label="$t('confirm.mute_account.specify_duration')" prepend-checkbox checked-icon-color="text-primary" />
<ModalDurationPicker v-if="hasDuration" v-model="duration" v-model:is-valid="isValidDuration" />
<CommonCheckbox v-model="shouldMuteNotifications" :label="$t('confirm.mute_account.notifications')" prepend-checkbox checked-icon-color="text-primary" />
</div>
<div flex justify-end gap-2>
<button btn-text @click="handleChoice('cancel')">
{{ cancel || $t('confirm.common.cancel') }}
</button>
<button btn-solid :disabled="!isValidDuration" @click="handleChoice('confirm')">
{{ confirm || $t('confirm.common.confirm') }}
</button>
</div>
</div>
</template>

Wyświetl plik

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { ConfirmDialogChoice } from '#shared/types'
import type { mastodon } from 'masto' import type { mastodon } from 'masto'
import type { ConfirmDialogChoice } from '~/types'
import { import {
isCommandPanelOpen, isCommandPanelOpen,
isConfirmDialogOpen, isConfirmDialogOpen,
@ -63,13 +63,14 @@ function handleFavouritedBoostedByClose() {
</ModalDialog> </ModalDialog>
<ModalDialog <ModalDialog
v-model="isPublishDialogOpen" v-model="isPublishDialogOpen"
max-w-180 flex max-w-180 flex w-full
@close="handlePublishClose" @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 --> <PublishWidgetList
<PublishWidget
v-if="dialogDraftKey" v-if="dialogDraftKey"
:draft-key="dialogDraftKey" expanded flex-1 w-0 :draft-key="dialogDraftKey"
expanded
class="flex-1"
@published="handlePublished" @published="handlePublished"
/> />
</ModalDialog> </ModalDialog>

Wyświetl plik

@ -1,51 +1,27 @@
<script lang="ts" setup> <script setup lang="ts">
import { useFocusTrap } from '@vueuse/integrations/useFocusTrap' import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
export interface Props {
/**
* level of depth
*
* @default 100
*/
zIndex?: number
/**
* 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({ defineOptions({
inheritAttrs: false, inheritAttrs: false,
}) })
const props = withDefaults(defineProps<Props>(), { const {
zIndex: 100, zIndex = 100,
closeByMask: true, closeByMask = true,
useVIf: true, useVIf = true,
keepAlive: false, keepAlive = false,
}) } = defineProps<{
// level of depth
zIndex?: number
// whether to allow close dialog by clicking mask layer
closeByMask?: boolean
// use v-if, destroy all the internal elements after closed
useVIf?: boolean
// keep the dialog opened even when in other views
keepAlive?: boolean
// The aria-labelledby id for the dialog.
dialogLabelledBy?: string
}>()
const emit = defineEmits<{ const emit = defineEmits<{
/** v-model dialog visibility */ /** v-model dialog visibility */
@ -85,7 +61,7 @@ function close() {
} }
function clickMask() { function clickMask() {
if (props.closeByMask) if (closeByMask)
close() close()
} }
@ -97,7 +73,7 @@ watch(visible, (value) => {
const notInCurrentPage = computed(() => deactivated.value || routePath.value !== route.path) const notInCurrentPage = computed(() => deactivated.value || routePath.value !== route.path)
watch(notInCurrentPage, (value) => { watch(notInCurrentPage, (value) => {
if (props.keepAlive) if (keepAlive)
return return
if (value) if (value)
close() close()
@ -106,7 +82,7 @@ watch(notInCurrentPage, (value) => {
// controls the state of v-if. // controls the state of v-if.
// when useVIf is toggled, v-if has the same state as modelValue, otherwise v-if is true // when useVIf is toggled, v-if has the same state as modelValue, otherwise v-if is true
const isVIf = computed(() => { const isVIf = computed(() => {
return props.useVIf return useVIf
? visible.value ? visible.value
: true : true
}) })
@ -114,7 +90,7 @@ const isVIf = computed(() => {
// controls the state of v-show. // controls the state of v-show.
// when useVIf is toggled, v-show is true, otherwise it has the same state as modelValue // when useVIf is toggled, v-show is true, otherwise it has the same state as modelValue
const isVShow = computed(() => { const isVShow = computed(() => {
return !props.useVIf return !useVIf
? visible.value ? visible.value
: true : true
}) })

Wyświetl plik

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import type { ErrorDialogData } from '~/types' import type { ErrorDialogData } from '#shared/types'
defineProps<ErrorDialogData>() defineProps<ErrorDialogData>()
</script> </script>

Wyświetl plik

@ -37,16 +37,16 @@ onUnmounted(() => locked.value = false)
</script> </script>
<template> <template>
<div relative h-full w-full flex pt-12 w-100vh @click="onClick"> <div relative h-full w-full flex pt-12 @click="onClick">
<button <button
v-if="hasNext" pointer-events-auto btn-action-icon bg="black/20" :aria-label="$t('action.previous')" v-if="hasNext" pointer-events-auto btn-action-icon bg="black/20" :aria-label="$t('action.next')"
hover:bg="black/40" dark:bg="white/30" dark-hover:bg="white/20" absolute top="1/2" right-1 z5 hover:bg="black/40" dark:bg="white/30" dark-hover:bg="white/20" absolute top="1/2" right-1 z5
:title="$t('action.next')" @click="next" :title="$t('action.next')" @click="next"
> >
<div i-ri:arrow-right-s-line text-white /> <div i-ri:arrow-right-s-line text-white />
</button> </button>
<button <button
v-if="hasPrev" pointer-events-auto btn-action-icon bg="black/20" aria-label="action.next" v-if="hasPrev" pointer-events-auto btn-action-icon bg="black/20" :aria-label="$t('action.prev')"
hover:bg="black/40" dark:bg="white/30" dark:hover-bg="white/20" absolute top="1/2" left-1 z5 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" :title="$t('action.prev')" @click="prev"
> >
@ -71,7 +71,7 @@ onUnmounted(() => locked.value = false)
<div absolute top-0 w-full flex justify-end> <div absolute top-0 w-full flex justify-end>
<button <button
btn-action-icon bg="black/30" aria-label="action.close" hover:bg="black/40" dark:bg="white/30" btn-action-icon bg="black/30" :aria-label="$t('action.close')" hover:bg="black/40" dark:bg="white/30"
dark:hover-bg="white/20" pointer-events-auto shrink-0 @click="emit('close')" dark:hover-bg="white/20" pointer-events-auto shrink-0 @click="emit('close')"
> >
<div i-ri:close-line text-white /> <div i-ri:close-line text-white />

Wyświetl plik

@ -1,8 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Vector2 } from '@vueuse/gesture' import type { Vector2 } from '@vueuse/gesture'
import type { mastodon } from 'masto'
import { useGesture } from '@vueuse/gesture' import { useGesture } from '@vueuse/gesture'
import { useReducedMotion } from '@vueuse/motion' import { useReducedMotion } from '@vueuse/motion'
import type { mastodon } from 'masto'
const { media = [] } = defineProps<{ const { media = [] } = defineProps<{
media?: mastodon.v1.MediaAttachment[] media?: mastodon.v1.MediaAttachment[]
@ -15,14 +15,14 @@ const emit = defineEmits<{
const modelValue = defineModel<number>({ required: true }) const modelValue = defineModel<number>({ required: true })
const slideGap = 20 const slideGap = 20
const doubleTapTreshold = 250 const doubleTapThreshold = 250
const view = ref() const view = ref()
const slider = ref() const slider = ref()
const slide = ref() const slide = ref()
const image = ref() const image = ref()
const reduceMotion = process.server ? ref(false) : useReducedMotion() const reduceMotion = import.meta.server ? ref(false) : useReducedMotion()
const isInitialScrollDone = useTimeout(350) const isInitialScrollDone = useTimeout(350)
const canAnimate = computed(() => isInitialScrollDone.value && !reduceMotion.value) const canAnimate = computed(() => isInitialScrollDone.value && !reduceMotion.value)
@ -36,6 +36,8 @@ const isPinching = ref(false)
const maxZoomOut = ref(1) const maxZoomOut = ref(1)
const isZoomedIn = computed(() => scale.value > 1) const isZoomedIn = computed(() => scale.value > 1)
const enableAutoplay = usePreferences('enableAutoplay')
function goToFocusedSlide() { function goToFocusedSlide() {
scale.value = 1 scale.value = 1
x.value = slide.value[modelValue.value].offsetLeft * scale.value x.value = slide.value[modelValue.value].offsetLeft * scale.value
@ -147,7 +149,7 @@ function handleLastDrag(tap: boolean, swipe: Vector2, movement: Vector2, positio
let lastTapAt = 0 let lastTapAt = 0
function handleTap([positionX, positionY]: Vector2) { function handleTap([positionX, positionY]: Vector2) {
const now = Date.now() const now = Date.now()
const isDoubleTap = now - lastTapAt < doubleTapTreshold const isDoubleTap = now - lastTapAt < doubleTapThreshold
lastTapAt = now lastTapAt = now
if (!isDoubleTap) if (!isDoubleTap)
@ -218,7 +220,7 @@ function handleZoomDrag([deltaX, deltaY]: Vector2) {
function handleSlideDrag([movementX, movementY]: Vector2) { function handleSlideDrag([movementX, movementY]: Vector2) {
goToFocusedSlide() goToFocusedSlide()
if (Math.abs(movementY) > Math.abs(movementX)) // vertical movement is more then horizontal if (Math.abs(movementY) > Math.abs(movementX)) // vertical movement is more than horizontal
y.value -= movementY / scale.value y.value -= movementY / scale.value
else else
x.value -= movementX / scale.value x.value -= movementX / scale.value
@ -264,8 +266,12 @@ const imageStyle = computed(() => ({
items-center items-center
justify-center justify-center
> >
<img <component
:is="item.type === 'gifv' ? 'video' : 'img'"
ref="image" ref="image"
:autoplay="enableAutoplay"
controls
loop
select-none select-none
max-w-full max-w-full
max-h-full max-h-full
@ -273,7 +279,7 @@ const imageStyle = computed(() => ({
:draggable="false" :draggable="false"
:src="item.url || item.previewUrl" :src="item.url || item.previewUrl"
:alt="item.description || ''" :alt="item.description || ''"
> />
</div> </div>
</div> </div>
</div> </div>

Wyświetl plik

@ -0,0 +1,64 @@
<script setup lang="ts">
import type { Component } from 'vue'
import type { NavButtonName } from '../../composables/settings'
import {
NavButtonBookmark,
NavButtonCompose,
NavButtonExplore,
NavButtonFavorite,
NavButtonFederated,
NavButtonHashtag,
NavButtonHome,
NavButtonList,
NavButtonLocal,
NavButtonMention,
NavButtonMoreMenu,
NavButtonNotification,
NavButtonSearch,
} from '#components'
import { STORAGE_KEY_BOTTOM_NAV_BUTTONS } from '~/constants'
interface NavButton {
name: string
component: Component
}
const navButtons: NavButton[] = [
{ name: 'home', component: NavButtonHome },
{ name: 'search', component: NavButtonSearch },
{ name: 'notification', component: NavButtonNotification },
{ name: 'mention', component: NavButtonMention },
{ name: 'favorite', component: NavButtonFavorite },
{ name: 'bookmark', component: NavButtonBookmark },
{ name: 'compose', component: NavButtonCompose },
{ name: 'explore', component: NavButtonExplore },
{ name: 'local', component: NavButtonLocal },
{ name: 'federated', component: NavButtonFederated },
{ name: 'list', component: NavButtonList },
{ name: 'hashtag', component: NavButtonHashtag },
{ name: 'moreMenu', component: NavButtonMoreMenu },
]
const defaultSelectedNavButtonNames: NavButtonName[] = currentUser.value
? ['home', 'search', 'notification', 'mention', 'moreMenu']
: ['explore', 'local', 'federated', 'moreMenu']
const selectedNavButtonNames = useLocalStorage<NavButtonName[]>(STORAGE_KEY_BOTTOM_NAV_BUTTONS, defaultSelectedNavButtonNames)
const selectedNavButtons = computed(() => selectedNavButtonNames.value.map(name => navButtons.find(navButton => navButton.name === name)))
// only one icon can be lit up at the same time
const moreMenuVisible = ref(false)
</script>
<template>
<!-- This weird styles above are used for scroll locking, don't change it unless you know exactly what you're doing. -->
<nav
h-14 border="t base" flex flex-row text-xl
of-y-scroll scrollbar-hide overscroll-none
class="after-content-empty after:(h-[calc(100%+0.5px)] w-0.1px pointer-events-none)"
>
<Component :is="navButton!.component" v-for="navButton in selectedNavButtons" :key="navButton!.name" :active-class="moreMenuVisible ? '' : 'text-primary'" />
</nav>
</template>

Wyświetl plik

@ -1,4 +1,4 @@
<script lang="ts" setup> <script setup lang="ts">
import { invoke } from '@vueuse/core' import { invoke } from '@vueuse/core'
const modelValue = defineModel<boolean>({ required: true }) const modelValue = defineModel<boolean>({ required: true })

Wyświetl plik

@ -1,3 +1,6 @@
<script setup lang="ts">
</script>
<template> <template>
<span shrink-0 aspect="1/1" sm:h-8 xl:h-10 class="rtl-flip"><svg <span shrink-0 aspect="1/1" sm:h-8 xl:h-10 class="rtl-flip"><svg
xmlns="http://www.w3.org/2000/svg" w-full xmlns="http://www.w3.org/2000/svg" w-full

Wyświetl plik

@ -1,9 +1,38 @@
<script setup lang="ts"> <script setup lang="ts">
const { command } = defineProps<{ import { STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE } from '~/constants'
defineProps<{
command?: boolean command?: boolean
}>() }>()
const { notifications } = useNotifications() const { notifications } = useNotifications()
const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon') const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
const lastAccessedNotificationRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE, '')
const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, '')
const notificationsLink = computed(() => {
const hydrated = isHydrated.value
const user = currentUser.value
const lastRoute = lastAccessedNotificationRoute.value
if (!hydrated || !user || !lastRoute) {
return '/notifications'
}
return `/notifications/${lastRoute}`
})
const exploreLink = computed(() => {
const hydrated = isHydrated.value
const server = currentServer.value
let lastRoute = lastAccessedExploreRoute.value
if (!hydrated) {
return '/explore'
}
if (lastRoute.length) {
lastRoute = `/${lastRoute}`
}
return server ? `/${server}/explore${lastRoute}` : `/explore${lastRoute}`
})
</script> </script>
<template> <template>
@ -12,7 +41,7 @@ const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
<div class="spacer" shrink xl:hidden /> <div class="spacer" shrink xl:hidden />
<NavSideItem :text="$t('nav.home')" to="/home" icon="i-ri:home-5-line" user-only :command="command" /> <NavSideItem :text="$t('nav.home')" to="/home" icon="i-ri:home-5-line" user-only :command="command" />
<NavSideItem :text="$t('nav.notifications')" to="/notifications" icon="i-ri:notification-4-line" user-only :command="command"> <NavSideItem :text="$t('nav.notifications')" :to="notificationsLink" icon="i-ri:notification-4-line" user-only :command="command">
<template #icon> <template #icon>
<div flex relative> <div flex relative>
<div class="i-ri:notification-4-line" text-xl /> <div class="i-ri:notification-4-line" text-xl />
@ -30,10 +59,11 @@ const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
<NavSideItem :text="$t('action.compose')" to="/compose" icon="i-ri:quill-pen-line" user-only :command="command" /> <NavSideItem :text="$t('action.compose')" to="/compose" icon="i-ri:quill-pen-line" user-only :command="command" />
<div class="spacer" shrink hidden sm:block /> <div class="spacer" shrink hidden sm:block />
<NavSideItem :text="$t('nav.explore')" :to="isHydrated ? `/${currentServer}/explore` : '/explore'" icon="i-ri:hashtag" :command="command" /> <NavSideItem :text="$t('nav.explore')" :to="exploreLink" icon="i-ri:compass-3-line" :command="command" />
<NavSideItem :text="$t('nav.local')" :to="isHydrated ? `/${currentServer}/public/local` : '/public/local'" icon="i-ri:group-2-line " :command="command" /> <NavSideItem :text="$t('nav.local')" :to="isHydrated ? `/${currentServer}/public/local` : '/public/local'" icon="i-ri:group-2-line " :command="command" />
<NavSideItem :text="$t('nav.federated')" :to="isHydrated ? `/${currentServer}/public` : '/public'" icon="i-ri:earth-line" :command="command" /> <NavSideItem :text="$t('nav.federated')" :to="isHydrated ? `/${currentServer}/public` : '/public'" icon="i-ri:earth-line" :command="command" />
<NavSideItem :text="$t('nav.lists')" :to="isHydrated ? `/${currentServer}/lists` : '/lists'" icon="i-ri:list-check" user-only :command="command" /> <NavSideItem :text="$t('nav.lists')" :to="isHydrated ? `/${currentServer}/lists` : '/lists'" icon="i-ri:list-check" user-only :command="command" />
<NavSideItem :text="$t('nav.hashtags')" to="/hashtags" icon="i-ri:hashtag" user-only :command="command" />
<div class="spacer" shrink hidden sm:block /> <div class="spacer" shrink hidden sm:block />
<NavSideItem :text="$t('nav.settings')" to="/settings" icon="i-ri:settings-3-line" :command="command" /> <NavSideItem :text="$t('nav.settings')" to="/settings" icon="i-ri:settings-3-line" :command="command" />

Wyświetl plik

@ -1,13 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
const props = withDefaults(defineProps<{ const { text, icon, to, userOnly = false, command } = defineProps<{
text?: string text?: string
icon: string icon: string
to: string | Record<string, string> to: string | Record<string, string>
userOnly?: boolean userOnly?: boolean
command?: boolean command?: boolean
}>(), { }>()
userOnly: false,
})
defineSlots<{ defineSlots<{
icon: (props: object) => void icon: (props: object) => void
@ -19,28 +17,28 @@ const router = useRouter()
useCommand({ useCommand({
scope: 'Navigation', scope: 'Navigation',
name: () => props.text ?? (typeof props.to === 'string' ? props.to as string : props.to.name), name: () => text ?? (typeof to === 'string' ? to as string : to.name),
icon: () => props.icon, icon: () => icon,
visible: () => props.command, visible: () => command,
onActivate() { onActivate() {
router.push(props.to) router.push(to)
}, },
}) })
let activeClass = $ref('text-primary') const activeClass = ref('text-primary')
onHydrated(async () => { onHydrated(async () => {
// TODO: force NuxtLink to reevaluate, we now we are in this route though, so we should force it to active // TODO: force NuxtLink to reevaluate, we now we are in this route though, so we should force it to active
// we don't have currentServer defined until later // we don't have currentServer defined until later
activeClass = '' activeClass.value = ''
await nextTick() await nextTick()
activeClass = 'text-primary' activeClass.value = 'text-primary'
}) })
// Optimize rendering for the common case of being logged in, only show visual feedback for disabled user-only items // Optimize rendering for the common case of being logged in, only show visual feedback for disabled user-only items
// when we know there is no user. // when we know there is no user.
const noUserDisable = computed(() => !isHydrated.value || (props.userOnly && !currentUser.value)) const noUserDisable = computed(() => !isHydrated.value || (userOnly && !currentUser.value))
const noUserVisual = computed(() => isHydrated.value && props.userOnly && !currentUser.value) const noUserVisual = computed(() => isHydrated.value && userOnly && !currentUser.value)
</script> </script>
<template> <template>
@ -57,11 +55,21 @@ const noUserVisual = computed(() => isHydrated.value && props.userOnly && !curre
<div <div
class="item" class="item"
flex items-center gap4 flex items-center gap4
w-fit rounded-3
px2 mx3 sm:mxa
xl="ml0 mr5 px5 w-auto" xl="ml0 mr5 px5 w-auto"
transition-100 :class="isSmallScreen
elk-group-hover="bg-active" group-focus-visible:ring="2 current" ? `
w-full
px5 sm:mxa
transition-colors duration-200 transform
hover-bg-gray-100 hover-dark:(bg-gray-700 text-white)
` : `
w-fit rounded-3
px2 mx3 sm:mxa
transition-100
elk-group-hover-bg-active
group-focus-visible:ring-2
group-focus-visible:ring-current
`"
> >
<slot name="icon"> <slot name="icon">
<div :class="icon" text-xl /> <div :class="icon" text-xl />

Wyświetl plik

@ -1,4 +1,4 @@
<script setup> <script setup lang="ts">
const { busy, oauth, singleInstanceServer } = useSignIn() const { busy, oauth, singleInstanceServer } = useSignIn()
</script> </script>
@ -34,7 +34,13 @@ const { busy, oauth, singleInstanceServer } = useSignIn()
<strong>{{ currentServer }}</strong> <strong>{{ currentServer }}</strong>
</i18n-t> </i18n-t>
</button> </button>
<button v-else btn-solid text-sm px-2 py-1 text-center xl:hidden @click="openSigninDialog()"> <button
v-else
flex="~ row"
gap-x-1 items-center justify-center btn-solid text-sm px-2 py-1 xl:hidden
@click="openSigninDialog()"
>
<span aria-hidden="true" block i-ri:login-circle-line class="rtl-flip" />
{{ $t('action.sign_in') }} {{ $t('action.sign_in') }}
</button> </button>
</template> </template>

Wyświetl plik

@ -0,0 +1,11 @@
<script setup lang="ts">
defineProps<{
activeClass: string
}>()
</script>
<template>
<NuxtLink to="/bookmarks" :aria-label="$t('nav.bookmarks')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
<div i-ri:bookmark-line />
</NuxtLink>
</template>

Wyświetl plik

@ -0,0 +1,11 @@
<script setup lang="ts">
defineProps<{
activeClass: string
}>()
</script>
<template>
<NuxtLink to="/compose" :aria-label="$t('nav.favourites')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
<div i-ri:quill-pen-line />
</NuxtLink>
</template>

Wyświetl plik

@ -0,0 +1,15 @@
<script setup lang="ts">
import { STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE } from '~/constants'
defineProps<{
activeClass: string
}>()
const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, '')
</script>
<template>
<NuxtLink :to="`/${currentServer}/explore/${lastAccessedExploreRoute}`" :aria-label="$t('nav.explore')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
<div i-ri:compass-3-line />
</NuxtLink>
</template>

Wyświetl plik

@ -0,0 +1,11 @@
<script setup lang="ts">
defineProps<{
activeClass: string
}>()
</script>
<template>
<NuxtLink to="/favourites" :aria-label="$t('nav.favourites')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
<div i-ri:heart-line />
</NuxtLink>
</template>

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