Compare commits
No commits in common. "main" and "v0.15.1" have entirely different histories.
427 changed files with 8515 additions and 13640 deletions
10
.github/workflows/ci.yml
vendored
10
.github/workflows/ci.yml
vendored
|
|
@ -18,13 +18,11 @@ jobs:
|
||||||
|
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v4
|
- uses: actions/checkout@v4
|
||||||
# workaround for npm registry key change
|
- run: corepack enable
|
||||||
# ref. `pnpm@10.1.0` / `pnpm@9.15.4` cannot be installed due to key id mismatch · Issue #612 · nodejs/corepack
|
- uses: actions/setup-node@v4
|
||||||
# - https://github.com/nodejs/corepack/issues/612#issuecomment-2629496091
|
|
||||||
- run: npm i -g corepack@latest && corepack enable
|
|
||||||
- uses: actions/setup-node@v4.4.0
|
|
||||||
with:
|
with:
|
||||||
node-version-file: .nvmrc
|
node-version: 20
|
||||||
|
cache: pnpm
|
||||||
|
|
||||||
- name: 📦 Install dependencies
|
- name: 📦 Install dependencies
|
||||||
run: pnpm install --frozen-lockfile
|
run: pnpm install --frozen-lockfile
|
||||||
|
|
|
||||||
2
.github/workflows/release.yml
vendored
2
.github/workflows/release.yml
vendored
|
|
@ -19,7 +19,7 @@ jobs:
|
||||||
- name: Set node
|
- name: Set node
|
||||||
uses: actions/setup-node@v4
|
uses: actions/setup-node@v4
|
||||||
with:
|
with:
|
||||||
node-version-file: .nvmrc
|
node-version: 18
|
||||||
|
|
||||||
- run: npx changelogithub
|
- run: npx changelogithub
|
||||||
env:
|
env:
|
||||||
|
|
|
||||||
2
.nvmrc
2
.nvmrc
|
|
@ -1 +1 @@
|
||||||
22
|
20
|
||||||
|
|
@ -6,13 +6,19 @@ Refer also to https://github.com/antfu/contribute.
|
||||||
|
|
||||||
For guidelines on contributing to the documentation, refer to the [docs README](./docs/README.md).
|
For guidelines on contributing to the documentation, refer to the [docs README](./docs/README.md).
|
||||||
|
|
||||||
|
### Online
|
||||||
|
|
||||||
|
You can use [StackBlitz Codeflow](https://stackblitz.com/codeflow) to fix bugs or implement features. You'll also see a Codeflow button on PRs to review them without a local setup. Once the elk repo has been cloned in Codeflow, the dev server will start automatically and print the URL to open the App. You should receive a prompt in the bottom-right suggesting to open it in the Editor or in another Tab. To learn more, check out the [Codeflow docs](https://developer.stackblitz.com/codeflow/what-is-codeflow).
|
||||||
|
|
||||||
|
[](https://pr.new/elk-zone/elk)
|
||||||
|
|
||||||
### Local Setup
|
### Local Setup
|
||||||
|
|
||||||
To develop and test the Elk package:
|
To develop and test the Elk package:
|
||||||
|
|
||||||
1. Fork the Elk repository to your own GitHub account and then clone it to your local device.
|
1. Fork the Elk repository to your own GitHub account and then clone it to your local device.
|
||||||
|
|
||||||
2. Ensure using the LTS version of Node.js.
|
2. Ensure using the latest Node.js (20.x).
|
||||||
If you have [nvm](https://github.com/nvm-sh/nvm), you can run `nvm i` to install the required version.
|
If you have [nvm](https://github.com/nvm-sh/nvm), you can run `nvm i` to install the required version.
|
||||||
|
|
||||||
3. The package manager used to install and link dependencies must be [pnpm](https://pnpm.io/) v9. To use it you must first enable [Corepack](https://github.com/nodejs/corepack) by running `corepack enable`. (Note: on Linux in a standard Node 20+ environment, you should follow the instructions to install via Node's `corepack` rather than using the `curl` command)
|
3. The package manager used to install and link dependencies must be [pnpm](https://pnpm.io/) 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)
|
||||||
|
|
@ -84,9 +90,9 @@ We've added some `UnoCSS` utilities styles to help you with that:
|
||||||
|
|
||||||
## Internationalization
|
## 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:
|
If you are updating a translation in your local environment, you can run the following commands to check the status:
|
||||||
- from root folder: `nr prepare-translation-status`
|
- from root folder: `nr prepare-translation-status`
|
||||||
|
|
|
||||||
|
|
@ -6,10 +6,7 @@ WORKDIR /elk
|
||||||
FROM base AS builder
|
FROM base AS builder
|
||||||
|
|
||||||
# Prepare pnpm https://pnpm.io/installation#using-corepack
|
# Prepare pnpm https://pnpm.io/installation#using-corepack
|
||||||
# workaround for npm registry key change
|
RUN corepack enable
|
||||||
# ref. `pnpm@10.1.0` / `pnpm@9.15.4` cannot be installed due to key id mismatch · Issue #612 · nodejs/corepack
|
|
||||||
# - https://github.com/nodejs/corepack/issues/612#issuecomment-2629496091
|
|
||||||
RUN npm i -g corepack@latest && corepack enable
|
|
||||||
|
|
||||||
# Prepare deps
|
# Prepare deps
|
||||||
RUN apk update
|
RUN apk update
|
||||||
|
|
|
||||||
86
README.md
86
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.
|
<p align="center">
|
||||||
|
<a href="https://elk.zone/" target="_blank" rel="noopener noreferrer" >
|
||||||
~ Ayo Ayco
|
<img src="./public/elk-og.png" alt="Elk screenshots" width="600" height="auto">
|
||||||
|
</a>
|
||||||
---
|
</p>
|
||||||
|
|
||||||
## ⚠️ Elk is in Alpha
|
## ⚠️ Elk is in Alpha
|
||||||
|
|
||||||
|
|
@ -32,19 +44,73 @@ 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. checkout source ```git clone https://github.com/elk-zone/elk.git```
|
||||||
1. got into new source dir: ```cd elk```
|
1. got into new source dir: ```cd elk```
|
||||||
|
1. build Docker image: ```docker build .```
|
||||||
1. create local storage directory for settings: ```mkdir elk-storage```
|
1. create local storage directory for settings: ```mkdir elk-storage```
|
||||||
1. adjust permissions of storage dir: ```sudo chown 911:911 ./elk-storage```
|
1. adjust permissions of storage dir: ```sudo chown 911:911 ./elk-storage```
|
||||||
1. start container: ```docker-compose up --build -d```
|
1. start container: ```docker-compose up -d```
|
||||||
|
|
||||||
> [!NOTE]
|
> [!NOTE]
|
||||||
> The provided Dockerfile creates a container which will eventually run Elk as non-root user and create a persistent named Docker volume upon first start (if that volume does not yet exist). This volume is always created with root permission. Failing to change the permissions of ```/elk/data``` inside this volume to UID:GID 911 (as specified for Elk in the Dockerfile) will prevent Elk from storing it's config for user accounts. You either have to fix the permission in the created named volume, or mount a directory with the correct permission to ```/elk/data``` into the container.
|
> The provided Dockerfile creates a container which will eventually run Elk as non-root user and create a persistent named Docker volume upon first start (if that volume does not yet exist). This volume is always created with root permission. Failing to change the permissions of ```/elk/data``` inside this volume to UID:GID 911 (as specified for Elk in the Dockerfile) will prevent Elk from storing it's config for user accounts. You either have to fix the permission in the created named volume, or mount a directory with the correct permission to ```/elk/data``` into the container.
|
||||||
|
|
||||||
|
### Ecosystem
|
||||||
|
|
||||||
|
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
|
||||||
|
- [crab.bumscode.com](https://crab.bumscode.com) - Use [crab](https://github.com/maybeanerd/crab) - a soft fork of Elk - for the `bumscode.com` Server
|
||||||
|
|
||||||
> **Note**: Community deployments are **NOT** maintained by the Elk team. It may not be synced with Elk's source code. Please do your own research about the host servers before using them.
|
> **Note**: Community deployments are **NOT** maintained by the Elk team. It may not be synced with Elk's source code. Please do your own research about the host servers before using them.
|
||||||
|
|
||||||
|
## 💖 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
|
## 🧑💻 Contributing
|
||||||
|
|
||||||
We're really excited that you're interested in contributing to Elk! Before submitting your contribution, please read through the following guide.
|
We're really excited that you're interested in contributing to Elk! Before submitting your contribution, please read through the following guide.
|
||||||
|
|
||||||
|
### Online
|
||||||
|
|
||||||
|
You can use [StackBlitz Codeflow](https://stackblitz.com/codeflow) to fix bugs or implement features. You'll also see a Codeflow button on PRs to review them without a local setup. Once the elk repo has been cloned in Codeflow, the dev server will start automatically and print the URL to open the App. You should receive a prompt in the bottom-right suggesting to open it in the Editor or in another Tab. To learn more, check out the [Codeflow docs](https://developer.stackblitz.com/codeflow/what-is-codeflow).
|
||||||
|
|
||||||
|
[](https://pr.new/elk-zone/elk)
|
||||||
|
|
||||||
### Local Setup
|
### Local Setup
|
||||||
|
|
||||||
Clone the repository and run on the root folder:
|
Clone the repository and run on the root folder:
|
||||||
|
|
|
||||||
|
|
@ -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,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,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="/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,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,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,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,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,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,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,18 +1,13 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { mastodon } from 'masto'
|
import type { mastodon } from 'masto'
|
||||||
|
|
||||||
const { account } = defineProps<{
|
defineProps<{
|
||||||
account: mastodon.v1.Account
|
account: mastodon.v1.Account
|
||||||
square?: boolean
|
square?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const loaded = ref(false)
|
const loaded = ref(false)
|
||||||
const error = ref(false)
|
const error = ref(false)
|
||||||
|
|
||||||
const preferredMotion = usePreferredReducedMotion()
|
|
||||||
const accountAvatarSrc = computed(() => {
|
|
||||||
return preferredMotion.value === 'reduce' ? (account?.avatarStatic ?? account.avatar) : account.avatar
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -21,10 +16,10 @@ const accountAvatarSrc = computed(() => {
|
||||||
width="400"
|
width="400"
|
||||||
height="400"
|
height="400"
|
||||||
select-none
|
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])"
|
:alt="$t('account.avatar_description', [account.username])"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
class="account-avatar object-cover"
|
class="account-avatar"
|
||||||
:class="(loaded ? 'bg-base' : 'bg-gray:10') + (square ? ' ' : ' rounded-full')"
|
:class="(loaded ? 'bg-base' : 'bg-gray:10') + (square ? ' ' : ' rounded-full')"
|
||||||
:style="{ 'clip-path': square ? `url(#avatar-mask)` : 'none' }"
|
:style="{ 'clip-path': square ? `url(#avatar-mask)` : 'none' }"
|
||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { mastodon } from 'masto'
|
import type { mastodon } from 'masto'
|
||||||
|
|
||||||
const { hideEmojis = false } = defineProps<{
|
const { account, hideEmojis = false } = defineProps<{
|
||||||
account: mastodon.v1.Account
|
account: mastodon.v1.Account
|
||||||
hideEmojis?: boolean
|
hideEmojis?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { mastodon } from 'masto'
|
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
|
account: mastodon.v1.Account
|
||||||
relationship?: mastodon.v1.Relationship
|
relationship?: mastodon.v1.Relationship
|
||||||
context?: 'followedBy' | 'following'
|
context?: 'followedBy' | 'following'
|
||||||
|
|
@ -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 v-show="relationship" flex="~ col gap2" rounded min-w-90 max-w-120 z-100 overflow-hidden p-4>
|
||||||
<div flex="~ gap2" items-center>
|
<div flex="~ gap2" items-center>
|
||||||
<NuxtLink :to="getAccountRoute(account)" flex-auto rounded-full hover:bg-active transition-100 pe5 me-a>
|
<NuxtLink :to="getAccountRoute(account)" flex-auto rounded-full hover:bg-active transition-100 pe5 me-a>
|
||||||
<AccountInfo :account="account" :hover-card="false" />
|
<AccountInfo :account="account" :hover-card="true" />
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<AccountFollowButton text-sm :account="account" :relationship="relationship" />
|
<AccountFollowButton text-sm :account="account" :relationship="relationship" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -5,7 +5,7 @@ defineOptions({
|
||||||
inheritAttrs: false,
|
inheritAttrs: false,
|
||||||
})
|
})
|
||||||
|
|
||||||
const { as = 'div' } = defineProps<{
|
const { account, as = 'div' } = defineProps<{
|
||||||
account: mastodon.v1.Account
|
account: mastodon.v1.Account
|
||||||
as?: string
|
as?: string
|
||||||
hoverCard?: boolean
|
hoverCard?: boolean
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { mastodon } from 'masto'
|
import type { mastodon } from 'masto'
|
||||||
import { toggleBlockAccount, toggleBlockDomain, toggleMuteAccount } from '~/composables/masto/relationship'
|
import { toggleBlockAccount, toggleBlockDomain, toggleMuteAccount } from '~~/composables/masto/relationship'
|
||||||
|
|
||||||
const { account } = defineProps<{
|
const { account } = defineProps<{
|
||||||
account: mastodon.v1.Account
|
account: mastodon.v1.Account
|
||||||
|
|
@ -71,7 +71,6 @@ async function removeUserNote() {
|
||||||
/>
|
/>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<CommonDropdownItem
|
<CommonDropdownItem
|
||||||
is="button"
|
|
||||||
v-if="isShareSupported"
|
v-if="isShareSupported"
|
||||||
:text="$t('menu.share_account', [`@${account.acct}`])"
|
:text="$t('menu.share_account', [`@${account.acct}`])"
|
||||||
icon="i-ri:share-line"
|
icon="i-ri:share-line"
|
||||||
|
|
@ -82,14 +81,12 @@ async function removeUserNote() {
|
||||||
<template v-if="currentUser">
|
<template v-if="currentUser">
|
||||||
<template v-if="!isSelf">
|
<template v-if="!isSelf">
|
||||||
<CommonDropdownItem
|
<CommonDropdownItem
|
||||||
is="button"
|
|
||||||
:text="$t('menu.mention_account', [`@${account.acct}`])"
|
:text="$t('menu.mention_account', [`@${account.acct}`])"
|
||||||
icon="i-ri:at-line"
|
icon="i-ri:at-line"
|
||||||
:command="command"
|
:command="command"
|
||||||
@click="mentionUser(account)"
|
@click="mentionUser(account)"
|
||||||
/>
|
/>
|
||||||
<CommonDropdownItem
|
<CommonDropdownItem
|
||||||
is="button"
|
|
||||||
:text="$t('menu.direct_message_account', [`@${account.acct}`])"
|
:text="$t('menu.direct_message_account', [`@${account.acct}`])"
|
||||||
icon="i-ri:message-3-line"
|
icon="i-ri:message-3-line"
|
||||||
:command="command"
|
:command="command"
|
||||||
|
|
@ -97,7 +94,6 @@ async function removeUserNote() {
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<CommonDropdownItem
|
<CommonDropdownItem
|
||||||
is="button"
|
|
||||||
v-if="!relationship?.showingReblogs"
|
v-if="!relationship?.showingReblogs"
|
||||||
icon="i-ri:repeat-line"
|
icon="i-ri:repeat-line"
|
||||||
:text="$t('menu.show_reblogs', [`@${account.acct}`])"
|
:text="$t('menu.show_reblogs', [`@${account.acct}`])"
|
||||||
|
|
@ -105,7 +101,6 @@ async function removeUserNote() {
|
||||||
@click="toggleReblogs()"
|
@click="toggleReblogs()"
|
||||||
/>
|
/>
|
||||||
<CommonDropdownItem
|
<CommonDropdownItem
|
||||||
is="button"
|
|
||||||
v-else
|
v-else
|
||||||
:text="$t('menu.hide_reblogs', [`@${account.acct}`])"
|
:text="$t('menu.hide_reblogs', [`@${account.acct}`])"
|
||||||
icon="i-ri:repeat-line"
|
icon="i-ri:repeat-line"
|
||||||
|
|
@ -114,7 +109,6 @@ async function removeUserNote() {
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<CommonDropdownItem
|
<CommonDropdownItem
|
||||||
is="button"
|
|
||||||
v-if="!relationship?.note || relationship?.note?.length === 0"
|
v-if="!relationship?.note || relationship?.note?.length === 0"
|
||||||
:text="$t('menu.add_personal_note', [`@${account.acct}`])"
|
:text="$t('menu.add_personal_note', [`@${account.acct}`])"
|
||||||
icon="i-ri-edit-2-line"
|
icon="i-ri-edit-2-line"
|
||||||
|
|
@ -122,7 +116,6 @@ async function removeUserNote() {
|
||||||
@click="addUserNote()"
|
@click="addUserNote()"
|
||||||
/>
|
/>
|
||||||
<CommonDropdownItem
|
<CommonDropdownItem
|
||||||
is="button"
|
|
||||||
v-else
|
v-else
|
||||||
:text="$t('menu.remove_personal_note', [`@${account.acct}`])"
|
:text="$t('menu.remove_personal_note', [`@${account.acct}`])"
|
||||||
icon="i-ri-edit-2-line"
|
icon="i-ri-edit-2-line"
|
||||||
|
|
@ -131,7 +124,6 @@ async function removeUserNote() {
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<CommonDropdownItem
|
<CommonDropdownItem
|
||||||
is="button"
|
|
||||||
v-if="!relationship?.muting"
|
v-if="!relationship?.muting"
|
||||||
:text="$t('menu.mute_account', [`@${account.acct}`])"
|
:text="$t('menu.mute_account', [`@${account.acct}`])"
|
||||||
icon="i-ri:volume-mute-line"
|
icon="i-ri:volume-mute-line"
|
||||||
|
|
@ -139,7 +131,6 @@ async function removeUserNote() {
|
||||||
@click="toggleMuteAccount (relationship!, account)"
|
@click="toggleMuteAccount (relationship!, account)"
|
||||||
/>
|
/>
|
||||||
<CommonDropdownItem
|
<CommonDropdownItem
|
||||||
is="button"
|
|
||||||
v-else
|
v-else
|
||||||
:text="$t('menu.unmute_account', [`@${account.acct}`])"
|
:text="$t('menu.unmute_account', [`@${account.acct}`])"
|
||||||
icon="i-ri:volume-up-fill"
|
icon="i-ri:volume-up-fill"
|
||||||
|
|
@ -148,7 +139,6 @@ async function removeUserNote() {
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<CommonDropdownItem
|
<CommonDropdownItem
|
||||||
is="button"
|
|
||||||
v-if="!relationship?.blocking"
|
v-if="!relationship?.blocking"
|
||||||
:text="$t('menu.block_account', [`@${account.acct}`])"
|
:text="$t('menu.block_account', [`@${account.acct}`])"
|
||||||
icon="i-ri:forbid-2-line"
|
icon="i-ri:forbid-2-line"
|
||||||
|
|
@ -156,7 +146,6 @@ async function removeUserNote() {
|
||||||
@click="toggleBlockAccount (relationship!, account)"
|
@click="toggleBlockAccount (relationship!, account)"
|
||||||
/>
|
/>
|
||||||
<CommonDropdownItem
|
<CommonDropdownItem
|
||||||
is="button"
|
|
||||||
v-else
|
v-else
|
||||||
:text="$t('menu.unblock_account', [`@${account.acct}`])"
|
:text="$t('menu.unblock_account', [`@${account.acct}`])"
|
||||||
icon="i-ri:checkbox-circle-line"
|
icon="i-ri:checkbox-circle-line"
|
||||||
|
|
@ -166,7 +155,6 @@ async function removeUserNote() {
|
||||||
|
|
||||||
<template v-if="getServerName(account) !== currentServer">
|
<template v-if="getServerName(account) !== currentServer">
|
||||||
<CommonDropdownItem
|
<CommonDropdownItem
|
||||||
is="button"
|
|
||||||
v-if="!relationship?.domainBlocking"
|
v-if="!relationship?.domainBlocking"
|
||||||
:text="$t('menu.block_domain', [getServerName(account)])"
|
:text="$t('menu.block_domain', [getServerName(account)])"
|
||||||
icon="i-ri:shut-down-line"
|
icon="i-ri:shut-down-line"
|
||||||
|
|
@ -174,7 +162,6 @@ async function removeUserNote() {
|
||||||
@click="toggleBlockDomain(relationship!, account)"
|
@click="toggleBlockDomain(relationship!, account)"
|
||||||
/>
|
/>
|
||||||
<CommonDropdownItem
|
<CommonDropdownItem
|
||||||
is="button"
|
|
||||||
v-else
|
v-else
|
||||||
:text="$t('menu.unblock_domain', [getServerName(account)])"
|
:text="$t('menu.unblock_domain', [getServerName(account)])"
|
||||||
icon="i-ri:restart-line"
|
icon="i-ri:restart-line"
|
||||||
|
|
@ -184,7 +171,6 @@ async function removeUserNote() {
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<CommonDropdownItem
|
<CommonDropdownItem
|
||||||
is="button"
|
|
||||||
:text="$t('menu.report_account', [`@${account.acct}`])"
|
:text="$t('menu.report_account', [`@${account.acct}`])"
|
||||||
icon="i-ri:flag-2-line"
|
icon="i-ri:flag-2-line"
|
||||||
:command="command"
|
:command="command"
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { mastodon } from 'masto'
|
import type { mastodon } from 'masto'
|
||||||
|
|
||||||
const { account, context } = defineProps<{
|
const { paginator, account, context } = defineProps<{
|
||||||
paginator: mastodon.Paginator<mastodon.v1.Account[], mastodon.DefaultPaginationParams | undefined>
|
paginator: mastodon.Paginator<mastodon.v1.Account[], mastodon.DefaultPaginationParams | undefined>
|
||||||
context?: 'following' | 'followers'
|
context?: 'following' | 'followers'
|
||||||
account?: mastodon.v1.Account
|
account?: mastodon.v1.Account
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { CommonRouteTabOption } from '#shared/types'
|
import type { CommonRouteTabOption } from '~/types'
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
|
@ -5,7 +5,7 @@ defineOptions({
|
||||||
inheritAttrs: false,
|
inheritAttrs: false,
|
||||||
})
|
})
|
||||||
|
|
||||||
const { tagName } = defineProps<{
|
const { tagName, disabled } = defineProps<{
|
||||||
tagName?: string
|
tagName?: string
|
||||||
disabled?: boolean
|
disabled?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
@ -1,16 +1,17 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { AriaLive } from '~/composables/aria'
|
import type { AriaLive } from '~/composables/aria'
|
||||||
|
|
||||||
const {
|
// tsc complaining when using $defineProps
|
||||||
ariaLive = 'polite',
|
withDefaults(defineProps<{
|
||||||
heading = 'h2',
|
|
||||||
messageKey = (message: any) => message,
|
|
||||||
} = defineProps<{
|
|
||||||
ariaLive?: AriaLive
|
|
||||||
heading?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
|
|
||||||
title: string
|
title: string
|
||||||
|
ariaLive?: AriaLive
|
||||||
messageKey?: (message: any) => any
|
messageKey?: (message: any) => any
|
||||||
}>()
|
heading?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
|
||||||
|
}>(), {
|
||||||
|
heading: 'h2',
|
||||||
|
messageKey: (message: any) => message,
|
||||||
|
ariaLive: 'polite',
|
||||||
|
})
|
||||||
|
|
||||||
const { announceLogs, appendLogs, clearLogs, logs } = useAriaLog()
|
const { announceLogs, appendLogs, clearLogs, logs } = useAriaLog()
|
||||||
|
|
||||||
|
|
@ -1,9 +1,12 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { AriaLive } from '~/composables/aria'
|
import type { AriaLive } from '~/composables/aria'
|
||||||
|
|
||||||
const { ariaLive = 'polite' } = defineProps<{
|
// tsc complaining when using $defineProps
|
||||||
|
withDefaults(defineProps<{
|
||||||
ariaLive?: AriaLive
|
ariaLive?: AriaLive
|
||||||
}>()
|
}>(), {
|
||||||
|
ariaLive: 'polite',
|
||||||
|
})
|
||||||
|
|
||||||
const { announceStatus, clearStatus, status } = useAriaStatus()
|
const { announceStatus, clearStatus, status } = useAriaStatus()
|
||||||
|
|
||||||
|
|
@ -1,7 +1,11 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { ResolvedCommand } from '~/composables/command'
|
import type { ResolvedCommand } from '~/composables/command'
|
||||||
|
|
||||||
const { active = false } = defineProps<{
|
const {
|
||||||
|
cmd,
|
||||||
|
index,
|
||||||
|
active = false,
|
||||||
|
} = defineProps<{
|
||||||
cmd: ResolvedCommand
|
cmd: ResolvedCommand
|
||||||
index: number
|
index: number
|
||||||
active?: boolean
|
active?: boolean
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const { name } = defineProps<{
|
const props = defineProps<{
|
||||||
name: string
|
name: string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const isMac = useIsMac()
|
const isMac = useIsMac()
|
||||||
|
|
||||||
const keys = computed(() => name.toLowerCase().split('+'))
|
const keys = computed(() => props.name.toLowerCase().split('+'))
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { CommandScope, QueryResult, QueryResultItem } from '~/composables/command'
|
|
||||||
import type { SearchResult as SearchResultType } from '~/composables/masto/search'
|
import type { SearchResult as SearchResultType } from '~/composables/masto/search'
|
||||||
|
import type { CommandScope, QueryResult, QueryResultItem } from '~/composables/command'
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
(event: 'close'): void
|
(event: 'close'): void
|
||||||
|
|
@ -3,7 +3,7 @@ defineOptions({
|
||||||
inheritAttrs: false,
|
inheritAttrs: false,
|
||||||
})
|
})
|
||||||
|
|
||||||
const { blurhash = '', shouldLoadImage = true } = defineProps<{
|
const { blurhash = '', src, srcset, shouldLoadImage = true } = defineProps<{
|
||||||
blurhash?: string
|
blurhash?: string
|
||||||
src: string
|
src: string
|
||||||
srcset?: string
|
srcset?: string
|
||||||
|
|
@ -3,18 +3,25 @@ import type { Boundaries } from 'vue-advanced-cropper'
|
||||||
import { Cropper } from 'vue-advanced-cropper'
|
import { Cropper } from 'vue-advanced-cropper'
|
||||||
import 'vue-advanced-cropper/dist/style.css'
|
import 'vue-advanced-cropper/dist/style.css'
|
||||||
|
|
||||||
const { stencilAspectRatio = 1 / 1, stencilSizePercentage = 0.9 } = defineProps<{
|
export interface Props {
|
||||||
/** Crop frame aspect ratio (width/height), default 1/1 */
|
/** Crop frame aspect ratio (width/height), default 1/1 */
|
||||||
stencilAspectRatio?: number
|
stencilAspectRatio?: number
|
||||||
/** The ratio of the longest edge of the cut box to the length of the cut screen, default 0.9, not more than 1 */
|
/** The ratio of the longest edge of the cut box to the length of the cut screen, default 0.9, not more than 1 */
|
||||||
stencilSizePercentage?: number
|
stencilSizePercentage?: number
|
||||||
}>()
|
}
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
stencilAspectRatio: 1 / 1,
|
||||||
|
stencilSizePercentage: 0.9,
|
||||||
|
})
|
||||||
|
|
||||||
const file = defineModel<File | null>()
|
const file = defineModel<File | null>()
|
||||||
|
|
||||||
const cropperDialog = ref(false)
|
const cropperDialog = ref(false)
|
||||||
|
|
||||||
const cropper = ref<InstanceType<typeof Cropper>>()
|
const cropper = ref<InstanceType<typeof Cropper>>()
|
||||||
|
|
||||||
const cropperFlag = ref(false)
|
const cropperFlag = ref(false)
|
||||||
|
|
||||||
const cropperImage = reactive({
|
const cropperImage = reactive({
|
||||||
src: '',
|
src: '',
|
||||||
type: 'image/jpg',
|
type: 'image/jpg',
|
||||||
|
|
@ -22,8 +29,8 @@ const cropperImage = reactive({
|
||||||
|
|
||||||
function stencilSize({ boundaries }: { boundaries: Boundaries }) {
|
function stencilSize({ boundaries }: { boundaries: Boundaries }) {
|
||||||
return {
|
return {
|
||||||
width: boundaries.width * stencilSizePercentage,
|
width: boundaries.width * props.stencilSizePercentage,
|
||||||
height: boundaries.height * stencilSizePercentage,
|
height: boundaries.height * props.stencilSizePercentage,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -75,7 +82,7 @@ function cropImage() {
|
||||||
}"
|
}"
|
||||||
:stencil-size="stencilSize"
|
:stencil-size="stencilSize"
|
||||||
:stencil-props="{
|
:stencil-props="{
|
||||||
aspectRatio: stencilAspectRatio,
|
aspectRatio: props.stencilAspectRatio,
|
||||||
movable: false,
|
movable: false,
|
||||||
resizable: false,
|
resizable: false,
|
||||||
handlers: {},
|
handlers: {},
|
||||||
|
|
@ -1,22 +1,22 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { FileWithHandle } from 'browser-fs-access'
|
|
||||||
import { fileOpen } from 'browser-fs-access'
|
import { fileOpen } from 'browser-fs-access'
|
||||||
|
import type { FileWithHandle } from 'browser-fs-access'
|
||||||
|
|
||||||
const {
|
const props = withDefaults(defineProps<{
|
||||||
original,
|
|
||||||
allowedFileTypes = ['image/jpeg', 'image/png'],
|
|
||||||
allowedFileSize = 1024 * 1024 * 5, // 5 MB
|
|
||||||
} = defineProps<{
|
|
||||||
/** The image src before change */
|
/** The image src before change */
|
||||||
original?: string
|
original?: string
|
||||||
/** Allowed file types */
|
/** Allowed file types */
|
||||||
allowedFileTypes?: string[]
|
allowedFileTypes?: string[]
|
||||||
/** Allowed file size */
|
/** Allowed file size */
|
||||||
allowedFileSize?: number
|
allowedFileSize?: number
|
||||||
imgClass?: string
|
|
||||||
loading?: boolean
|
|
||||||
}>()
|
|
||||||
|
|
||||||
|
imgClass?: string
|
||||||
|
|
||||||
|
loading?: boolean
|
||||||
|
}>(), {
|
||||||
|
allowedFileTypes: () => ['image/jpeg', 'image/png'],
|
||||||
|
allowedFileSize: 1024 * 1024 * 5, // 5 MB
|
||||||
|
})
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
(event: 'pick', value: FileWithHandle): void
|
(event: 'pick', value: FileWithHandle): void
|
||||||
(event: 'error', code: number, message: string): void
|
(event: 'error', code: number, message: string): void
|
||||||
|
|
@ -26,7 +26,7 @@ const file = defineModel<FileWithHandle | null>()
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
|
||||||
const defaultImage = computed(() => original || '')
|
const defaultImage = computed(() => props.original || '')
|
||||||
/** Preview of selected images */
|
/** Preview of selected images */
|
||||||
const previewImage = ref('')
|
const previewImage = ref('')
|
||||||
/** The current images on display */
|
/** The current images on display */
|
||||||
|
|
@ -37,14 +37,14 @@ async function pickImage() {
|
||||||
return
|
return
|
||||||
const image = await fileOpen({
|
const image = await fileOpen({
|
||||||
description: 'Image',
|
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'))
|
emit('error', 1, t('error.unsupported_file_format'))
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
else if (image.size > allowedFileSize) {
|
else if (image.size > props.allowedFileSize) {
|
||||||
emit('error', 2, t('error.file_size_cannot_exceed_n_mb', [5]))
|
emit('error', 2, t('error.file_size_cannot_exceed_n_mb', [5]))
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
const {
|
const {
|
||||||
zIndex = 100,
|
zIndex = 100,
|
||||||
background = 'transparent',
|
background = 'transparent',
|
||||||
} = defineProps<{
|
} = $defineProps<{
|
||||||
zIndex?: number
|
zIndex?: number
|
||||||
background?: string
|
background?: string
|
||||||
}>()
|
}>()
|
||||||
|
|
@ -1,15 +1,15 @@
|
||||||
<script setup lang="ts" generic="T, O, U = T">
|
<script setup lang="ts" generic="T, O, U = T">
|
||||||
import type { mastodon } from 'masto'
|
|
||||||
// @ts-expect-error missing types
|
// @ts-expect-error missing types
|
||||||
import { DynamicScroller } from 'vue-virtual-scroller'
|
import { DynamicScroller } from 'vue-virtual-scroller'
|
||||||
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
|
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
|
||||||
|
import type { mastodon } from 'masto'
|
||||||
|
|
||||||
const {
|
const {
|
||||||
paginator,
|
paginator,
|
||||||
keyProp = 'id',
|
|
||||||
virtualScroller = false,
|
|
||||||
stream,
|
stream,
|
||||||
eventType,
|
eventType,
|
||||||
|
keyProp = 'id',
|
||||||
|
virtualScroller = false,
|
||||||
preprocess,
|
preprocess,
|
||||||
endMessage = true,
|
endMessage = true,
|
||||||
} = defineProps<{
|
} = defineProps<{
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<script setup lang="ts">
|
<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[]
|
options: CommonRouteTabOption[]
|
||||||
moreOptions?: CommonRouteTabMoreOption
|
moreOptions?: CommonRouteTabMoreOption
|
||||||
command?: boolean
|
command?: boolean
|
||||||
|
|
@ -14,11 +14,11 @@ const router = useRouter()
|
||||||
|
|
||||||
useCommands(() => command
|
useCommands(() => command
|
||||||
? options.map(tab => ({
|
? options.map(tab => ({
|
||||||
scope: 'Tabs',
|
scope: 'Tabs',
|
||||||
name: tab.display,
|
name: tab.display,
|
||||||
icon: tab.icon ?? 'i-ri:file-list-2-line',
|
icon: tab.icon ?? 'i-ri:file-list-2-line',
|
||||||
onActivate: () => router.replace(tab.to),
|
onActivate: () => router.replace(tab.to),
|
||||||
}))
|
}))
|
||||||
: [])
|
: [])
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const { as = 'div', active } = defineProps<{
|
const { as = 'div', active } = defineProps<{
|
||||||
as?: string
|
as: any
|
||||||
active: boolean
|
active: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
|
|
@ -25,13 +25,13 @@ function toValidName(option: string) {
|
||||||
|
|
||||||
useCommands(() => command
|
useCommands(() => command
|
||||||
? tabs.value.map(tab => ({
|
? tabs.value.map(tab => ({
|
||||||
scope: 'Tabs',
|
scope: 'Tabs',
|
||||||
|
|
||||||
name: tab.display,
|
name: tab.display,
|
||||||
icon: tab.icon ?? 'i-ri:file-list-2-line',
|
icon: tab.icon ?? 'i-ri:file-list-2-line',
|
||||||
|
|
||||||
onActivate: () => modelValue.value = tab.name,
|
onActivate: () => modelValue.value = tab.name,
|
||||||
}))
|
}))
|
||||||
: [])
|
: [])
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -3,16 +3,16 @@ defineOptions({
|
||||||
inheritAttrs: false,
|
inheritAttrs: false,
|
||||||
})
|
})
|
||||||
|
|
||||||
const { count } = defineProps<{
|
const props = defineProps<{
|
||||||
count: number
|
count: number
|
||||||
keypath: string
|
keypath: string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const { formatHumanReadableNumber, formatNumber, forSR } = useHumanReadableNumber()
|
const { formatHumanReadableNumber, formatNumber, forSR } = useHumanReadableNumber()
|
||||||
|
|
||||||
const useSR = computed(() => forSR(count))
|
const useSR = computed(() => forSR(props.count))
|
||||||
const rawNumber = computed(() => formatNumber(count))
|
const rawNumber = computed(() => formatNumber(props.count))
|
||||||
const humanReadableNumber = computed(() => formatHumanReadableNumber(count))
|
const humanReadableNumber = computed(() => formatHumanReadableNumber(props.count))
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -1,23 +1,16 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const {
|
const props = withDefaults(defineProps<{
|
||||||
is = 'div',
|
|
||||||
text,
|
|
||||||
description,
|
|
||||||
icon,
|
|
||||||
command,
|
|
||||||
} = defineProps<{
|
|
||||||
is?: string
|
is?: string
|
||||||
text?: string
|
text?: string
|
||||||
description?: string
|
description?: string
|
||||||
icon?: string
|
icon?: string
|
||||||
checked?: boolean
|
checked?: boolean
|
||||||
command?: boolean
|
command?: boolean
|
||||||
}>()
|
}>(), {
|
||||||
|
is: 'div',
|
||||||
|
})
|
||||||
const emit = defineEmits(['click'])
|
const emit = defineEmits(['click'])
|
||||||
|
|
||||||
const type = computed(() => is === 'button' ? 'button' : null)
|
|
||||||
|
|
||||||
const { hide } = useDropdownContext() || {}
|
const { hide } = useDropdownContext() || {}
|
||||||
|
|
||||||
const el = ref<HTMLDivElement>()
|
const el = ref<HTMLDivElement>()
|
||||||
|
|
@ -31,11 +24,11 @@ useCommand({
|
||||||
scope: 'Actions',
|
scope: 'Actions',
|
||||||
|
|
||||||
order: -1,
|
order: -1,
|
||||||
visible: () => command && text,
|
visible: () => props.command && props.text,
|
||||||
|
|
||||||
name: () => text!,
|
name: () => props.text!,
|
||||||
icon: () => icon ?? 'i-ri:question-line',
|
icon: () => props.icon ?? 'i-ri:question-line',
|
||||||
description: () => description,
|
description: () => props.description,
|
||||||
|
|
||||||
onActivate() {
|
onActivate() {
|
||||||
const clickEvent = new MouseEvent('click', {
|
const clickEvent = new MouseEvent('click', {
|
||||||
|
|
@ -53,7 +46,6 @@ useCommand({
|
||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
:is="is"
|
:is="is"
|
||||||
ref="el"
|
ref="el"
|
||||||
:type="type"
|
|
||||||
w-full
|
w-full
|
||||||
flex gap-3 items-center cursor-pointer px4 py3
|
flex gap-3 items-center cursor-pointer px4 py3
|
||||||
select-none
|
select-none
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const { code, lang } = defineProps<{
|
const props = defineProps<{
|
||||||
code: string
|
code: string
|
||||||
lang?: string
|
lang?: string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const raw = computed(() => decodeURIComponent(code).replace(/'/g, '\''))
|
const raw = computed(() => decodeURIComponent(props.code).replace(/'/g, '\''))
|
||||||
|
|
||||||
const langMap: Record<string, string> = {
|
const langMap: Record<string, string> = {
|
||||||
js: 'javascript',
|
js: 'javascript',
|
||||||
|
|
@ -13,7 +13,7 @@ const langMap: Record<string, string> = {
|
||||||
}
|
}
|
||||||
|
|
||||||
const highlighted = computed(() => {
|
const highlighted = computed(() => {
|
||||||
return lang ? highlightCode(raw.value, (langMap[lang] || lang) as any) : raw
|
return props.lang ? highlightCode(raw.value, (langMap[props.lang] || props.lang) as any) : raw
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { mastodon } from 'masto'
|
import type { mastodon } from 'masto'
|
||||||
|
|
||||||
defineProps<{
|
const { paginator } = defineProps<{
|
||||||
paginator: mastodon.Paginator<mastodon.v1.Conversation[], mastodon.DefaultPaginationParams>
|
paginator: mastodon.Paginator<mastodon.v1.Conversation[], mastodon.DefaultPaginationParams>
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const { alt, dataEmojiId } = defineProps<{
|
const { as, alt, dataEmojiId } = defineProps<{
|
||||||
as: string
|
as: string
|
||||||
alt?: string
|
alt?: string
|
||||||
dataEmojiId?: string
|
dataEmojiId?: string
|
||||||
|
|
@ -44,7 +44,6 @@ async function edit() {
|
||||||
<button
|
<button
|
||||||
text-sm p2 border-1 transition-colors
|
text-sm p2 border-1 transition-colors
|
||||||
border-dark
|
border-dark
|
||||||
bg-base
|
|
||||||
btn-action-icon
|
btn-action-icon
|
||||||
@click="edit"
|
@click="edit"
|
||||||
>
|
>
|
||||||
|
|
@ -35,16 +35,15 @@ const containerClass = computed(() => {
|
||||||
'backdrop-blur': !getPreferences(userSettings, 'optimizeForLowPerformanceDevice'),
|
'backdrop-blur': !getPreferences(userSettings, 'optimizeForLowPerformanceDevice'),
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<div flex justify-between gap-2 min-h-53px px5 py1 :class="{ 'xl:hidden': $route.name !== 'tag' }" class="native:xl:flex" border="b base">
|
<div flex justify-between px5 py2 :class="{ 'xl:hidden': $route.name !== 'tag' }" class="native:xl:flex" border="b base">
|
||||||
<div flex gap-2 items-center :overflow-hidden="!noOverflowHidden ? '' : false" w-full>
|
<div flex gap-3 items-center :overflow-hidden="!noOverflowHidden ? '' : false" py2 w-full>
|
||||||
<button
|
<NuxtLink
|
||||||
v-if="backOnSmallScreen || back"
|
v-if="backOnSmallScreen || back" flex="~ gap1" items-center btn-text p-0 xl:hidden
|
||||||
btn-text flex items-center ms="-3" p-3 xl:hidden
|
|
||||||
:aria-label="$t('nav.back')"
|
:aria-label="$t('nav.back')"
|
||||||
@click="$router.go(-1)"
|
@click="$router.go(-1)"
|
||||||
>
|
>
|
||||||
<div text-lg i-ri:arrow-left-line class="rtl-flip" />
|
<div i-ri:arrow-left-line class="rtl-flip" />
|
||||||
</button>
|
</NuxtLink>
|
||||||
<div :truncate="!noOverflowHidden ? '' : false" flex w-full data-tauri-drag-region class="native-mac:justify-start native-mac:text-center">
|
<div :truncate="!noOverflowHidden ? '' : false" flex w-full data-tauri-drag-region class="native-mac:justify-start native-mac:text-center">
|
||||||
<slot name="title" />
|
<slot name="title" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -14,8 +14,8 @@ watchEffect(() => {
|
||||||
|
|
||||||
const duration
|
const duration
|
||||||
= days.value * 24 * 60 * 60
|
= days.value * 24 * 60 * 60
|
||||||
+ hours.value * 60 * 60
|
+ hours.value * 60 * 60
|
||||||
+ minutes.value * 60
|
+ minutes.value * 60
|
||||||
|
|
||||||
if (duration <= 0) {
|
if (duration <= 0) {
|
||||||
isValid.value = false
|
isValid.value = false
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { ConfirmDialogChoice, ConfirmDialogOptions } from '#shared/types'
|
import type { ConfirmDialogChoice, ConfirmDialogOptions } from '~/types'
|
||||||
|
|
||||||
const { extraOptionType } = defineProps<ConfirmDialogOptions>()
|
const props = defineProps<ConfirmDialogOptions>()
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
(evt: 'choice', choice: ConfirmDialogChoice): void
|
(evt: 'choice', choice: ConfirmDialogChoice): void
|
||||||
|
|
@ -11,7 +11,7 @@ const hasDuration = ref(false)
|
||||||
const isValidDuration = ref(true)
|
const isValidDuration = ref(true)
|
||||||
const duration = ref(60 * 60) // default to 1 hour
|
const duration = ref(60 * 60) // default to 1 hour
|
||||||
const shouldMuteNotifications = ref(true)
|
const shouldMuteNotifications = ref(true)
|
||||||
const isMute = computed(() => extraOptionType === 'mute')
|
const isMute = computed(() => props.extraOptionType === 'mute')
|
||||||
|
|
||||||
function handleChoice(choice: ConfirmDialogChoice['choice']) {
|
function handleChoice(choice: ConfirmDialogChoice['choice']) {
|
||||||
const dialogChoice = {
|
const dialogChoice = {
|
||||||
|
|
@ -40,7 +40,7 @@ function handleChoice(choice: ConfirmDialogChoice['choice']) {
|
||||||
</div>
|
</div>
|
||||||
<div v-if="isMute" flex-col flex gap-4>
|
<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" />
|
<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" />
|
<DurationPicker v-if="hasDuration" v-model="duration" v-model:is-valid="isValidDuration" />
|
||||||
<CommonCheckbox v-model="shouldMuteNotifications" :label="$t('confirm.mute_account.notifications')" prepend-checkbox checked-icon-color="text-primary" />
|
<CommonCheckbox v-model="shouldMuteNotifications" :label="$t('confirm.mute_account.notifications')" prepend-checkbox checked-icon-color="text-primary" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { ConfirmDialogChoice } from '#shared/types'
|
|
||||||
import type { mastodon } from 'masto'
|
import type { mastodon } from 'masto'
|
||||||
|
import type { ConfirmDialogChoice } from '~/types'
|
||||||
import {
|
import {
|
||||||
isCommandPanelOpen,
|
isCommandPanelOpen,
|
||||||
isConfirmDialogOpen,
|
isConfirmDialogOpen,
|
||||||
|
|
@ -1,27 +1,51 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
|
import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
|
||||||
|
|
||||||
|
export interface Props {
|
||||||
|
/**
|
||||||
|
* level of depth
|
||||||
|
*
|
||||||
|
* @default 100
|
||||||
|
*/
|
||||||
|
zIndex?: number
|
||||||
|
|
||||||
|
/**
|
||||||
|
* whether to allow close dialog by clicking mask layer
|
||||||
|
*
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
closeByMask?: boolean
|
||||||
|
|
||||||
|
/**
|
||||||
|
* use v-if, destroy all the internal elements after closed
|
||||||
|
*
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
useVIf?: boolean
|
||||||
|
|
||||||
|
/**
|
||||||
|
* keep the dialog opened even when in other views
|
||||||
|
*
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
keepAlive?: boolean
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The aria-labelledby id for the dialog.
|
||||||
|
*/
|
||||||
|
dialogLabelledBy?: string
|
||||||
|
}
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
inheritAttrs: false,
|
inheritAttrs: false,
|
||||||
})
|
})
|
||||||
|
|
||||||
const {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
zIndex = 100,
|
zIndex: 100,
|
||||||
closeByMask = true,
|
closeByMask: true,
|
||||||
useVIf = true,
|
useVIf: true,
|
||||||
keepAlive = false,
|
keepAlive: false,
|
||||||
} = defineProps<{
|
})
|
||||||
// level of depth
|
|
||||||
zIndex?: number
|
|
||||||
// whether to allow close dialog by clicking mask layer
|
|
||||||
closeByMask?: boolean
|
|
||||||
// use v-if, destroy all the internal elements after closed
|
|
||||||
useVIf?: boolean
|
|
||||||
// keep the dialog opened even when in other views
|
|
||||||
keepAlive?: boolean
|
|
||||||
// The aria-labelledby id for the dialog.
|
|
||||||
dialogLabelledBy?: string
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
/** v-model dialog visibility */
|
/** v-model dialog visibility */
|
||||||
|
|
@ -61,7 +85,7 @@ function close() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function clickMask() {
|
function clickMask() {
|
||||||
if (closeByMask)
|
if (props.closeByMask)
|
||||||
close()
|
close()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -73,7 +97,7 @@ watch(visible, (value) => {
|
||||||
|
|
||||||
const notInCurrentPage = computed(() => deactivated.value || routePath.value !== route.path)
|
const notInCurrentPage = computed(() => deactivated.value || routePath.value !== route.path)
|
||||||
watch(notInCurrentPage, (value) => {
|
watch(notInCurrentPage, (value) => {
|
||||||
if (keepAlive)
|
if (props.keepAlive)
|
||||||
return
|
return
|
||||||
if (value)
|
if (value)
|
||||||
close()
|
close()
|
||||||
|
|
@ -82,7 +106,7 @@ watch(notInCurrentPage, (value) => {
|
||||||
// controls the state of v-if.
|
// controls the state of v-if.
|
||||||
// when useVIf is toggled, v-if has the same state as modelValue, otherwise v-if is true
|
// when useVIf is toggled, v-if has the same state as modelValue, otherwise v-if is true
|
||||||
const isVIf = computed(() => {
|
const isVIf = computed(() => {
|
||||||
return useVIf
|
return props.useVIf
|
||||||
? visible.value
|
? visible.value
|
||||||
: true
|
: true
|
||||||
})
|
})
|
||||||
|
|
@ -90,7 +114,7 @@ const isVIf = computed(() => {
|
||||||
// controls the state of v-show.
|
// controls the state of v-show.
|
||||||
// when useVIf is toggled, v-show is true, otherwise it has the same state as modelValue
|
// when useVIf is toggled, v-show is true, otherwise it has the same state as modelValue
|
||||||
const isVShow = computed(() => {
|
const isVShow = computed(() => {
|
||||||
return !useVIf
|
return !props.useVIf
|
||||||
? visible.value
|
? visible.value
|
||||||
: true
|
: true
|
||||||
})
|
})
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { ErrorDialogData } from '#shared/types'
|
import type { ErrorDialogData } from '~/types'
|
||||||
|
|
||||||
defineProps<ErrorDialogData>()
|
defineProps<ErrorDialogData>()
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { Vector2 } from '@vueuse/gesture'
|
import type { Vector2 } from '@vueuse/gesture'
|
||||||
import type { mastodon } from 'masto'
|
|
||||||
import { useGesture } from '@vueuse/gesture'
|
import { useGesture } from '@vueuse/gesture'
|
||||||
import { useReducedMotion } from '@vueuse/motion'
|
import { useReducedMotion } from '@vueuse/motion'
|
||||||
|
import type { mastodon } from 'masto'
|
||||||
|
|
||||||
const { media = [] } = defineProps<{
|
const { media = [] } = defineProps<{
|
||||||
media?: mastodon.v1.MediaAttachment[]
|
media?: mastodon.v1.MediaAttachment[]
|
||||||
|
|
@ -2,24 +2,10 @@
|
||||||
import type { Component } from 'vue'
|
import type { Component } from 'vue'
|
||||||
import type { NavButtonName } from '../../composables/settings'
|
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'
|
import { STORAGE_KEY_BOTTOM_NAV_BUTTONS } from '~/constants'
|
||||||
|
|
||||||
|
import { NavButtonExplore, NavButtonFederated, NavButtonHome, NavButtonLocal, NavButtonMention, NavButtonMoreMenu, NavButtonNotification, NavButtonSearch } from '#components'
|
||||||
|
|
||||||
interface NavButton {
|
interface NavButton {
|
||||||
name: string
|
name: string
|
||||||
component: Component
|
component: Component
|
||||||
|
|
@ -30,14 +16,9 @@ const navButtons: NavButton[] = [
|
||||||
{ name: 'search', component: NavButtonSearch },
|
{ name: 'search', component: NavButtonSearch },
|
||||||
{ name: 'notification', component: NavButtonNotification },
|
{ name: 'notification', component: NavButtonNotification },
|
||||||
{ name: 'mention', component: NavButtonMention },
|
{ name: 'mention', component: NavButtonMention },
|
||||||
{ name: 'favorite', component: NavButtonFavorite },
|
|
||||||
{ name: 'bookmark', component: NavButtonBookmark },
|
|
||||||
{ name: 'compose', component: NavButtonCompose },
|
|
||||||
{ name: 'explore', component: NavButtonExplore },
|
{ name: 'explore', component: NavButtonExplore },
|
||||||
{ name: 'local', component: NavButtonLocal },
|
{ name: 'local', component: NavButtonLocal },
|
||||||
{ name: 'federated', component: NavButtonFederated },
|
{ name: 'federated', component: NavButtonFederated },
|
||||||
{ name: 'list', component: NavButtonList },
|
|
||||||
{ name: 'hashtag', component: NavButtonHashtag },
|
|
||||||
{ name: 'moreMenu', component: NavButtonMoreMenu },
|
{ name: 'moreMenu', component: NavButtonMoreMenu },
|
||||||
]
|
]
|
||||||
|
|
||||||
54
components/nav/NavLogo.vue
Normal file
54
components/nav/NavLogo.vue
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<mask
|
||||||
|
id="a"
|
||||||
|
width="240"
|
||||||
|
height="234"
|
||||||
|
x="4"
|
||||||
|
y="1"
|
||||||
|
maskUnits="userSpaceOnUse"
|
||||||
|
style="mask-type:alpha"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
id="path19"
|
||||||
|
fill="#D9D9D9"
|
||||||
|
d="M244 123c0 64.617-38.383 112-103 112-64.617 0-103-30.883-103-95.5C38 111.194-8.729 36.236 8 16 29.46-9.959 88.689 6 125 6c64.617 0 119 52.383 119 117Z"
|
||||||
|
/>
|
||||||
|
</mask>
|
||||||
|
<g
|
||||||
|
id="g28"
|
||||||
|
mask="url(#a)"
|
||||||
|
transform="matrix(0.90923731,0,0,1.0049564,13.520015,-3.1040835)"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
id="path22"
|
||||||
|
class="body"
|
||||||
|
d="m 116.94,88.1 c -13.344,1.552 -20.436,-2.019 -24.706,10.71 0,0 14.336,21.655 52.54,21.112 -2.135,8.848 -1.144,15.368 -1.144,23.207 0,26.079 -20.589,48.821 -65.961,48.821 -23.03,0 -51.015,4.191 -72.367,15.911 -15.175,8.305 -27.048,20.336 -32.302,37.023 l 5.956,8.461 11.4,0.155 v 47.889 l -13.91,21.966 3.998,63.645 H -6.364 L -5.22,335.773 C 1.338,331.892 16.36,321.802 29.171,306.279 46.557,285.4 59.902,255.052 44.193,217.486 l 11.744,-5.045 c 12.887,30.814 8.388,57.514 -2.898,79.013 21.58,-0.698 40.11,-2.095 55.819,-4.734 l -3.584,-43.698 12.659,-1.087 L 129.98,387 h 13.116 l 2.212,-94.459 c 10.447,-4.502 34.239,-21.034 45.372,-78.47 1.372,-6.986 2.135,-12.885 2.516,-17.93 1.754,-12.806 2.745,-27.243 3.051,-43.698 l -18.683,-5.976 h 57.42 l 5.567,-12.807 c -5.414,0.233 -11.896,-2.639 -11.896,-2.639 l 1.297,-6.209 H 242 L 176.801,90.428 c -7.244,2.794 -14.87,6.442 -20.208,10.866 -4.27,-3.105 -19.063,-12.807 -39.653,-13.195 z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
id="path24"
|
||||||
|
class="wood"
|
||||||
|
d="M 6.217,24.493 18.494,21 c 5.948,21.577 13.345,33.375 22.648,39.352 8.388,5.099 19.75,5.239 31.799,4.579 C 69.433,63.767 66.154,62.137 63.104,59.886 56.317,54.841 50.522,46.458 46.175,31.246 l 12.201,-3.649 c 3.279,11.488 7.092,18.085 12.201,21.888 5.11,3.726 11.286,4.657 18.606,5.433 13.726,1.553 30.884,2.174 52.312,12.264 2.898,1.086 5.872,2.483 8.769,4.036 -0.381,-0.776 -0.762,-1.553 -1.296,-2.406 -3.66,-5.822 -10.828,-11.953 -24.097,-16.92 l 4.27,-12.109 c 21.581,7.917 30.121,19.171 33.553,28.097 3.965,10.168 1.525,18.124 1.525,18.124 -3.05,1.009 -6.1,2.406 -9.608,3.492 -6.634,-4.579 -12.887,-8.033 -18.835,-10.75 C 113.814,70.442 92.31,76.108 73.246,77.893 58.91,79.213 45.794,78.591 34.432,71.295 23.222,64.155 13.385,50.495 6.217,24.493 Z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
id="path26"
|
||||||
|
class="wood"
|
||||||
|
d="M 90.098,45.294 C 87.582,39.55 86.057,32.487 86.743,23.794 l 12.659,0.932 c -0.763,10.555 2.897,17.696 7.015,22.353 -5.338,-0.931 -10.447,-1.04 -16.319,-1.785 z m 80.069,-1.32 8.312,-9.702 c 21.58,19.094 8.159,46.415 8.159,46.415 l -11.819,-1.32 c -0.382,-6.24 -1.144,-17.836 -6.635,-24.371 3.584,1.84 6.635,3.865 9.99,6.908 0,-5.666 -1.754,-12.341 -8.007,-17.93 z"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
svg path.wood {
|
||||||
|
fill: var(--c-primary);
|
||||||
|
}
|
||||||
|
svg path.body {
|
||||||
|
fill: var(--c-text-secondary);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE } from '~/constants'
|
import { STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE } from '~/constants'
|
||||||
|
|
||||||
defineProps<{
|
const { command } = defineProps<{
|
||||||
command?: boolean
|
command?: boolean
|
||||||
}>()
|
}>()
|
||||||
const { notifications } = useNotifications()
|
const { notifications } = useNotifications()
|
||||||
|
|
@ -1,11 +1,13 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const { text, icon, to, userOnly = false, command } = defineProps<{
|
const props = withDefaults(defineProps<{
|
||||||
text?: string
|
text?: string
|
||||||
icon: string
|
icon: string
|
||||||
to: string | Record<string, string>
|
to: string | Record<string, string>
|
||||||
userOnly?: boolean
|
userOnly?: boolean
|
||||||
command?: boolean
|
command?: boolean
|
||||||
}>()
|
}>(), {
|
||||||
|
userOnly: false,
|
||||||
|
})
|
||||||
|
|
||||||
defineSlots<{
|
defineSlots<{
|
||||||
icon: (props: object) => void
|
icon: (props: object) => void
|
||||||
|
|
@ -17,12 +19,12 @@ const router = useRouter()
|
||||||
useCommand({
|
useCommand({
|
||||||
scope: 'Navigation',
|
scope: 'Navigation',
|
||||||
|
|
||||||
name: () => text ?? (typeof to === 'string' ? to as string : to.name),
|
name: () => props.text ?? (typeof props.to === 'string' ? props.to as string : props.to.name),
|
||||||
icon: () => icon,
|
icon: () => props.icon,
|
||||||
visible: () => command,
|
visible: () => props.command,
|
||||||
|
|
||||||
onActivate() {
|
onActivate() {
|
||||||
router.push(to)
|
router.push(props.to)
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
@ -37,8 +39,8 @@ onHydrated(async () => {
|
||||||
|
|
||||||
// Optimize rendering for the common case of being logged in, only show visual feedback for disabled user-only items
|
// Optimize rendering for the common case of being logged in, only show visual feedback for disabled user-only items
|
||||||
// when we know there is no user.
|
// when we know there is no user.
|
||||||
const noUserDisable = computed(() => !isHydrated.value || (userOnly && !currentUser.value))
|
const noUserDisable = computed(() => !isHydrated.value || (props.userOnly && !currentUser.value))
|
||||||
const noUserVisual = computed(() => isHydrated.value && userOnly && !currentUser.value)
|
const noUserVisual = computed(() => isHydrated.value && props.userOnly && !currentUser.value)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -29,21 +29,21 @@ router.afterEach(() => {
|
||||||
@click.prevent="onClickLogo"
|
@click.prevent="onClickLogo"
|
||||||
>
|
>
|
||||||
<NavLogo shrink-0 aspect="1/1" sm:h-8 xl:h-10 class="rtl-flip" />
|
<NavLogo shrink-0 aspect="1/1" sm:h-8 xl:h-10 class="rtl-flip" />
|
||||||
<div v-show="isHydrated" hidden xl:block>
|
<div v-show="isHydrated" hidden xl:block text-secondary>
|
||||||
<span pr-1>{{ $t('app_name') }}</span>
|
{{ $t('app_name') }} <sup text-sm italic mt-1>{{ env === 'release' ? 'alpha' : env }}</sup>
|
||||||
<sup text-sm italic mt-1>{{ env === 'release' ? 'alpha' : env }}</sup>
|
|
||||||
</div>
|
</div>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<div hidden xl:flex items-center me-6 mt-2 gap-1>
|
<div
|
||||||
<CommonTooltip :content="$t('nav.back')" :distance="0">
|
hidden xl:flex items-center me-8 mt-2 gap-1
|
||||||
<button
|
>
|
||||||
type="button"
|
<CommonTooltip :content="$t('nav.back')">
|
||||||
|
<NuxtLink
|
||||||
:aria-label="$t('nav.back')"
|
:aria-label="$t('nav.back')"
|
||||||
btn-text p-3 :class="{ 'pointer-events-none op0': !back || back === '/', 'xl:flex': $route.name !== 'tag' }"
|
:class="{ 'pointer-events-none op0': !back || back === '/', 'xl:flex': $route.name !== 'tag' }"
|
||||||
@click="$router.go(-1)"
|
@click="$router.go(-1)"
|
||||||
>
|
>
|
||||||
<div text-xl i-ri:arrow-left-line class="rtl-flip" />
|
<div text-xl i-ri:arrow-left-line class="rtl-flip" btn-text />
|
||||||
</button>
|
</NuxtLink>
|
||||||
</CommonTooltip>
|
</CommonTooltip>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue