kopia lustrzana https://github.com/elk-zone/elk
Merge branch 'elk-zone:main' into main
Adityawarman Dewa Putra
GitHub
commit
067a0df25e
|
|
@ -1,15 +0,0 @@
|
|||
*.css
|
||||
*.png
|
||||
*.ico
|
||||
*.toml
|
||||
*.patch
|
||||
*.txt
|
||||
Dockerfile
|
||||
public/
|
||||
public-dev/
|
||||
public-staging/
|
||||
https-dev-config/localhost.crt
|
||||
https-dev-config/localhost.key
|
||||
Dockerfile
|
||||
elk-translation-status.json
|
||||
docs/translation-status.json
|
||||
19
.eslintrc
19
.eslintrc
|
|
@ -1,19 +0,0 @@
|
|||
{
|
||||
"extends": "@antfu",
|
||||
"ignorePatterns": ["!pages/public"],
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["locales/**.json"],
|
||||
"rules": {
|
||||
"jsonc/sort-keys": "error"
|
||||
}
|
||||
}
|
||||
],
|
||||
"rules": {
|
||||
"vue/no-restricted-syntax":["error", {
|
||||
"selector": "VElement[name='a']",
|
||||
"message": "Use NuxtLink instead."
|
||||
}],
|
||||
"n/prefer-global/process": "off"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
* text=auto eol=lf
|
||||
|
|
@ -2,4 +2,4 @@
|
|||
name: 🚀 New feature proposal
|
||||
about: Propose a new feature
|
||||
labels: 's: pending triage'
|
||||
---
|
||||
---
|
||||
|
|
|
|||
|
|
@ -40,7 +40,6 @@
|
|||
"groupName": "lint",
|
||||
"matchPackageNames": [
|
||||
"@antfu/eslint-config",
|
||||
"@types/prettier",
|
||||
"eslint",
|
||||
"prettier"
|
||||
]
|
||||
|
|
|
|||
|
|
@ -18,11 +18,13 @@ jobs:
|
|||
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
- run: corepack enable
|
||||
- uses: actions/setup-node@v4
|
||||
# workaround for npm registry key change
|
||||
# ref. `pnpm@10.1.0` / `pnpm@9.15.4` cannot be installed due to key id mismatch · Issue #612 · nodejs/corepack
|
||||
# - https://github.com/nodejs/corepack/issues/612#issuecomment-2629496091
|
||||
- run: npm i -g corepack@latest && corepack enable
|
||||
- uses: actions/setup-node@v4.4.0
|
||||
with:
|
||||
node-version: 18
|
||||
cache: pnpm
|
||||
node-version-file: .nvmrc
|
||||
|
||||
- name: 📦 Install dependencies
|
||||
run: pnpm install --frozen-lockfile
|
||||
|
|
@ -32,6 +34,7 @@ jobs:
|
|||
|
||||
- name: 🧪 Test project
|
||||
run: pnpm test:ci
|
||||
timeout-minutes: 10
|
||||
|
||||
- name: 📝 Lint
|
||||
run: pnpm lint
|
||||
|
|
|
|||
|
|
@ -35,10 +35,10 @@ jobs:
|
|||
username: ${{ github.actor }}
|
||||
password: ${{ github.token }}
|
||||
- name: Build and push
|
||||
uses: docker/build-push-action@v5
|
||||
uses: docker/build-push-action@v6
|
||||
with:
|
||||
context: .
|
||||
platforms: linux/amd64
|
||||
platforms: linux/amd64,linux/arm64
|
||||
push: ${{ github.event_name != 'pull_request' }}
|
||||
tags: ${{ steps.metal.outputs.tags }}
|
||||
labels: ${{ steps.metal.outputs.labels }}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ jobs:
|
|||
- name: Set node
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 18
|
||||
node-version-file: .nvmrc
|
||||
|
||||
- run: npx changelogithub
|
||||
env:
|
||||
|
|
|
|||
|
|
@ -19,6 +19,6 @@ jobs:
|
|||
name: Semantic Pull Request
|
||||
steps:
|
||||
- name: Validate PR title
|
||||
uses: amannn/action-semantic-pull-request@v5.4.0
|
||||
uses: amannn/action-semantic-pull-request@v5.5.3
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
|
|
|||
1
.npmrc
1
.npmrc
|
|
@ -1,3 +1,4 @@
|
|||
shamefully-hoist=true
|
||||
shell-emulator=true
|
||||
ignore-workspace-root-check=true
|
||||
package-manager-strict=false
|
||||
|
|
|
|||
2
.nvmrc
2
.nvmrc
|
|
@ -1 +1 @@
|
|||
20
|
||||
22
|
||||
|
|
@ -5,10 +5,6 @@
|
|||
"unmute",
|
||||
"unstorage"
|
||||
],
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": true
|
||||
},
|
||||
"editor.formatOnSave": false,
|
||||
"files.associations": {
|
||||
"*.css": "postcss"
|
||||
},
|
||||
|
|
@ -23,7 +19,44 @@
|
|||
"i18n-ally.preferredDelimiter": "_",
|
||||
"i18n-ally.sortKeys": true,
|
||||
"i18n-ally.sourceLanguage": "en",
|
||||
|
||||
// Enable the ESlint flat config support
|
||||
"eslint.experimental.useFlatConfig": true,
|
||||
|
||||
// Disable the default formatter, use eslint instead
|
||||
"prettier.enable": false,
|
||||
"volar.completion.preferredTagNameCase": "pascal",
|
||||
"volar.completion.preferredAttrNameCase": "kebab"
|
||||
"editor.formatOnSave": false,
|
||||
|
||||
// Auto fix
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll": "explicit",
|
||||
"source.organizeImports": "never"
|
||||
},
|
||||
|
||||
// Silent the stylistic rules in you IDE, but still auto fix them
|
||||
"eslint.rules.customizations": [
|
||||
{ "rule": "style/*", "severity": "off" },
|
||||
{ "rule": "*-indent", "severity": "off" },
|
||||
{ "rule": "*-spacing", "severity": "off" },
|
||||
{ "rule": "*-spaces", "severity": "off" },
|
||||
{ "rule": "*-order", "severity": "off" },
|
||||
{ "rule": "*-dangle", "severity": "off" },
|
||||
{ "rule": "*-newline", "severity": "off" },
|
||||
{ "rule": "*quotes", "severity": "off" },
|
||||
{ "rule": "*semi", "severity": "off" }
|
||||
],
|
||||
|
||||
// Enable eslint for all supported languages
|
||||
"eslint.validate": [
|
||||
"javascript",
|
||||
"javascriptreact",
|
||||
"typescript",
|
||||
"typescriptreact",
|
||||
"vue",
|
||||
"html",
|
||||
"markdown",
|
||||
"json",
|
||||
"jsonc",
|
||||
"yaml"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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).
|
||||
|
||||
### 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).
|
||||
|
||||
[](https://pr.new/elk-zone/elk)
|
||||
|
||||
### Local Setup
|
||||
|
||||
To develop and test the Elk package:
|
||||
|
||||
1. Fork the Elk repository to your own GitHub account and then clone it to your local device.
|
||||
|
||||
2. Ensure using the latest Node.js (16.x).
|
||||
2. Ensure using the LTS version of Node.js.
|
||||
If you have [nvm](https://github.com/nvm-sh/nvm), you can run `nvm i` to install the required version.
|
||||
|
||||
|
||||
3. The package manager used to install and link dependencies must be [pnpm](https://pnpm.io/) v7. To use it you must first enable [Corepack](https://github.com/nodejs/corepack) by running `corepack enable`. (Note: on Linux in a standard Node 16+ environment, you should follow the instructions to install via Node's `corepack` rather than using the `curl` command)
|
||||
3. The package manager used to install and link dependencies must be [pnpm](https://pnpm.io/) v9. To use it you must first enable [Corepack](https://github.com/nodejs/corepack) by running `corepack enable`. (Note: on Linux in a standard Node 20+ environment, you should follow the instructions to install via Node's `corepack` rather than using the `curl` command)
|
||||
|
||||
4. Check out a branch where you can work and commit your changes:
|
||||
```shell
|
||||
|
|
@ -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:
|
||||
- Do not use `left/right` padding and margin: for example `pl-1`. Use `padding-inline-start/end` instead. So `pl-1` should be `ps-1`, `pr-1` should be `pe-1`. The same rules apply to margin.
|
||||
- Do not use `rtl-` classes, such as `rtl-left-0`.
|
||||
- For icons that should be rotated for RTL, add `class="rtl-flip"`. This can only be used for icons outside of elements with `dir="auto"`, such as timeline, and is the only exception 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`.
|
||||
- If you need to change the border radius for an entire left or right side, use `border-inline-start/end`. `UnoCSS` shortcuts are `rounded-is` for left side, `rounded-ie` for right side. Example: `rounded-l-5` should be replaced with `rounded-ie-5`.
|
||||
- If you need to change the border radius for one corner, use `border-start-end-radius` and similar rules. `UnoCSS` shortcuts are `rounded` + top/bottom as either `-bs` (top) or `-be` (bottom) + left/right as either `-is` (left) or `-ie` (right). Example: `rounded-tl-0` should be replaced with `rounded-bs-is-0`.
|
||||
|
||||
## Internationalization
|
||||
|
||||
We are using [vue-i18n](https://vue-i18n.intlify.dev/) via [nuxt-i18n](https://v8.i18n.nuxtjs.org/) to handle internationalization.
|
||||
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:
|
||||
- from root folder: `nr prepare-translation-status`
|
||||
- change to `docs` folder and run docs dev server `nr dev`
|
||||
- open `http://localhost:3000/docs/guide/contributing#translation-status` in your browser
|
||||
- open `http://localhost:3000/guide/contributing#translation-status` in your browser
|
||||
|
||||
### Adding a new language
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,10 @@ WORKDIR /elk
|
|||
FROM base AS builder
|
||||
|
||||
# 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
|
||||
RUN apk update
|
||||
|
|
|
|||
23
README.md
23
README.md
|
|
@ -13,7 +13,6 @@ A nimble Mastodon web client
|
|||
<br/>
|
||||
<p align="center">
|
||||
<a href="https://chat.elk.zone"><img src="https://img.shields.io/badge/chat-discord-blue?style=flat&logo=discord" alt="discord chat"></a>
|
||||
<a href="https://pr.new/elk-zone/elk"><img src="https://developer.stackblitz.com/img/start_pr_dark_small.svg" alt="Start new PR in StackBlitz Codeflow"></a>
|
||||
<a href="https://volta.net/elk-zone/elk?utm_source=elk_readme"><img src="https://user-images.githubusercontent.com/904724/209143798-32345f6c-3cf8-4e06-9659-f4ace4a6acde.svg" alt="Open board on Volta"></a>
|
||||
</p>
|
||||
<br/>
|
||||
|
|
@ -39,25 +38,24 @@ The Elk team maintains a deployment at:
|
|||
|
||||
### Self-Host Docker Deployment
|
||||
|
||||
In order to host Elk yourself you can use the provided Dockerfile to build a container with elk. Be aware, that Elk only loads properly if the connection is done via SSL/TLS. The Docker container itself does not provide any SSL/TLS handling. You'll have to add this bit yourself.
|
||||
One could put Elk behind popular reverse proxies with SSL Handling like Traefik, NGINX etc.
|
||||
In order to host Elk yourself you can use the provided Dockerfile to build a container with elk. Be aware, that Elk only loads properly if the connection is done via SSL/TLS. The Docker container itself does not provide any SSL/TLS handling. You'll have to add this bit yourself.
|
||||
One could put Elk behind popular reverse proxies with SSL Handling like Traefik, NGINX etc.
|
||||
|
||||
1. checkout source ```git clone https://github.com/elk-zone/elk.git```
|
||||
1. got into new source dir: ```cd elk```
|
||||
1. build Docker image: ```docker build .```
|
||||
1. create local storage directory for settings: ```mkdir elk-storage```
|
||||
1. adjust permissions of storage dir: ```sudo chown 911:911 ./elk-storage```
|
||||
1. start container: ```docker-compose up -d```
|
||||
1. start container: ```docker-compose up --build -d```
|
||||
|
||||
> [!NOTE]
|
||||
> The provided Dockerfile creates a container which will eventually run Elk as non-root user and create a persistent named Docker volume upon first start (if that volume does not yet exist). This volume is always created with root permission. Failing to change the permissions of ```/elk/data``` inside this volume to UID:GID 911 (as specified for Elk in the Dockerfile) will prevent Elk from storing it's config for user accounts. You either have to fix the permission in the created named volume, or mount a directory with the correct permission to ```/elk/data``` into the container.
|
||||
|
||||
|
||||
### Ecosystem
|
||||
|
||||
These are known deployments using Elk as an alternative Web client for Mastodon servers or as a base for other projects in the fediverse:
|
||||
|
||||
- [elk.fedified.com](https://elk.fedified.com) - Use Elk to log into any compatible instance
|
||||
- [elk.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.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
|
||||
|
|
@ -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.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
|
||||
- [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.
|
||||
|
||||
|
|
@ -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.
|
||||
|
||||
### 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).
|
||||
|
||||
[](https://pr.new/elk-zone/elk)
|
||||
|
||||
### Local Setup
|
||||
|
||||
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
|
||||
- [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
|
||||
- [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
|
||||
|
||||
## 👨💻 Contributors
|
||||
|
||||
<a href="https://github.com/elk-zone/elk/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=elk-zone/elk" />
|
||||
</a>
|
||||
<img src="https://contrib.rocks/image?repo=elk-zone/elk" />
|
||||
</a>
|
||||
|
||||
## 📄 License
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ provideGlobalCommands()
|
|||
|
||||
const route = useRoute()
|
||||
|
||||
if (process.server && !route.path.startsWith('/settings')) {
|
||||
if (import.meta.server && !route.path.startsWith('/settings')) {
|
||||
const url = useRequestURL()
|
||||
|
||||
useHead({
|
||||
|
|
@ -1,13 +1,18 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
defineProps<{
|
||||
const { account } = defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
square?: boolean
|
||||
}>()
|
||||
|
||||
const loaded = $ref(false)
|
||||
const error = $ref(false)
|
||||
const loaded = ref(false)
|
||||
const error = ref(false)
|
||||
|
||||
const preferredMotion = usePreferredReducedMotion()
|
||||
const accountAvatarSrc = computed(() => {
|
||||
return preferredMotion.value === 'reduce' ? (account?.avatarStatic ?? account.avatar) : account.avatar
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -16,10 +21,10 @@ const error = $ref(false)
|
|||
width="400"
|
||||
height="400"
|
||||
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])"
|
||||
loading="lazy"
|
||||
class="account-avatar"
|
||||
class="account-avatar object-cover"
|
||||
:class="(loaded ? 'bg-base' : 'bg-gray:10') + (square ? ' ' : ' rounded-full')"
|
||||
:style="{ 'clip-path': square ? `url(#avatar-mask)` : 'none' }"
|
||||
v-bind="$attrs"
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
<script lang="ts" setup>
|
||||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const { account, as = 'div' } = $defineProps<{
|
||||
const { account, as = 'div' } = defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
as?: string
|
||||
}>()
|
||||
|
|
@ -11,7 +11,7 @@ defineProps<{
|
|||
text-secondary-light
|
||||
>
|
||||
<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 />
|
||||
</CommonTooltip>
|
||||
<div v-if="showLabel">
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const { account, hideEmojis = false } = defineProps<{
|
||||
const { hideEmojis = false } = defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
hideEmojis?: boolean
|
||||
}>()
|
||||
|
|
@ -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>
|
||||
|
|
@ -5,32 +5,32 @@ const { account, ...props } = defineProps<{
|
|||
account: mastodon.v1.Account
|
||||
relationship?: mastodon.v1.Relationship
|
||||
}>()
|
||||
const relationship = $computed(() => props.relationship || useRelationship(account).value)
|
||||
const { client } = $(useMasto())
|
||||
const relationship = computed(() => props.relationship || useRelationship(account).value)
|
||||
const { client } = useMasto()
|
||||
|
||||
async function authorizeFollowRequest() {
|
||||
relationship!.requestedBy = false
|
||||
relationship!.followedBy = true
|
||||
relationship.value!.requestedBy = false
|
||||
relationship.value!.followedBy = true
|
||||
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)
|
||||
}
|
||||
catch (err) {
|
||||
console.error(err)
|
||||
relationship!.requestedBy = true
|
||||
relationship!.followedBy = false
|
||||
relationship.value!.requestedBy = true
|
||||
relationship.value!.followedBy = false
|
||||
}
|
||||
}
|
||||
|
||||
async function rejectFollowRequest() {
|
||||
relationship!.requestedBy = false
|
||||
relationship.value!.requestedBy = false
|
||||
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)
|
||||
}
|
||||
catch (err) {
|
||||
console.error(err)
|
||||
relationship!.requestedBy = true
|
||||
relationship.value!.requestedBy = true
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -38,7 +38,7 @@ async function rejectFollowRequest() {
|
|||
<template>
|
||||
<div flex gap-4>
|
||||
<template v-if="relationship?.requestedBy">
|
||||
<CommonTooltip :content="$t('account.authorize')" no-auto-focus>
|
||||
<CommonTooltip :content="$t('account.authorize')">
|
||||
<button
|
||||
type="button"
|
||||
rounded-full text-sm p2 border-1
|
||||
|
|
@ -48,7 +48,7 @@ async function rejectFollowRequest() {
|
|||
<span block text-current i-ri:check-fill />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
<CommonTooltip :content="$t('account.reject')" no-auto-focus>
|
||||
<CommonTooltip :content="$t('account.reject')">
|
||||
<button
|
||||
type="button"
|
||||
rounded-full text-sm p2 border-1
|
||||
|
|
@ -5,7 +5,7 @@ const { account } = defineProps<{
|
|||
account: mastodon.v1.Account
|
||||
}>()
|
||||
|
||||
const serverName = $computed(() => getServerName(account))
|
||||
const serverName = computed(() => getServerName(account))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -6,22 +6,22 @@ const { account } = defineProps<{
|
|||
command?: boolean
|
||||
}>()
|
||||
|
||||
const { client } = $(useMasto())
|
||||
const { client } = useMasto()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const createdAt = $(useFormattedDateTime(() => account.createdAt, {
|
||||
const createdAt = useFormattedDateTime(() => account.createdAt, {
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
}))
|
||||
})
|
||||
|
||||
const relationship = $(useRelationship(account))
|
||||
const relationship = useRelationship(account)
|
||||
|
||||
const namedFields = ref<mastodon.v1.AccountField[]>([])
|
||||
const iconFields = ref<mastodon.v1.AccountField[]>([])
|
||||
const isEditingPersonalNote = ref<boolean>(false)
|
||||
const hasHeader = $computed(() => !account.header.endsWith('/original/missing.png'))
|
||||
const hasHeader = computed(() => !account.header.endsWith('/original/missing.png'))
|
||||
const isCopied = ref<boolean>(false)
|
||||
|
||||
function getFieldIconTitle(fieldName: string) {
|
||||
|
|
@ -29,7 +29,7 @@ function getFieldIconTitle(fieldName: string) {
|
|||
}
|
||||
|
||||
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() {
|
||||
|
|
@ -51,14 +51,14 @@ function previewAvatar() {
|
|||
}
|
||||
|
||||
async function toggleNotifications() {
|
||||
relationship!.notifying = !relationship?.notifying
|
||||
relationship.value!.notifying = !relationship.value?.notifying
|
||||
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)
|
||||
}
|
||||
catch {
|
||||
// TODO error handling
|
||||
relationship!.notifying = !relationship?.notifying
|
||||
relationship.value!.notifying = !relationship.value?.notifying
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -75,35 +75,35 @@ watchEffect(() => {
|
|||
})
|
||||
icons.push({
|
||||
name: 'Joined',
|
||||
value: createdAt,
|
||||
value: createdAt.value,
|
||||
})
|
||||
|
||||
namedFields.value = named
|
||||
iconFields.value = icons
|
||||
})
|
||||
|
||||
const personalNoteDraft = ref(relationship?.note ?? '')
|
||||
watch($$(relationship), (relationship, oldValue) => {
|
||||
const personalNoteDraft = ref(relationship.value?.note ?? '')
|
||||
watch(relationship, (relationship, oldValue) => {
|
||||
if (!oldValue && relationship)
|
||||
personalNoteDraft.value = relationship.note ?? ''
|
||||
})
|
||||
|
||||
async function editNote(event: Event) {
|
||||
if (!event.target || !('value' in event.target) || !relationship)
|
||||
if (!event.target || !('value' in event.target) || !relationship.value)
|
||||
return
|
||||
|
||||
const newNote = event.target?.value as string
|
||||
|
||||
if (relationship.note?.trim() === newNote.trim())
|
||||
if (relationship.value.note?.trim() === newNote.trim())
|
||||
return
|
||||
|
||||
const newNoteApiResult = await client.v1.accounts.$select(account.id).note.create({ comment: newNote })
|
||||
relationship.note = newNoteApiResult.note
|
||||
personalNoteDraft.value = relationship.note ?? ''
|
||||
const newNoteApiResult = await client.value.v1.accounts.$select(account.id).note.create({ comment: newNote })
|
||||
relationship.value.note = newNoteApiResult.note
|
||||
personalNoteDraft.value = relationship.value.note ?? ''
|
||||
}
|
||||
|
||||
const isSelf = $(useSelfAccount(() => account))
|
||||
const isNotifiedOnPost = $computed(() => !!relationship?.notifying)
|
||||
const isSelf = useSelfAccount(() => account)
|
||||
const isNotifiedOnPost = computed(() => !!relationship.value?.notifying)
|
||||
|
||||
const personalNoteMaxLength = 2000
|
||||
|
||||
|
|
@ -189,19 +189,21 @@ async function copyAccountName() {
|
|||
<div flex="~ col gap1" pt2>
|
||||
<div flex gap2 items-center flex-wrap>
|
||||
<AccountDisplayName :account="account" font-bold sm:text-2xl text-xl />
|
||||
<AccountRolesIndicator v-if="account.roles?.length" :account="account" />
|
||||
<AccountLockIndicator v-if="account.locked" show-label />
|
||||
<AccountBotIndicator v-if="account.bot" show-label />
|
||||
</div>
|
||||
|
||||
<div flex items-center gap-1>
|
||||
<AccountHandle :account="account" overflow-unset line-clamp-unset />
|
||||
<CommonTooltip placement="bottom" :content="$t('account.copy_account_name')" no-auto-focus flex>
|
||||
<CommonTooltip placement="bottom" :content="$t('account.copy_account_name')" flex>
|
||||
<button text-secondary-light text-sm :class="isCopied ? 'i-ri:check-fill text-green' : 'i-ri:file-copy-line'" @click="copyAccountName">
|
||||
<span sr-only>{{ $t('account.copy_account_name') }}</span>
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
</div>
|
||||
<div self-start mt-1>
|
||||
<AccountRolesIndicator v-if="account.roles?.length" :account="account" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<label
|
||||
|
|
@ -5,14 +5,14 @@ const { account } = defineProps<{
|
|||
account: mastodon.v1.Account
|
||||
}>()
|
||||
|
||||
const relationship = $(useRelationship(account))
|
||||
const relationship = useRelationship(account)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-show="relationship" flex="~ col gap2" rounded min-w-90 max-w-120 z-100 overflow-hidden p-4>
|
||||
<div flex="~ gap2" items-center>
|
||||
<NuxtLink :to="getAccountRoute(account)" flex-auto rounded-full hover:bg-active transition-100 pe5 me-a>
|
||||
<AccountInfo :account="account" />
|
||||
<AccountInfo :account="account" :hover-card="false" />
|
||||
</NuxtLink>
|
||||
<AccountFollowButton text-sm :account="account" :relationship="relationship" />
|
||||
</div>
|
||||
|
|
@ -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>
|
||||
|
|
@ -5,7 +5,7 @@ defineOptions({
|
|||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const { account, as = 'div' } = defineProps<{
|
||||
const { as = 'div' } = defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
as?: string
|
||||
hoverCard?: boolean
|
||||
|
|
@ -16,18 +16,20 @@ const { account, as = 'div' } = defineProps<{
|
|||
<!-- 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 -->
|
||||
<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">
|
||||
<AccountBigAvatar :account="account" shrink-0 :square="square" />
|
||||
</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>
|
||||
<AccountDisplayName :account="account" font-bold line-clamp-1 ws-pre-wrap break-all text-lg />
|
||||
<AccountRolesIndicator v-if="account.roles?.length" :account="account" :limit="1" />
|
||||
<AccountLockIndicator v-if="account.locked" text-xs />
|
||||
<AccountBotIndicator v-if="account.bot" text-xs />
|
||||
</div>
|
||||
<AccountHandle :account="account" text-secondary-light />
|
||||
<div self-start mt-1>
|
||||
<AccountRolesIndicator v-if="account.roles?.length" :account="account" :limit="1" />
|
||||
</div>
|
||||
</div>
|
||||
</component>
|
||||
</template>
|
||||
|
|
@ -2,6 +2,8 @@
|
|||
defineProps<{
|
||||
showLabel?: boolean
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -11,11 +13,11 @@ defineProps<{
|
|||
text-secondary-light
|
||||
>
|
||||
<slot name="prepend" />
|
||||
<CommonTooltip no-auto-focus content="Lock" :disabled="showLabel">
|
||||
<CommonTooltip content="Lock" :disabled="showLabel">
|
||||
<div i-ri:lock-line />
|
||||
</CommonTooltip>
|
||||
<div v-if="showLabel">
|
||||
Lock
|
||||
{{ t('account.lock') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
import { toggleBlockAccount, toggleBlockDomain, toggleMuteAccount } from '~~/composables/masto/relationship'
|
||||
import { toggleBlockAccount, toggleBlockDomain, toggleMuteAccount } from '~/composables/masto/relationship'
|
||||
|
||||
const { account } = defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
|
|
@ -11,12 +11,12 @@ const emit = defineEmits<{
|
|||
(evt: 'removeNote'): void
|
||||
}>()
|
||||
|
||||
let relationship = $(useRelationship(account))
|
||||
const relationship = useRelationship(account)
|
||||
|
||||
const isSelf = $(useSelfAccount(() => account))
|
||||
const isSelf = useSelfAccount(() => account)
|
||||
|
||||
const { t } = useI18n()
|
||||
const { client } = $(useMasto())
|
||||
const { client } = useMasto()
|
||||
const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
|
||||
const { share, isSupported: isShareSupported } = useShare()
|
||||
|
||||
|
|
@ -25,16 +25,19 @@ function shareAccount() {
|
|||
}
|
||||
|
||||
async function toggleReblogs() {
|
||||
if (!relationship!.showingReblogs && await openConfirmDialog({
|
||||
title: t('confirm.show_reblogs.title'),
|
||||
description: t('confirm.show_reblogs.description', [account.acct]),
|
||||
confirm: t('confirm.show_reblogs.confirm'),
|
||||
cancel: t('confirm.show_reblogs.cancel'),
|
||||
}) !== 'confirm')
|
||||
return
|
||||
if (!relationship.value!.showingReblogs) {
|
||||
const dialogChoice = await openConfirmDialog({
|
||||
title: t('confirm.show_reblogs.title'),
|
||||
description: t('confirm.show_reblogs.description', [account.acct]),
|
||||
confirm: t('confirm.show_reblogs.confirm'),
|
||||
cancel: t('confirm.show_reblogs.cancel'),
|
||||
})
|
||||
if (dialogChoice.choice !== 'confirm')
|
||||
return
|
||||
}
|
||||
|
||||
const showingReblogs = !relationship?.showingReblogs
|
||||
relationship = await client.v1.accounts.$select(account.id).follow({ reblogs: showingReblogs })
|
||||
const showingReblogs = !relationship.value?.showingReblogs
|
||||
relationship.value = await client.value.v1.accounts.$select(account.id).follow({ reblogs: showingReblogs })
|
||||
}
|
||||
|
||||
async function addUserNote() {
|
||||
|
|
@ -42,18 +45,18 @@ async function addUserNote() {
|
|||
}
|
||||
|
||||
async function removeUserNote() {
|
||||
if (!relationship!.note || relationship!.note.length === 0)
|
||||
if (!relationship.value!.note || relationship.value!.note.length === 0)
|
||||
return
|
||||
|
||||
const newNote = await client.v1.accounts.$select(account.id).note.create({ comment: '' })
|
||||
relationship!.note = newNote.note
|
||||
const newNote = await client.value.v1.accounts.$select(account.id).note.create({ comment: '' })
|
||||
relationship.value!.note = newNote.note
|
||||
emit('removeNote')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CommonDropdown :eager-mount="command">
|
||||
<button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group aria-label="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 i-ri:more-2-fill />
|
||||
</div>
|
||||
|
|
@ -68,6 +71,7 @@ async function removeUserNote() {
|
|||
/>
|
||||
</NuxtLink>
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-if="isShareSupported"
|
||||
:text="$t('menu.share_account', [`@${account.acct}`])"
|
||||
icon="i-ri:share-line"
|
||||
|
|
@ -78,12 +82,14 @@ async function removeUserNote() {
|
|||
<template v-if="currentUser">
|
||||
<template v-if="!isSelf">
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
:text="$t('menu.mention_account', [`@${account.acct}`])"
|
||||
icon="i-ri:at-line"
|
||||
:command="command"
|
||||
@click="mentionUser(account)"
|
||||
/>
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
:text="$t('menu.direct_message_account', [`@${account.acct}`])"
|
||||
icon="i-ri:message-3-line"
|
||||
:command="command"
|
||||
|
|
@ -91,6 +97,7 @@ async function removeUserNote() {
|
|||
/>
|
||||
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-if="!relationship?.showingReblogs"
|
||||
icon="i-ri:repeat-line"
|
||||
:text="$t('menu.show_reblogs', [`@${account.acct}`])"
|
||||
|
|
@ -98,6 +105,7 @@ async function removeUserNote() {
|
|||
@click="toggleReblogs()"
|
||||
/>
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-else
|
||||
:text="$t('menu.hide_reblogs', [`@${account.acct}`])"
|
||||
icon="i-ri:repeat-line"
|
||||
|
|
@ -106,6 +114,7 @@ async function removeUserNote() {
|
|||
/>
|
||||
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-if="!relationship?.note || relationship?.note?.length === 0"
|
||||
:text="$t('menu.add_personal_note', [`@${account.acct}`])"
|
||||
icon="i-ri-edit-2-line"
|
||||
|
|
@ -113,6 +122,7 @@ async function removeUserNote() {
|
|||
@click="addUserNote()"
|
||||
/>
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-else
|
||||
:text="$t('menu.remove_personal_note', [`@${account.acct}`])"
|
||||
icon="i-ri-edit-2-line"
|
||||
|
|
@ -121,6 +131,7 @@ async function removeUserNote() {
|
|||
/>
|
||||
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-if="!relationship?.muting"
|
||||
:text="$t('menu.mute_account', [`@${account.acct}`])"
|
||||
icon="i-ri:volume-mute-line"
|
||||
|
|
@ -128,6 +139,7 @@ async function removeUserNote() {
|
|||
@click="toggleMuteAccount (relationship!, account)"
|
||||
/>
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-else
|
||||
:text="$t('menu.unmute_account', [`@${account.acct}`])"
|
||||
icon="i-ri:volume-up-fill"
|
||||
|
|
@ -136,6 +148,7 @@ async function removeUserNote() {
|
|||
/>
|
||||
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-if="!relationship?.blocking"
|
||||
:text="$t('menu.block_account', [`@${account.acct}`])"
|
||||
icon="i-ri:forbid-2-line"
|
||||
|
|
@ -143,6 +156,7 @@ async function removeUserNote() {
|
|||
@click="toggleBlockAccount (relationship!, account)"
|
||||
/>
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-else
|
||||
:text="$t('menu.unblock_account', [`@${account.acct}`])"
|
||||
icon="i-ri:checkbox-circle-line"
|
||||
|
|
@ -152,6 +166,7 @@ async function removeUserNote() {
|
|||
|
||||
<template v-if="getServerName(account) !== currentServer">
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-if="!relationship?.domainBlocking"
|
||||
:text="$t('menu.block_domain', [getServerName(account)])"
|
||||
icon="i-ri:shut-down-line"
|
||||
|
|
@ -159,6 +174,7 @@ async function removeUserNote() {
|
|||
@click="toggleBlockDomain(relationship!, account)"
|
||||
/>
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-else
|
||||
:text="$t('menu.unblock_domain', [getServerName(account)])"
|
||||
icon="i-ri:restart-line"
|
||||
|
|
@ -168,6 +184,7 @@ async function removeUserNote() {
|
|||
</template>
|
||||
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
:text="$t('menu.report_account', [`@${account.acct}`])"
|
||||
icon="i-ri:flag-2-line"
|
||||
:command="command"
|
||||
|
|
@ -1,17 +1,17 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const { paginator, account, context } = defineProps<{
|
||||
const { account, context } = defineProps<{
|
||||
paginator: mastodon.Paginator<mastodon.v1.Account[], mastodon.DefaultPaginationParams | undefined>
|
||||
context?: 'following' | 'followers'
|
||||
account?: mastodon.v1.Account
|
||||
relationshipContext?: 'followedBy' | 'following'
|
||||
}>()
|
||||
|
||||
const fallbackContext = $computed(() => {
|
||||
const fallbackContext = computed(() => {
|
||||
return ['following', 'followers'].includes(context!)
|
||||
})
|
||||
const showOriginSite = $computed(() =>
|
||||
const showOriginSite = computed(() =>
|
||||
account && account.id !== currentUser.value?.account.id && getServerName(account) !== currentServer.value,
|
||||
)
|
||||
</script>
|
||||
|
|
@ -1,18 +1,18 @@
|
|||
<script setup lang="ts">
|
||||
import type { CommonRouteTabOption } from '../common/CommonRouteTabs.vue'
|
||||
import type { CommonRouteTabOption } from '#shared/types'
|
||||
|
||||
const { t } = useI18n()
|
||||
const route = useRoute()
|
||||
|
||||
const server = $(computedEager(() => route.params.server as string))
|
||||
const account = $(computedEager(() => route.params.account as string))
|
||||
const server = computed(() => route.params.server as string)
|
||||
const account = computed(() => route.params.account as string)
|
||||
|
||||
const tabs = $computed<CommonRouteTabOption[]>(() => [
|
||||
const tabs = computed<CommonRouteTabOption[]>(() => [
|
||||
{
|
||||
name: 'account-index',
|
||||
to: {
|
||||
name: 'account-index',
|
||||
params: { server, account },
|
||||
params: { server: server.value, account: account.value },
|
||||
},
|
||||
display: t('tab.posts'),
|
||||
icon: 'i-ri:file-list-2-line',
|
||||
|
|
@ -21,7 +21,7 @@ const tabs = $computed<CommonRouteTabOption[]>(() => [
|
|||
name: 'account-replies',
|
||||
to: {
|
||||
name: 'account-replies',
|
||||
params: { server, account },
|
||||
params: { server: server.value, account: account.value },
|
||||
},
|
||||
display: t('tab.posts_with_replies'),
|
||||
icon: 'i-ri:chat-1-line',
|
||||
|
|
@ -30,7 +30,7 @@ const tabs = $computed<CommonRouteTabOption[]>(() => [
|
|||
name: 'account-media',
|
||||
to: {
|
||||
name: 'account-media',
|
||||
params: { server, account },
|
||||
params: { server: server.value, account: account.value },
|
||||
},
|
||||
display: t('tab.media'),
|
||||
icon: 'i-ri:camera-2-line',
|
||||
|
|
@ -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>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import type { LocaleObject } from '@nuxtjs/i18n'
|
||||
import type { AriaAnnounceType, AriaLive } from '~/composables/aria'
|
||||
import type { LocaleObject } from '#i18n'
|
||||
|
||||
const router = useRouter()
|
||||
const { t, locale, locales } = useI18n()
|
||||
|
|
@ -11,16 +11,16 @@ const localeMap = (locales.value as LocaleObject[]).reduce((acc, l) => {
|
|||
return acc
|
||||
}, {} as Record<string, string>)
|
||||
|
||||
let ariaLive = $ref<AriaLive>('polite')
|
||||
let ariaMessage = $ref<string>('')
|
||||
const ariaLive = ref<AriaLive>('polite')
|
||||
const ariaMessage = ref<string>('')
|
||||
|
||||
function onMessage(event: AriaAnnounceType, message?: string) {
|
||||
if (event === 'announce')
|
||||
ariaMessage = message!
|
||||
ariaMessage.value = message!
|
||||
else if (event === 'mute')
|
||||
ariaLive = 'off'
|
||||
ariaLive.value = 'off'
|
||||
else
|
||||
ariaLive = 'polite'
|
||||
ariaLive.value = 'polite'
|
||||
}
|
||||
|
||||
watch(locale, (l, ol) => {
|
||||
|
|
@ -38,12 +38,14 @@ onMounted(() => {
|
|||
announce(t('a11y.loading_page'))
|
||||
})
|
||||
router.afterEach((to, from) => {
|
||||
from && setTimeout(() => {
|
||||
requestAnimationFrame(() => {
|
||||
const title = document.title.trim().split('|')
|
||||
announce(t('a11y.route_loaded', [title[0]]))
|
||||
})
|
||||
}, 512)
|
||||
if (from) {
|
||||
setTimeout(() => {
|
||||
requestAnimationFrame(() => {
|
||||
const title = document.title.trim().split('|')
|
||||
announce(t('a11y.route_loaded', [title[0]]))
|
||||
})
|
||||
}, 512)
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
|
@ -1,17 +1,16 @@
|
|||
<script setup lang="ts">
|
||||
import type { AriaLive } from '~/composables/aria'
|
||||
|
||||
// tsc complaining when using $defineProps
|
||||
withDefaults(defineProps<{
|
||||
title: string
|
||||
const {
|
||||
ariaLive = 'polite',
|
||||
heading = 'h2',
|
||||
messageKey = (message: any) => message,
|
||||
} = defineProps<{
|
||||
ariaLive?: AriaLive
|
||||
messageKey?: (message: any) => any
|
||||
heading?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
|
||||
}>(), {
|
||||
heading: 'h2',
|
||||
messageKey: (message: any) => message,
|
||||
ariaLive: 'polite',
|
||||
})
|
||||
title: string
|
||||
messageKey?: (message: any) => any
|
||||
}>()
|
||||
|
||||
const { announceLogs, appendLogs, clearLogs, logs } = useAriaLog()
|
||||
|
||||
|
|
@ -1,12 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import type { AriaLive } from '~/composables/aria'
|
||||
|
||||
// tsc complaining when using $defineProps
|
||||
withDefaults(defineProps<{
|
||||
const { ariaLive = 'polite' } = defineProps<{
|
||||
ariaLive?: AriaLive
|
||||
}>(), {
|
||||
ariaLive: 'polite',
|
||||
})
|
||||
}>()
|
||||
|
||||
const { announceStatus, clearStatus, status } = useAriaStatus()
|
||||
|
||||
|
|
@ -1,19 +1,15 @@
|
|||
<script lang="ts" setup>
|
||||
<script setup lang="ts">
|
||||
import type { ResolvedCommand } from '~/composables/command'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'activate'): void
|
||||
}>()
|
||||
|
||||
const {
|
||||
cmd,
|
||||
index,
|
||||
active = false,
|
||||
} = $defineProps<{
|
||||
const { active = false } = defineProps<{
|
||||
cmd: ResolvedCommand
|
||||
index: number
|
||||
active?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'activate'): void
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
const { name } = defineProps<{
|
||||
name: string
|
||||
}>()
|
||||
|
||||
const isMac = useIsMac()
|
||||
|
||||
const keys = $computed(() => props.name.toLowerCase().split('+'))
|
||||
const keys = computed(() => name.toLowerCase().split('+'))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import type { SearchResult as SearchResultType } from '~/composables/masto/search'
|
||||
import type { CommandScope, QueryResult, QueryResultItem } from '~/composables/command'
|
||||
import type { SearchResult as SearchResultType } from '~/composables/masto/search'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'close'): void
|
||||
|
|
@ -10,21 +10,21 @@ const registry = useCommandRegistry()
|
|||
|
||||
const router = useRouter()
|
||||
|
||||
const inputEl = $ref<HTMLInputElement>()
|
||||
const resultEl = $ref<HTMLDivElement>()
|
||||
const inputEl = ref<HTMLInputElement>()
|
||||
const resultEl = ref<HTMLDivElement>()
|
||||
|
||||
const scopes = $ref<CommandScope[]>([])
|
||||
let input = $(commandPanelInput)
|
||||
const scopes = ref<CommandScope[]>([])
|
||||
const input = commandPanelInput
|
||||
|
||||
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 {
|
||||
return {
|
||||
|
|
@ -35,8 +35,8 @@ function toSearchQueryResultItem(search: SearchResultType): QueryResultItem {
|
|||
}
|
||||
}
|
||||
|
||||
const searchResult = $computed<QueryResult>(() => {
|
||||
if (query.length === 0 || loading.value)
|
||||
const searchResult = computed<QueryResult>(() => {
|
||||
if (query.value.length === 0 || loading.value)
|
||||
return { length: 0, items: [], grouped: {} as any }
|
||||
|
||||
// TODO extract this scope
|
||||
|
|
@ -61,22 +61,22 @@ const searchResult = $computed<QueryResult>(() => {
|
|||
}
|
||||
})
|
||||
|
||||
const result = $computed<QueryResult>(() => commandMode
|
||||
? registry.query(scopes.map(s => s.id).join('.'), input.slice(1).trim())
|
||||
: searchResult,
|
||||
const result = computed<QueryResult>(() => commandMode.value
|
||||
? registry.query(scopes.value.map(s => s.id).join('.'), input.value.slice(1).trim())
|
||||
: searchResult.value,
|
||||
)
|
||||
|
||||
const isMac = useIsMac()
|
||||
const modifierKeyName = $computed(() => isMac.value ? '⌘' : 'Ctrl')
|
||||
const modifierKeyName = computed(() => isMac.value ? '⌘' : 'Ctrl')
|
||||
|
||||
let active = $ref(0)
|
||||
watch($$(result), (n, o) => {
|
||||
const active = ref(0)
|
||||
watch(result, (n, o) => {
|
||||
if (n.length !== o.length || !n.items.every((i, idx) => i === o.items[idx]))
|
||||
active = 0
|
||||
active.value = 0
|
||||
})
|
||||
|
||||
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) {
|
||||
if (item.onActivate) {
|
||||
|
|
@ -84,14 +84,14 @@ function onCommandActivate(item: QueryResultItem) {
|
|||
emit('close')
|
||||
}
|
||||
else if (item.onComplete) {
|
||||
scopes.push(item.onComplete())
|
||||
input = '> '
|
||||
scopes.value.push(item.onComplete())
|
||||
input.value = '> '
|
||||
}
|
||||
}
|
||||
function onCommandComplete(item: QueryResultItem) {
|
||||
if (item.onComplete) {
|
||||
scopes.push(item.onComplete())
|
||||
input = '> '
|
||||
scopes.value.push(item.onComplete())
|
||||
input.value = '> '
|
||||
}
|
||||
else if (item.onActivate) {
|
||||
item.onActivate()
|
||||
|
|
@ -105,9 +105,9 @@ function intoView(index: number) {
|
|||
}
|
||||
|
||||
function setActive(index: number) {
|
||||
const len = result.length
|
||||
active = (index + len) % len
|
||||
intoView(active)
|
||||
const len = result.value.length
|
||||
active.value = (index + len) % len
|
||||
intoView(active.value)
|
||||
}
|
||||
|
||||
function onKeyDown(e: KeyboardEvent) {
|
||||
|
|
@ -118,7 +118,7 @@ function onKeyDown(e: KeyboardEvent) {
|
|||
break
|
||||
e.preventDefault()
|
||||
|
||||
setActive(active - 1)
|
||||
setActive(active.value - 1)
|
||||
|
||||
break
|
||||
}
|
||||
|
|
@ -128,7 +128,7 @@ function onKeyDown(e: KeyboardEvent) {
|
|||
break
|
||||
e.preventDefault()
|
||||
|
||||
setActive(active + 1)
|
||||
setActive(active.value + 1)
|
||||
|
||||
break
|
||||
}
|
||||
|
|
@ -136,9 +136,9 @@ function onKeyDown(e: KeyboardEvent) {
|
|||
case 'Home': {
|
||||
e.preventDefault()
|
||||
|
||||
active = 0
|
||||
active.value = 0
|
||||
|
||||
intoView(active)
|
||||
intoView(active.value)
|
||||
|
||||
break
|
||||
}
|
||||
|
|
@ -146,7 +146,7 @@ function onKeyDown(e: KeyboardEvent) {
|
|||
case 'End': {
|
||||
e.preventDefault()
|
||||
|
||||
setActive(result.length - 1)
|
||||
setActive(result.value.length - 1)
|
||||
|
||||
break
|
||||
}
|
||||
|
|
@ -154,7 +154,7 @@ function onKeyDown(e: KeyboardEvent) {
|
|||
case 'Enter': {
|
||||
e.preventDefault()
|
||||
|
||||
const cmd = result.items[active]
|
||||
const cmd = result.value.items[active.value]
|
||||
if (cmd)
|
||||
onCommandActivate(cmd)
|
||||
|
||||
|
|
@ -164,7 +164,7 @@ function onKeyDown(e: KeyboardEvent) {
|
|||
case 'Tab': {
|
||||
e.preventDefault()
|
||||
|
||||
const cmd = result.items[active]
|
||||
const cmd = result.value.items[active.value]
|
||||
if (cmd)
|
||||
onCommandComplete(cmd)
|
||||
|
||||
|
|
@ -172,9 +172,9 @@ function onKeyDown(e: KeyboardEvent) {
|
|||
}
|
||||
|
||||
case 'Backspace': {
|
||||
if (input === '>' && scopes.length) {
|
||||
if (input.value === '>' && scopes.value.length) {
|
||||
e.preventDefault()
|
||||
scopes.pop()
|
||||
scopes.value.pop()
|
||||
}
|
||||
break
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<script lang="ts" setup>
|
||||
<script setup lang="ts">
|
||||
const emit = defineEmits<{
|
||||
(event: 'close'): void
|
||||
}>()
|
||||
|
|
@ -3,7 +3,7 @@ defineOptions({
|
|||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const { blurhash = '', src, srcset, shouldLoadImage = true } = defineProps<{
|
||||
const { blurhash = '', shouldLoadImage = true } = defineProps<{
|
||||
blurhash?: string
|
||||
src: string
|
||||
srcset?: string
|
||||
|
|
@ -4,6 +4,8 @@ defineProps<{
|
|||
hover?: boolean
|
||||
iconChecked?: string
|
||||
iconUnchecked?: string
|
||||
checkedIconColor?: string
|
||||
prependCheckbox?: boolean
|
||||
}>()
|
||||
const modelValue = defineModel<boolean | null>()
|
||||
</script>
|
||||
|
|
@ -15,9 +17,12 @@ const modelValue = defineModel<boolean | null>()
|
|||
v-bind="$attrs"
|
||||
@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
|
||||
: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
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
|
@ -26,6 +31,7 @@ const modelValue = defineModel<boolean | null>()
|
|||
type="checkbox"
|
||||
sr-only
|
||||
>
|
||||
<span v-if="label && prependCheckbox" flex-1 ms-2 pointer-events-none>{{ label }}</span>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
|
|
@ -1,27 +1,20 @@
|
|||
<script lang="ts" setup>
|
||||
<script setup lang="ts">
|
||||
import type { Boundaries } from 'vue-advanced-cropper'
|
||||
import { Cropper } from 'vue-advanced-cropper'
|
||||
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 */
|
||||
stencilAspectRatio?: number
|
||||
/** The ratio of the longest edge of the cut box to the length of the cut screen, default 0.9, not more than 1 */
|
||||
stencilSizePercentage?: number
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
stencilAspectRatio: 1 / 1,
|
||||
stencilSizePercentage: 0.9,
|
||||
})
|
||||
}>()
|
||||
|
||||
const file = defineModel<File | null>()
|
||||
|
||||
const cropperDialog = ref(false)
|
||||
|
||||
const cropper = ref<InstanceType<typeof Cropper>>()
|
||||
|
||||
const cropperFlag = ref(false)
|
||||
|
||||
const cropperImage = reactive({
|
||||
src: '',
|
||||
type: 'image/jpg',
|
||||
|
|
@ -29,8 +22,8 @@ const cropperImage = reactive({
|
|||
|
||||
function stencilSize({ boundaries }: { boundaries: Boundaries }) {
|
||||
return {
|
||||
width: boundaries.width * props.stencilSizePercentage,
|
||||
height: boundaries.height * props.stencilSizePercentage,
|
||||
width: boundaries.width * stencilSizePercentage,
|
||||
height: boundaries.height * stencilSizePercentage,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -82,7 +75,7 @@ function cropImage() {
|
|||
}"
|
||||
:stencil-size="stencilSize"
|
||||
:stencil-props="{
|
||||
aspectRatio: props.stencilAspectRatio,
|
||||
aspectRatio: stencilAspectRatio,
|
||||
movable: false,
|
||||
resizable: false,
|
||||
handlers: {},
|
||||
|
|
@ -1,22 +1,22 @@
|
|||
<script lang="ts" setup>
|
||||
import { fileOpen } from 'browser-fs-access'
|
||||
<script setup lang="ts">
|
||||
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 */
|
||||
original?: string
|
||||
/** Allowed file types */
|
||||
allowedFileTypes?: string[]
|
||||
/** Allowed file size */
|
||||
allowedFileSize?: number
|
||||
|
||||
imgClass?: string
|
||||
|
||||
loading?: boolean
|
||||
}>(), {
|
||||
allowedFileTypes: () => ['image/jpeg', 'image/png'],
|
||||
allowedFileSize: 1024 * 1024 * 5, // 5 MB
|
||||
})
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'pick', value: FileWithHandle): void
|
||||
(event: 'error', code: number, message: string): void
|
||||
|
|
@ -26,25 +26,25 @@ const file = defineModel<FileWithHandle | null>()
|
|||
|
||||
const { t } = useI18n()
|
||||
|
||||
const defaultImage = computed(() => props.original || '')
|
||||
const defaultImage = computed(() => original || '')
|
||||
/** Preview of selected images */
|
||||
const previewImage = ref('')
|
||||
/** The current images on display */
|
||||
const imageSrc = computed<string>(() => previewImage.value || defaultImage.value)
|
||||
|
||||
async function pickImage() {
|
||||
if (process.server)
|
||||
if (import.meta.server)
|
||||
return
|
||||
const image = await fileOpen({
|
||||
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'))
|
||||
return
|
||||
}
|
||||
else if (image.size > props.allowedFileSize) {
|
||||
else if (image.size > allowedFileSize) {
|
||||
emit('error', 2, t('error.file_size_cannot_exceed_n_mb', [5]))
|
||||
return
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
const {
|
||||
zIndex = 100,
|
||||
background = 'transparent',
|
||||
} = $defineProps<{
|
||||
} = defineProps<{
|
||||
zIndex?: number
|
||||
background?: string
|
||||
}>()
|
||||
|
|
@ -1,15 +1,15 @@
|
|||
<script setup lang="ts" generic="T, O, U = T">
|
||||
import type { mastodon } from 'masto'
|
||||
// @ts-expect-error missing types
|
||||
import { DynamicScroller } from 'vue-virtual-scroller'
|
||||
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
|
||||
import type { mastodon } from 'masto'
|
||||
import type { UnwrapRef } from 'vue'
|
||||
|
||||
const {
|
||||
paginator,
|
||||
stream,
|
||||
keyProp = 'id',
|
||||
virtualScroller = false,
|
||||
stream,
|
||||
eventType,
|
||||
preprocess,
|
||||
endMessage = true,
|
||||
} = defineProps<{
|
||||
|
|
@ -17,6 +17,7 @@ const {
|
|||
keyProp?: keyof T
|
||||
virtualScroller?: boolean
|
||||
stream?: mastodon.streaming.Subscription
|
||||
eventType?: 'update' | 'notification'
|
||||
preprocess?: (items: (U | T)[]) => U[]
|
||||
endMessage?: boolean | string
|
||||
}>()
|
||||
|
|
@ -31,7 +32,7 @@ defineSlots<{
|
|||
newer: U // newer is undefined when index === 0
|
||||
}) => void
|
||||
items: (props: {
|
||||
items: UnwrapRef<U[]>
|
||||
items: U[]
|
||||
}) => void
|
||||
updater: (props: {
|
||||
number: number
|
||||
|
|
@ -44,7 +45,7 @@ defineSlots<{
|
|||
const { t } = useI18n()
|
||||
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', () => {
|
||||
update()
|
||||
|
|
@ -72,7 +73,7 @@ defineExpose({ createEntry, removeEntry, updateEntry })
|
|||
<template>
|
||||
<div>
|
||||
<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">
|
||||
<DynamicScroller
|
||||
v-slot="{ item, active, index }"
|
||||
|
|
@ -94,8 +95,8 @@ defineExpose({ createEntry, removeEntry, updateEntry })
|
|||
</template>
|
||||
<template v-else>
|
||||
<slot
|
||||
v-for="item, index of items"
|
||||
v-bind="{ key: item[keyProp as keyof U] }"
|
||||
v-for="(item, index) of items"
|
||||
v-bind="{ key: (item as U)[keyProp as keyof U] }"
|
||||
:item="item as U"
|
||||
:older="items[index + 1] as U"
|
||||
:newer="items[index - 1] as U"
|
||||
|
|
@ -1,24 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import type { RouteLocationRaw } from 'vue-router'
|
||||
import type { CommonRouteTabMoreOption, CommonRouteTabOption } from '#shared/types'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
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<{
|
||||
const { options, command, preventScrollTop = false } = defineProps<{
|
||||
options: CommonRouteTabOption[]
|
||||
moreOptions?: CommonRouteTabMoreOption
|
||||
command?: boolean
|
||||
|
|
@ -26,15 +9,16 @@ const { options, command, replace, preventScrollTop = false, moreOptions } = $de
|
|||
preventScrollTop?: boolean
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const router = useRouter()
|
||||
|
||||
useCommands(() => command
|
||||
? options.map(tab => ({
|
||||
scope: 'Tabs',
|
||||
name: tab.display,
|
||||
icon: tab.icon ?? 'i-ri:file-list-2-line',
|
||||
onActivate: () => router.replace(tab.to),
|
||||
}))
|
||||
scope: 'Tabs',
|
||||
name: tab.display,
|
||||
icon: tab.icon ?? 'i-ri:file-list-2-line',
|
||||
onActivate: () => router.replace(tab.to),
|
||||
}))
|
||||
: [])
|
||||
</script>
|
||||
|
||||
|
|
@ -49,7 +33,7 @@ useCommands(() => command
|
|||
:to="option.to"
|
||||
:replace="replace"
|
||||
relative flex flex-auto cursor-pointer sm:px6 px2 rounded transition-all
|
||||
tabindex="1"
|
||||
tabindex="0"
|
||||
hover:bg-active transition-100
|
||||
exact-active-class="children:(text-secondary !border-primary !op100 !text-base)"
|
||||
@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>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="moreOptions?.options?.length">
|
||||
<template v-if="isHydrated && moreOptions?.options?.length">
|
||||
<CommonDropdown placement="bottom" flex cursor-pointer mx-1.25rem>
|
||||
<CommonTooltip placement="top" :content="moreOptions.tooltip || t('action.more')">
|
||||
<button
|
||||
|
|
@ -1,5 +1,9 @@
|
|||
<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()
|
||||
|
||||
watch(() => active, (active) => {
|
||||
|
|
@ -10,7 +10,7 @@ const { options, command } = defineProps<{
|
|||
|
||||
const modelValue = defineModel<string>({ required: true })
|
||||
|
||||
const tabs = $computed(() => {
|
||||
const tabs = computed(() => {
|
||||
return options.map((option) => {
|
||||
if (typeof option === 'string')
|
||||
return { name: option, display: option }
|
||||
|
|
@ -19,19 +19,19 @@ const tabs = $computed(() => {
|
|||
})
|
||||
})
|
||||
|
||||
function toValidName(otpion: string) {
|
||||
return otpion.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-')
|
||||
function toValidName(option: string) {
|
||||
return option.toLowerCase().replace(/[^a-z0-9]/gi, '-')
|
||||
}
|
||||
|
||||
useCommands(() => command
|
||||
? tabs.map(tab => ({
|
||||
scope: 'Tabs',
|
||||
? tabs.value.map(tab => ({
|
||||
scope: 'Tabs',
|
||||
|
||||
name: tab.display,
|
||||
icon: tab.icon ?? 'i-ri:file-list-2-line',
|
||||
name: tab.display,
|
||||
icon: tab.icon ?? 'i-ri:file-list-2-line',
|
||||
|
||||
onActivate: () => modelValue.value = tab.name,
|
||||
}))
|
||||
onActivate: () => modelValue.value = tab.name,
|
||||
}))
|
||||
: [])
|
||||
</script>
|
||||
|
||||
|
|
@ -49,7 +49,7 @@ useCommands(() => command
|
|||
><label
|
||||
flex flex-auto cursor-pointer px3 m1 rounded transition-all
|
||||
:for="`tab-${toValidName(option.name)}`"
|
||||
tabindex="1"
|
||||
tabindex="0"
|
||||
hover:bg-active transition-100
|
||||
@keypress.enter="modelValue = option.name"
|
||||
><span
|
||||
|
|
@ -10,8 +10,10 @@ defineProps<Props>()
|
|||
|
||||
<template>
|
||||
<VTooltip
|
||||
v-if="isHydrated"
|
||||
v-bind="$attrs"
|
||||
auto-hide
|
||||
no-auto-focus
|
||||
>
|
||||
<slot />
|
||||
<template #popper>
|
||||
|
|
@ -1,18 +1,18 @@
|
|||
<script lang="ts" setup>
|
||||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const {
|
||||
history,
|
||||
maxDay = 2,
|
||||
} = $defineProps<{
|
||||
} = defineProps<{
|
||||
history: mastodon.v1.TagHistory[]
|
||||
maxDay?: number
|
||||
}>()
|
||||
|
||||
const ongoingHot = $computed(() => history.slice(0, maxDay))
|
||||
const ongoingHot = computed(() => history.slice(0, maxDay))
|
||||
|
||||
const people = $computed(() =>
|
||||
ongoingHot.reduce((total: number, item) => total + (Number(item.accounts) || 0), 0),
|
||||
const people = computed(() =>
|
||||
ongoingHot.value.reduce((total: number, item) => total + (Number(item.accounts) || 0), 0),
|
||||
)
|
||||
</script>
|
||||
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<script lang="ts" setup>
|
||||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
import sparkline from '@fnando/sparkline'
|
||||
|
||||
|
|
@ -6,22 +6,22 @@ const {
|
|||
history,
|
||||
width = 60,
|
||||
height = 40,
|
||||
} = $defineProps<{
|
||||
} = defineProps<{
|
||||
history?: mastodon.v1.TagHistory[]
|
||||
width?: number
|
||||
height?: number
|
||||
}>()
|
||||
|
||||
const historyNum = $computed(() => {
|
||||
const historyNum = computed(() => {
|
||||
if (!history)
|
||||
return [1, 1, 1, 1, 1, 1, 1]
|
||||
return [...history].reverse().map(item => Number(item.accounts) || 0)
|
||||
})
|
||||
|
||||
const sparklineEl = $ref<SVGSVGElement>()
|
||||
const sparklineEl = ref<SVGSVGElement>()
|
||||
const sparklineFn = typeof sparkline !== 'function' ? (sparkline as any).default : sparkline
|
||||
|
||||
watch([$$(historyNum), $$(sparklineEl)], ([historyNum, sparklineEl]) => {
|
||||
watch([historyNum, sparklineEl], ([historyNum, sparklineEl]) => {
|
||||
if (!sparklineEl)
|
||||
return
|
||||
sparklineFn(sparklineEl, historyNum)
|
||||
|
|
@ -3,16 +3,16 @@ defineOptions({
|
|||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const props = defineProps<{
|
||||
const { count } = defineProps<{
|
||||
count: number
|
||||
keypath: string
|
||||
}>()
|
||||
|
||||
const { formatHumanReadableNumber, formatNumber, forSR } = useHumanReadableNumber()
|
||||
|
||||
const useSR = $computed(() => forSR(props.count))
|
||||
const rawNumber = $computed(() => formatNumber(props.count))
|
||||
const humanReadableNumber = $computed(() => formatHumanReadableNumber(props.count))
|
||||
const useSR = computed(() => forSR(count))
|
||||
const rawNumber = computed(() => formatNumber(count))
|
||||
const humanReadableNumber = computed(() => formatHumanReadableNumber(count))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -6,11 +6,11 @@ defineProps<{
|
|||
autoBoundaryMaxSize?: boolean
|
||||
}>()
|
||||
|
||||
const dropdown = $ref<any>()
|
||||
const dropdown = ref<any>()
|
||||
const colorMode = useColorMode()
|
||||
|
||||
function hide() {
|
||||
return dropdown.hide()
|
||||
return dropdown.value.hide()
|
||||
}
|
||||
provide(InjectionKeyDropdownContext, {
|
||||
hide,
|
||||
|
|
@ -1,16 +1,23 @@
|
|||
<script setup lang="ts">
|
||||
const props = withDefaults(defineProps<{
|
||||
const {
|
||||
is = 'div',
|
||||
text,
|
||||
description,
|
||||
icon,
|
||||
command,
|
||||
} = defineProps<{
|
||||
is?: string
|
||||
text?: string
|
||||
description?: string
|
||||
icon?: string
|
||||
checked?: boolean
|
||||
command?: boolean
|
||||
}>(), {
|
||||
is: 'div',
|
||||
})
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['click'])
|
||||
|
||||
const type = computed(() => is === 'button' ? 'button' : null)
|
||||
|
||||
const { hide } = useDropdownContext() || {}
|
||||
|
||||
const el = ref<HTMLDivElement>()
|
||||
|
|
@ -24,11 +31,11 @@ useCommand({
|
|||
scope: 'Actions',
|
||||
|
||||
order: -1,
|
||||
visible: () => props.command && props.text,
|
||||
visible: () => command && text,
|
||||
|
||||
name: () => props.text!,
|
||||
icon: () => props.icon ?? 'i-ri:question-line',
|
||||
description: () => props.description,
|
||||
name: () => text!,
|
||||
icon: () => icon ?? 'i-ri:question-line',
|
||||
description: () => description,
|
||||
|
||||
onActivate() {
|
||||
const clickEvent = new MouseEvent('click', {
|
||||
|
|
@ -46,6 +53,7 @@ useCommand({
|
|||
v-bind="$attrs"
|
||||
:is="is"
|
||||
ref="el"
|
||||
:type="type"
|
||||
w-full
|
||||
flex gap-3 items-center cursor-pointer px4 py3
|
||||
select-none
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
const { code, lang } = defineProps<{
|
||||
code: string
|
||||
lang?: string
|
||||
}>()
|
||||
|
||||
const raw = $computed(() => decodeURIComponent(props.code).replace(/'/g, '\''))
|
||||
const raw = computed(() => decodeURIComponent(code).replace(/'/g, '\''))
|
||||
|
||||
const langMap: Record<string, string> = {
|
||||
js: 'javascript',
|
||||
|
|
@ -13,7 +13,7 @@ const langMap: Record<string, string> = {
|
|||
}
|
||||
|
||||
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>
|
||||
|
||||
|
|
@ -5,7 +5,7 @@ const { conversation } = defineProps<{
|
|||
conversation: mastodon.v1.Conversation
|
||||
}>()
|
||||
|
||||
const withAccounts = $computed(() =>
|
||||
const withAccounts = computed(() =>
|
||||
conversation.accounts.filter(account => account.id !== conversation.lastStatus?.account.id),
|
||||
)
|
||||
</script>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const { paginator } = defineProps<{
|
||||
defineProps<{
|
||||
paginator: mastodon.Paginator<mastodon.v1.Conversation[], mastodon.DefaultPaginationParams>
|
||||
}>()
|
||||
|
||||
|
|
@ -1,26 +1,26 @@
|
|||
<script setup lang="ts">
|
||||
const { as, alt, dataEmojiId } = $defineProps<{
|
||||
const { alt, dataEmojiId } = defineProps<{
|
||||
as: string
|
||||
alt?: string
|
||||
dataEmojiId?: string
|
||||
}>()
|
||||
|
||||
let title = $ref<string | undefined>()
|
||||
const title = ref<string | undefined>()
|
||||
|
||||
if (alt) {
|
||||
if (alt.startsWith(':')) {
|
||||
title = alt.replace(/:/g, '')
|
||||
title.value = alt.replace(/:/g, '')
|
||||
}
|
||||
else {
|
||||
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 (dataEmojiId)
|
||||
title = dataEmojiId
|
||||
title.value = dataEmojiId
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -2,12 +2,14 @@
|
|||
const emit = defineEmits<{
|
||||
(event: 'close'): void
|
||||
}>()
|
||||
|
||||
const vAutoFocus = (el: HTMLElement) => el.focus()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div my-8 px-3 sm:px-8 md:max-w-200 flex="~ col gap-4" relative>
|
||||
<button btn-action-icon absolute top--8 right-0 m1 aria-label="Close" @click="emit('close')">
|
||||
<div i-ri:close-line />
|
||||
<button v-auto-focus type="button" btn-action-icon absolute top--8 right-0 m1 :aria-label="$t('action.close')" @click="emit('close')">
|
||||
<span i-ri:close-line />
|
||||
</button>
|
||||
|
||||
<img :alt="$t('app_logo')" :src="`/${''}logo.svg`" w-20 h-20 height="80" width="80" mxa class="rtl-flip">
|
||||
|
|
@ -28,10 +30,12 @@ const emit = defineEmits<{
|
|||
</NuxtLink>
|
||||
{{ $t('help.desc_para6') }}
|
||||
</p>
|
||||
{{ $t('help.desc_para3') }}
|
||||
<p flex="~ gap-2 wrap" mxa>
|
||||
<NuxtLink hover:text-primary href="https://github.com/sponsors/elk-zone" target="_blank">
|
||||
{{ $t('help.desc_para3') }}
|
||||
</NuxtLink>
|
||||
<p flex="~ gap-2 wrap justify-center" mxa>
|
||||
<template v-for="team of elkTeamMembers" :key="team.github">
|
||||
<NuxtLink :href="`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">
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
|
@ -42,7 +46,7 @@ const emit = defineEmits<{
|
|||
</NuxtLink>
|
||||
</p>
|
||||
|
||||
<button btn-solid mxa tabindex="2" @click="emit('close')">
|
||||
<button type="button" btn-solid mxa @click="emit('close')">
|
||||
{{ $t('action.enter_app') }}
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -15,9 +15,10 @@ const isRemoved = ref(false)
|
|||
|
||||
async function edit() {
|
||||
try {
|
||||
isRemoved.value
|
||||
? await client.v1.lists.$select(list).accounts.create({ accountIds: [account.id] })
|
||||
: await client.v1.lists.$select(list).accounts.remove({ accountIds: [account.id] })
|
||||
if (isRemoved.value)
|
||||
await client.v1.lists.$select(list).accounts.create({ accountIds: [account.id] })
|
||||
else
|
||||
await client.v1.lists.$select(list).accounts.remove({ accountIds: [account.id] })
|
||||
isRemoved.value = !isRemoved.value
|
||||
}
|
||||
catch (err) {
|
||||
|
|
@ -39,11 +40,11 @@ async function edit() {
|
|||
<CommonTooltip
|
||||
:content="isRemoved ? $t('list.add_account') : $t('list.remove_account')"
|
||||
:hover="isRemoved ? 'text-green' : 'text-red'"
|
||||
no-auto-focus
|
||||
>
|
||||
<button
|
||||
text-sm p2 border-1 transition-colors
|
||||
border-dark
|
||||
bg-base
|
||||
btn-action-icon
|
||||
@click="edit"
|
||||
>
|
||||
|
|
@ -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>
|
||||
|
|
@ -15,26 +15,26 @@ const { form, isDirty, submitter, reset } = useForm({
|
|||
form: () => ({ ...list.value }),
|
||||
})
|
||||
|
||||
let isEditing = $ref<boolean>(false)
|
||||
let deleting = $ref<boolean>(false)
|
||||
let actionError = $ref<string | undefined>(undefined)
|
||||
const isEditing = ref<boolean>(false)
|
||||
const deleting = ref<boolean>(false)
|
||||
const actionError = ref<string | undefined>(undefined)
|
||||
|
||||
const input = ref<HTMLInputElement>()
|
||||
const editBtn = ref<HTMLButtonElement>()
|
||||
const deleteBtn = ref<HTMLButtonElement>()
|
||||
|
||||
async function prepareEdit() {
|
||||
isEditing = true
|
||||
actionError = undefined
|
||||
isEditing.value = true
|
||||
actionError.value = undefined
|
||||
await nextTick()
|
||||
input.value?.focus()
|
||||
}
|
||||
async function cancelEdit() {
|
||||
isEditing = false
|
||||
actionError = undefined
|
||||
reset()
|
||||
isEditing.value = false
|
||||
actionError.value = undefined
|
||||
|
||||
await nextTick()
|
||||
reset()
|
||||
editBtn.value?.focus()
|
||||
}
|
||||
|
||||
|
|
@ -47,14 +47,14 @@ const { submit, submitting } = submitter(async () => {
|
|||
}
|
||||
catch (err) {
|
||||
console.error(err)
|
||||
actionError = (err as Error).message
|
||||
actionError.value = (err as Error).message
|
||||
await nextTick()
|
||||
input.value?.focus()
|
||||
}
|
||||
})
|
||||
|
||||
async function removeList() {
|
||||
if (deleting)
|
||||
if (deleting.value)
|
||||
return
|
||||
|
||||
const confirmDelete = await openConfirmDialog({
|
||||
|
|
@ -64,11 +64,11 @@ async function removeList() {
|
|||
cancel: t('confirm.delete_list.cancel'),
|
||||
})
|
||||
|
||||
deleting = true
|
||||
actionError = undefined
|
||||
deleting.value = true
|
||||
actionError.value = undefined
|
||||
await nextTick()
|
||||
|
||||
if (confirmDelete === 'confirm') {
|
||||
if (confirmDelete.choice === 'confirm') {
|
||||
await nextTick()
|
||||
try {
|
||||
await client.v1.lists.$select(list.value.id).remove()
|
||||
|
|
@ -76,23 +76,23 @@ async function removeList() {
|
|||
}
|
||||
catch (err) {
|
||||
console.error(err)
|
||||
actionError = (err as Error).message
|
||||
actionError.value = (err as Error).message
|
||||
await nextTick()
|
||||
deleteBtn.value?.focus()
|
||||
}
|
||||
finally {
|
||||
deleting = false
|
||||
deleting.value = false
|
||||
}
|
||||
}
|
||||
else {
|
||||
deleting = false
|
||||
deleting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function clearError() {
|
||||
actionError = undefined
|
||||
actionError.value = undefined
|
||||
await nextTick()
|
||||
if (isEditing)
|
||||
if (isEditing.value)
|
||||
input.value?.focus()
|
||||
else
|
||||
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"
|
||||
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
|
||||
type="button"
|
||||
rounded-full text-sm p2 transition-colors
|
||||
|
|
@ -136,7 +136,7 @@ onDeactivated(cancelEdit)
|
|||
{{ form.title }}
|
||||
</NuxtLink>
|
||||
<div mr4 flex gap2>
|
||||
<CommonTooltip v-if="isEditing" :content="$t('list.save')" no-auto-focus>
|
||||
<CommonTooltip v-if="isEditing" :content="$t('list.save')">
|
||||
<button
|
||||
type="submit"
|
||||
text-sm p2 border-1 transition-colors
|
||||
|
|
@ -152,7 +152,7 @@ onDeactivated(cancelEdit)
|
|||
</template>
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
<CommonTooltip v-else :content="$t('list.edit')" no-auto-focus>
|
||||
<CommonTooltip v-else :content="$t('list.edit')">
|
||||
<button
|
||||
ref="editBtn"
|
||||
type="button"
|
||||
|
|
@ -164,7 +164,7 @@ onDeactivated(cancelEdit)
|
|||
<span block text-current i-ri:edit-2-line class="rtl-flip" />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
<CommonTooltip :content="$t('list.delete')" no-auto-focus>
|
||||
<CommonTooltip :content="$t('list.delete')">
|
||||
<button
|
||||
type="button"
|
||||
text-sm p2 border-1 transition-colors
|
||||
|
|
@ -192,7 +192,7 @@ onDeactivated(cancelEdit)
|
|||
<div aria-hidden="true" i-ri:error-warning-fill />
|
||||
<p>{{ $t(`list.${isEditing ? 'edit_error' : 'delete_error'}`) }}</p>
|
||||
</div>
|
||||
<CommonTooltip placement="bottom" :content="$t('list.clear_error')" no-auto-focus>
|
||||
<CommonTooltip placement="bottom" :content="$t('list.clear_error')">
|
||||
<button
|
||||
flex rounded-4 p1 hover:bg-active cursor-pointer transition-100 :aria-label="$t('list.clear_error')"
|
||||
@click="clearError"
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
<script lang="ts" setup>
|
||||
<script setup lang="ts">
|
||||
const { userId } = defineProps<{
|
||||
userId: string
|
||||
}>()
|
||||
|
||||
const { client } = $(useMasto())
|
||||
const paginator = client.v1.lists.list()
|
||||
const listsWithUser = ref((await client.v1.accounts.$select(userId).lists.list()).map(list => list.id))
|
||||
const { client } = useMasto()
|
||||
const paginator = client.value.v1.lists.list()
|
||||
const listsWithUser = ref((await client.value.v1.accounts.$select(userId).lists.list()).map(list => list.id))
|
||||
|
||||
function indexOfUserInList(listId: string) {
|
||||
return listsWithUser.value.indexOf(listId)
|
||||
|
|
@ -15,11 +15,11 @@ async function edit(listId: string) {
|
|||
try {
|
||||
const index = indexOfUserInList(listId)
|
||||
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)
|
||||
}
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
|
@ -30,7 +30,7 @@ async function edit(listId: string) {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<CommonPaginator :end-message="false" :paginator="paginator">
|
||||
<CommonPaginator :paginator="paginator">
|
||||
<template #default="{ item }">
|
||||
<div p4 hover:bg-active block w="100%" flex justify-between items-center gap-4>
|
||||
<p>{{ item.title }}</p>
|
||||
|
|
@ -49,5 +49,13 @@ async function edit(listId: string) {
|
|||
</CommonTooltip>
|
||||
</div>
|
||||
</template>
|
||||
<template #done>
|
||||
<NuxtLink
|
||||
p4 hover:bg-active block w="100%" flex justify-between items-center gap-4
|
||||
to="/lists"
|
||||
>
|
||||
<p>{{ $t('list.manage') }}</p>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
</CommonPaginator>
|
||||
</template>
|
||||
|
|
@ -22,9 +22,9 @@ interface ShortcutItemGroup {
|
|||
}
|
||||
|
||||
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'),
|
||||
items: [
|
||||
|
|
@ -32,14 +32,18 @@ const shortcutItemGroups: ShortcutItemGroup[] = [
|
|||
description: t('magic_keys.groups.navigation.shortcut_help'),
|
||||
shortcut: { keys: ['?'], isSequence: false },
|
||||
},
|
||||
// {
|
||||
// description: t('magic_keys.groups.navigation.next_status'),
|
||||
// shortcut: { keys: ['j'], isSequence: false },
|
||||
// },
|
||||
// {
|
||||
// description: t('magic_keys.groups.navigation.previous_status'),
|
||||
// shortcut: { keys: ['k'], isSequence: false },
|
||||
// },
|
||||
{
|
||||
description: t('magic_keys.groups.navigation.next_status'),
|
||||
shortcut: { keys: ['j'], isSequence: false },
|
||||
},
|
||||
{
|
||||
description: t('magic_keys.groups.navigation.previous_status'),
|
||||
shortcut: { keys: ['k'], isSequence: false },
|
||||
},
|
||||
{
|
||||
description: t('magic_keys.groups.navigation.go_to_search'),
|
||||
shortcut: { keys: ['/'], isSequence: false },
|
||||
},
|
||||
{
|
||||
description: t('magic_keys.groups.navigation.go_to_home'),
|
||||
shortcut: { keys: ['g', 'h'], isSequence: true },
|
||||
|
|
@ -48,6 +52,42 @@ const shortcutItemGroups: ShortcutItemGroup[] = [
|
|||
description: t('magic_keys.groups.navigation.go_to_notifications'),
|
||||
shortcut: { keys: ['g', 'n'], isSequence: true },
|
||||
},
|
||||
{
|
||||
description: t('magic_keys.groups.navigation.go_to_conversations'),
|
||||
shortcut: { keys: ['g', 'c'], isSequence: true },
|
||||
},
|
||||
{
|
||||
description: t('magic_keys.groups.navigation.go_to_favourites'),
|
||||
shortcut: { keys: ['g', 'f'], isSequence: true },
|
||||
},
|
||||
{
|
||||
description: t('magic_keys.groups.navigation.go_to_bookmarks'),
|
||||
shortcut: { keys: ['g', 'b'], isSequence: true },
|
||||
},
|
||||
{
|
||||
description: t('magic_keys.groups.navigation.go_to_explore'),
|
||||
shortcut: { keys: ['g', 'e'], isSequence: true },
|
||||
},
|
||||
{
|
||||
description: t('magic_keys.groups.navigation.go_to_local'),
|
||||
shortcut: { keys: ['g', 'l'], isSequence: true },
|
||||
},
|
||||
{
|
||||
description: t('magic_keys.groups.navigation.go_to_federated'),
|
||||
shortcut: { keys: ['g', 't'], isSequence: true },
|
||||
},
|
||||
{
|
||||
description: t('magic_keys.groups.navigation.go_to_lists'),
|
||||
shortcut: { keys: ['g', 'i'], isSequence: true },
|
||||
},
|
||||
{
|
||||
description: t('magic_keys.groups.navigation.go_to_settings'),
|
||||
shortcut: { keys: ['g', 's'], isSequence: true },
|
||||
},
|
||||
{
|
||||
description: t('magic_keys.groups.navigation.go_to_profile'),
|
||||
shortcut: { keys: ['g', 'p'], isSequence: true },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -55,16 +95,20 @@ const shortcutItemGroups: ShortcutItemGroup[] = [
|
|||
items: [
|
||||
{
|
||||
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'),
|
||||
shortcut: { keys: [modifierKeyName, '/'], isSequence: false },
|
||||
shortcut: { keys: [modifierKeyName.value, '/'], isSequence: false },
|
||||
},
|
||||
{
|
||||
description: t('magic_keys.groups.actions.compose'),
|
||||
shortcut: { keys: ['c'], isSequence: false },
|
||||
},
|
||||
{
|
||||
description: t('magic_keys.groups.actions.show_new_items'),
|
||||
shortcut: { keys: ['.'], isSequence: false },
|
||||
},
|
||||
{
|
||||
description: t('magic_keys.groups.actions.favourite'),
|
||||
shortcut: { keys: ['f'], isSequence: false },
|
||||
|
|
@ -79,7 +123,7 @@ const shortcutItemGroups: ShortcutItemGroup[] = [
|
|||
name: t('magic_keys.groups.media.title'),
|
||||
items: [],
|
||||
},
|
||||
]
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -27,7 +27,7 @@ const containerClass = computed(() => {
|
|||
<template>
|
||||
<div ref="container" :class="containerClass">
|
||||
<div
|
||||
sticky top-0 z10
|
||||
sticky top-0 z-20
|
||||
pt="[env(safe-area-inset-top,0)]"
|
||||
bg="[rgba(var(--rgb-bg-base),0.7)]"
|
||||
class="native:lg:w-[calc(100vw-5rem)] native:xl:w-[calc(135%+(100vw-1200px)/2)]"
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import type { ConfirmDialogChoice } from '#shared/types'
|
||||
import type { mastodon } from 'masto'
|
||||
import type { ConfirmDialogChoice } from '~/types'
|
||||
import {
|
||||
isCommandPanelOpen,
|
||||
isConfirmDialogOpen,
|
||||
|
|
@ -63,13 +63,14 @@ function handleFavouritedBoostedByClose() {
|
|||
</ModalDialog>
|
||||
<ModalDialog
|
||||
v-model="isPublishDialogOpen"
|
||||
max-w-180 flex
|
||||
max-w-180 flex w-full
|
||||
@close="handlePublishClose"
|
||||
>
|
||||
<!-- This `w-0` style is used to avoid overflow problems in flex layouts，so don't remove it unless you know what you're doing -->
|
||||
<PublishWidget
|
||||
<PublishWidgetList
|
||||
v-if="dialogDraftKey"
|
||||
:draft-key="dialogDraftKey" expanded flex-1 w-0
|
||||
:draft-key="dialogDraftKey"
|
||||
expanded
|
||||
class="flex-1"
|
||||
@published="handlePublished"
|
||||
/>
|
||||
</ModalDialog>
|
||||
|
|
@ -1,51 +1,27 @@
|
|||
<script lang="ts" setup>
|
||||
<script setup lang="ts">
|
||||
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({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
zIndex: 100,
|
||||
closeByMask: true,
|
||||
useVIf: true,
|
||||
keepAlive: false,
|
||||
})
|
||||
const {
|
||||
zIndex = 100,
|
||||
closeByMask = true,
|
||||
useVIf = true,
|
||||
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<{
|
||||
/** v-model dialog visibility */
|
||||
|
|
@ -85,7 +61,7 @@ function close() {
|
|||
}
|
||||
|
||||
function clickMask() {
|
||||
if (props.closeByMask)
|
||||
if (closeByMask)
|
||||
close()
|
||||
}
|
||||
|
||||
|
|
@ -97,7 +73,7 @@ watch(visible, (value) => {
|
|||
|
||||
const notInCurrentPage = computed(() => deactivated.value || routePath.value !== route.path)
|
||||
watch(notInCurrentPage, (value) => {
|
||||
if (props.keepAlive)
|
||||
if (keepAlive)
|
||||
return
|
||||
if (value)
|
||||
close()
|
||||
|
|
@ -106,7 +82,7 @@ watch(notInCurrentPage, (value) => {
|
|||
// controls the state of v-if.
|
||||
// when useVIf is toggled, v-if has the same state as modelValue, otherwise v-if is true
|
||||
const isVIf = computed(() => {
|
||||
return props.useVIf
|
||||
return useVIf
|
||||
? visible.value
|
||||
: true
|
||||
})
|
||||
|
|
@ -114,7 +90,7 @@ const isVIf = computed(() => {
|
|||
// controls the state of v-show.
|
||||
// when useVIf is toggled, v-show is true, otherwise it has the same state as modelValue
|
||||
const isVShow = computed(() => {
|
||||
return !props.useVIf
|
||||
return !useVIf
|
||||
? visible.value
|
||||
: true
|
||||
})
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import type { ErrorDialogData } from '~/types'
|
||||
import type { ErrorDialogData } from '#shared/types'
|
||||
|
||||
defineProps<ErrorDialogData>()
|
||||
</script>
|
||||
|
|
@ -37,16 +37,16 @@ onUnmounted(() => locked.value = false)
|
|||
</script>
|
||||
|
||||
<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
|
||||
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
|
||||
:title="$t('action.next')" @click="next"
|
||||
>
|
||||
<div i-ri:arrow-right-s-line text-white />
|
||||
</button>
|
||||
<button
|
||||
v-if="hasPrev" pointer-events-auto btn-action-icon bg="black/20" aria-label="action.next"
|
||||
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
|
||||
:title="$t('action.prev')" @click="prev"
|
||||
>
|
||||
|
|
@ -71,7 +71,7 @@ onUnmounted(() => locked.value = false)
|
|||
|
||||
<div absolute top-0 w-full flex justify-end>
|
||||
<button
|
||||
btn-action-icon bg="black/30" aria-label="action.close" hover:bg="black/40" dark:bg="white/30"
|
||||
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')"
|
||||
>
|
||||
<div i-ri:close-line text-white />
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import type { Vector2 } from '@vueuse/gesture'
|
||||
import type { mastodon } from 'masto'
|
||||
import { useGesture } from '@vueuse/gesture'
|
||||
import { useReducedMotion } from '@vueuse/motion'
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const { media = [] } = defineProps<{
|
||||
media?: mastodon.v1.MediaAttachment[]
|
||||
|
|
@ -15,14 +15,14 @@ const emit = defineEmits<{
|
|||
const modelValue = defineModel<number>({ required: true })
|
||||
|
||||
const slideGap = 20
|
||||
const doubleTapTreshold = 250
|
||||
const doubleTapThreshold = 250
|
||||
|
||||
const view = ref()
|
||||
const slider = ref()
|
||||
const slide = ref()
|
||||
const image = ref()
|
||||
|
||||
const reduceMotion = process.server ? ref(false) : useReducedMotion()
|
||||
const reduceMotion = import.meta.server ? ref(false) : useReducedMotion()
|
||||
const isInitialScrollDone = useTimeout(350)
|
||||
const canAnimate = computed(() => isInitialScrollDone.value && !reduceMotion.value)
|
||||
|
||||
|
|
@ -36,6 +36,8 @@ const isPinching = ref(false)
|
|||
const maxZoomOut = ref(1)
|
||||
const isZoomedIn = computed(() => scale.value > 1)
|
||||
|
||||
const enableAutoplay = usePreferences('enableAutoplay')
|
||||
|
||||
function goToFocusedSlide() {
|
||||
scale.value = 1
|
||||
x.value = slide.value[modelValue.value].offsetLeft * scale.value
|
||||
|
|
@ -147,7 +149,7 @@ function handleLastDrag(tap: boolean, swipe: Vector2, movement: Vector2, positio
|
|||
let lastTapAt = 0
|
||||
function handleTap([positionX, positionY]: Vector2) {
|
||||
const now = Date.now()
|
||||
const isDoubleTap = now - lastTapAt < doubleTapTreshold
|
||||
const isDoubleTap = now - lastTapAt < doubleTapThreshold
|
||||
lastTapAt = now
|
||||
|
||||
if (!isDoubleTap)
|
||||
|
|
@ -218,7 +220,7 @@ function handleZoomDrag([deltaX, deltaY]: Vector2) {
|
|||
function handleSlideDrag([movementX, movementY]: Vector2) {
|
||||
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
|
||||
else
|
||||
x.value -= movementX / scale.value
|
||||
|
|
@ -264,8 +266,12 @@ const imageStyle = computed(() => ({
|
|||
items-center
|
||||
justify-center
|
||||
>
|
||||
<img
|
||||
<component
|
||||
:is="item.type === 'gifv' ? 'video' : 'img'"
|
||||
ref="image"
|
||||
:autoplay="enableAutoplay"
|
||||
controls
|
||||
loop
|
||||
select-none
|
||||
max-w-full
|
||||
max-h-full
|
||||
|
|
@ -273,7 +279,7 @@ const imageStyle = computed(() => ({
|
|||
:draggable="false"
|
||||
:src="item.url || item.previewUrl"
|
||||
:alt="item.description || ''"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<script lang="ts" setup>
|
||||
<script setup lang="ts">
|
||||
import { invoke } from '@vueuse/core'
|
||||
|
||||
const modelValue = defineModel<boolean>({ required: true })
|
||||
|
|
@ -1,3 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span shrink-0 aspect="1/1" sm:h-8 xl:h-10 class="rtl-flip"><svg
|
||||
xmlns="http://www.w3.org/2000/svg" w-full
|
||||
|
|
@ -1,9 +1,38 @@
|
|||
<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
|
||||
}>()
|
||||
const { notifications } = useNotifications()
|
||||
const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
|
||||
const lastAccessedNotificationRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE, '')
|
||||
const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, '')
|
||||
|
||||
const notificationsLink = computed(() => {
|
||||
const hydrated = isHydrated.value
|
||||
const user = currentUser.value
|
||||
const lastRoute = lastAccessedNotificationRoute.value
|
||||
if (!hydrated || !user || !lastRoute) {
|
||||
return '/notifications'
|
||||
}
|
||||
|
||||
return `/notifications/${lastRoute}`
|
||||
})
|
||||
const exploreLink = computed(() => {
|
||||
const hydrated = isHydrated.value
|
||||
const server = currentServer.value
|
||||
let lastRoute = lastAccessedExploreRoute.value
|
||||
if (!hydrated) {
|
||||
return '/explore'
|
||||
}
|
||||
|
||||
if (lastRoute.length) {
|
||||
lastRoute = `/${lastRoute}`
|
||||
}
|
||||
|
||||
return server ? `/${server}/explore${lastRoute}` : `/explore${lastRoute}`
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -12,7 +41,7 @@ const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
|
|||
|
||||
<div class="spacer" shrink xl:hidden />
|
||||
<NavSideItem :text="$t('nav.home')" to="/home" icon="i-ri:home-5-line" user-only :command="command" />
|
||||
<NavSideItem :text="$t('nav.notifications')" to="/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>
|
||||
<div flex relative>
|
||||
<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" />
|
||||
|
||||
<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.federated')" :to="isHydrated ? `/${currentServer}/public` : '/public'" icon="i-ri:earth-line" :command="command" />
|
||||
<NavSideItem :text="$t('nav.lists')" :to="isHydrated ? `/${currentServer}/lists` : '/lists'" icon="i-ri:list-check" user-only :command="command" />
|
||||
<NavSideItem :text="$t('nav.hashtags')" to="/hashtags" icon="i-ri:hashtag" user-only :command="command" />
|
||||
|
||||
<div class="spacer" shrink hidden sm:block />
|
||||
<NavSideItem :text="$t('nav.settings')" to="/settings" icon="i-ri:settings-3-line" :command="command" />
|
||||
|
|
@ -1,13 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
const props = withDefaults(defineProps<{
|
||||
const { text, icon, to, userOnly = false, command } = defineProps<{
|
||||
text?: string
|
||||
icon: string
|
||||
to: string | Record<string, string>
|
||||
userOnly?: boolean
|
||||
command?: boolean
|
||||
}>(), {
|
||||
userOnly: false,
|
||||
})
|
||||
}>()
|
||||
|
||||
defineSlots<{
|
||||
icon: (props: object) => void
|
||||
|
|
@ -19,28 +17,28 @@ const router = useRouter()
|
|||
useCommand({
|
||||
scope: 'Navigation',
|
||||
|
||||
name: () => props.text ?? (typeof props.to === 'string' ? props.to as string : props.to.name),
|
||||
icon: () => props.icon,
|
||||
visible: () => props.command,
|
||||
name: () => text ?? (typeof to === 'string' ? to as string : to.name),
|
||||
icon: () => icon,
|
||||
visible: () => command,
|
||||
|
||||
onActivate() {
|
||||
router.push(props.to)
|
||||
router.push(to)
|
||||
},
|
||||
})
|
||||
|
||||
let activeClass = $ref('text-primary')
|
||||
const activeClass = ref('text-primary')
|
||||
onHydrated(async () => {
|
||||
// TODO: force NuxtLink to reevaluate, we now we are in this route though, so we should force it to active
|
||||
// we don't have currentServer defined until later
|
||||
activeClass = ''
|
||||
activeClass.value = ''
|
||||
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
|
||||
// when we know there is no user.
|
||||
const noUserDisable = computed(() => !isHydrated.value || (props.userOnly && !currentUser.value))
|
||||
const noUserVisual = computed(() => isHydrated.value && props.userOnly && !currentUser.value)
|
||||
const noUserDisable = computed(() => !isHydrated.value || (userOnly && !currentUser.value))
|
||||
const noUserVisual = computed(() => isHydrated.value && userOnly && !currentUser.value)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -57,11 +55,21 @@ const noUserVisual = computed(() => isHydrated.value && props.userOnly && !curre
|
|||
<div
|
||||
class="item"
|
||||
flex items-center gap4
|
||||
w-fit rounded-3
|
||||
px2 mx3 sm:mxa
|
||||
xl="ml0 mr5 px5 w-auto"
|
||||
transition-100
|
||||
elk-group-hover="bg-active" group-focus-visible:ring="2 current"
|
||||
:class="isSmallScreen
|
||||
? `
|
||||
w-full
|
||||
px5 sm:mxa
|
||||
transition-colors duration-200 transform
|
||||
hover-bg-gray-100 hover-dark:(bg-gray-700 text-white)
|
||||
` : `
|
||||
w-fit rounded-3
|
||||
px2 mx3 sm:mxa
|
||||
transition-100
|
||||
elk-group-hover-bg-active
|
||||
group-focus-visible:ring-2
|
||||
group-focus-visible:ring-current
|
||||
`"
|
||||
>
|
||||
<slot name="icon">
|
||||
<div :class="icon" text-xl />
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<script setup>
|
||||
<script setup lang="ts">
|
||||
const { busy, oauth, singleInstanceServer } = useSignIn()
|
||||
</script>
|
||||
|
||||
|
|
@ -34,7 +34,13 @@ const { busy, oauth, singleInstanceServer } = useSignIn()
|
|||
<strong>{{ currentServer }}</strong>
|
||||
</i18n-t>
|
||||
</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') }}
|
||||
</button>
|
||||
</template>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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
Ładowanie…
Reference in New Issue