Compare commits
No commits in common. "main" and "v0.12.1" have entirely different histories.
459 changed files with 14456 additions and 25601 deletions
1
.github/renovate.json5
vendored
1
.github/renovate.json5
vendored
|
|
@ -40,6 +40,7 @@
|
|||
"groupName": "lint",
|
||||
"matchPackageNames": [
|
||||
"@antfu/eslint-config",
|
||||
"@types/prettier",
|
||||
"eslint",
|
||||
"prettier"
|
||||
]
|
||||
|
|
|
|||
11
.github/workflows/ci.yml
vendored
11
.github/workflows/ci.yml
vendored
|
|
@ -18,13 +18,11 @@ jobs:
|
|||
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
# workaround for npm registry key change
|
||||
# ref. `pnpm@10.1.0` / `pnpm@9.15.4` cannot be installed due to key id mismatch · Issue #612 · nodejs/corepack
|
||||
# - https://github.com/nodejs/corepack/issues/612#issuecomment-2629496091
|
||||
- run: npm i -g corepack@latest && corepack enable
|
||||
- uses: actions/setup-node@v4.4.0
|
||||
- run: corepack enable
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version-file: .nvmrc
|
||||
node-version: 20
|
||||
cache: pnpm
|
||||
|
||||
- name: 📦 Install dependencies
|
||||
run: pnpm install --frozen-lockfile
|
||||
|
|
@ -34,7 +32,6 @@ jobs:
|
|||
|
||||
- name: 🧪 Test project
|
||||
run: pnpm test:ci
|
||||
timeout-minutes: 10
|
||||
|
||||
- name: 📝 Lint
|
||||
run: pnpm lint
|
||||
|
|
|
|||
4
.github/workflows/docker.yml
vendored
4
.github/workflows/docker.yml
vendored
|
|
@ -35,10 +35,10 @@ jobs:
|
|||
username: ${{ github.actor }}
|
||||
password: ${{ github.token }}
|
||||
- name: Build and push
|
||||
uses: docker/build-push-action@v6
|
||||
uses: docker/build-push-action@v5
|
||||
with:
|
||||
context: .
|
||||
platforms: linux/amd64,linux/arm64
|
||||
platforms: linux/amd64
|
||||
push: ${{ github.event_name != 'pull_request' }}
|
||||
tags: ${{ steps.metal.outputs.tags }}
|
||||
labels: ${{ steps.metal.outputs.labels }}
|
||||
|
|
|
|||
2
.github/workflows/release.yml
vendored
2
.github/workflows/release.yml
vendored
|
|
@ -19,7 +19,7 @@ jobs:
|
|||
- name: Set node
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version-file: .nvmrc
|
||||
node-version: 18
|
||||
|
||||
- run: npx changelogithub
|
||||
env:
|
||||
|
|
|
|||
2
.github/workflows/semantic-pull-request.yml
vendored
2
.github/workflows/semantic-pull-request.yml
vendored
|
|
@ -19,6 +19,6 @@ jobs:
|
|||
name: Semantic Pull Request
|
||||
steps:
|
||||
- name: Validate PR title
|
||||
uses: amannn/action-semantic-pull-request@v5.5.3
|
||||
uses: amannn/action-semantic-pull-request@v5.4.0
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
|
|
|||
1
.npmrc
1
.npmrc
|
|
@ -1,4 +1,3 @@
|
|||
shamefully-hoist=true
|
||||
shell-emulator=true
|
||||
ignore-workspace-root-check=true
|
||||
package-manager-strict=false
|
||||
|
|
|
|||
2
.nvmrc
2
.nvmrc
|
|
@ -1 +1 @@
|
|||
22
|
||||
20
|
||||
|
|
@ -6,16 +6,22 @@ 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 LTS version of Node.js.
|
||||
2. Ensure using the latest Node.js (16.x).
|
||||
If you have [nvm](https://github.com/nvm-sh/nvm), you can run `nvm i` to install the required version.
|
||||
|
||||
3. The package manager used to install and link dependencies must be [pnpm](https://pnpm.io/) v9. To use it you must first enable [Corepack](https://github.com/nodejs/corepack) by running `corepack enable`. (Note: on Linux in a standard Node 20+ environment, you should follow the instructions to install via Node's `corepack` rather than using the `curl` command)
|
||||
3. The package manager used to install and link dependencies must be [pnpm](https://pnpm.io/) v7. To use it you must first enable [Corepack](https://github.com/nodejs/corepack) by running `corepack enable`. (Note: on Linux in a standard Node 16+ environment, you should follow the instructions to install via Node's `corepack` rather than using the `curl` command)
|
||||
|
||||
4. Check out a branch where you can work and commit your changes:
|
||||
```shell
|
||||
|
|
@ -77,21 +83,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 to the rule above. For icons inside the timeline, it might not work as expected.
|
||||
- For icons that should be rotated for RTL, add `class="rtl-flip"`. This can only be used for icons outside of elements with `dir="auto"`, such as timeline, and is the only exception from the rule above. For icons inside the timeline, it might not work as expected.
|
||||
- For absolute positioned elements, don't use `left/right`: for example `left-0`. Use `inset-inline-start/end` instead. `UnoCSS` shortcuts are `inset-is` for `inset-inline-start` and `inset-ie` for `inset-inline-end`. Example: `left-0` should be replaced with `inset-is-0`.
|
||||
- If you need to change the border radius for an entire left or right side, use `border-inline-start/end`. `UnoCSS` shortcuts are `rounded-is` for left side, `rounded-ie` for right side. Example: `rounded-l-5` should be replaced with `rounded-ie-5`.
|
||||
- If you need to change the border radius for one corner, use `border-start-end-radius` and similar rules. `UnoCSS` shortcuts are `rounded` + top/bottom as either `-bs` (top) or `-be` (bottom) + left/right as either `-is` (left) or `-ie` (right). Example: `rounded-tl-0` should be replaced with `rounded-bs-is-0`.
|
||||
|
||||
## Internationalization
|
||||
|
||||
We are using [vue-i18n](https://vue-i18n.intlify.dev/) via [nuxt-i18n](https://i18n.nuxtjs.org/) to handle internationalization.
|
||||
We are using [vue-i18n](https://vue-i18n.intlify.dev/) via [nuxt-i18n](https://v8.i18n.nuxtjs.org/) to handle internationalization.
|
||||
|
||||
You can check the current [translation status](https://docs.elk.zone/guide/contributing#translation-status): more instructions on the table caption.
|
||||
You can check the current [translation status](https://docs.elk.zone/docs/guide/contributing#translation-status): more instructions on the table caption.
|
||||
|
||||
If you are updating a translation in your local environment, you can run the following commands to check the status:
|
||||
- from root folder: `nr prepare-translation-status`
|
||||
- change to `docs` folder and run docs dev server `nr dev`
|
||||
- open `http://localhost:3000/guide/contributing#translation-status` in your browser
|
||||
- open `http://localhost:3000/docs/guide/contributing#translation-status` in your browser
|
||||
|
||||
### Adding a new language
|
||||
|
||||
|
|
|
|||
|
|
@ -6,10 +6,7 @@ WORKDIR /elk
|
|||
FROM base AS builder
|
||||
|
||||
# Prepare pnpm https://pnpm.io/installation#using-corepack
|
||||
# workaround for npm registry key change
|
||||
# ref. `pnpm@10.1.0` / `pnpm@9.15.4` cannot be installed due to key id mismatch · Issue #612 · nodejs/corepack
|
||||
# - https://github.com/nodejs/corepack/issues/612#issuecomment-2629496091
|
||||
RUN npm i -g corepack@latest && corepack enable
|
||||
RUN corepack enable
|
||||
|
||||
# Prepare deps
|
||||
RUN apk update
|
||||
|
|
|
|||
85
README.md
85
README.md
|
|
@ -1,16 +1,28 @@
|
|||
# Yolk
|
||||
<p align="center">
|
||||
<a href="https://elk.zone" target="_blank" rel="noopener noreferrer">
|
||||
<img width="160" height="160" src="./public/logo.svg" alt="Elk logo">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
Hi! Yolk is my custom fork of [Elk](https://github.com/elk-zon/elk), a nimble Mastodon client.
|
||||
<h1 align="center"/>Elk <sup><em>alpha</em></sup></h1>
|
||||
|
||||
I [decided](https://social.ayco.io/@ayo/114921112446517000) to have a personal fork of Elk because I really like the cross-account functionalities I use it for (e.g., I can open the Explore tab of my fosstodon account, then engage in a post with my self-hosted account, etc)... but I find sometimes I want to change little things which will make the app a bit more opinionated on my tastes (e.g., icons, colors, spacing, etc)... and some behavioral features.
|
||||
<p align="center">
|
||||
A nimble Mastodon web client
|
||||
</p>
|
||||
|
||||
I think doing this will make me use it as my main app daily. I have been switching between multiple apps because each one have strengths & weaknesses of their own.
|
||||
<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/>
|
||||
|
||||
Crucial fixes (if I find them), quality of life improvements, and mastodon API feature parity will still go upstream to the main Elk project.
|
||||
|
||||
~ Ayo Ayco
|
||||
|
||||
---
|
||||
<p align="center">
|
||||
<a href="https://elk.zone/" target="_blank" rel="noopener noreferrer" >
|
||||
<img src="./public/elk-og.png" alt="Elk screenshots" width="600" height="auto">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
## ⚠️ Elk is in Alpha
|
||||
|
||||
|
|
@ -32,19 +44,72 @@ One could put Elk behind popular reverse proxies with SSL Handling like Traefik,
|
|||
|
||||
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 --build -d```
|
||||
1. start container: ```docker-compose up -d```
|
||||
|
||||
> [!NOTE]
|
||||
> The provided Dockerfile creates a container which will eventually run Elk as non-root user and create a persistent named Docker volume upon first start (if that volume does not yet exist). This volume is always created with root permission. Failing to change the permissions of ```/elk/data``` inside this volume to UID:GID 911 (as specified for Elk in the Dockerfile) will prevent Elk from storing it's config for user accounts. You either have to fix the permission in the created named volume, or mount a directory with the correct permission to ```/elk/data``` into the container.
|
||||
|
||||
### Ecosystem
|
||||
|
||||
These are known deployments using Elk as an alternative Web client for Mastodon servers or as a base for other projects in the fediverse:
|
||||
|
||||
- [elk.fedified.com](https://elk.fedified.com) - Use Elk to log into any compatible instance
|
||||
- [elk.me.uk](https://elk.me.uk) - Use Elk to log into any compatible instance, hosted on Google Cloud Run with no Cloudflare proxy
|
||||
- [elk.h4.io](https://elk.h4.io) - Use Elk for the `h4.io` Server
|
||||
- [elk.universeodon.com](https://elk.universeodon.com) - Use Elk for the Universeodon Server
|
||||
- [elk.vmst.io](https://elk.vmst.io) - Use Elk for the `vmst.io` Server
|
||||
- [elk.hostux.social](https://elk.hostux.social) - Use Elk for the `hostux.social` Server
|
||||
- [elk.cupoftea.social](https://elk.cupoftea.social) - Use Elk for the `cupoftea.social` Server
|
||||
- [elk.aus.social](https://elk.aus.social) - Use Elk for the `aus.social` Server
|
||||
- [elk.mstdn.ca](https://elk.mstdn.ca) - Use Elk for the `mstdn.ca` Server
|
||||
- [elk.mastodonapp.uk](https://elk.mastodonapp.uk) - Use Elk for the `mastodonapp.uk` Server
|
||||
- [elk.bolha.us](https://elk.bolha.us) - Use Elk for the `bolha.us` Server
|
||||
|
||||
> **Note**: Community deployments are **NOT** maintained by the Elk team. It may not be synced with Elk's source code. Please do your own research about the host servers before using them.
|
||||
|
||||
## 💖 Sponsors
|
||||
|
||||
We are grateful for the generous sponsorship and help of:
|
||||
|
||||
<a href="https://nuxtlabs.com/" target="_blank" rel="noopener noreferrer" >
|
||||
<img src="./images/nuxtlabs.svg" alt="NuxtLabs" height="85">
|
||||
</a>
|
||||
<br><br>
|
||||
<a href="https://stackblitz.com/" target="_blank" rel="noopener noreferrer" >
|
||||
<img src="./images/stackblitz.svg" alt="StackBlitz" height="85">
|
||||
</a>
|
||||
<br><br>
|
||||
|
||||
And all the companies and individuals sponsoring Elk Team and the members. If you're enjoying the app, consider sponsoring us:
|
||||
|
||||
- [Elk Team's GitHub Sponsors](https://github.com/sponsors/elk-zone)
|
||||
|
||||
Or you can sponsor our core team members individually:
|
||||
|
||||
- [Anthony Fu](https://github.com/sponsors/antfu)
|
||||
- [Daniel Roe](https://github.com/sponsors/danielroe)
|
||||
- [三咲智子 Kevin Deng](https://github.com/sponsors/sxzz)
|
||||
- [Patak](https://github.com/sponsors/patak-dev)
|
||||
|
||||
We would also appreciate sponsoring other contributors to the Elk project. If someone helps you solve an issue or implement a feature you wanted, supporting them would help make this project and OS more sustainable.
|
||||
|
||||
## 📍 Roadmap
|
||||
|
||||
[Open board on Volta](https://volta.net/elk-zone/elk)
|
||||
|
||||
## 🧑💻 Contributing
|
||||
|
||||
We're really excited that you're interested in contributing to Elk! Before submitting your contribution, please read through the following guide.
|
||||
|
||||
### Online
|
||||
|
||||
You can use [StackBlitz Codeflow](https://stackblitz.com/codeflow) to fix bugs or implement features. You'll also see a Codeflow button on PRs to review them without a local setup. Once the elk repo has been cloned in Codeflow, the dev server will start automatically and print the URL to open the App. You should receive a prompt in the bottom-right suggesting to open it in the Editor or in another Tab. To learn more, check out the [Codeflow docs](https://developer.stackblitz.com/codeflow/what-is-codeflow).
|
||||
|
||||
[](https://pr.new/elk-zone/elk)
|
||||
|
||||
### Local Setup
|
||||
|
||||
Clone the repository and run on the root folder:
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { SearchResult } from '~/composables/masto/search'
|
||||
|
||||
defineProps<{
|
||||
result: SearchResult
|
||||
active: boolean
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CommonScrollIntoView
|
||||
as="div"
|
||||
:active="active"
|
||||
py2 block px2
|
||||
:aria-selected="active"
|
||||
:class="{ 'bg-active': active }"
|
||||
>
|
||||
<AccountInfo
|
||||
v-if="result.type === 'account'"
|
||||
:account="result.data"
|
||||
/>
|
||||
</CommonScrollIntoView>
|
||||
</template>
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const model = defineModel<number>()
|
||||
const isValid = defineModel<boolean>('isValid')
|
||||
|
||||
const days = ref<number | ''>(0)
|
||||
const hours = ref<number | ''>(1)
|
||||
const minutes = ref<number | ''>(0)
|
||||
|
||||
watchEffect(() => {
|
||||
if (days.value === '' || hours.value === '' || minutes.value === '') {
|
||||
isValid.value = false
|
||||
return
|
||||
}
|
||||
|
||||
const duration
|
||||
= days.value * 24 * 60 * 60
|
||||
+ hours.value * 60 * 60
|
||||
+ minutes.value * 60
|
||||
|
||||
if (duration <= 0) {
|
||||
isValid.value = false
|
||||
return
|
||||
}
|
||||
|
||||
isValid.value = true
|
||||
model.value = duration
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div flex flex-grow-0 gap-2>
|
||||
<label flex items-center gap-2>
|
||||
<input v-model="days" type="number" min="0" max="1999" input-base :class="!isValid ? 'input-error' : null">
|
||||
{{ $t('confirm.mute_account.days', days === '' ? 0 : days) }}
|
||||
</label>
|
||||
<label flex items-center gap-2>
|
||||
<input v-model="hours" type="number" min="0" max="24" input-base :class="!isValid ? 'input-error' : null">
|
||||
{{ $t('confirm.mute_account.hours', hours === '' ? 0 : hours) }}
|
||||
</label>
|
||||
<label flex items-center gap-2>
|
||||
<input v-model="minutes" type="number" min="0" max="59" step="5" input-base :class="!isValid ? 'input-error' : null">
|
||||
{{ $t('confirm.mute_account.minute', minutes === '' ? 0 : minutes) }}
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { ConfirmDialogChoice, ConfirmDialogOptions } from '#shared/types'
|
||||
|
||||
const { extraOptionType } = defineProps<ConfirmDialogOptions>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(evt: 'choice', choice: ConfirmDialogChoice): void
|
||||
}>()
|
||||
|
||||
const hasDuration = ref(false)
|
||||
const isValidDuration = ref(true)
|
||||
const duration = ref(60 * 60) // default to 1 hour
|
||||
const shouldMuteNotifications = ref(true)
|
||||
const isMute = computed(() => extraOptionType === 'mute')
|
||||
|
||||
function handleChoice(choice: ConfirmDialogChoice['choice']) {
|
||||
const dialogChoice = {
|
||||
choice,
|
||||
...isMute.value && {
|
||||
extraOptions: {
|
||||
mute: {
|
||||
duration: hasDuration.value ? duration.value : 0,
|
||||
notifications: shouldMuteNotifications.value,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
emit('choice', dialogChoice)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div flex="~ col" gap-6>
|
||||
<div font-bold text-lg>
|
||||
{{ title }}
|
||||
</div>
|
||||
<div v-if="description">
|
||||
{{ description }}
|
||||
</div>
|
||||
<div v-if="isMute" flex-col flex gap-4>
|
||||
<CommonCheckbox v-model="hasDuration" :label="$t('confirm.mute_account.specify_duration')" prepend-checkbox checked-icon-color="text-primary" />
|
||||
<ModalDurationPicker v-if="hasDuration" v-model="duration" v-model:is-valid="isValidDuration" />
|
||||
<CommonCheckbox v-model="shouldMuteNotifications" :label="$t('confirm.mute_account.notifications')" prepend-checkbox checked-icon-color="text-primary" />
|
||||
</div>
|
||||
|
||||
<div flex justify-end gap-2>
|
||||
<button btn-text @click="handleChoice('cancel')">
|
||||
{{ cancel || $t('confirm.common.cancel') }}
|
||||
</button>
|
||||
<button btn-solid :disabled="!isValidDuration" @click="handleChoice('confirm')">
|
||||
{{ confirm || $t('confirm.common.confirm') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { Component } from 'vue'
|
||||
import type { NavButtonName } from '../../composables/settings'
|
||||
|
||||
import {
|
||||
NavButtonBookmark,
|
||||
NavButtonCompose,
|
||||
NavButtonExplore,
|
||||
NavButtonFavorite,
|
||||
NavButtonFederated,
|
||||
NavButtonHashtag,
|
||||
NavButtonHome,
|
||||
NavButtonList,
|
||||
NavButtonLocal,
|
||||
NavButtonMention,
|
||||
NavButtonMoreMenu,
|
||||
NavButtonNotification,
|
||||
NavButtonSearch,
|
||||
} from '#components'
|
||||
|
||||
import { STORAGE_KEY_BOTTOM_NAV_BUTTONS } from '~/constants'
|
||||
|
||||
interface NavButton {
|
||||
name: string
|
||||
component: Component
|
||||
}
|
||||
|
||||
const navButtons: NavButton[] = [
|
||||
{ name: 'home', component: NavButtonHome },
|
||||
{ name: 'search', component: NavButtonSearch },
|
||||
{ name: 'notification', component: NavButtonNotification },
|
||||
{ name: 'mention', component: NavButtonMention },
|
||||
{ name: 'favorite', component: NavButtonFavorite },
|
||||
{ name: 'bookmark', component: NavButtonBookmark },
|
||||
{ name: 'compose', component: NavButtonCompose },
|
||||
{ name: 'explore', component: NavButtonExplore },
|
||||
{ name: 'local', component: NavButtonLocal },
|
||||
{ name: 'federated', component: NavButtonFederated },
|
||||
{ name: 'list', component: NavButtonList },
|
||||
{ name: 'hashtag', component: NavButtonHashtag },
|
||||
{ name: 'moreMenu', component: NavButtonMoreMenu },
|
||||
]
|
||||
|
||||
const defaultSelectedNavButtonNames: NavButtonName[] = currentUser.value
|
||||
? ['home', 'search', 'notification', 'mention', 'moreMenu']
|
||||
: ['explore', 'local', 'federated', 'moreMenu']
|
||||
const selectedNavButtonNames = useLocalStorage<NavButtonName[]>(STORAGE_KEY_BOTTOM_NAV_BUTTONS, defaultSelectedNavButtonNames)
|
||||
|
||||
const selectedNavButtons = computed(() => selectedNavButtonNames.value.map(name => navButtons.find(navButton => navButton.name === name)))
|
||||
|
||||
// only one icon can be lit up at the same time
|
||||
const moreMenuVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- This weird styles above are used for scroll locking, don't change it unless you know exactly what you're doing. -->
|
||||
<nav
|
||||
h-14 border="t base" flex flex-row text-xl
|
||||
of-y-scroll scrollbar-hide overscroll-none
|
||||
class="after-content-empty after:(h-[calc(100%+0.5px)] w-0.1px pointer-events-none)"
|
||||
>
|
||||
<Component :is="navButton!.component" v-for="navButton in selectedNavButtons" :key="navButton!.name" :active-class="moreMenuVisible ? '' : 'text-primary'" />
|
||||
</nav>
|
||||
</template>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span shrink-0 aspect="1/1" sm:h-8 xl:h-10 class="rtl-flip">
|
||||
<!-- <svg
|
||||
xmlns="http://www.w3.org/2000/svg" w-full
|
||||
aspect="1/1" sm:h-8 xl:h-10 sm:w-8 xl:w-10 viewBox="0 0 250 250" fill="none"
|
||||
> -->
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><defs><mask id="ipTEgg0"><g fill="none" stroke="#fff" stroke-width="4"><circle cx="24" cy="24" r="10" fill="#555555" stroke-linecap="round" stroke-linejoin="round" /><path d="M44 24c0 2.633-.508 5.146-1.433 7.448c-.936 2.331-4.129.071-7.346 3.521c-3.216 3.45-.71 6.267-3.204 7.36A19.9 19.9 0 0 1 24 44C12.954 44 4 35.046 4 24S12.954 4 24 4s20 8.954 20 20Z" /><path stroke-linecap="round" d="M20 25s.21 1.21 1 2s2 1 2 1" /></g></mask></defs><path fill="#ff8d00" d="M0 0h48v48H0z" mask="url(#ipTEgg0)" /></svg>
|
||||
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
svg path.wood {
|
||||
fill: var(--c-primary);
|
||||
}
|
||||
svg path.body {
|
||||
fill: var(--c-text-secondary);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
activeClass: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink to="/bookmarks" :aria-label="$t('nav.bookmarks')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
|
||||
<div i-ri:bookmark-line />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
activeClass: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink to="/compose" :aria-label="$t('nav.favourites')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
|
||||
<div i-ri:quill-pen-line />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE } from '~/constants'
|
||||
|
||||
defineProps<{
|
||||
activeClass: string
|
||||
}>()
|
||||
|
||||
const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, '')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink :to="`/${currentServer}/explore/${lastAccessedExploreRoute}`" :aria-label="$t('nav.explore')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
|
||||
<div i-ri:compass-3-line />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
activeClass: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink to="/favourites" :aria-label="$t('nav.favourites')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
|
||||
<div i-ri:heart-line />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
activeClass: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink :to="`/${currentServer}/public`" :aria-label="$t('nav.federated')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
|
||||
<div i-ri:earth-line />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
activeClass: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink to="/hashtags" :aria-label="$t('nav.hashtags')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
|
||||
<div i-ri:hashtag />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
activeClass: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink to="/home" :aria-label="$t('nav.home')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
|
||||
<div i-ri:home-5-line />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
activeClass: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink
|
||||
to="/lists"
|
||||
:aria-label="$t('nav.lists')"
|
||||
:active-class="activeClass"
|
||||
flex flex-row items-center place-content-center h-full flex-1
|
||||
class="coarse-pointer:select-none" @click="$scrollToTop"
|
||||
>
|
||||
<div i-ri:list-check />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
activeClass: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink group :to="`/${currentServer}/public/local`" :aria-label="$t('nav.local')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
|
||||
<div i-ri:group-2-line />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
activeClass: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink
|
||||
to="/conversations" :aria-label="$t('nav.conversations')"
|
||||
:active-class="activeClass" flex flex-row items-center place-content-center h-full
|
||||
flex-1 class="coarse-pointer:select-none" @click="$scrollToTop"
|
||||
>
|
||||
<div i-ri:at-line />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const model = defineModel<boolean>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NavBottomMoreMenu
|
||||
v-slot="{ toggleVisible, show }" v-model="model!" flex flex-row items-center
|
||||
place-content-center h-full flex-1 cursor-pointer
|
||||
>
|
||||
<button
|
||||
flex items-center place-content-center h-full flex-1 class="select-none"
|
||||
:class="show ? '!text-primary' : ''"
|
||||
:aria-label="$t('nav.more_menu')"
|
||||
@click="toggleVisible"
|
||||
>
|
||||
<span :class="show ? 'i-ri:close-fill' : 'i-ri:more-fill'" />
|
||||
</button>
|
||||
</NavBottomMoreMenu>
|
||||
</template>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE } from '~/constants'
|
||||
|
||||
defineProps<{
|
||||
activeClass: string
|
||||
}>()
|
||||
|
||||
const { notifications } = useNotifications()
|
||||
const lastAccessedNotificationRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE, '')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink :to="`/notifications/${lastAccessedNotificationRoute}`" :aria-label="$t('nav.notifications')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
|
||||
<div flex relative>
|
||||
<div class="i-ri:notification-4-line" text-xl />
|
||||
<div v-if="notifications" class="top-[-0.3rem] right-[-0.3rem]" absolute font-bold rounded-full h-4 w-4 text-xs bg-primary text-inverted flex items-center justify-center>
|
||||
{{ notifications < 10 ? notifications : '•' }}
|
||||
</div>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
activeClass: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink to="/search" :aria-label="$t('nav.search')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
|
||||
<div i-ri:search-line />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
|
@ -1,102 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { GroupedNotifications } from '#shared/types'
|
||||
|
||||
const { items } = defineProps<{
|
||||
items: GroupedNotifications
|
||||
}>()
|
||||
|
||||
const maxVisibleFollows = 5
|
||||
const follows = computed(() => items.items)
|
||||
const visibleFollows = computed(() => follows.value.slice(0, maxVisibleFollows))
|
||||
const count = computed(() => follows.value.length)
|
||||
const countPlus = computed(() => Math.max(count.value - maxVisibleFollows, 0))
|
||||
const isExpanded = ref(false)
|
||||
const lang = computed(() => {
|
||||
return (count.value > 1 || count.value === 0) ? undefined : items.items[0].status?.language
|
||||
})
|
||||
|
||||
const timeAgoOptions = useTimeAgoOptions(true)
|
||||
const timeAgoCreatedAt = computed(() => follows.value[0].createdAt)
|
||||
const timeAgo = useTimeAgo(() => timeAgoCreatedAt.value, timeAgoOptions)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article flex flex-col relative :lang="lang ?? undefined">
|
||||
<div flex items-center top-0 left-2 pt-2 px-3>
|
||||
<div :class="count > 1 ? 'i-ri-group-line' : 'i-ri-user-3-line'" me-3 color-blue text-xl aria-hidden="true" />
|
||||
<template v-if="count > 1">
|
||||
<AccountHoverWrapper
|
||||
:account="follows[0].account"
|
||||
>
|
||||
<NuxtLink :to="getAccountRoute(follows[0].account)">
|
||||
<AccountDisplayName
|
||||
:account="follows[0].account"
|
||||
text-primary font-bold line-clamp-1 ws-pre-wrap break-all hover:underline
|
||||
/>
|
||||
</NuxtLink>
|
||||
</AccountHoverWrapper>
|
||||
{{ $t('notification.and') }}
|
||||
<CommonLocalizedNumber
|
||||
keypath="notification.others"
|
||||
:count="count - 1"
|
||||
text-primary font-bold line-clamp-1 ws-pre-wrap break-all
|
||||
/>
|
||||
{{ $t('notification.followed_you') }}
|
||||
<time text-secondary :datetime="timeAgoCreatedAt">
|
||||
・{{ timeAgo }}
|
||||
</time>
|
||||
</template>
|
||||
<template v-else-if="count === 1">
|
||||
<NuxtLink :to="getAccountRoute(follows[0].account)">
|
||||
<AccountDisplayName
|
||||
:account="follows[0].account"
|
||||
text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all hover:underline
|
||||
/>
|
||||
</NuxtLink>
|
||||
<span me-1 ws-nowrap>
|
||||
{{ $t('notification.followed_you') }}
|
||||
<time text-secondary :datetime="timeAgoCreatedAt">
|
||||
・{{ timeAgo }}
|
||||
</time>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
<div pb-2 ps8>
|
||||
<div
|
||||
v-if="!isExpanded && count > 1"
|
||||
flex="~ wrap gap-1.75" p4 items-center cursor-pointer
|
||||
@click="isExpanded = !isExpanded"
|
||||
>
|
||||
<AccountHoverWrapper
|
||||
v-for="follow in visibleFollows"
|
||||
:key="follow.id"
|
||||
:account="follow.account"
|
||||
>
|
||||
<NuxtLink :to="getAccountRoute(follow.account)">
|
||||
<AccountAvatar :account="follow.account" w-12 h-12 />
|
||||
</NuxtLink>
|
||||
</AccountHoverWrapper>
|
||||
<div flex="~ 1" items-center>
|
||||
<span v-if="countPlus > 0" ps-2 text="base lg">+{{ countPlus }}</span>
|
||||
<div i-ri:arrow-down-s-line mx-1 text-secondary text-xl aria-hidden="true" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="count > 1" flex p-4 pb-2 cursor-pointer @click="isExpanded = !isExpanded">
|
||||
<div i-ri:arrow-up-s-line ms-2 text-secondary text-xl aria-hidden="true" />
|
||||
<span ps-2 text-base>Hide</span>
|
||||
</div>
|
||||
<AccountHoverWrapper
|
||||
v-for="follow in follows"
|
||||
:key="follow.id"
|
||||
:account="follow.account"
|
||||
>
|
||||
<NuxtLink :to="getAccountRoute(follow.account)" flex gap-4 px-4 py-2>
|
||||
<AccountAvatar :account="follow.account" w-12 h-12 />
|
||||
<StatusAccountDetails :account="follow.account" />
|
||||
</NuxtLink>
|
||||
</AccountHoverWrapper>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const { draftKey, draftItemIndex } = defineProps<{
|
||||
draftKey: string
|
||||
draftItemIndex: number
|
||||
}>()
|
||||
|
||||
const { threadIsActive, addThreadItem, threadItems, removeThreadItem } = useThreadComposer(draftKey)
|
||||
|
||||
const isRemovableItem = computed(() => threadIsActive.value && draftItemIndex < threadItems.value.length - 1)
|
||||
|
||||
function addOrRemoveItem() {
|
||||
if (isRemovableItem.value)
|
||||
removeThreadItem(draftItemIndex)
|
||||
|
||||
else
|
||||
addThreadItem()
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const label = computed(() => {
|
||||
if (!isRemovableItem.value && draftItemIndex === 0)
|
||||
return t('tooltip.start_thread')
|
||||
|
||||
return isRemovableItem.value ? t('tooltip.remove_thread_item') : t('tooltip.add_thread_item')
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div flex flex-row rounded-3 :class="{ 'bg-border': threadIsActive }">
|
||||
<div
|
||||
v-if="threadIsActive" dir="ltr" pointer-events-none pe-1 pt-2 pl-2 text-sm tabular-nums text-secondary flex
|
||||
gap="0.5"
|
||||
>
|
||||
{{ draftItemIndex + 1 }}<span text-secondary-light>/</span><span text-secondary-light>{{ threadItems.length
|
||||
}}</span>
|
||||
</div>
|
||||
<CommonTooltip placement="top" :content="label">
|
||||
<button btn-action-icon :aria-label="label" @click="addOrRemoveItem">
|
||||
<div v-if="isRemovableItem" i-ri:chat-delete-line />
|
||||
<div v-else i-ri:chat-new-line />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,633 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { DraftItem } from '#shared/types'
|
||||
import type { mastodon } from 'masto'
|
||||
import { EditorContent } from '@tiptap/vue-3'
|
||||
import stringLength from 'string-length'
|
||||
|
||||
const {
|
||||
threadComposer,
|
||||
draftKey,
|
||||
draftItemIndex,
|
||||
expanded = false,
|
||||
placeholder,
|
||||
initial = getDefaultDraftItem,
|
||||
} = defineProps<{
|
||||
draftKey: string
|
||||
draftItemIndex: number
|
||||
initial?: () => DraftItem
|
||||
threadComposer?: ReturnType<typeof useThreadComposer>
|
||||
placeholder?: string
|
||||
inReplyToId?: string
|
||||
inReplyToVisibility?: mastodon.v1.StatusVisibility
|
||||
expanded?: boolean
|
||||
dialogLabelledBy?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(evt: 'published', status: mastodon.v1.Status): void
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const { threadItems, threadIsActive, publishThread, threadIsSending } = threadComposer ?? useThreadComposer(draftKey)
|
||||
|
||||
const draft = computed({
|
||||
get: () => threadItems.value[draftItemIndex],
|
||||
set: (updatedDraft: DraftItem) => {
|
||||
threadItems.value[draftItemIndex] = updatedDraft
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
const isFinalItemOfThread = computed(() => draftItemIndex === threadItems.value.length - 1)
|
||||
|
||||
const {
|
||||
isExceedingAttachmentLimit,
|
||||
isUploading,
|
||||
failedAttachments,
|
||||
isOverDropZone,
|
||||
uploadAttachments,
|
||||
pickAttachments,
|
||||
setDescription,
|
||||
removeAttachment,
|
||||
dropZoneRef,
|
||||
} = useUploadMediaAttachment(draft)
|
||||
|
||||
const { shouldExpanded, isExpanded, isSending, isPublishDisabled, publishDraft, failedMessages, preferredLanguage, publishSpoilerText } = usePublish(
|
||||
{
|
||||
draftItem: draft,
|
||||
...{ expanded: toRef(() => expanded), isUploading, initialDraft: initial, isPartOfThread: false },
|
||||
},
|
||||
)
|
||||
|
||||
const { editor } = useTiptap({
|
||||
content: computed({
|
||||
get: () => draft.value.params.status,
|
||||
set: (newVal) => {
|
||||
draft.value.params.status = newVal
|
||||
draft.value.lastUpdated = Date.now()
|
||||
},
|
||||
}),
|
||||
placeholder: computed(() => placeholder ?? draft.value.params.inReplyToId ? t('placeholder.replying') : t('placeholder.default_1')),
|
||||
autofocus: shouldExpanded.value,
|
||||
onSubmit: publish,
|
||||
onFocus() {
|
||||
if (!isExpanded && draft.value.initialText) {
|
||||
editor.value?.chain().insertContent(`${draft.value.initialText} `).focus('end').run()
|
||||
draft.value.initialText = ''
|
||||
}
|
||||
isExpanded.value = true
|
||||
},
|
||||
onPaste: handlePaste,
|
||||
})
|
||||
|
||||
function trimPollOptions() {
|
||||
const indexLastNonEmpty = draft.value.params.poll!.options.findLastIndex(option => option.trim().length > 0)
|
||||
const trimmedOptions = draft.value.params.poll!.options.slice(0, indexLastNonEmpty + 1)
|
||||
|
||||
if (currentInstance.value?.configuration
|
||||
&& trimmedOptions.length >= currentInstance.value?.configuration?.polls.maxOptions) {
|
||||
draft.value.params.poll!.options = trimmedOptions
|
||||
}
|
||||
else {
|
||||
draft.value.params.poll!.options = [...trimmedOptions, '']
|
||||
}
|
||||
}
|
||||
|
||||
function editPollOptionDraft(event: Event, index: number) {
|
||||
draft.value.params.poll!.options = Object.assign(draft.value.params.poll!.options.slice(), { [index]: (event.target as HTMLInputElement).value })
|
||||
|
||||
trimPollOptions()
|
||||
}
|
||||
|
||||
function deletePollOption(index: number) {
|
||||
const newPollOptions = draft.value.params.poll!.options.slice()
|
||||
newPollOptions.splice(index, 1)
|
||||
draft.value.params.poll!.options = newPollOptions
|
||||
trimPollOptions()
|
||||
}
|
||||
|
||||
const expiresInOptions = computed(() => [
|
||||
{
|
||||
seconds: 1 * 60 * 60,
|
||||
label: t('time_ago_options.hour_future', 1),
|
||||
},
|
||||
{
|
||||
seconds: 2 * 60 * 60,
|
||||
label: t('time_ago_options.hour_future', 2),
|
||||
},
|
||||
{
|
||||
seconds: 1 * 24 * 60 * 60,
|
||||
label: t('time_ago_options.day_future', 1),
|
||||
},
|
||||
{
|
||||
seconds: 2 * 24 * 60 * 60,
|
||||
label: t('time_ago_options.day_future', 2),
|
||||
},
|
||||
{
|
||||
seconds: 7 * 24 * 60 * 60,
|
||||
label: t('time_ago_options.day_future', 7),
|
||||
},
|
||||
])
|
||||
|
||||
const expiresInDefaultOptionIndex = 2
|
||||
|
||||
const characterCount = computed(() => {
|
||||
const text = htmlToText(editor.value?.getHTML() || '')
|
||||
|
||||
let length = stringLength(text)
|
||||
|
||||
// taken from https://github.com/mastodon/mastodon/blob/07f8b4d1b19f734d04e69daeb4c3421ef9767aac/app/lib/text_formatter.rb
|
||||
const linkRegex = /(https?:\/\/|xmpp:)\S+/g
|
||||
|
||||
// taken from https://github.com/mastodon/mastodon/blob/af578e/app/javascript/mastodon/features/compose/util/counter.js
|
||||
const countableMentionRegex = /(^|[^/\w])@((\w+)@[a-z0-9.-]+[a-z0-9])/gi
|
||||
|
||||
// maximum of 23 chars per link
|
||||
// https://github.com/elk-zone/elk/issues/1651
|
||||
const maxLength = 23
|
||||
|
||||
for (const [fullMatch] of text.matchAll(linkRegex))
|
||||
length -= fullMatch.length - Math.min(maxLength, fullMatch.length)
|
||||
|
||||
for (const [fullMatch, before, _handle, username] of text.matchAll(countableMentionRegex))
|
||||
length -= fullMatch.length - (before + username).length - 1 // - 1 for the @
|
||||
|
||||
if (draft.value.mentions) {
|
||||
// + 1 is needed as mentions always need a space separator at the end
|
||||
length += draft.value.mentions.map((mention) => {
|
||||
const [handle] = mention.split('@')
|
||||
return `@${handle}`
|
||||
}).join(' ').length + 1
|
||||
}
|
||||
|
||||
length += stringLength(publishSpoilerText.value)
|
||||
|
||||
return length
|
||||
})
|
||||
|
||||
const isExceedingCharacterLimit = computed(() => {
|
||||
return characterCount.value > characterLimit.value
|
||||
})
|
||||
|
||||
const postLanguageDisplay = computed(() => languagesNameList.find(i => i.code === (draft.value.params.language || preferredLanguage.value))?.nativeName)
|
||||
|
||||
const isDM = computed(() => draft.value.params.visibility === 'direct')
|
||||
|
||||
async function handlePaste(evt: ClipboardEvent) {
|
||||
const files = evt.clipboardData?.files
|
||||
if (!files || files.length === 0)
|
||||
return
|
||||
|
||||
evt.preventDefault()
|
||||
await uploadAttachments(Array.from(files))
|
||||
}
|
||||
|
||||
function insertEmoji(name: string) {
|
||||
editor.value?.chain().focus().insertEmoji(name).run()
|
||||
}
|
||||
function insertCustomEmoji(image: any) {
|
||||
editor.value?.chain().focus().insertCustomEmoji(image).run()
|
||||
}
|
||||
|
||||
async function toggleSensitive() {
|
||||
draft.value.params.sensitive = !draft.value.params.sensitive
|
||||
}
|
||||
|
||||
async function publish() {
|
||||
if (isPublishDisabled.value || isExceedingCharacterLimit.value)
|
||||
return
|
||||
|
||||
const publishResult = await (threadIsActive.value ? publishThread() : publishDraft())
|
||||
if (publishResult) {
|
||||
if (Array.isArray(publishResult))
|
||||
failedMessages.value = publishResult
|
||||
else
|
||||
emit('published', publishResult)
|
||||
}
|
||||
}
|
||||
|
||||
useWebShareTarget(async ({ data: { data, action } }: any) => {
|
||||
if (action !== 'compose-with-shared-data')
|
||||
return
|
||||
|
||||
editor.value?.commands.focus('end')
|
||||
|
||||
for (const text of data.textParts) {
|
||||
for (const line of text.split('\n')) {
|
||||
editor.value?.commands.insertContent({
|
||||
type: 'paragraph',
|
||||
content: [{ type: 'text', text: line }],
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (data.files.length !== 0)
|
||||
await uploadAttachments(data.files)
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
focusEditor: () => {
|
||||
editor.value?.commands?.focus?.()
|
||||
},
|
||||
})
|
||||
|
||||
function stopQuestionMarkPropagation(e: KeyboardEvent) {
|
||||
if (e.key === '?')
|
||||
e.stopImmediatePropagation()
|
||||
}
|
||||
|
||||
const userSettings = useUserSettings()
|
||||
|
||||
const optimizeForLowPerformanceDevice = computed(() => getPreferences(userSettings.value, 'optimizeForLowPerformanceDevice'))
|
||||
|
||||
const languageDetectorInGlobalThis = 'LanguageDetector' in globalThis
|
||||
let supportsLanguageDetector = !optimizeForLowPerformanceDevice.value && languageDetectorInGlobalThis && await (globalThis as any).LanguageDetector.availability() === 'available'
|
||||
let languageDetector: { detect: (arg0: string, option: { signal: AbortSignal }) => any }
|
||||
// If the API is supported, but the model not loaded yet…
|
||||
if (languageDetectorInGlobalThis && !supportsLanguageDetector) {
|
||||
// …trigger the model download
|
||||
(globalThis as any).LanguageDetector.create().then((_languageDetector: { detect: (arg0: string) => any }) => {
|
||||
supportsLanguageDetector = true
|
||||
languageDetector = _languageDetector
|
||||
})
|
||||
}
|
||||
|
||||
function countLetters(text: string) {
|
||||
const segmenter = new Intl.Segmenter('und', { granularity: 'grapheme' })
|
||||
const letters = [...segmenter.segment(text)]
|
||||
return letters.length
|
||||
}
|
||||
|
||||
let detectLanguageAbortController = new AbortController()
|
||||
|
||||
const detectLanguage = useDebounceFn(async () => {
|
||||
if (!supportsLanguageDetector) {
|
||||
return
|
||||
}
|
||||
if (!languageDetector) {
|
||||
// maybe we dont want to mess with this with abort....
|
||||
languageDetector = await (globalThis as any).LanguageDetector.create()
|
||||
}
|
||||
// we stop previously running language detection process
|
||||
detectLanguageAbortController.abort()
|
||||
detectLanguageAbortController = new AbortController()
|
||||
const text = htmlToText(editor.value?.getHTML() || '')
|
||||
if (!text || countLetters(text) <= 5) {
|
||||
draft.value.params.language = preferredLanguage.value
|
||||
return
|
||||
}
|
||||
try {
|
||||
const detectedLanguage = (await languageDetector.detect(text, { signal: detectLanguageAbortController.signal }))[0].detectedLanguage
|
||||
draft.value.params.language = detectedLanguage === 'und' ? preferredLanguage.value : detectedLanguage.substring(0, 2)
|
||||
}
|
||||
catch (e) {
|
||||
// if error or abort we end up there
|
||||
if ((e as Error).name !== 'AbortError') {
|
||||
console.error(e)
|
||||
}
|
||||
draft.value.params.language = preferredLanguage.value
|
||||
}
|
||||
}, 500)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="isHydrated && currentUser" flex="~ col gap-4" py3 px2 sm:px4 aria-roledescription="publish-widget">
|
||||
<template v-if="draft.editingStatus">
|
||||
<div id="state-editing" text-secondary self-center>
|
||||
{{ $t('state.editing') }}
|
||||
</div>
|
||||
</template>
|
||||
<div flex gap-3 flex-1>
|
||||
<div>
|
||||
<NuxtLink self-start :to="getAccountRoute(currentUser.account)">
|
||||
<AccountBigAvatar :account="currentUser.account" square />
|
||||
</NuxtLink>
|
||||
<div v-if="!isFinalItemOfThread" w-full h-full flex mt--3px justify-center>
|
||||
<div w-1px border="x base" mb-6 />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div w-full>
|
||||
<div flex gap-3 flex-1>
|
||||
<!-- 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 -->
|
||||
<div
|
||||
ref="dropZoneRef" flex w-0 flex-col gap-3 flex-1 border="2 dashed transparent"
|
||||
:class="[isSending ? 'pointer-events-none' : '', isOverDropZone ? '!border-primary' : '']"
|
||||
>
|
||||
<ContentMentionGroup v-if="draft.mentions?.length && shouldExpanded" replying>
|
||||
<button
|
||||
v-for="m, i of draft.mentions" :key="m" text-primary hover:color-red
|
||||
@click="draft.mentions?.splice(i, 1)"
|
||||
>
|
||||
{{ accountToShortHandle(m) }}
|
||||
</button>
|
||||
</ContentMentionGroup>
|
||||
|
||||
<div v-if="draft.params.sensitive">
|
||||
<input
|
||||
v-model="publishSpoilerText" type="text" :placeholder="$t('placeholder.content_warning')" p2
|
||||
border-rounded w-full bg-transparent outline-none border="~ base"
|
||||
>
|
||||
</div>
|
||||
|
||||
<CommonErrorMessage v-if="failedMessages.length > 0" described-by="publish-failed">
|
||||
<header id="publish-failed" flex justify-between>
|
||||
<div flex items-center gap-x-2 font-bold>
|
||||
<div aria-hidden="true" i-ri:error-warning-fill />
|
||||
<p>{{ $t('state.publish_failed') }}</p>
|
||||
</div>
|
||||
<CommonTooltip placement="bottom" :content="$t('action.clear_publish_failed')">
|
||||
<button
|
||||
flex rounded-4 p1 hover:bg-active cursor-pointer transition-100
|
||||
:aria-label="$t('action.clear_publish_failed')" @click="failedMessages = []"
|
||||
>
|
||||
<span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
</header>
|
||||
<ol ps-2 sm:ps-1>
|
||||
<li v-for="(error, i) in failedMessages" :key="i" flex="~ col sm:row" gap-y-1 sm:gap-x-2>
|
||||
<strong>{{ i + 1 }}.</strong>
|
||||
<span>{{ error }}</span>
|
||||
</li>
|
||||
</ol>
|
||||
</CommonErrorMessage>
|
||||
|
||||
<div relative flex-1 flex flex-col :class="shouldExpanded ? 'min-h-30' : ''">
|
||||
<EditorContent
|
||||
:editor="editor" flex max-w-full
|
||||
:class="{
|
||||
'md:max-h-[calc(100vh-200px)] sm:max-h-[calc(100vh-400px)] max-h-35 of-y-auto overscroll-contain': shouldExpanded,
|
||||
'py2 px3.5 bg-dm rounded-4 me--1 ms--1 mt--1': isDM,
|
||||
}"
|
||||
@keydown="stopQuestionMarkPropagation"
|
||||
@keydown.esc.prevent="editor?.commands.blur()"
|
||||
@keyup="detectLanguage"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="isUploading" flex gap-1 items-center text-sm p1 text-primary>
|
||||
<div animate-spin preserve-3d>
|
||||
<div i-ri:loader-2-fill />
|
||||
</div>
|
||||
{{ $t('state.uploading') }}
|
||||
</div>
|
||||
<CommonErrorMessage
|
||||
v-else-if="failedAttachments.length > 0"
|
||||
:described-by="isExceedingAttachmentLimit ? 'upload-failed uploads-per-post' : 'upload-failed'"
|
||||
>
|
||||
<header id="upload-failed" flex justify-between>
|
||||
<div flex items-center gap-x-2 font-bold>
|
||||
<div aria-hidden="true" i-ri:error-warning-fill />
|
||||
<p>{{ $t('state.upload_failed') }}</p>
|
||||
</div>
|
||||
<CommonTooltip placement="bottom" :content="$t('action.clear_upload_failed')">
|
||||
<button
|
||||
flex rounded-4 p1 hover:bg-active cursor-pointer transition-100
|
||||
:aria-label="$t('action.clear_upload_failed')" @click="failedAttachments = []"
|
||||
>
|
||||
<span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
</header>
|
||||
<div v-if="isExceedingAttachmentLimit" id="uploads-per-post" ps-2 sm:ps-1 text-small>
|
||||
{{ $t('state.attachments_exceed_server_limit') }}
|
||||
</div>
|
||||
<ol ps-2 sm:ps-1>
|
||||
<li v-for="error in failedAttachments" :key="error[0]" flex="~ col sm:row" gap-y-1 sm:gap-x-2>
|
||||
<strong>{{ error[1] }}:</strong>
|
||||
<span>{{ error[0] }}</span>
|
||||
</li>
|
||||
</ol>
|
||||
</CommonErrorMessage>
|
||||
|
||||
<div v-if="draft.attachments.length" flex="~ col gap-2" overflow-auto>
|
||||
<PublishAttachment
|
||||
v-for="(att, idx) in draft.attachments" :key="att.id" :attachment="att"
|
||||
:dialog-labelled-by="dialogLabelledBy ?? (draft.editingStatus ? 'state-editing' : undefined)"
|
||||
@remove="removeAttachment(idx)" @set-description="setDescription(att, $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div flex="~ col 1" max-w-full>
|
||||
<form v-if="isExpanded && draft.params.poll" my-4 flex="~ 1 col" gap-3 m="s--1">
|
||||
<div v-for="(option, index) in draft.params.poll.options" :key="index" flex="~ row" gap-3>
|
||||
<input
|
||||
:value="option" bg-base border="~ base" flex-1 h10 pe-4 rounded-2 w-full flex="~ row" items-center
|
||||
relative focus-within:box-shadow-outline gap-3 px-4 py-2
|
||||
:placeholder="$t('polls.option_placeholder', { current: index + 1, max: currentInstance?.configuration?.polls.maxOptions })"
|
||||
class="option-input" @input="editPollOptionDraft($event, index)"
|
||||
>
|
||||
<CommonTooltip placement="top" :content="$t('polls.remove_option')" class="delete-button">
|
||||
<button
|
||||
btn-action-icon class="hover:bg-red/75"
|
||||
:disabled="index === draft.params.poll!.options.length - 1 && (index + 1 !== currentInstance?.configuration?.polls.maxOptions || draft.params.poll!.options[index].length === 0)"
|
||||
@click.prevent="deletePollOption(index)"
|
||||
>
|
||||
<div i-ri:delete-bin-line />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
<span
|
||||
v-if="currentInstance?.configuration?.polls.maxCharactersPerOption" class="char-limit-radial"
|
||||
aspect-ratio-1 h-10
|
||||
:style="{ background: `radial-gradient(closest-side, rgba(var(--rgb-bg-base)) 79%, transparent 80% 100%), conic-gradient(${draft.params.poll!.options[index].length / currentInstance?.configuration?.polls.maxCharactersPerOption > 1 ? 'var(--c-danger)' : 'var(--c-primary)'} ${draft.params.poll!.options[index].length / currentInstance?.configuration?.polls.maxCharactersPerOption * 100}%, var(--c-primary-fade) 0)` }"
|
||||
>{{
|
||||
draft.params.poll!.options[index].length }}</span>
|
||||
</div>
|
||||
</form>
|
||||
<div v-if="shouldExpanded" flex="~ gap-1 1 wrap" m="s--1" pt-2 justify="end" max-w-full border="t base">
|
||||
<PublishEmojiPicker @select="insertEmoji" @select-custom="insertCustomEmoji">
|
||||
<button btn-action-icon :title="$t('tooltip.emojis')" :aria-label="$t('tooltip.add_emojis')">
|
||||
<div i-ri:emotion-line />
|
||||
</button>
|
||||
</PublishEmojiPicker>
|
||||
|
||||
<CommonTooltip
|
||||
v-if="draft.params.poll === undefined" placement="top" :content="$t('tooltip.add_media')"
|
||||
>
|
||||
<button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments">
|
||||
<div i-ri:image-add-line />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
|
||||
<template v-if="draft.attachments.length === 0">
|
||||
<CommonTooltip v-if="!draft.params.poll" placement="top" :content="$t('polls.create')">
|
||||
<button
|
||||
btn-action-icon :aria-label="$t('polls.create')"
|
||||
@click="draft.params.poll = { options: [''], expiresIn: expiresInOptions[expiresInDefaultOptionIndex].seconds }"
|
||||
>
|
||||
<div i-ri:chat-poll-line />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
<div v-else rounded-full b-1 border-dark flex="~ row" gap-1>
|
||||
<CommonTooltip placement="top" :content="$t('polls.cancel')">
|
||||
<button
|
||||
btn-action-icon b-r border-dark :aria-label="$t('polls.cancel')"
|
||||
@click="draft.params.poll = undefined"
|
||||
>
|
||||
<div i-ri:close-line />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
<CommonDropdown placement="top">
|
||||
<CommonTooltip placement="top" :content="$t('polls.settings')">
|
||||
<button :aria-label="$t('polls.settings')" btn-action-icon w-12>
|
||||
<div i-ri:list-settings-line />
|
||||
<div i-ri:arrow-down-s-line text-sm text-secondary me--1 />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
<template #popper>
|
||||
<div flex="~ col" gap-1 p-2>
|
||||
<CommonCheckbox
|
||||
v-model="draft.params.poll.multiple"
|
||||
:label="draft.params.poll.multiple ? $t('polls.disallow_multiple') : $t('polls.allow_multiple')"
|
||||
px-2 gap-3 h-9 flex justify-center hover:bg-active rounded-full
|
||||
icon-checked="i-ri:checkbox-multiple-blank-line"
|
||||
icon-unchecked="i-ri:checkbox-blank-circle-line"
|
||||
/>
|
||||
<CommonCheckbox
|
||||
v-model="draft.params.poll.hideTotals"
|
||||
:label="draft.params.poll.hideTotals ? $t('polls.show_votes') : $t('polls.hide_votes')" px-2 gap-3
|
||||
h-9 flex justify-center hover:bg-active rounded-full icon-checked="i-ri:eye-close-line"
|
||||
icon-unchecked="i-ri:eye-line"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</CommonDropdown>
|
||||
<CommonDropdown placement="bottom">
|
||||
<CommonTooltip placement="top" :content="$t('polls.expiration')">
|
||||
<button :aria-label="$t('polls.expiration')" btn-action-icon w-12>
|
||||
<div i-ri:hourglass-line />
|
||||
<div i-ri:arrow-down-s-line text-sm text-secondary me--1 />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
<template #popper>
|
||||
<CommonDropdownItem
|
||||
v-for="expiresInOption in expiresInOptions" :key="expiresInOption.seconds"
|
||||
:text="expiresInOption.label" :checked="draft.params.poll!.expiresIn === expiresInOption.seconds"
|
||||
@click="draft.params.poll!.expiresIn = expiresInOption.seconds"
|
||||
/>
|
||||
</template>
|
||||
</CommonDropdown>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<PublishEditorTools v-if="editor" :editor="editor" />
|
||||
|
||||
<div flex-auto />
|
||||
|
||||
<PublishCharacterCounter :max="characterLimit" :length="characterCount" />
|
||||
|
||||
<CommonTooltip placement="top" :content="$t('tooltip.change_language')">
|
||||
<CommonDropdown placement="bottom" auto-boundary-max-size>
|
||||
<button btn-action-icon :aria-label="$t('tooltip.change_language')" w-max mr1>
|
||||
<span v-if="postLanguageDisplay" text-secondary text-sm ml1>{{ postLanguageDisplay }}</span>
|
||||
<div v-else i-ri:translate-2 />
|
||||
<div i-ri:arrow-down-s-line text-sm text-secondary me--1 />
|
||||
</button>
|
||||
|
||||
<template #popper>
|
||||
<PublishLanguagePicker v-model="draft.params.language" min-w-80 />
|
||||
</template>
|
||||
</CommonDropdown>
|
||||
</CommonTooltip>
|
||||
|
||||
<CommonTooltip placement="top" :content="$t('tooltip.add_content_warning')">
|
||||
<button btn-action-icon :aria-label="$t('tooltip.add_content_warning')" @click="toggleSensitive">
|
||||
<div v-if="draft.params.sensitive" i-ri:alarm-warning-fill text-orange />
|
||||
<div v-else i-ri:alarm-warning-line />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
|
||||
<PublishVisibilityPicker v-model="draft.params.visibility" :editing="!!draft.editingStatus">
|
||||
<template #default="{ visibility }">
|
||||
<button
|
||||
:disabled="!!draft.editingStatus" :aria-label="$t('tooltip.change_content_visibility')"
|
||||
btn-action-icon :class="{ 'w-12': !draft.editingStatus }"
|
||||
>
|
||||
<div :class="visibility.icon" />
|
||||
<div v-if="!draft.editingStatus" i-ri:arrow-down-s-line text-sm text-secondary me--1 />
|
||||
</button>
|
||||
</template>
|
||||
</PublishVisibilityPicker>
|
||||
|
||||
<PublishThreadTools :draft-item-index="draftItemIndex" :draft-key="draftKey" />
|
||||
|
||||
<CommonTooltip
|
||||
v-if="failedMessages.length > 0" id="publish-failed-tooltip" placement="top"
|
||||
:content="$t('tooltip.publish_failed')"
|
||||
>
|
||||
<button
|
||||
btn-danger rounded-3 text-sm w-full flex="~ gap1" items-center md:w-fit
|
||||
aria-describedby="publish-failed-tooltip"
|
||||
>
|
||||
<span block>
|
||||
<div block i-carbon:face-dizzy-filled />
|
||||
</span>
|
||||
<span>{{ $t('state.publish_failed') }}</span>
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
|
||||
<CommonTooltip
|
||||
v-else id="publish-tooltip" placement="top" :content="$t('tooltip.add_publishable_content')"
|
||||
:disabled="!(isPublishDisabled || isExceedingCharacterLimit)"
|
||||
>
|
||||
<button
|
||||
v-if="!threadIsActive || isFinalItemOfThread"
|
||||
btn-solid rounded-3 text-sm w-full flex="~ gap1" items-center md:w-fit class="publish-button"
|
||||
:aria-disabled="isPublishDisabled || isExceedingCharacterLimit || threadIsSending" aria-describedby="publish-tooltip"
|
||||
:disabled="isPublishDisabled || isExceedingCharacterLimit || threadIsSending"
|
||||
@click="publish"
|
||||
>
|
||||
<span v-if="isSending || threadIsSending" block animate-spin preserve-3d>
|
||||
<div block i-ri:loader-2-fill />
|
||||
</span>
|
||||
<span v-if="failedMessages.length" block>
|
||||
<div block i-carbon:face-dizzy-filled />
|
||||
</span>
|
||||
<template v-if="threadIsActive">
|
||||
<span>{{ !threadIsSending ? $t('action.publish_thread') : $t('state.publishing') }} </span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span v-if="draft.editingStatus">{{ $t('action.save_changes') }}</span>
|
||||
<span v-else-if="draft.params.inReplyToId">{{ $t('action.reply') }}</span>
|
||||
<span v-else>{{ !isSending ? $t('action.publish') : $t('state.publishing') }}</span>
|
||||
</template>
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.publish-button[aria-disabled=true] {
|
||||
cursor: not-allowed;
|
||||
background-color: var(--c-bg-btn-disabled);
|
||||
color: var(--c-text-btn-disabled);
|
||||
}
|
||||
|
||||
.publish-button[aria-disabled=true]:hover {
|
||||
background-color: var(--c-bg-btn-disabled);
|
||||
color: var(--c-text-btn-disabled);
|
||||
}
|
||||
|
||||
.option-input:focus+.delete-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.option-input:not(:focus)+.delete-button+.char-limit-radial {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.char-limit-radial {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { DraftItem } from '#shared/types'
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const {
|
||||
draftKey,
|
||||
initial = getDefaultDraftItem,
|
||||
expanded = false,
|
||||
} = defineProps<{
|
||||
draftKey: string
|
||||
initial?: () => DraftItem
|
||||
placeholder?: string
|
||||
inReplyToId?: string
|
||||
inReplyToVisibility?: mastodon.v1.StatusVisibility
|
||||
expanded?: boolean
|
||||
dialogLabelledBy?: string
|
||||
}>()
|
||||
|
||||
const threadComposer = useThreadComposer(draftKey, initial)
|
||||
const threadItems = computed(() => threadComposer.threadItems.value)
|
||||
|
||||
onDeactivated(() => {
|
||||
clearEmptyDrafts()
|
||||
})
|
||||
|
||||
function isFirstItem(index: number) {
|
||||
return index === 0
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="isHydrated && currentUser">
|
||||
<PublishWidget
|
||||
v-for="(_, index) in threadItems" :key="`${draftKey}-${index}`"
|
||||
v-bind="$attrs"
|
||||
:thread-composer="threadComposer"
|
||||
:draft-key="draftKey"
|
||||
:draft-item-index="index"
|
||||
:expanded="isFirstItem(index) ? expanded : true"
|
||||
:placeholder="placeholder"
|
||||
:dialog-labelled-by="dialogLabelledBy"
|
||||
:in-reply-to-id="isFirstItem(index) ? inReplyToId : undefined"
|
||||
:in-reply-to-visibility="inReplyToVisibility"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
|
|
@ -1,140 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { NavButtonName } from '~/composables/settings'
|
||||
import { STORAGE_KEY_BOTTOM_NAV_BUTTONS } from '~/constants'
|
||||
|
||||
interface NavButton {
|
||||
name: NavButtonName
|
||||
label: string
|
||||
icon: string
|
||||
}
|
||||
|
||||
const availableNavButtons: NavButton[] = [
|
||||
{ name: 'home', label: 'nav.home', icon: 'i-ri:home-5-line' },
|
||||
{ name: 'search', label: 'nav.search', icon: 'i-ri:search-line' },
|
||||
{ name: 'notification', label: 'nav.notifications', icon: 'i-ri:notification-4-line' },
|
||||
{ name: 'mention', label: 'nav.conversations', icon: 'i-ri:at-line' },
|
||||
{ name: 'favorite', label: 'nav.favourites', icon: 'i-ri:heart-line' },
|
||||
{ name: 'bookmark', label: 'nav.bookmarks', icon: 'i-ri:bookmark-line' },
|
||||
{ name: 'compose', label: 'nav.compose', icon: 'i-ri:quill-pen-line' },
|
||||
{ name: 'explore', label: 'nav.explore', icon: 'i-ri:compass-3-line' },
|
||||
{ name: 'local', label: 'nav.local', icon: 'i-ri:group-2-line' },
|
||||
{ name: 'federated', label: 'nav.federated', icon: 'i-ri:earth-line' },
|
||||
{ name: 'list', label: 'nav.lists', icon: 'i-ri:list-check' },
|
||||
{ name: 'hashtag', label: 'nav.hashtags', icon: 'i-ri:hashtag' },
|
||||
{ name: 'moreMenu', label: 'nav.more_menu', icon: 'i-ri:more-fill' },
|
||||
] as const
|
||||
|
||||
const defaultSelectedNavButtonNames = computed<NavButtonName[]>(() =>
|
||||
currentUser.value
|
||||
? ['home', 'search', 'notification', 'mention', 'moreMenu']
|
||||
: ['explore', 'local', 'federated', 'moreMenu'],
|
||||
)
|
||||
const navButtonNamesSetting = useLocalStorage<NavButtonName[]>(STORAGE_KEY_BOTTOM_NAV_BUTTONS, defaultSelectedNavButtonNames.value)
|
||||
const selectedNavButtonNames = ref<NavButtonName[]>(navButtonNamesSetting.value)
|
||||
|
||||
const selectedNavButtons = computed<NavButton[]>(() =>
|
||||
selectedNavButtonNames.value.map(name =>
|
||||
availableNavButtons.find(navButton => navButton.name === name)!,
|
||||
),
|
||||
)
|
||||
|
||||
const canSave = computed(() =>
|
||||
selectedNavButtonNames.value.length > 0
|
||||
&& selectedNavButtonNames.value.includes('moreMenu')
|
||||
&& JSON.stringify(selectedNavButtonNames.value) !== JSON.stringify(navButtonNamesSetting.value),
|
||||
)
|
||||
|
||||
function isAdded(name: NavButtonName) {
|
||||
return selectedNavButtonNames.value.includes(name)
|
||||
}
|
||||
|
||||
function append(navButtonName: NavButtonName) {
|
||||
const maxButtonNumber = 5
|
||||
if (selectedNavButtonNames.value.length < maxButtonNumber)
|
||||
selectedNavButtonNames.value = [...selectedNavButtonNames.value, navButtonName]
|
||||
}
|
||||
|
||||
function remove(navButtonName: NavButtonName) {
|
||||
selectedNavButtonNames.value = selectedNavButtonNames.value.filter(name => name !== navButtonName)
|
||||
}
|
||||
|
||||
function clear() {
|
||||
selectedNavButtonNames.value = []
|
||||
}
|
||||
|
||||
function reset() {
|
||||
selectedNavButtonNames.value = defaultSelectedNavButtonNames.value
|
||||
}
|
||||
|
||||
function save() {
|
||||
navButtonNamesSetting.value = selectedNavButtonNames.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section space-y-2>
|
||||
<h2 id="interface-bn" font-medium>
|
||||
{{ $t('settings.interface.bottom_nav') }}
|
||||
</h2>
|
||||
<form aria-labelledby="interface-bn" aria-describedby="interface-bn-desc" @submit.prevent="save">
|
||||
<p id="interface-bn-desc" pb-2>
|
||||
{{ $t('settings.interface.bottom_nav_instructions') }}
|
||||
</p>
|
||||
<!-- preview -->
|
||||
<div aria-hidden="true" flex="~ gap4 wrap" items-center select-settings h-14>
|
||||
<nav
|
||||
v-for="availableNavButton in selectedNavButtons" :key="availableNavButton.name"
|
||||
flex="~ 1" items-center justify-center text-xl
|
||||
scrollbar-hide overscroll-none
|
||||
>
|
||||
<span :class="availableNavButton.icon" />
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- button selection -->
|
||||
<div flex="~ gap4 wrap" py4>
|
||||
<button
|
||||
v-for="{ name, label, icon } in availableNavButtons"
|
||||
:key="name"
|
||||
btn-text flex="~ gap-2" items-center p2 border="~ base rounded" bg-base ws-nowrap
|
||||
:class="isAdded(name) ? 'text-secondary hover:text-second bg-auto' : ''"
|
||||
type="button"
|
||||
role="switch"
|
||||
:aria-checked="isAdded(name)"
|
||||
@click="isAdded(name) ? remove(name) : append(name)"
|
||||
>
|
||||
<span :class="icon" />
|
||||
{{ label ? $t(label) : 'More menu' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div flex="~ col" gap-y-4 gap-x-2 py-1 sm="~ justify-end flex-row">
|
||||
<button
|
||||
btn-outline font-bold py2 full-w sm-wa flex="~ gap2 center"
|
||||
type="button"
|
||||
:disabled="selectedNavButtonNames.length === 0"
|
||||
:class="selectedNavButtonNames.length === 0 ? 'border-none' : undefined"
|
||||
@click="clear"
|
||||
>
|
||||
<span aria-hidden="true" class="block i-ri:delete-bin-line" />
|
||||
{{ $t('action.clear') }}
|
||||
</button>
|
||||
<button
|
||||
btn-outline font-bold py2 full-w sm-wa flex="~ gap2 center"
|
||||
type="reset"
|
||||
@click="reset"
|
||||
>
|
||||
<span aria-hidden="true" class="block i-ri:repeat-line" />
|
||||
{{ $t('action.reset') }}
|
||||
</button>
|
||||
<button
|
||||
btn-solid font-bold py2 full-w sm-wa flex="~ gap2 center"
|
||||
:disabled="!canSave"
|
||||
>
|
||||
<span aria-hidden="true" i-ri:save-2-fill />
|
||||
{{ $t('action.save') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</template>
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { ColorMode } from '~/composables/settings'
|
||||
|
||||
const colorMode = useColorMode()
|
||||
|
||||
function setColorMode(mode: ColorMode) {
|
||||
colorMode.preference = mode
|
||||
}
|
||||
|
||||
const modes = [
|
||||
{
|
||||
icon: 'i-ri-moon-line',
|
||||
label: 'settings.interface.dark_mode',
|
||||
mode: 'dark',
|
||||
},
|
||||
{
|
||||
icon: 'i-ri-sun-line',
|
||||
label: 'settings.interface.light_mode',
|
||||
mode: 'light',
|
||||
},
|
||||
{
|
||||
icon: 'i-ri-computer-line',
|
||||
label: 'settings.interface.system_mode',
|
||||
mode: 'system',
|
||||
},
|
||||
] as const
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section space-y-2>
|
||||
<h2 id="interface-cm" font-medium>
|
||||
{{ $t('settings.interface.color_mode') }}
|
||||
</h2>
|
||||
<div flex="~ gap4 wrap" w-full role="group" aria-labelledby="interface-cm">
|
||||
<button
|
||||
v-for="{ icon, label, mode } in modes"
|
||||
:key="mode"
|
||||
type="button"
|
||||
btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base ws-nowrap
|
||||
:aria-pressed="colorMode.preference === mode ? 'true' : 'false'"
|
||||
:class="colorMode.preference === mode ? 'pointer-events-none' : 'filter-saturate-0'"
|
||||
@click="setColorMode(mode)"
|
||||
>
|
||||
<span :class="`${icon}`" />
|
||||
{{ $t(label) }}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { FontSize } from '~/composables/settings'
|
||||
import { DEFAULT_FONT_SIZE } from '~/constants'
|
||||
|
||||
const userSettings = useUserSettings()
|
||||
|
||||
const sizes = (Array.from({ length: 11 })).fill(0).map((x, i) => `${10 + i}px`) as FontSize[]
|
||||
|
||||
function setFontSize(e: Event) {
|
||||
if (e.target && 'valueAsNumber' in e.target)
|
||||
userSettings.value.fontSize = sizes[e.target.valueAsNumber as number]
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section space-y-2>
|
||||
<h2 id="interface-fs" font-medium>
|
||||
{{ $t('settings.interface.font_size') }}
|
||||
</h2>
|
||||
<div flex items-center space-x-4 select-settings>
|
||||
<span text-xs text-secondary>Aa</span>
|
||||
<div flex-1 relative flex items-center>
|
||||
<input
|
||||
aria-labelledby="interface-fs"
|
||||
:value="sizes.indexOf(userSettings.fontSize)"
|
||||
:aria-valuetext="`${userSettings.fontSize}${userSettings.fontSize === DEFAULT_FONT_SIZE ? ` ${$t('settings.interface.default')}` : ''}`"
|
||||
:min="0"
|
||||
:max="sizes.length - 1"
|
||||
:step="1"
|
||||
type="range"
|
||||
focus:outline-none
|
||||
appearance-none bg-transparent
|
||||
w-full cursor-pointer
|
||||
@change="setFontSize"
|
||||
>
|
||||
<div flex items-center justify-between absolute w-full pointer-events-none>
|
||||
<div
|
||||
v-for="i in sizes.length" :key="i"
|
||||
class="container-marker"
|
||||
h-3 w-3
|
||||
rounded-full bg-secondary-light
|
||||
relative
|
||||
>
|
||||
<div
|
||||
v-if="(sizes.indexOf(userSettings.fontSize)) === i - 1"
|
||||
absolute rounded-full class="-top-1 -left-1"
|
||||
bg-primary h-5 w-5
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span text-xl text-secondary>Aa</span>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
input:focus + div .container-marker:has(> div)::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border: 2px solid var(--c-primary);
|
||||
border-radius: 50%;
|
||||
}
|
||||
input[type=range]::-webkit-slider-runnable-track {
|
||||
--at-apply: bg-secondary-light rounded-full h1 op60;
|
||||
}
|
||||
input[type=range]:focus::-webkit-slider-runnable-track {
|
||||
--at-apply: outline-2 outline-red;
|
||||
}
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
--at-apply: w3 h3 bg-primary -mt-1 outline outline-3 outline-primary rounded-full cursor-pointer appearance-none;
|
||||
}
|
||||
input[type=range]::-moz-range-track {
|
||||
--at-apply: bg-secondary-light rounded-full h1 op60;
|
||||
}
|
||||
input[type=range]:focus::-moz-range-track {
|
||||
--at-apply: outline-2 outline-red;
|
||||
}
|
||||
input[type=range]::-moz-range-thumb {
|
||||
--at-apply: w3 h3 bg-primary -mt-1 outline outline-3 outline-primary rounded-full cursor-pointer appearance-none border-none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { ThemeColors } from '~/composables/settings'
|
||||
import { THEME_COLORS } from '~/constants'
|
||||
|
||||
const themes = await import('~/constants/themes.json').then((r) => {
|
||||
const map = new Map<'dark' | 'light', [string, ThemeColors][]>([['dark', []], ['light', []]])
|
||||
const themes = r.default as [string, ThemeColors][]
|
||||
for (const [key, theme] of themes) {
|
||||
map.get('dark')!.push([key, theme])
|
||||
map.get('light')!.push([key, {
|
||||
...theme,
|
||||
'--c-primary': `color-mix(in srgb, ${theme['--c-primary']}, black 25%)`,
|
||||
}])
|
||||
}
|
||||
return map
|
||||
})
|
||||
|
||||
const settings = useUserSettings()
|
||||
|
||||
const media = useMediaQuery('(prefers-color-scheme: dark)')
|
||||
|
||||
const colorMode = useColorMode()
|
||||
|
||||
const useThemes = shallowRef<[string, ThemeColors][]>([])
|
||||
|
||||
watch(() => colorMode.preference, (cm) => {
|
||||
const dark = cm === 'dark' || (cm === 'system' && media.value)
|
||||
const newThemes = dark ? themes.get('dark')! : themes.get('light')!
|
||||
const key = settings.value.themeColors?.['--theme-color-name'] || THEME_COLORS.defaultTheme
|
||||
for (const [k, theme] of newThemes) {
|
||||
if (k === key) {
|
||||
settings.value.themeColors = theme
|
||||
break
|
||||
}
|
||||
}
|
||||
useThemes.value = newThemes
|
||||
}, { immediate: true, flush: 'post' })
|
||||
|
||||
const currentTheme = computed(() => settings.value.themeColors?.['--theme-color-name'] || THEME_COLORS.defaultTheme)
|
||||
|
||||
function updateTheme(theme: ThemeColors) {
|
||||
settings.value.themeColors = theme
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section space-y-2>
|
||||
<h2 id="interface-tc" font-medium>
|
||||
{{ $t('settings.interface.theme_color') }}
|
||||
</h2>
|
||||
<div flex="~ gap4 wrap" p2 role="group" aria-labelledby="interface-tc">
|
||||
<button
|
||||
v-for="[key, theme] in useThemes" :key="key"
|
||||
:style="{
|
||||
'--rgb-primary': theme['--rgb-primary'],
|
||||
'background': theme['--c-primary'],
|
||||
'--local-ring-color': theme['--c-primary'],
|
||||
}"
|
||||
type="button"
|
||||
:class="currentTheme === theme['--theme-color-name'] ? 'ring-2' : 'scale-90'"
|
||||
:aria-pressed="currentTheme === theme['--theme-color-name'] ? 'true' : 'false'"
|
||||
:title="theme['--theme-color-name']"
|
||||
w-8 h-8 rounded-full transition-all
|
||||
ring="$local-ring-color offset-3 offset-$c-bg-base"
|
||||
@click="updateTheme(theme)"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
max-h-2xl
|
||||
flex gap-2
|
||||
my-auto
|
||||
p-4 py-2
|
||||
light:bg-gray-3 dark:bg-gray-8
|
||||
>
|
||||
<span z-0>More from</span>
|
||||
<AccountInlineInfo :account="account" hover:bg-inherit ps-0 ms-0 />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,124 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const { card, smallPictureOnly } = defineProps<{
|
||||
card: mastodon.v1.PreviewCard
|
||||
/** For the preview image, only the small image mode is displayed */
|
||||
smallPictureOnly?: boolean
|
||||
/** When it is root card in the list, not appear as a child card */
|
||||
root?: boolean
|
||||
}>()
|
||||
|
||||
// mastodon's default max og image width
|
||||
const ogImageWidth = 400
|
||||
|
||||
const alt = computed(() => `${card.title} - ${card.title}`)
|
||||
const isSquare = computed(() => (
|
||||
smallPictureOnly
|
||||
|| card.width === card.height
|
||||
|| Number(card.width || 0) < ogImageWidth
|
||||
|| Number(card.height || 0) < ogImageWidth / 2
|
||||
))
|
||||
const providerName = computed(() => card.providerName ? card.providerName : new URL(card.url).hostname)
|
||||
|
||||
// TODO: handle card.type: 'photo' | 'video' | 'rich';
|
||||
const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {
|
||||
link: 'i-ri:profile-line',
|
||||
photo: 'i-ri:image-line',
|
||||
video: 'i-ri:play-line',
|
||||
rich: 'i-ri:profile-line',
|
||||
}
|
||||
|
||||
const userSettings = useUserSettings()
|
||||
const shouldLoadAttachment = ref(!getPreferences(userSettings.value, 'enableDataSaving'))
|
||||
|
||||
function loadAttachment() {
|
||||
shouldLoadAttachment.value = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink
|
||||
block
|
||||
of-hidden
|
||||
:to="card.url"
|
||||
bg-card
|
||||
hover:bg-active
|
||||
:class="{
|
||||
'flex flex-col': isSquare,
|
||||
'p-4': root,
|
||||
'rounded-lg': !root,
|
||||
}"
|
||||
target="_blank"
|
||||
external
|
||||
>
|
||||
<div :class="isSquare ? 'flex' : ''">
|
||||
<!-- image -->
|
||||
<div
|
||||
v-if="card.image"
|
||||
flex flex-col
|
||||
display-block of-hidden
|
||||
:class="{
|
||||
'sm:(min-w-32 w-32 h-32) min-w-24 w-24 h-24': isSquare,
|
||||
'w-full aspect-[1.91]': !isSquare,
|
||||
'rounded-lg': root,
|
||||
}"
|
||||
relative
|
||||
>
|
||||
<CommonBlurhash
|
||||
:blurhash="card.blurhash"
|
||||
:src="card.image"
|
||||
:width="card.width"
|
||||
:height="card.height"
|
||||
:alt="alt"
|
||||
:should-load-image="shouldLoadAttachment"
|
||||
w-full h-full object-cover
|
||||
:class="!shouldLoadAttachment ? 'brightness-60' : ''"
|
||||
/>
|
||||
<button
|
||||
v-if="!shouldLoadAttachment"
|
||||
type="button"
|
||||
absolute
|
||||
class="status-preview-card-load bg-black/64"
|
||||
p-2
|
||||
transition
|
||||
rounded
|
||||
hover:bg-black
|
||||
cursor-pointer
|
||||
@click.stop.prevent="!shouldLoadAttachment ? loadAttachment() : null"
|
||||
>
|
||||
<span
|
||||
text-sm
|
||||
text-white
|
||||
flex flex-col justify-center items-center
|
||||
gap-3 w-6 h-6
|
||||
i-ri:file-download-line
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
min-w-24 w-24 h-24 sm="min-w-32 w-32 h-32" bg="slate-500/10" flex justify-center items-center
|
||||
:class="[
|
||||
root ? 'rounded-lg' : '',
|
||||
]"
|
||||
>
|
||||
<div :class="cardTypeIconMap[card.type]" w="30%" h="30%" text-secondary />
|
||||
</div>
|
||||
<!-- description -->
|
||||
<StatusPreviewCardInfo :p="isSquare ? 'x-4' : '4'" :root="root" :card="card" :provider="providerName" />
|
||||
</div>
|
||||
<StatusPreviewCardMoreFromAuthor
|
||||
v-if="card?.authors?.[0]?.account"
|
||||
:account="card.authors[0].account"
|
||||
/>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
||||
<style lang="postcss">
|
||||
.status-preview-card-load {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
translate: -50% -50%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const { isSupported, effectiveType } = useNetwork()
|
||||
const isSlow = computed(() => isSupported.value && effectiveType.value && ['slow-2g', '2g', '3g'].includes(effectiveType.value))
|
||||
const limit = computed(() => isSlow.value ? 10 : 30)
|
||||
|
||||
const paginator = useMastoClient().v1.timelines.home.list({ limit: limit.value })
|
||||
const stream = useStreaming(client => client.user.subscribe())
|
||||
function reorderAndFilter(items: mastodon.v1.Status[]) {
|
||||
return reorderedTimeline(items, 'home')
|
||||
}
|
||||
|
||||
let followedTags: mastodon.v1.Tag[] | undefined
|
||||
if (currentUser.value !== undefined) {
|
||||
followedTags = (await useMasto().client.value.v1.followedTags.list({ limit: 0 }))
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<PublishWidgetList draft-key="home" />
|
||||
<div h="1px" w-auto bg-border mb-3 />
|
||||
<TimelinePaginator :followed-tags="followedTags" v-bind="{ paginator, stream }" :preprocess="reorderAndFilter" context="home" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const paginator = useMastoClient().v1.timelines.public.list({ limit: 30, local: true })
|
||||
const stream = useStreaming(client => client.public.local.subscribe())
|
||||
function reorderAndFilter(items: mastodon.v1.Status[]) {
|
||||
return reorderedTimeline(items, 'public')
|
||||
}
|
||||
|
||||
let followedTags: mastodon.v1.Tag[] | undefined
|
||||
if (currentUser.value !== undefined) {
|
||||
followedTags = (await useMasto().client.value.v1.followedTags.list({ limit: 0 }))
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<TimelinePaginator :followed-tags="followedTags" v-bind="{ paginator, stream }" :preprocess="reorderAndFilter" context="public" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
import type { MaybeRefOrGetter, RemovableRef } from '@vueuse/core'
|
||||
import type { UseIDBOptions } from '@vueuse/integrations/useIDBKeyval'
|
||||
import { del, get, set, update } from '~/utils/elk-idb'
|
||||
|
||||
export interface UseAsyncIDBKeyvalReturn<T> {
|
||||
set: (value: T) => Promise<void>
|
||||
readIDB: () => Promise<T | undefined>
|
||||
}
|
||||
|
||||
export async function useAsyncIDBKeyval<T>(
|
||||
key: IDBValidKey,
|
||||
initialValue: MaybeRefOrGetter<T>,
|
||||
source: RemovableRef<T>,
|
||||
options: Omit<UseIDBOptions, 'shallow'> = {},
|
||||
): Promise<UseAsyncIDBKeyvalReturn<T>> {
|
||||
const {
|
||||
flush = 'pre',
|
||||
deep = true,
|
||||
writeDefaults = true,
|
||||
onError = (e: unknown) => {
|
||||
console.error(e)
|
||||
},
|
||||
} = options
|
||||
|
||||
const rawInit: T = toValue<T>(initialValue)
|
||||
|
||||
try {
|
||||
const rawValue = await get<T>(key)
|
||||
if (rawValue === undefined) {
|
||||
if (rawInit !== undefined && rawInit !== null && writeDefaults) {
|
||||
await set(key, rawInit)
|
||||
source.value = rawInit
|
||||
}
|
||||
}
|
||||
else {
|
||||
source.value = rawValue
|
||||
}
|
||||
}
|
||||
catch (e) {
|
||||
onError(e)
|
||||
}
|
||||
|
||||
async function write(data: T) {
|
||||
try {
|
||||
if (data == null) {
|
||||
await del(key)
|
||||
}
|
||||
else {
|
||||
// IndexedDB does not support saving proxies, convert from proxy before saving
|
||||
await update(key, () => toRaw(data))
|
||||
}
|
||||
}
|
||||
catch (e) {
|
||||
onError(e)
|
||||
}
|
||||
}
|
||||
|
||||
const {
|
||||
pause: pauseWatch,
|
||||
resume: resumeWatch,
|
||||
} = watchPausable(source, data => write(data), { flush, deep })
|
||||
|
||||
async function setData(value: T): Promise<void> {
|
||||
pauseWatch()
|
||||
try {
|
||||
await write(value)
|
||||
source.value = value
|
||||
}
|
||||
finally {
|
||||
resumeWatch()
|
||||
}
|
||||
}
|
||||
|
||||
return { set: setData, readIDB: () => get<T>(key) }
|
||||
}
|
||||
|
|
@ -1,198 +0,0 @@
|
|||
import type { mastodon } from 'masto'
|
||||
|
||||
export interface TranslationResponse {
|
||||
translatedText: string
|
||||
detectedLanguage: {
|
||||
confidence: number
|
||||
language: string
|
||||
}
|
||||
}
|
||||
|
||||
// @see https://github.com/LibreTranslate/LibreTranslate/tree/main/libretranslate/locales
|
||||
export const supportedTranslationCodes = [
|
||||
'ar',
|
||||
'az',
|
||||
'cs',
|
||||
'da',
|
||||
'de',
|
||||
'el',
|
||||
'en',
|
||||
'eo',
|
||||
'es',
|
||||
'fa',
|
||||
'fi',
|
||||
'fr',
|
||||
'ga',
|
||||
'he',
|
||||
'hi',
|
||||
'hu',
|
||||
'id',
|
||||
'it',
|
||||
'ja',
|
||||
'ko',
|
||||
'nl',
|
||||
'pl',
|
||||
'pt',
|
||||
'ru',
|
||||
'sk',
|
||||
'sv',
|
||||
'tr',
|
||||
'uk',
|
||||
'vi',
|
||||
'zh',
|
||||
] as const
|
||||
|
||||
const translationAPISupported = 'Translator' in globalThis && 'LanguageDetector' in globalThis
|
||||
|
||||
const anchorMarkupRegEx = /<a[^>]*>.*?<\/a>/g
|
||||
|
||||
export function getLanguageCode() {
|
||||
let code = 'en'
|
||||
const getCode = (code: string) => code.replace(/-.*$/, '')
|
||||
if (import.meta.client) {
|
||||
const { locale } = useI18n()
|
||||
code = getCode(locale.value ? locale.value : navigator.language)
|
||||
}
|
||||
return code
|
||||
}
|
||||
|
||||
interface TranslationErr {
|
||||
data?: {
|
||||
error?: string
|
||||
}
|
||||
}
|
||||
|
||||
function replaceTranslatedLinksWithOriginal(text: string) {
|
||||
return text.replace(anchorMarkupRegEx, (match) => {
|
||||
const tagLink = anchorMarkupRegEx.exec(text)
|
||||
return tagLink ? tagLink[0] : match
|
||||
})
|
||||
}
|
||||
|
||||
export async function translateText(text: string, from: string | null | undefined, to: string) {
|
||||
const config = useRuntimeConfig()
|
||||
const status = ref({
|
||||
success: false,
|
||||
error: '',
|
||||
text: '',
|
||||
})
|
||||
try {
|
||||
const response = await ($fetch as any)(config.public.translateApi, {
|
||||
method: 'POST',
|
||||
body: {
|
||||
q: text,
|
||||
source: from ?? 'auto',
|
||||
target: to,
|
||||
format: 'html',
|
||||
api_key: '',
|
||||
},
|
||||
}) as TranslationResponse
|
||||
status.value.success = true
|
||||
status.value.text = replaceTranslatedLinksWithOriginal(response.translatedText)
|
||||
}
|
||||
catch (err) {
|
||||
// TODO: improve type
|
||||
if ((err as TranslationErr).data?.error)
|
||||
status.value.error = (err as TranslationErr).data!.error!
|
||||
else
|
||||
status.value.error = 'Unknown Error, Please check your console in browser devtool.'
|
||||
console.error('Translate Post Error: ', err)
|
||||
}
|
||||
return status
|
||||
}
|
||||
|
||||
const translations = new WeakMap<mastodon.v1.Status | mastodon.v1.StatusEdit, {
|
||||
visible: boolean
|
||||
text: string
|
||||
success: boolean
|
||||
error: string
|
||||
}>()
|
||||
|
||||
export async function useTranslation(status: mastodon.v1.Status | mastodon.v1.StatusEdit, to: string) {
|
||||
if (!translations.has(status))
|
||||
translations.set(status, reactive({ visible: false, text: '', success: false, error: '' }))
|
||||
|
||||
const translation = translations.get(status)!
|
||||
const userSettings = useUserSettings()
|
||||
|
||||
let shouldTranslate = false
|
||||
if ('language' in status) {
|
||||
shouldTranslate = typeof status.language === 'string' && status.language !== to && !userSettings.value.disabledTranslationLanguages.includes(status.language)
|
||||
if (!translationAPISupported) {
|
||||
shouldTranslate = shouldTranslate && supportedTranslationCodes.includes(to as any)
|
||||
&& supportedTranslationCodes.includes(status.language as any)
|
||||
}
|
||||
else {
|
||||
shouldTranslate = shouldTranslate && (await (globalThis as any).Translator.availability({
|
||||
sourceLanguage: status.language,
|
||||
targetLanguage: to,
|
||||
})) !== 'unavailable'
|
||||
}
|
||||
}
|
||||
const enabled = /*! !useRuntimeConfig().public.translateApi && */ shouldTranslate
|
||||
|
||||
async function toggle() {
|
||||
if (!shouldTranslate)
|
||||
return
|
||||
|
||||
if (!translation.text) {
|
||||
let translated = {
|
||||
value: {
|
||||
error: '',
|
||||
text: '',
|
||||
success: false,
|
||||
},
|
||||
}
|
||||
if (translationAPISupported && 'language' in status) {
|
||||
let sourceLanguage = status.language
|
||||
if (!sourceLanguage) {
|
||||
const languageDetector = await (globalThis as any).LanguageDetector.create()
|
||||
// Make sure HTML markup doesn't derail language detection.
|
||||
const div = document.createElement('div')
|
||||
div.innerHTML = status.content
|
||||
// eslint-disable-next-line unicorn/prefer-dom-node-text-content
|
||||
const detectedLanguages = await languageDetector.detect(div.innerText)
|
||||
sourceLanguage = detectedLanguages[0].detectedLanguage
|
||||
if (sourceLanguage === 'und') {
|
||||
throw new Error('Could not detect source language.')
|
||||
}
|
||||
}
|
||||
const translator = await (globalThis as any).Translator.create({
|
||||
sourceLanguage,
|
||||
targetLanguage: to,
|
||||
})
|
||||
try {
|
||||
let text = await translator.translate(status.content)
|
||||
text = replaceTranslatedLinksWithOriginal(text)
|
||||
translated.value = {
|
||||
error: '',
|
||||
text,
|
||||
success: true,
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
translated.value = {
|
||||
error: (error as Error).message,
|
||||
text: '',
|
||||
success: false,
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
if ('language' in status) {
|
||||
translated = await translateText(status.content, status.language, to)
|
||||
}
|
||||
}
|
||||
translation.error = translated.value.error
|
||||
translation.text = translated.value.text
|
||||
translation.success = translated.value.success
|
||||
}
|
||||
translation.visible = !translation.visible
|
||||
}
|
||||
|
||||
return {
|
||||
enabled,
|
||||
toggle,
|
||||
translation,
|
||||
}
|
||||
}
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
import type { DraftItem } from '#shared/types'
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const maxThreadLength = 99
|
||||
|
||||
export function useThreadComposer(draftKey: string, initial?: () => DraftItem) {
|
||||
const { draftItems } = useDraft(draftKey, initial)
|
||||
|
||||
/**
|
||||
* Whether the thread is active (has more than one item)
|
||||
*/
|
||||
const threadIsActive = computed<boolean>(() => draftItems.value.length > 1)
|
||||
|
||||
const threadIsSending = ref(false)
|
||||
|
||||
/**
|
||||
* Add an item to the thread
|
||||
*/
|
||||
function addThreadItem() {
|
||||
if (draftItems.value.length >= maxThreadLength) {
|
||||
// TODO handle with error message that tells the user what's wrong
|
||||
// For now just fail silently without breaking anything
|
||||
return
|
||||
}
|
||||
|
||||
const lastItem = draftItems.value[draftItems.value.length - 1]
|
||||
draftItems.value.push(getDefaultDraftItem({
|
||||
language: lastItem.params.language,
|
||||
sensitive: lastItem.params.sensitive,
|
||||
spoilerText: lastItem.params.spoilerText,
|
||||
visibility: lastItem.params.visibility,
|
||||
}))
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param index index of the draft to remove from the thread
|
||||
*/
|
||||
function removeThreadItem(index: number) {
|
||||
draftItems.value.splice(index, 1)
|
||||
}
|
||||
|
||||
/**
|
||||
* Publish all items in the thread in order
|
||||
*/
|
||||
async function publishThread() {
|
||||
const allFailedMessages: Array<string> = []
|
||||
const isAReplyThread = Boolean(draftItems.value[0].params.inReplyToId)
|
||||
threadIsSending.value = true
|
||||
|
||||
let lastPublishedStatus: mastodon.v1.Status | null = null
|
||||
let amountPublished = 0
|
||||
for (const draftItem of draftItems.value) {
|
||||
if (lastPublishedStatus)
|
||||
draftItem.params.inReplyToId = lastPublishedStatus.id
|
||||
|
||||
const { publishDraft, failedMessages } = usePublish({
|
||||
draftItem: ref(draftItem),
|
||||
expanded: computed(() => true),
|
||||
isUploading: ref(false),
|
||||
initialDraft: () => draftItem,
|
||||
isPartOfThread: true,
|
||||
})
|
||||
|
||||
const status = await publishDraft()
|
||||
if (status) {
|
||||
lastPublishedStatus = status
|
||||
amountPublished++
|
||||
}
|
||||
else {
|
||||
allFailedMessages.push(...failedMessages.value)
|
||||
// Stop publishing if one fails
|
||||
break
|
||||
}
|
||||
}
|
||||
// Remove all published items from the thread
|
||||
draftItems.value.splice(0, amountPublished)
|
||||
threadIsSending.value = false
|
||||
|
||||
// If we have errors, return them
|
||||
if (allFailedMessages.length > 0)
|
||||
return allFailedMessages
|
||||
|
||||
// If the thread was a reply and all items were published, jump to it
|
||||
if (isAReplyThread && lastPublishedStatus && draftItems.value.length === 0)
|
||||
navigateToStatus({ status: lastPublishedStatus })
|
||||
|
||||
return lastPublishedStatus
|
||||
}
|
||||
|
||||
return {
|
||||
threadItems: draftItems,
|
||||
threadIsActive,
|
||||
addThreadItem,
|
||||
removeThreadItem,
|
||||
publishThread,
|
||||
threadIsSending,
|
||||
}
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const params = useRoute().params
|
||||
const handle = computed(() => params.account as string)
|
||||
|
||||
definePageMeta({ name: 'account-index' })
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const account = await fetchAccountByHandle(handle.value)
|
||||
|
||||
// we need to ensure `pinned === true` on status
|
||||
// because this prop is appeared only on current account's posts
|
||||
function applyPinned(statuses: mastodon.v1.Status[]) {
|
||||
return statuses.map((status) => {
|
||||
status.pinned = true
|
||||
return status
|
||||
})
|
||||
}
|
||||
|
||||
function reorderAndFilter(items: mastodon.v1.Status[]) {
|
||||
return reorderedTimeline(items, 'account')
|
||||
}
|
||||
|
||||
const pinnedPaginator = useMastoClient().v1.accounts.$select(account.id).statuses.list({ pinned: true })
|
||||
const postPaginator = useMastoClient().v1.accounts.$select(account.id).statuses.list({ limit: 30, excludeReplies: true })
|
||||
|
||||
if (account) {
|
||||
useHydratedHead({
|
||||
title: () => `${t('nav.profile')} | ${getDisplayName(account)} (@${account.acct})`,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<AccountTabs />
|
||||
<TimelinePaginator :paginator="pinnedPaginator" :preprocess="applyPinned" context="account" :account="account" :end-message="false" />
|
||||
<!-- Upper border -->
|
||||
<div h="1px" w-auto bg-border mb-1 />
|
||||
<TimelinePaginator :paginator="postPaginator" :preprocess="reorderAndFilter" context="account" :account="account" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const instance = instanceStorage.value[currentServer.value]
|
||||
try {
|
||||
clearError({ redirect: currentUser.value ? '/home' : `/${currentServer.value}/public/local` })
|
||||
}
|
||||
catch (err) {
|
||||
console.error(err)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MainContent text-base grid gap-3 m3>
|
||||
<img v-if="instance !== undefined" rounded-3 :src="instance.thumbnail.url">
|
||||
</MainContent>
|
||||
</template>
|
||||
|
|
@ -1,167 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
import AccountSearchResult from '~/components/list/AccountSearchResult.vue'
|
||||
|
||||
definePageMeta({
|
||||
name: 'list-accounts',
|
||||
})
|
||||
|
||||
const inputRef = ref<HTMLInputElement>()
|
||||
defineExpose({
|
||||
inputRef,
|
||||
})
|
||||
|
||||
const params = useRoute().params
|
||||
const listId = computed(() => params.list as string)
|
||||
|
||||
const mastoListAccounts = useMastoClient().v1.lists.$select(listId.value).accounts
|
||||
const paginator = mastoListAccounts.list()
|
||||
|
||||
// the limit parameter is set to 1000 while masto.js issue is still open: https://github.com/neet/masto.js/issues/1282
|
||||
const accountsInList = ref((await useMastoClient().v1.lists.$select(listId.value).accounts.list({ limit: 1000 })))
|
||||
|
||||
const paginatorRef = ref()
|
||||
|
||||
// search stuff
|
||||
const query = ref('')
|
||||
const el = ref<HTMLElement>()
|
||||
const { accounts, loading } = useSearch(query, {
|
||||
following: true,
|
||||
})
|
||||
const { focused } = useFocusWithin(el)
|
||||
const index = ref(0)
|
||||
|
||||
function isInCurrentList(userId: string) {
|
||||
return accountsInList.value.map(account => account.id).includes(userId)
|
||||
}
|
||||
|
||||
const results = computed(() => {
|
||||
if (query.value.length === 0)
|
||||
return []
|
||||
return [...accounts.value]
|
||||
})
|
||||
|
||||
// Reset index when results change
|
||||
watch([results, focused], () => index.value = -1)
|
||||
|
||||
function addAccount(account: mastodon.v1.Account) {
|
||||
try {
|
||||
mastoListAccounts.create({ accountIds: [account.id] })
|
||||
accountsInList.value.push(account)
|
||||
paginatorRef.value?.createEntry(account)
|
||||
}
|
||||
catch (err) {
|
||||
console.error(err)
|
||||
}
|
||||
}
|
||||
|
||||
function removeAccount(account: mastodon.v1.Account) {
|
||||
try {
|
||||
mastoListAccounts.remove({ accountIds: [account.id] })
|
||||
const accountIdsInList = accountsInList.value.map(account => account.id)
|
||||
const index = accountIdsInList.indexOf(account.id)
|
||||
if (index > -1) {
|
||||
accountsInList.value.splice(index, 1)
|
||||
paginatorRef.value?.removeEntry(account.id)
|
||||
}
|
||||
}
|
||||
catch (err) {
|
||||
console.error(err)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Search Accounts You Follow -->
|
||||
<div ref="el" relative group>
|
||||
<form
|
||||
border="t base"
|
||||
p-4 w-full
|
||||
flex="~ wrap" relative gap-3
|
||||
>
|
||||
<div
|
||||
bg-base border="~ base" flex-1 h10 ps-1 pe-4 rounded-2 w-full flex="~ row"
|
||||
items-center relative focus-within:box-shadow-outline gap-3
|
||||
ps-4
|
||||
>
|
||||
<div i-ri:search-2-line pointer-events-none text-secondary mt="1px" class="rtl-flip" />
|
||||
<input
|
||||
ref="inputRef"
|
||||
v-model="query"
|
||||
bg-transparent
|
||||
outline="focus:none"
|
||||
ps-3
|
||||
rounded-3
|
||||
pb="1px"
|
||||
h-full
|
||||
w-full
|
||||
placeholder-text-secondary
|
||||
:placeholder="$t('list.search_following_placeholder')"
|
||||
@keydown.esc.prevent="inputRef?.blur()"
|
||||
@keydown.enter.prevent
|
||||
>
|
||||
<button v-if="query.length" btn-action-icon text-secondary @click="query = ''; inputRef?.focus()">
|
||||
<span aria-hidden="true" class="i-ri:close-line" />
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Results -->
|
||||
<div left-0 top-18 absolute w-full z-10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none>
|
||||
<div w-full bg-base border="~ dark" rounded-3 max-h-100 overflow-auto :class="results.length === 0 ? 'py2' : null">
|
||||
<span v-if="query.trim().length === 0" block text-center text-sm text-secondary>
|
||||
{{ $t('list.search_following_desc') }}
|
||||
</span>
|
||||
<template v-else-if="!loading">
|
||||
<template v-if="results.length > 0">
|
||||
<div
|
||||
v-for="(result, i) in results"
|
||||
:key="result.id"
|
||||
flex
|
||||
border="b base"
|
||||
py2 px4
|
||||
hover:bg-active justify-between transition-100 items-center
|
||||
>
|
||||
<AccountSearchResult
|
||||
:active="index === parseInt(i.toString())"
|
||||
:result="result"
|
||||
:tabindex="focused ? 0 : -1"
|
||||
/>
|
||||
<CommonTooltip :content="isInCurrentList(result.id) ? $t('list.remove_account') : $t('list.add_account')">
|
||||
<button
|
||||
text-sm p2 border-1 transition-colors
|
||||
border-dark
|
||||
btn-action-icon
|
||||
bg-base
|
||||
:hover="isInCurrentList(result.id) ? 'text-red' : 'text-green'"
|
||||
@click=" () => isInCurrentList(result.id) ? removeAccount(result.data) : addAccount(result.data) "
|
||||
>
|
||||
<span :class="isInCurrentList(result.id) ? 'i-ri:user-unfollow-line' : 'i-ri:user-add-line'" />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else block text-center text-sm text-secondary>
|
||||
{{ $t('search.search_empty') }}
|
||||
</span>
|
||||
</template>
|
||||
<div v-else>
|
||||
<SearchResultSkeleton />
|
||||
<SearchResultSkeleton />
|
||||
<SearchResultSkeleton />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CommonPaginator ref="paginatorRef" :paginator="paginator">
|
||||
<template #default="{ item }">
|
||||
<ListAccount
|
||||
:account="item"
|
||||
:list="listId"
|
||||
hover-card
|
||||
border="b base" py2 px4
|
||||
/>
|
||||
</template>
|
||||
</CommonPaginator>
|
||||
</template>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const { t } = useI18n()
|
||||
|
||||
useHydratedHead({
|
||||
title: () => t('nav.lists'),
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MainContent>
|
||||
<template #title>
|
||||
<NuxtLink to="/lists" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
|
||||
<div i-ri:list-check />
|
||||
<span text-lg font-bold>{{ t('nav.lists') }}</span>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
<NuxtPage v-if="isHydrated" />
|
||||
</MainContent>
|
||||
</template>
|
||||
|
|
@ -1,144 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
definePageMeta({
|
||||
middleware: 'auth',
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const client = useMastoClient()
|
||||
|
||||
const paginator = client.v1.lists.list()
|
||||
|
||||
useHydratedHead({
|
||||
title: () => t('nav.lists'),
|
||||
})
|
||||
|
||||
const paginatorRef = ref()
|
||||
const inputRef = ref<HTMLInputElement>()
|
||||
const actionError = ref<string | undefined>(undefined)
|
||||
const busy = ref<boolean>(false)
|
||||
const createText = ref('')
|
||||
const enableSubmit = computed(() => createText.value.length > 0)
|
||||
|
||||
async function createList() {
|
||||
if (busy.value || !enableSubmit.value)
|
||||
return
|
||||
|
||||
busy.value = true
|
||||
actionError.value = undefined
|
||||
await nextTick()
|
||||
try {
|
||||
const newEntry = await client.v1.lists.create({
|
||||
title: createText.value,
|
||||
})
|
||||
paginatorRef.value?.createEntry(newEntry)
|
||||
createText.value = ''
|
||||
}
|
||||
catch (err) {
|
||||
console.error(err)
|
||||
actionError.value = (err as Error).message
|
||||
nextTick(() => {
|
||||
inputRef.value?.focus()
|
||||
})
|
||||
}
|
||||
finally {
|
||||
busy.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function clearError(focusBtn: boolean) {
|
||||
actionError.value = undefined
|
||||
if (focusBtn) {
|
||||
nextTick(() => {
|
||||
inputRef.value?.focus()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function updateEntry(list: mastodon.v1.List) {
|
||||
paginatorRef.value?.updateEntry(list)
|
||||
}
|
||||
function removeEntry(id: string) {
|
||||
paginatorRef.value?.removeEntry(id)
|
||||
}
|
||||
|
||||
onDeactivated(() => clearError(false))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CommonPaginator ref="paginatorRef" :paginator="paginator">
|
||||
<template #default="{ item }">
|
||||
<ListEntry
|
||||
:model-value="item"
|
||||
@update:model-value="updateEntry"
|
||||
@list-removed="removeEntry"
|
||||
/>
|
||||
</template>
|
||||
<template #done>
|
||||
<form
|
||||
border="t base"
|
||||
p-4 w-full
|
||||
flex="~ wrap" relative gap-3
|
||||
:aria-describedby="actionError ? 'create-list-error' : undefined"
|
||||
:class="actionError ? 'border border-base border-rounded rounded-be-is-0 rounded-be-ie-0 border-b-unset border-$c-danger-active' : null"
|
||||
@submit.prevent="createList"
|
||||
>
|
||||
<div
|
||||
bg-base border="~ base" flex-1 h10 ps-1 pe-4 rounded-2 w-full flex="~ row"
|
||||
items-center relative focus-within:box-shadow-outline gap-3
|
||||
>
|
||||
<input
|
||||
ref="inputRef"
|
||||
v-model="createText"
|
||||
bg-transparent
|
||||
outline="focus:none"
|
||||
px-4
|
||||
pb="1px"
|
||||
flex-1
|
||||
placeholder-text-secondary
|
||||
:placeholder="$t('list.list_title_placeholder')"
|
||||
@keypress.enter="createList"
|
||||
>
|
||||
</div>
|
||||
<div flex="~ col" gap-y-4 gap-x-2 sm="~ justify-between flex-row">
|
||||
<button flex="~ row" gap-x-2 items-center btn-solid :disabled="!enableSubmit || busy">
|
||||
<span v-if="busy" aria-hidden="true" block animate animate-spin preserve-3d class="rtl-flip">
|
||||
<span block i-ri:loader-2-fill aria-hidden="true" />
|
||||
</span>
|
||||
<span v-else aria-hidden="true" block i-material-symbols:playlist-add-rounded class="rtl-flip" />
|
||||
{{ $t('list.create') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<CommonErrorMessage
|
||||
v-if="actionError"
|
||||
id="create-list-error"
|
||||
described-by="create-list-failed"
|
||||
class="rounded-bs-is-0 rounded-bs-ie-0 border-t-dashed m-b-2"
|
||||
>
|
||||
<header id="create-list-failed" flex justify-between>
|
||||
<div flex items-center gap-x-2 font-bold>
|
||||
<div aria-hidden="true" i-ri:error-warning-fill />
|
||||
<p>{{ $t('list.error') }}</p>
|
||||
</div>
|
||||
<CommonTooltip placement="bottom" :content="$t('list.clear_error')">
|
||||
<button
|
||||
flex rounded-4 p1 hover:bg-active cursor-pointer transition-100 :aria-label="$t('list.clear_error')"
|
||||
@click="clearError(true)"
|
||||
>
|
||||
<span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
</header>
|
||||
<ol ps-2 sm:ps-1>
|
||||
<li flex="~ col sm:row" gap-y-1 sm:gap-x-2>
|
||||
<strong sr-only>{{ $t('list.error_prefix') }}</strong>
|
||||
<span>{{ actionError }}</span>
|
||||
</li>
|
||||
</ol>
|
||||
</CommonErrorMessage>
|
||||
</template>
|
||||
</CommonPaginator>
|
||||
</template>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
middleware: 'auth',
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
useHydratedHead({
|
||||
title: () => t('nav.compose'),
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MainContent>
|
||||
<template #title>
|
||||
<NuxtLink to="/compose" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
|
||||
<div i-ri:quill-pen-line />
|
||||
<span>{{ $t('nav.compose') }}</span>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
<PublishWidgetFull />
|
||||
</MainContent>
|
||||
</template>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
middleware: 'auth',
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const { client } = useMasto()
|
||||
const paginator = client.value.v1.followedTags.list({
|
||||
limit: 20,
|
||||
})
|
||||
|
||||
useHydratedHead({
|
||||
title: () => t('nav.hashtags'),
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TagCardPaginator v-bind="{ paginator }" />
|
||||
</template>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const { t } = useI18n()
|
||||
|
||||
useHydratedHead({
|
||||
title: () => `${t('settings.interface.label')} | ${t('nav.settings')}`,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MainContent back-on-small-screen>
|
||||
<template #title>
|
||||
<div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
|
||||
<span>{{ $t('settings.interface.label') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<div px-6 pt-3 pb-6 flex="~ col gap6">
|
||||
<SettingsFontSize />
|
||||
<SettingsColorMode />
|
||||
<SettingsThemeColors />
|
||||
<SettingsBottomNav />
|
||||
</div>
|
||||
</MainContent>
|
||||
</template>
|
||||
|
|
@ -1,192 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const { t } = useI18n()
|
||||
|
||||
useHydratedHead({
|
||||
title: () => `${t('settings.preferences.label')} | ${t('nav.settings')}`,
|
||||
})
|
||||
|
||||
const userSettings = useUserSettings()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MainContent back-on-small-screen>
|
||||
<template #title>
|
||||
<h1 text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
|
||||
{{ $t('settings.preferences.label') }}
|
||||
</h1>
|
||||
</template>
|
||||
<section>
|
||||
<h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center sr-only>
|
||||
<span aria-hidden="true" block i-ri-equalizer-line />
|
||||
{{ $t('settings.preferences.label') }}
|
||||
</h2>
|
||||
<SettingsToggleItem
|
||||
:checked="getPreferences(userSettings, 'hideAltIndicatorOnPosts')"
|
||||
@click="togglePreferences('hideAltIndicatorOnPosts')"
|
||||
>
|
||||
{{ $t('settings.preferences.hide_alt_indi_on_posts') }}
|
||||
</SettingsToggleItem>
|
||||
<SettingsToggleItem
|
||||
:checked="getPreferences(userSettings, 'hideGifIndicatorOnPosts')"
|
||||
@click="togglePreferences('hideGifIndicatorOnPosts')"
|
||||
>
|
||||
{{ $t('settings.preferences.hide_gif_indi_on_posts') }}
|
||||
</SettingsToggleItem>
|
||||
<SettingsToggleItem
|
||||
:checked="getPreferences(userSettings, 'hideAccountHoverCard')"
|
||||
@click="togglePreferences('hideAccountHoverCard')"
|
||||
>
|
||||
{{ $t('settings.preferences.hide_account_hover_card') }}
|
||||
</SettingsToggleItem>
|
||||
<SettingsToggleItem
|
||||
:checked="getPreferences(userSettings, 'hideTagHoverCard')"
|
||||
@click="togglePreferences('hideTagHoverCard')"
|
||||
>
|
||||
{{ $t('settings.preferences.hide_tag_hover_card') }}
|
||||
</SettingsToggleItem>
|
||||
<SettingsToggleItem
|
||||
:checked="getPreferences(userSettings, 'enableAutoplay')"
|
||||
:disabled="getPreferences(userSettings, 'enableDataSaving')"
|
||||
@click="togglePreferences('enableAutoplay')"
|
||||
>
|
||||
{{ $t('settings.preferences.enable_autoplay') }}
|
||||
</SettingsToggleItem>
|
||||
<SettingsToggleItem
|
||||
:checked="getPreferences(userSettings, 'unmuteVideos')"
|
||||
@click="togglePreferences('unmuteVideos')"
|
||||
>
|
||||
{{ $t('settings.preferences.unmute_videos') }}
|
||||
</SettingsToggleItem>
|
||||
<SettingsToggleItem
|
||||
:checked="getPreferences(userSettings, 'optimizeForLowPerformanceDevice')"
|
||||
@click="togglePreferences('optimizeForLowPerformanceDevice')"
|
||||
>
|
||||
{{ $t('settings.preferences.optimize_for_low_performance_device') }}
|
||||
</SettingsToggleItem>
|
||||
<SettingsToggleItem
|
||||
:checked="getPreferences(userSettings, 'enableDataSaving')"
|
||||
@click="togglePreferences('enableDataSaving')"
|
||||
>
|
||||
{{ $t("settings.preferences.enable_data_saving") }}
|
||||
<template #description>
|
||||
{{ $t("settings.preferences.enable_data_saving_description") }}
|
||||
</template>
|
||||
</SettingsToggleItem>
|
||||
<SettingsToggleItem
|
||||
:checked="getPreferences(userSettings, 'enablePinchToZoom')"
|
||||
@click="togglePreferences('enablePinchToZoom')"
|
||||
>
|
||||
{{ $t('settings.preferences.enable_pinch_to_zoom') }}
|
||||
</SettingsToggleItem>
|
||||
<SettingsToggleItem
|
||||
:checked="getPreferences(userSettings, 'useStarFavoriteIcon')"
|
||||
@click="togglePreferences('useStarFavoriteIcon')"
|
||||
>
|
||||
{{ $t('settings.preferences.use_star_favorite_icon') }}
|
||||
</SettingsToggleItem>
|
||||
</section>
|
||||
<section>
|
||||
<h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
|
||||
<span aria-hidden="true" block i-ri-hearts-line />
|
||||
{{ $t('settings.preferences.wellbeing') }}
|
||||
</h2>
|
||||
<SettingsToggleItem
|
||||
:checked="getPreferences(userSettings, 'grayscaleMode')"
|
||||
@click="togglePreferences('grayscaleMode')"
|
||||
>
|
||||
{{ $t('settings.preferences.grayscale_mode') }}
|
||||
</SettingsToggleItem>
|
||||
<SettingsToggleItem
|
||||
:checked="getPreferences(userSettings, 'hideBoostCount')"
|
||||
@click="togglePreferences('hideBoostCount')"
|
||||
>
|
||||
{{ $t('settings.preferences.hide_boost_count') }}
|
||||
</SettingsToggleItem>
|
||||
<SettingsToggleItem
|
||||
:checked="getPreferences(userSettings, 'hideFavoriteCount')"
|
||||
@click="togglePreferences('hideFavoriteCount')"
|
||||
>
|
||||
{{ $t('settings.preferences.hide_favorite_count') }}
|
||||
</SettingsToggleItem>
|
||||
<SettingsToggleItem
|
||||
:checked="getPreferences(userSettings, 'hideReplyCount')"
|
||||
@click="togglePreferences('hideReplyCount')"
|
||||
>
|
||||
{{ $t('settings.preferences.hide_reply_count') }}
|
||||
</SettingsToggleItem>
|
||||
<SettingsToggleItem
|
||||
:checked="getPreferences(userSettings, 'hideFollowerCount')"
|
||||
@click="togglePreferences('hideFollowerCount')"
|
||||
>
|
||||
{{ $t('settings.preferences.hide_follower_count') }}
|
||||
</SettingsToggleItem>
|
||||
<SettingsToggleItem
|
||||
:checked="getPreferences(userSettings, 'hideUsernameEmojis')"
|
||||
@click="togglePreferences('hideUsernameEmojis')"
|
||||
>
|
||||
{{ $t("settings.preferences.hide_username_emojis") }}
|
||||
<template #description>
|
||||
{{ $t('settings.preferences.hide_username_emojis_description') }}
|
||||
</template>
|
||||
</SettingsToggleItem>
|
||||
<SettingsToggleItem
|
||||
:checked="getPreferences(userSettings, 'hideNews')"
|
||||
@click="togglePreferences('hideNews')"
|
||||
>
|
||||
{{ $t("settings.preferences.hide_news") }}
|
||||
</SettingsToggleItem>
|
||||
<SettingsToggleItem
|
||||
:checked="getPreferences(userSettings, 'zenMode')"
|
||||
@click="togglePreferences('zenMode')"
|
||||
>
|
||||
{{ $t("settings.preferences.zen_mode") }}
|
||||
<template #description>
|
||||
{{ $t('settings.preferences.zen_mode_description') }}
|
||||
</template>
|
||||
</SettingsToggleItem>
|
||||
</section>
|
||||
<section>
|
||||
<h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
|
||||
<span aria-hidden="true" block i-ri-flask-line />
|
||||
{{ $t('settings.preferences.title') }}
|
||||
</h2>
|
||||
<!-- Embedded Media -->
|
||||
<SettingsToggleItem
|
||||
:checked="getPreferences(userSettings, 'experimentalEmbeddedMedia')"
|
||||
@click="togglePreferences('experimentalEmbeddedMedia')"
|
||||
>
|
||||
{{ $t('settings.preferences.embedded_media') }}
|
||||
<template #description>
|
||||
{{ $t('settings.preferences.embedded_media_description') }}
|
||||
</template>
|
||||
</SettingsToggleItem>
|
||||
<SettingsToggleItem
|
||||
:checked="getPreferences(userSettings, 'experimentalVirtualScroller')"
|
||||
@click="togglePreferences('experimentalVirtualScroller')"
|
||||
>
|
||||
{{ $t('settings.preferences.virtual_scroll') }}
|
||||
<template #description>
|
||||
{{ $t('settings.preferences.virtual_scroll_description') }}
|
||||
</template>
|
||||
</SettingsToggleItem>
|
||||
<SettingsToggleItem
|
||||
:checked="getPreferences(userSettings, 'experimentalGitHubCards')"
|
||||
@click="togglePreferences('experimentalGitHubCards')"
|
||||
>
|
||||
{{ $t('settings.preferences.github_cards') }}
|
||||
<template #description>
|
||||
{{ $t('settings.preferences.github_cards_description') }}
|
||||
</template>
|
||||
</SettingsToggleItem>
|
||||
<SettingsToggleItem
|
||||
:checked="getPreferences(userSettings, 'experimentalUserPicker')"
|
||||
@click="togglePreferences('experimentalUserPicker')"
|
||||
>
|
||||
{{ $t('settings.preferences.user_picker') }}
|
||||
<template #description>
|
||||
{{ $t('settings.preferences.user_picker_description') }}
|
||||
</template>
|
||||
</SettingsToggleItem>
|
||||
</section>
|
||||
</MainContent>
|
||||
</template>
|
||||
|
|
@ -1,111 +0,0 @@
|
|||
import type { UserLogin } from '#shared/types'
|
||||
import { useAsyncIDBKeyval } from '~/composables/idb'
|
||||
import { STORAGE_KEY_USERS } from '~/constants'
|
||||
|
||||
const mock = process.mock
|
||||
|
||||
export default defineNuxtPlugin({
|
||||
enforce: 'pre',
|
||||
parallel: import.meta.server,
|
||||
async setup() {
|
||||
const users = useUsers()
|
||||
|
||||
let defaultUsers = mock ? [mock.user] : []
|
||||
|
||||
// Backward compatibility with localStorage
|
||||
let removeUsersOnLocalStorage = false
|
||||
if (globalThis?.localStorage) {
|
||||
const usersOnLocalStorageString = globalThis.localStorage.getItem(STORAGE_KEY_USERS)
|
||||
if (usersOnLocalStorageString) {
|
||||
defaultUsers = JSON.parse(usersOnLocalStorageString)
|
||||
removeUsersOnLocalStorage = true
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.server) {
|
||||
users.value = defaultUsers
|
||||
}
|
||||
|
||||
if (removeUsersOnLocalStorage)
|
||||
globalThis.localStorage.removeItem(STORAGE_KEY_USERS)
|
||||
|
||||
let callback = noop
|
||||
|
||||
// when multiple tabs: we need to reload window when sign in, switch account or sign out
|
||||
if (import.meta.client) {
|
||||
// prevent reloading on the first visit
|
||||
const initialLoad = ref(true)
|
||||
|
||||
callback = () => (initialLoad.value = false)
|
||||
|
||||
const { readIDB } = await useAsyncIDBKeyval<UserLogin[]>(STORAGE_KEY_USERS, defaultUsers, users)
|
||||
|
||||
function reload() {
|
||||
setTimeout(() => {
|
||||
window.location.reload()
|
||||
}, 0)
|
||||
}
|
||||
|
||||
debouncedWatch(
|
||||
() => [currentUserHandle.value, users.value.length] as const,
|
||||
async ([handle, currentUsers], old) => {
|
||||
if (initialLoad.value) {
|
||||
return
|
||||
}
|
||||
|
||||
const oldHandle = old?.[0]
|
||||
|
||||
// read database users: it is not reactive
|
||||
const dbUsers = await readIDB()
|
||||
|
||||
const numberOfUsers = dbUsers?.length || 0
|
||||
|
||||
// sign in or sign out
|
||||
if (currentUsers !== numberOfUsers) {
|
||||
reload()
|
||||
return
|
||||
}
|
||||
|
||||
let sameAcct: boolean
|
||||
// 1. detect account switching
|
||||
if (oldHandle) {
|
||||
sameAcct = handle === oldHandle
|
||||
}
|
||||
else {
|
||||
const acct = currentUser.value?.account?.acct
|
||||
// 2. detect sign-in?
|
||||
sameAcct = !acct || acct === handle
|
||||
}
|
||||
|
||||
if (!sameAcct) {
|
||||
reload()
|
||||
}
|
||||
},
|
||||
{ debounce: 450, flush: 'post', immediate: true },
|
||||
)
|
||||
}
|
||||
|
||||
const { params, query } = useRoute()
|
||||
|
||||
publicServer.value = params.server as string || useRuntimeConfig().public.defaultServer
|
||||
|
||||
const masto = createMasto()
|
||||
const user = (typeof query.server === 'string' && typeof query.token === 'string')
|
||||
? {
|
||||
server: query.server,
|
||||
token: query.token,
|
||||
vapidKey: typeof query.vapid_key === 'string' ? query.vapid_key : undefined,
|
||||
}
|
||||
: (currentUser.value || { server: publicServer.value })
|
||||
|
||||
if (import.meta.client) {
|
||||
loginTo(masto, user).finally(callback)
|
||||
}
|
||||
|
||||
return {
|
||||
provide: {
|
||||
masto,
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
|
|
@ -1,18 +1,13 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const { account } = defineProps<{
|
||||
defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
square?: boolean
|
||||
}>()
|
||||
|
||||
const loaded = ref(false)
|
||||
const error = ref(false)
|
||||
|
||||
const preferredMotion = usePreferredReducedMotion()
|
||||
const accountAvatarSrc = computed(() => {
|
||||
return preferredMotion.value === 'reduce' ? (account?.avatarStatic ?? account.avatar) : account.avatar
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -21,10 +16,10 @@ const accountAvatarSrc = computed(() => {
|
|||
width="400"
|
||||
height="400"
|
||||
select-none
|
||||
:src="(error || !loaded) ? 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' : accountAvatarSrc"
|
||||
:src="(error || !loaded) ? 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' : account.avatar"
|
||||
:alt="$t('account.avatar_description', [account.username])"
|
||||
loading="lazy"
|
||||
class="account-avatar object-cover"
|
||||
class="account-avatar"
|
||||
:class="(loaded ? 'bg-base' : 'bg-gray:10') + (square ? ' ' : ' rounded-full')"
|
||||
:style="{ 'clip-path': square ? `url(#avatar-mask)` : 'none' }"
|
||||
v-bind="$attrs"
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<script setup lang="ts">
|
||||
<script lang="ts" setup>
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
defineOptions({
|
||||
|
|
@ -11,7 +11,7 @@ defineProps<{
|
|||
text-secondary-light
|
||||
>
|
||||
<slot name="prepend" />
|
||||
<CommonTooltip :content="$t('account.bot')" :disabled="showLabel">
|
||||
<CommonTooltip no-auto-focus :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 { hideEmojis = false } = defineProps<{
|
||||
const { account, hideEmojis = false } = defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
hideEmojis?: boolean
|
||||
}>()
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
import { toggleFollowAccount, useRelationship } from '~/composables/masto/relationship'
|
||||
import { toggleFollowAccount, useRelationship } from '~~/composables/masto/relationship'
|
||||
|
||||
const { account, context, command, ...props } = defineProps<{
|
||||
const { account, command, context, ...props } = defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
relationship?: mastodon.v1.Relationship
|
||||
context?: 'followedBy' | 'following'
|
||||
|
|
@ -13,7 +13,6 @@ 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()
|
||||
|
||||
|
|
@ -63,10 +62,6 @@ const buttonStyle = computed(() => {
|
|||
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'
|
||||
})
|
||||
|
|
@ -82,33 +77,28 @@ const buttonStyle = computed(() => {
|
|||
: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 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>
|
||||
<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>
|
||||
<span>{{ account.locked ? $t('account.request_follow') : $t('account.follow') }}</span>
|
||||
</template>
|
||||
</button>
|
||||
</template>
|
||||
|
|
@ -38,7 +38,7 @@ async function rejectFollowRequest() {
|
|||
<template>
|
||||
<div flex gap-4>
|
||||
<template v-if="relationship?.requestedBy">
|
||||
<CommonTooltip :content="$t('account.authorize')">
|
||||
<CommonTooltip :content="$t('account.authorize')" no-auto-focus>
|
||||
<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')">
|
||||
<CommonTooltip :content="$t('account.reject')" no-auto-focus>
|
||||
<button
|
||||
type="button"
|
||||
rounded-full text-sm p2 border-1
|
||||
|
|
@ -189,21 +189,19 @@ 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')" flex>
|
||||
<CommonTooltip placement="bottom" :content="$t('account.copy_account_name')" no-auto-focus flex>
|
||||
<button text-secondary-light text-sm :class="isCopied ? 'i-ri:check-fill text-green' : 'i-ri:file-copy-line'" @click="copyAccountName">
|
||||
<span sr-only>{{ $t('account.copy_account_name') }}</span>
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
</div>
|
||||
<div self-start mt-1>
|
||||
<AccountRolesIndicator v-if="account.roles?.length" :account="account" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<label
|
||||
|
|
@ -12,7 +12,7 @@ const relationship = useRelationship(account)
|
|||
<div v-show="relationship" flex="~ col gap2" rounded min-w-90 max-w-120 z-100 overflow-hidden p-4>
|
||||
<div flex="~ gap2" items-center>
|
||||
<NuxtLink :to="getAccountRoute(account)" flex-auto rounded-full hover:bg-active transition-100 pe5 me-a>
|
||||
<AccountInfo :account="account" :hover-card="false" />
|
||||
<AccountInfo :account="account" />
|
||||
</NuxtLink>
|
||||
<AccountFollowButton text-sm :account="account" :relationship="relationship" />
|
||||
</div>
|
||||
|
|
@ -58,7 +58,6 @@ const userSettings = useUserSettings()
|
|||
:delay="{ show: 500, hide: 100 }"
|
||||
v-bind="$attrs"
|
||||
:close-on-content-click="false"
|
||||
no-auto-focus
|
||||
>
|
||||
<slot />
|
||||
<template #popper>
|
||||
|
|
@ -5,7 +5,7 @@ defineOptions({
|
|||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const { as = 'div' } = defineProps<{
|
||||
const { account, as = 'div' } = defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
as?: string
|
||||
hoverCard?: boolean
|
||||
|
|
@ -16,20 +16,18 @@ const { 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 items-center gap-3 v-bind="$attrs">
|
||||
<component :is="as" flex gap-3 v-bind="$attrs">
|
||||
<AccountHoverWrapper :disabled="!hoverCard" :account="account">
|
||||
<AccountBigAvatar :account="account" shrink-0 :square="square" />
|
||||
</AccountHoverWrapper>
|
||||
<div flex="~ col" shrink h-full overflow-hidden justify-center leading-none select-none p-1>
|
||||
<div flex="~ col" shrink pt-1 h-full overflow-hidden justify-center leading-none select-none>
|
||||
<div flex="~" gap-2>
|
||||
<AccountDisplayName :account="account" font-bold line-clamp-1 ws-pre-wrap break-all text-lg />
|
||||
<AccountRolesIndicator v-if="account.roles?.length" :account="account" :limit="1" />
|
||||
<AccountLockIndicator v-if="account.locked" text-xs />
|
||||
<AccountBotIndicator v-if="account.bot" text-xs />
|
||||
</div>
|
||||
<AccountHandle :account="account" text-secondary-light />
|
||||
<div self-start mt-1>
|
||||
<AccountRolesIndicator v-if="account.roles?.length" :account="account" :limit="1" />
|
||||
</div>
|
||||
</div>
|
||||
</component>
|
||||
</template>
|
||||
|
|
@ -13,7 +13,7 @@ const { t } = useI18n()
|
|||
text-secondary-light
|
||||
>
|
||||
<slot name="prepend" />
|
||||
<CommonTooltip content="Lock" :disabled="showLabel">
|
||||
<CommonTooltip no-auto-focus content="Lock" :disabled="showLabel">
|
||||
<div i-ri:lock-line />
|
||||
</CommonTooltip>
|
||||
<div v-if="showLabel">
|
||||
|
|
@ -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
|
||||
|
|
@ -25,16 +25,13 @@ function shareAccount() {
|
|||
}
|
||||
|
||||
async function toggleReblogs() {
|
||||
if (!relationship.value!.showingReblogs) {
|
||||
const dialogChoice = await openConfirmDialog({
|
||||
title: t('confirm.show_reblogs.title'),
|
||||
description: t('confirm.show_reblogs.description', [account.acct]),
|
||||
confirm: t('confirm.show_reblogs.confirm'),
|
||||
cancel: t('confirm.show_reblogs.cancel'),
|
||||
})
|
||||
if (dialogChoice.choice !== 'confirm')
|
||||
return
|
||||
}
|
||||
if (!relationship.value!.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
|
||||
|
||||
const showingReblogs = !relationship.value?.showingReblogs
|
||||
relationship.value = await client.value.v1.accounts.$select(account.id).follow({ reblogs: showingReblogs })
|
||||
|
|
@ -56,7 +53,7 @@ async function removeUserNote() {
|
|||
|
||||
<template>
|
||||
<CommonDropdown :eager-mount="command">
|
||||
<button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group :aria-label="t('actions.more')">
|
||||
<button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group aria-label="More actions">
|
||||
<div rounded-5 p2 elk-group-hover="bg-purple/10">
|
||||
<div i-ri:more-2-fill />
|
||||
</div>
|
||||
|
|
@ -71,7 +68,6 @@ async function removeUserNote() {
|
|||
/>
|
||||
</NuxtLink>
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-if="isShareSupported"
|
||||
:text="$t('menu.share_account', [`@${account.acct}`])"
|
||||
icon="i-ri:share-line"
|
||||
|
|
@ -82,14 +78,12 @@ 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"
|
||||
|
|
@ -97,7 +91,6 @@ async function removeUserNote() {
|
|||
/>
|
||||
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-if="!relationship?.showingReblogs"
|
||||
icon="i-ri:repeat-line"
|
||||
:text="$t('menu.show_reblogs', [`@${account.acct}`])"
|
||||
|
|
@ -105,7 +98,6 @@ async function removeUserNote() {
|
|||
@click="toggleReblogs()"
|
||||
/>
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-else
|
||||
:text="$t('menu.hide_reblogs', [`@${account.acct}`])"
|
||||
icon="i-ri:repeat-line"
|
||||
|
|
@ -114,7 +106,6 @@ 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"
|
||||
|
|
@ -122,7 +113,6 @@ async function removeUserNote() {
|
|||
@click="addUserNote()"
|
||||
/>
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-else
|
||||
:text="$t('menu.remove_personal_note', [`@${account.acct}`])"
|
||||
icon="i-ri-edit-2-line"
|
||||
|
|
@ -131,7 +121,6 @@ async function removeUserNote() {
|
|||
/>
|
||||
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-if="!relationship?.muting"
|
||||
:text="$t('menu.mute_account', [`@${account.acct}`])"
|
||||
icon="i-ri:volume-mute-line"
|
||||
|
|
@ -139,7 +128,6 @@ 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"
|
||||
|
|
@ -148,7 +136,6 @@ async function removeUserNote() {
|
|||
/>
|
||||
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-if="!relationship?.blocking"
|
||||
:text="$t('menu.block_account', [`@${account.acct}`])"
|
||||
icon="i-ri:forbid-2-line"
|
||||
|
|
@ -156,7 +143,6 @@ 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"
|
||||
|
|
@ -166,7 +152,6 @@ 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"
|
||||
|
|
@ -174,7 +159,6 @@ async function removeUserNote() {
|
|||
@click="toggleBlockDomain(relationship!, account)"
|
||||
/>
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-else
|
||||
:text="$t('menu.unblock_domain', [getServerName(account)])"
|
||||
icon="i-ri:restart-line"
|
||||
|
|
@ -184,7 +168,6 @@ async function removeUserNote() {
|
|||
</template>
|
||||
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
:text="$t('menu.report_account', [`@${account.acct}`])"
|
||||
icon="i-ri:flag-2-line"
|
||||
:command="command"
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const { account, context } = defineProps<{
|
||||
const { paginator, account, context } = defineProps<{
|
||||
paginator: mastodon.Paginator<mastodon.v1.Account[], mastodon.DefaultPaginationParams | undefined>
|
||||
context?: 'following' | 'followers'
|
||||
account?: mastodon.v1.Account
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import type { CommonRouteTabOption } from '#shared/types'
|
||||
import type { CommonRouteTabOption } from '~/types'
|
||||
|
||||
const { t } = useI18n()
|
||||
const route = useRoute()
|
||||
|
|
@ -5,7 +5,7 @@ defineOptions({
|
|||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const { tagName } = defineProps<{
|
||||
const { tagName, disabled } = defineProps<{
|
||||
tagName?: string
|
||||
disabled?: boolean
|
||||
}>()
|
||||
|
|
@ -33,7 +33,6 @@ const userSettings = useUserSettings()
|
|||
:delay="{ show: 500, hide: 100 }"
|
||||
v-bind="$attrs"
|
||||
:close-on-content-click="false"
|
||||
no-auto-focus
|
||||
>
|
||||
<slot />
|
||||
<template #popper>
|
||||
|
|
@ -38,14 +38,12 @@ onMounted(() => {
|
|||
announce(t('a11y.loading_page'))
|
||||
})
|
||||
router.afterEach((to, from) => {
|
||||
if (from) {
|
||||
setTimeout(() => {
|
||||
requestAnimationFrame(() => {
|
||||
const title = document.title.trim().split('|')
|
||||
announce(t('a11y.route_loaded', [title[0]]))
|
||||
})
|
||||
}, 512)
|
||||
}
|
||||
from && setTimeout(() => {
|
||||
requestAnimationFrame(() => {
|
||||
const title = document.title.trim().split('|')
|
||||
announce(t('a11y.route_loaded', [title[0]]))
|
||||
})
|
||||
}, 512)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
|
@ -1,16 +1,17 @@
|
|||
<script setup lang="ts">
|
||||
import type { AriaLive } from '~/composables/aria'
|
||||
|
||||
const {
|
||||
ariaLive = 'polite',
|
||||
heading = 'h2',
|
||||
messageKey = (message: any) => message,
|
||||
} = defineProps<{
|
||||
ariaLive?: AriaLive
|
||||
heading?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
|
||||
// tsc complaining when using $defineProps
|
||||
withDefaults(defineProps<{
|
||||
title: string
|
||||
ariaLive?: AriaLive
|
||||
messageKey?: (message: any) => any
|
||||
}>()
|
||||
heading?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
|
||||
}>(), {
|
||||
heading: 'h2',
|
||||
messageKey: (message: any) => message,
|
||||
ariaLive: 'polite',
|
||||
})
|
||||
|
||||
const { announceLogs, appendLogs, clearLogs, logs } = useAriaLog()
|
||||
|
||||
|
|
@ -1,9 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
import type { AriaLive } from '~/composables/aria'
|
||||
|
||||
const { ariaLive = 'polite' } = defineProps<{
|
||||
// tsc complaining when using $defineProps
|
||||
withDefaults(defineProps<{
|
||||
ariaLive?: AriaLive
|
||||
}>()
|
||||
}>(), {
|
||||
ariaLive: 'polite',
|
||||
})
|
||||
|
||||
const { announceStatus, clearStatus, status } = useAriaStatus()
|
||||
|
||||
|
|
@ -1,7 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
<script lang="ts" setup>
|
||||
import type { ResolvedCommand } from '~/composables/command'
|
||||
|
||||
const { active = false } = defineProps<{
|
||||
const {
|
||||
cmd,
|
||||
index,
|
||||
active = false,
|
||||
} = defineProps<{
|
||||
cmd: ResolvedCommand
|
||||
index: number
|
||||
active?: boolean
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
const { name } = defineProps<{
|
||||
const props = defineProps<{
|
||||
name: string
|
||||
}>()
|
||||
|
||||
const isMac = useIsMac()
|
||||
|
||||
const keys = computed(() => name.toLowerCase().split('+'))
|
||||
const keys = computed(() => props.name.toLowerCase().split('+'))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import type { CommandScope, QueryResult, QueryResultItem } from '~/composables/command'
|
||||
import type { SearchResult as SearchResultType } from '~/composables/masto/search'
|
||||
import type { CommandScope, QueryResult, QueryResultItem } from '~/composables/command'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'close'): void
|
||||
|
|
@ -22,7 +22,7 @@ onMounted(() => {
|
|||
|
||||
const commandMode = computed(() => input.value.startsWith('>'))
|
||||
|
||||
const query = computed(() => commandMode.value ? '' : input.value.trim())
|
||||
const query = computed(() => commandMode ? '' : input.value.trim())
|
||||
|
||||
const { accounts, hashtags, loading } = useSearch(query)
|
||||
|
||||
|
|
@ -61,7 +61,7 @@ const searchResult = computed<QueryResult>(() => {
|
|||
}
|
||||
})
|
||||
|
||||
const result = computed<QueryResult>(() => commandMode.value
|
||||
const result = computed<QueryResult>(() => commandMode
|
||||
? registry.query(scopes.value.map(s => s.id).join('.'), input.value.slice(1).trim())
|
||||
: searchResult.value,
|
||||
)
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<script setup lang="ts">
|
||||
<script lang="ts" setup>
|
||||
const emit = defineEmits<{
|
||||
(event: 'close'): void
|
||||
}>()
|
||||
|
|
@ -3,7 +3,7 @@ defineOptions({
|
|||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const { blurhash = '', shouldLoadImage = true } = defineProps<{
|
||||
const { blurhash = '', src, srcset, shouldLoadImage = true } = defineProps<{
|
||||
blurhash?: string
|
||||
src: string
|
||||
srcset?: string
|
||||
|
|
@ -4,8 +4,6 @@ defineProps<{
|
|||
hover?: boolean
|
||||
iconChecked?: string
|
||||
iconUnchecked?: string
|
||||
checkedIconColor?: string
|
||||
prependCheckbox?: boolean
|
||||
}>()
|
||||
const modelValue = defineModel<boolean | null>()
|
||||
</script>
|
||||
|
|
@ -17,12 +15,9 @@ const modelValue = defineModel<boolean | null>()
|
|||
v-bind="$attrs"
|
||||
@click.prevent="modelValue = !modelValue"
|
||||
>
|
||||
<span v-if="label && !prependCheckbox" flex-1 ms-2 pointer-events-none>{{ label }}</span>
|
||||
<span v-if="label" flex-1 ms-2 pointer-events-none>{{ label }}</span>
|
||||
<span
|
||||
:class="[
|
||||
modelValue ? (iconChecked ?? 'i-ri:checkbox-line') : (iconUnchecked ?? 'i-ri:checkbox-blank-line'),
|
||||
modelValue && checkedIconColor,
|
||||
]"
|
||||
:class="modelValue ? (iconChecked ?? 'i-ri:checkbox-line') : (iconUnchecked ?? 'i-ri:checkbox-blank-line')"
|
||||
text-lg
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
|
@ -31,7 +26,6 @@ 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,20 +1,27 @@
|
|||
<script setup lang="ts">
|
||||
<script lang="ts" setup>
|
||||
import type { Boundaries } from 'vue-advanced-cropper'
|
||||
import { Cropper } from 'vue-advanced-cropper'
|
||||
import 'vue-advanced-cropper/dist/style.css'
|
||||
|
||||
const { stencilAspectRatio = 1 / 1, stencilSizePercentage = 0.9 } = defineProps<{
|
||||
export interface Props {
|
||||
/** Crop frame aspect ratio (width/height), default 1/1 */
|
||||
stencilAspectRatio?: number
|
||||
/** The ratio of the longest edge of the cut box to the length of the cut screen, default 0.9, not more than 1 */
|
||||
stencilSizePercentage?: number
|
||||
}>()
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
stencilAspectRatio: 1 / 1,
|
||||
stencilSizePercentage: 0.9,
|
||||
})
|
||||
|
||||
const file = defineModel<File | null>()
|
||||
|
||||
const cropperDialog = ref(false)
|
||||
|
||||
const cropper = ref<InstanceType<typeof Cropper>>()
|
||||
|
||||
const cropperFlag = ref(false)
|
||||
|
||||
const cropperImage = reactive({
|
||||
src: '',
|
||||
type: 'image/jpg',
|
||||
|
|
@ -22,8 +29,8 @@ const cropperImage = reactive({
|
|||
|
||||
function stencilSize({ boundaries }: { boundaries: Boundaries }) {
|
||||
return {
|
||||
width: boundaries.width * stencilSizePercentage,
|
||||
height: boundaries.height * stencilSizePercentage,
|
||||
width: boundaries.width * props.stencilSizePercentage,
|
||||
height: boundaries.height * props.stencilSizePercentage,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -75,7 +82,7 @@ function cropImage() {
|
|||
}"
|
||||
:stencil-size="stencilSize"
|
||||
:stencil-props="{
|
||||
aspectRatio: stencilAspectRatio,
|
||||
aspectRatio: props.stencilAspectRatio,
|
||||
movable: false,
|
||||
resizable: false,
|
||||
handlers: {},
|
||||
|
|
@ -1,22 +1,22 @@
|
|||
<script setup lang="ts">
|
||||
import type { FileWithHandle } from 'browser-fs-access'
|
||||
<script lang="ts" setup>
|
||||
import { fileOpen } from 'browser-fs-access'
|
||||
import type { FileWithHandle } from 'browser-fs-access'
|
||||
|
||||
const {
|
||||
original,
|
||||
allowedFileTypes = ['image/jpeg', 'image/png'],
|
||||
allowedFileSize = 1024 * 1024 * 5, // 5 MB
|
||||
} = defineProps<{
|
||||
const props = withDefaults(defineProps<{
|
||||
/** The image src before change */
|
||||
original?: string
|
||||
/** Allowed file types */
|
||||
allowedFileTypes?: string[]
|
||||
/** Allowed file size */
|
||||
allowedFileSize?: number
|
||||
imgClass?: string
|
||||
loading?: boolean
|
||||
}>()
|
||||
|
||||
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,7 +26,7 @@ const file = defineModel<FileWithHandle | null>()
|
|||
|
||||
const { t } = useI18n()
|
||||
|
||||
const defaultImage = computed(() => original || '')
|
||||
const defaultImage = computed(() => props.original || '')
|
||||
/** Preview of selected images */
|
||||
const previewImage = ref('')
|
||||
/** The current images on display */
|
||||
|
|
@ -37,14 +37,14 @@ async function pickImage() {
|
|||
return
|
||||
const image = await fileOpen({
|
||||
description: 'Image',
|
||||
mimeTypes: allowedFileTypes,
|
||||
mimeTypes: props.allowedFileTypes,
|
||||
})
|
||||
|
||||
if (!allowedFileTypes.includes(image.type)) {
|
||||
if (!props.allowedFileTypes.includes(image.type)) {
|
||||
emit('error', 1, t('error.unsupported_file_format'))
|
||||
return
|
||||
}
|
||||
else if (image.size > allowedFileSize) {
|
||||
else if (image.size > props.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,7 +17,6 @@ const {
|
|||
keyProp?: keyof T
|
||||
virtualScroller?: boolean
|
||||
stream?: mastodon.streaming.Subscription
|
||||
eventType?: 'update' | 'notification'
|
||||
preprocess?: (items: (U | T)[]) => U[]
|
||||
endMessage?: boolean | string
|
||||
}>()
|
||||
|
|
@ -32,7 +31,7 @@ defineSlots<{
|
|||
newer: U // newer is undefined when index === 0
|
||||
}) => void
|
||||
items: (props: {
|
||||
items: U[]
|
||||
items: UnwrapRef<U[]>
|
||||
}) => void
|
||||
updater: (props: {
|
||||
number: number
|
||||
|
|
@ -45,7 +44,7 @@ defineSlots<{
|
|||
const { t } = useI18n()
|
||||
const nuxtApp = useNuxtApp()
|
||||
|
||||
const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, toRef(() => stream), eventType, preprocess)
|
||||
const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, toRef(() => stream), preprocess)
|
||||
|
||||
nuxtApp.hook('elk-logo:click', () => {
|
||||
update()
|
||||
|
|
@ -73,7 +72,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 as U[]">
|
||||
<slot name="items" :items="items">
|
||||
<template v-if="virtualScroller">
|
||||
<DynamicScroller
|
||||
v-slot="{ item, active, index }"
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import type { CommonRouteTabMoreOption, CommonRouteTabOption } from '#shared/types'
|
||||
import type { CommonRouteTabMoreOption, CommonRouteTabOption } from '~/types'
|
||||
|
||||
const { options, command, preventScrollTop = false } = defineProps<{
|
||||
const { options, command, replace, preventScrollTop = false, moreOptions } = defineProps<{
|
||||
options: CommonRouteTabOption[]
|
||||
moreOptions?: CommonRouteTabMoreOption
|
||||
command?: boolean
|
||||
|
|
@ -14,11 +14,11 @@ 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>
|
||||
|
||||
|
|
@ -46,7 +46,7 @@ useCommands(() => command
|
|||
</template>
|
||||
<template v-if="isHydrated && moreOptions?.options?.length">
|
||||
<CommonDropdown placement="bottom" flex cursor-pointer mx-1.25rem>
|
||||
<CommonTooltip placement="top" :content="moreOptions.tooltip || t('action.more')">
|
||||
<CommonTooltip placement="top" no-auto-focus :content="moreOptions.tooltip || t('action.more')">
|
||||
<button
|
||||
cursor-pointer
|
||||
flex
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
const { as = 'div', active } = defineProps<{
|
||||
as?: string
|
||||
as: any
|
||||
active: boolean
|
||||
}>()
|
||||
|
||||
|
|
@ -19,19 +19,19 @@ const tabs = computed(() => {
|
|||
})
|
||||
})
|
||||
|
||||
function toValidName(option: string) {
|
||||
return option.toLowerCase().replace(/[^a-z0-9]/gi, '-')
|
||||
function toValidName(otpion: string) {
|
||||
return otpion.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-')
|
||||
}
|
||||
|
||||
useCommands(() => command
|
||||
? tabs.value.map(tab => ({
|
||||
scope: 'Tabs',
|
||||
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>
|
||||
|
||||
|
|
@ -13,7 +13,6 @@ defineProps<Props>()
|
|||
v-if="isHydrated"
|
||||
v-bind="$attrs"
|
||||
auto-hide
|
||||
no-auto-focus
|
||||
>
|
||||
<slot />
|
||||
<template #popper>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<script setup lang="ts">
|
||||
<script lang="ts" setup>
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const {
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue