refactor: migrate to nuxt compatibilityVersion: 4 (#3298)
This commit is contained in:
Daniel Roe
GitHub
parent
46e4433e1c
commit
a3fbc056a9
342 changed files with 1200 additions and 2932 deletions
34
app/components/account/AccountAvatar.vue
Normal file
34
app/components/account/AccountAvatar.vue
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const { account } = defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
square?: boolean
|
||||
}>()
|
||||
|
||||
const loaded = ref(false)
|
||||
const error = ref(false)
|
||||
|
||||
const preferredMotion = usePreferredReducedMotion()
|
||||
const accountAvatarSrc = computed(() => {
|
||||
return preferredMotion.value === 'reduce' ? (account?.avatarStatic ?? account.avatar) : account.avatar
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<img
|
||||
:key="account.avatar"
|
||||
width="400"
|
||||
height="400"
|
||||
select-none
|
||||
:src="(error || !loaded) ? 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' : accountAvatarSrc"
|
||||
:alt="$t('account.avatar_description', [account.username])"
|
||||
loading="lazy"
|
||||
class="account-avatar object-cover"
|
||||
:class="(loaded ? 'bg-base' : 'bg-gray:10') + (square ? ' ' : ' rounded-full')"
|
||||
:style="{ 'clip-path': square ? `url(#avatar-mask)` : 'none' }"
|
||||
v-bind="$attrs"
|
||||
@load="loaded = true"
|
||||
@error="error = true"
|
||||
>
|
||||
</template>
|
||||
17
app/components/account/AccountBigAvatar.vue
Normal file
17
app/components/account/AccountBigAvatar.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
// Avatar with a background base achieving a 3px border to be used in status cards
|
||||
// The border is used for Avatar on Avatar for reblogs and connecting replies
|
||||
|
||||
defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
square?: boolean
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :key="account.avatar" v-bind="$attrs" :style="{ 'clip-path': square ? `url(#avatar-mask)` : 'none' }" :class="{ 'rounded-full': !square }" bg-base w-54px h-54px flex items-center justify-center>
|
||||
<AccountAvatar :account="account" w-48px h-48px :square="square" />
|
||||
</div>
|
||||
</template>
|
||||
55
app/components/account/AccountBigCard.vue
Normal file
55
app/components/account/AccountBigCard.vue
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const { account, as = 'div' } = defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
as?: string
|
||||
}>()
|
||||
|
||||
cacheAccount(account)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="as" block focus:outline-none focus-visible:ring="2 primary" v-bind="$attrs">
|
||||
<!-- Banner -->
|
||||
<div px2 pt2>
|
||||
<div rounded of-hidden bg="gray-500/20" aspect="3.19">
|
||||
<img h-full w-full object-cover :src="account.header" :alt="$t('account.profile_description', [account.username])">
|
||||
</div>
|
||||
</div>
|
||||
<div px-4 pb-4 space-y-2>
|
||||
<!-- User info -->
|
||||
<div flex sm:flex-row flex-col flex-gap-2>
|
||||
<div flex items-center justify-between>
|
||||
<div w-17 h-17 rounded-full border-4 border-bg-base z-2 mt--2 ms--1>
|
||||
<AccountAvatar :account="account" />
|
||||
</div>
|
||||
<NuxtLink block sm:hidden href="javascript:;" @click.stop>
|
||||
<AccountFollowButton :account="account" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div sm:mt-2>
|
||||
<AccountDisplayName :account="account" font-bold text-lg line-clamp-1 ws-pre-wrap break-all />
|
||||
<AccountHandle text-sm :account="account" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Note -->
|
||||
<div v-if="account.note" max-h-100 overflow-y-auto>
|
||||
<ContentRich
|
||||
:content="account.note" :emojis="account.emojis"
|
||||
/>
|
||||
</div>
|
||||
<!-- Follow info -->
|
||||
<div flex justify-between items-center>
|
||||
<AccountPostsFollowers text-sm :account="account" />
|
||||
<NuxtLink sm:block hidden href="javascript:;" @click.stop>
|
||||
<AccountFollowButton :account="account" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</component>
|
||||
</template>
|
||||
30
app/components/account/AccountBigCardSkeleton.vue
Normal file
30
app/components/account/AccountBigCardSkeleton.vue
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- Banner -->
|
||||
<div px2 pt2>
|
||||
<div rounded of-hidden aspect="3.19" class="flex skeleton-loading-bg" />
|
||||
<div px-4 pb-4 flex="~ col gap-2">
|
||||
<!-- User info -->
|
||||
<div flex sm:flex-row flex-col flex-gap-2>
|
||||
<div flex items-center justify-between>
|
||||
<div w-17 h-17 rounded-full border-4 border-bg-base z-2 mt--2 ms--1 of-hidden bg-base>
|
||||
<div class="flex skeleton-loading-bg" w-full h-full />
|
||||
</div>
|
||||
<div block sm:hidden class="skeleton-loading-bg" h-8 w-30 rounded-full />
|
||||
</div>
|
||||
<div sm:mt-2 flex="~ col 1 gap-2">
|
||||
<div flex class="skeleton-loading-bg" h-5 w-20 rounded />
|
||||
<div flex class="skeleton-loading-bg" h-4 w-40 rounded />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Note -->
|
||||
<div flex class="skeleton-loading-bg" h-4 my3 w="3/5" rounded />
|
||||
<!-- Follow info -->
|
||||
<div flex justify-between items-center>
|
||||
<div flex class="skeleton-loading-bg" h-4 w="sm:1/2 full" rounded />
|
||||
<div sm:flex hidden class="skeleton-loading-bg" h-8 w-30 rounded-full />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
21
app/components/account/AccountBotIndicator.vue
Normal file
21
app/components/account/AccountBotIndicator.vue
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
showLabel?: boolean
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
flex="~ gap1" items-center
|
||||
:class="{ 'border border-base rounded-md px-1': showLabel }"
|
||||
text-secondary-light
|
||||
>
|
||||
<slot name="prepend" />
|
||||
<CommonTooltip :content="$t('account.bot')" :disabled="showLabel">
|
||||
<div i-mdi:robot-outline />
|
||||
</CommonTooltip>
|
||||
<div v-if="showLabel">
|
||||
{{ $t('account.bot') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
28
app/components/account/AccountCard.vue
Normal file
28
app/components/account/AccountCard.vue
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const { account } = defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
hoverCard?: boolean
|
||||
relationshipContext?: 'followedBy' | 'following'
|
||||
}>()
|
||||
|
||||
cacheAccount(account)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div flex justify-between hover:bg-active transition-100>
|
||||
<AccountInfo
|
||||
:account="account" hover p1 as="router-link"
|
||||
:hover-card="hoverCard"
|
||||
shrink
|
||||
overflow-hidden
|
||||
:to="getAccountRoute(account)"
|
||||
/>
|
||||
<slot>
|
||||
<div h-full p1 shrink-0>
|
||||
<AccountFollowButton :account="account" :context="relationshipContext" />
|
||||
</div>
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
17
app/components/account/AccountDisplayName.vue
Normal file
17
app/components/account/AccountDisplayName.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const { hideEmojis = false } = defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
hideEmojis?: boolean
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContentRich
|
||||
:content="getDisplayName(account, { rich: true })"
|
||||
:emojis="account.emojis"
|
||||
:hide-emojis="hideEmojis"
|
||||
:markdown="false"
|
||||
/>
|
||||
</template>
|
||||
114
app/components/account/AccountFollowButton.vue
Normal file
114
app/components/account/AccountFollowButton.vue
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
import { toggleFollowAccount, useRelationship } from '~/composables/masto/relationship'
|
||||
|
||||
const { account, context, command, ...props } = defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
relationship?: mastodon.v1.Relationship
|
||||
context?: 'followedBy' | 'following'
|
||||
command?: boolean
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const isSelf = useSelfAccount(() => account)
|
||||
const enable = computed(() => !isSelf.value && currentUser.value)
|
||||
const relationship = computed(() => props.relationship || useRelationship(account).value)
|
||||
const isLoading = computed(() => relationship.value === undefined)
|
||||
|
||||
const { client } = useMasto()
|
||||
|
||||
async function unblock() {
|
||||
relationship.value!.blocking = false
|
||||
try {
|
||||
const newRel = await client.value.v1.accounts.$select(account.id).unblock()
|
||||
Object.assign(relationship!, newRel)
|
||||
}
|
||||
catch (err) {
|
||||
console.error(err)
|
||||
// TODO error handling
|
||||
relationship.value!.blocking = true
|
||||
}
|
||||
}
|
||||
|
||||
async function unmute() {
|
||||
relationship.value!.muting = false
|
||||
try {
|
||||
const newRel = await client.value.v1.accounts.$select(account.id).unmute()
|
||||
Object.assign(relationship!, newRel)
|
||||
}
|
||||
catch (err) {
|
||||
console.error(err)
|
||||
// TODO error handling
|
||||
relationship.value!.muting = true
|
||||
}
|
||||
}
|
||||
|
||||
useCommand({
|
||||
scope: 'Actions',
|
||||
order: -2,
|
||||
visible: () => command && enable,
|
||||
name: () => `${relationship.value?.following ? t('account.unfollow') : t('account.follow')} ${getShortHandle(account)}`,
|
||||
icon: 'i-ri:star-line',
|
||||
onActivate: () => toggleFollowAccount(relationship.value!, account),
|
||||
})
|
||||
|
||||
const buttonStyle = computed(() => {
|
||||
if (relationship.value?.blocking)
|
||||
return 'text-inverted bg-red border-red'
|
||||
|
||||
if (relationship.value?.muting)
|
||||
return 'text-base bg-card border-base'
|
||||
|
||||
// If following, use a label style with a strong border for Mutuals
|
||||
if (relationship.value ? relationship.value.following : context === 'following')
|
||||
return `text-base ${relationship.value?.followedBy ? 'border-strong' : 'border-base'}`
|
||||
|
||||
// If loading, use a plain style
|
||||
if (isLoading.value)
|
||||
return 'text-base border-base'
|
||||
|
||||
// If not following, use a button style
|
||||
return 'text-inverted bg-primary border-primary'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
v-if="enable"
|
||||
gap-1 items-center group
|
||||
border-1
|
||||
rounded-full flex="~ gap2 center" font-500 min-w-30 h-fit px3 py1
|
||||
:class="buttonStyle"
|
||||
:hover="!relationship?.blocking && !relationship?.muting && relationship?.following ? 'border-red text-red' : 'bg-base border-primary text-primary'"
|
||||
@click="relationship?.blocking ? unblock() : relationship?.muting ? unmute() : toggleFollowAccount(relationship!, account)"
|
||||
>
|
||||
<template v-if="isLoading">
|
||||
<span i-svg-spinners-180-ring-with-bg />
|
||||
</template>
|
||||
<template v-else>
|
||||
<template v-if="relationship?.blocking">
|
||||
<span elk-group-hover="hidden">{{ $t('account.blocking') }}</span>
|
||||
<span hidden elk-group-hover="inline">{{ $t('account.unblock') }}</span>
|
||||
</template>
|
||||
<template v-if="relationship?.muting">
|
||||
<span elk-group-hover="hidden">{{ $t('account.muting') }}</span>
|
||||
<span hidden elk-group-hover="inline">{{ $t('account.unmute') }}</span>
|
||||
</template>
|
||||
<template v-else-if="relationship ? relationship.following : context === 'following'">
|
||||
<span elk-group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
|
||||
<span hidden elk-group-hover="inline">{{ $t('account.unfollow') }}</span>
|
||||
</template>
|
||||
<template v-else-if="relationship?.requested">
|
||||
<span elk-group-hover="hidden">{{ $t('account.follow_requested') }}</span>
|
||||
<span hidden elk-group-hover="inline">{{ $t('account.withdraw_follow_request') }}</span>
|
||||
</template>
|
||||
<template v-else-if="relationship ? relationship.followedBy : context === 'followedBy'">
|
||||
<span elk-group-hover="hidden">{{ $t('account.follows_you') }}</span>
|
||||
<span hidden elk-group-hover="inline">{{ account.locked ? $t('account.request_follow') : $t('account.follow_back') }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>{{ account.locked ? $t('account.request_follow') : $t('account.follow') }}</span>
|
||||
</template>
|
||||
</template>
|
||||
</button>
|
||||
</template>
|
||||
68
app/components/account/AccountFollowRequestButton.vue
Normal file
68
app/components/account/AccountFollowRequestButton.vue
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const { account, ...props } = defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
relationship?: mastodon.v1.Relationship
|
||||
}>()
|
||||
const relationship = computed(() => props.relationship || useRelationship(account).value)
|
||||
const { client } = useMasto()
|
||||
|
||||
async function authorizeFollowRequest() {
|
||||
relationship.value!.requestedBy = false
|
||||
relationship.value!.followedBy = true
|
||||
try {
|
||||
const newRel = await client.value.v1.followRequests.$select(account.id).authorize()
|
||||
Object.assign(relationship!, newRel)
|
||||
}
|
||||
catch (err) {
|
||||
console.error(err)
|
||||
relationship.value!.requestedBy = true
|
||||
relationship.value!.followedBy = false
|
||||
}
|
||||
}
|
||||
|
||||
async function rejectFollowRequest() {
|
||||
relationship.value!.requestedBy = false
|
||||
try {
|
||||
const newRel = await client.value.v1.followRequests.$select(account.id).reject()
|
||||
Object.assign(relationship!, newRel)
|
||||
}
|
||||
catch (err) {
|
||||
console.error(err)
|
||||
relationship.value!.requestedBy = true
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div flex gap-4>
|
||||
<template v-if="relationship?.requestedBy">
|
||||
<CommonTooltip :content="$t('account.authorize')">
|
||||
<button
|
||||
type="button"
|
||||
rounded-full text-sm p2 border-1
|
||||
hover:text-green transition-colors
|
||||
@click="authorizeFollowRequest"
|
||||
>
|
||||
<span block text-current i-ri:check-fill />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
<CommonTooltip :content="$t('account.reject')">
|
||||
<button
|
||||
type="button"
|
||||
rounded-full text-sm p2 border-1
|
||||
hover:text-red transition-colors
|
||||
@click="rejectFollowRequest"
|
||||
>
|
||||
<span block text-current i-ri:close-fill />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span text-secondary>
|
||||
{{ relationship?.followedBy ? $t('account.authorized') : $t('account.rejected') }}
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
17
app/components/account/AccountHandle.vue
Normal file
17
app/components/account/AccountHandle.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const { account } = defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
}>()
|
||||
|
||||
const serverName = computed(() => getServerName(account))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<p line-clamp-1 whitespace-pre-wrap break-all text-secondary-light leading-tight dir="ltr">
|
||||
<!-- fix: #274 only line-clamp-1 can be used here, using text-ellipsis is not valid -->
|
||||
<span text-secondary>{{ getShortHandle(account) }}</span>
|
||||
<span v-if="serverName" text-secondary-light>@{{ serverName }}</span>
|
||||
</p>
|
||||
</template>
|
||||
276
app/components/account/AccountHeader.vue
Normal file
276
app/components/account/AccountHeader.vue
Normal file
|
|
@ -0,0 +1,276 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const { account } = defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
command?: boolean
|
||||
}>()
|
||||
|
||||
const { client } = useMasto()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const createdAt = useFormattedDateTime(() => account.createdAt, {
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
|
||||
const relationship = useRelationship(account)
|
||||
|
||||
const namedFields = ref<mastodon.v1.AccountField[]>([])
|
||||
const iconFields = ref<mastodon.v1.AccountField[]>([])
|
||||
const isEditingPersonalNote = ref<boolean>(false)
|
||||
const hasHeader = computed(() => !account.header.endsWith('/original/missing.png'))
|
||||
const isCopied = ref<boolean>(false)
|
||||
|
||||
function getFieldIconTitle(fieldName: string) {
|
||||
return fieldName === 'Joined' ? t('account.joined') : fieldName
|
||||
}
|
||||
|
||||
function getNotificationIconTitle() {
|
||||
return relationship.value?.notifying ? t('account.notifications_on_post_disable', { username: `@${account.username}` }) : t('account.notifications_on_post_enable', { username: `@${account.username}` })
|
||||
}
|
||||
|
||||
function previewHeader() {
|
||||
openMediaPreview([{
|
||||
id: `${account.acct}:header`,
|
||||
type: 'image',
|
||||
previewUrl: account.header,
|
||||
description: t('account.profile_description', [account.username]),
|
||||
}])
|
||||
}
|
||||
|
||||
function previewAvatar() {
|
||||
openMediaPreview([{
|
||||
id: `${account.acct}:avatar`,
|
||||
type: 'image',
|
||||
previewUrl: account.avatar,
|
||||
description: t('account.avatar_description', [account.username]),
|
||||
}])
|
||||
}
|
||||
|
||||
async function toggleNotifications() {
|
||||
relationship.value!.notifying = !relationship.value?.notifying
|
||||
try {
|
||||
const newRel = await client.value.v1.accounts.$select(account.id).follow({ notify: relationship.value?.notifying })
|
||||
Object.assign(relationship!, newRel)
|
||||
}
|
||||
catch {
|
||||
// TODO error handling
|
||||
relationship.value!.notifying = !relationship.value?.notifying
|
||||
}
|
||||
}
|
||||
|
||||
watchEffect(() => {
|
||||
const named: mastodon.v1.AccountField[] = []
|
||||
const icons: mastodon.v1.AccountField[] = []
|
||||
|
||||
account.fields?.forEach((field) => {
|
||||
const icon = getAccountFieldIcon(field.name)
|
||||
if (icon)
|
||||
icons.push(field)
|
||||
else
|
||||
named.push(field)
|
||||
})
|
||||
icons.push({
|
||||
name: 'Joined',
|
||||
value: createdAt.value,
|
||||
})
|
||||
|
||||
namedFields.value = named
|
||||
iconFields.value = icons
|
||||
})
|
||||
|
||||
const personalNoteDraft = ref(relationship.value?.note ?? '')
|
||||
watch(relationship, (relationship, oldValue) => {
|
||||
if (!oldValue && relationship)
|
||||
personalNoteDraft.value = relationship.note ?? ''
|
||||
})
|
||||
|
||||
async function editNote(event: Event) {
|
||||
if (!event.target || !('value' in event.target) || !relationship.value)
|
||||
return
|
||||
|
||||
const newNote = event.target?.value as string
|
||||
|
||||
if (relationship.value.note?.trim() === newNote.trim())
|
||||
return
|
||||
|
||||
const newNoteApiResult = await client.value.v1.accounts.$select(account.id).note.create({ comment: newNote })
|
||||
relationship.value.note = newNoteApiResult.note
|
||||
personalNoteDraft.value = relationship.value.note ?? ''
|
||||
}
|
||||
|
||||
const isSelf = useSelfAccount(() => account)
|
||||
const isNotifiedOnPost = computed(() => !!relationship.value?.notifying)
|
||||
|
||||
const personalNoteMaxLength = 2000
|
||||
|
||||
async function copyAccountName() {
|
||||
try {
|
||||
const shortHandle = getShortHandle(account)
|
||||
const serverName = getServerName(account)
|
||||
const accountName = `${shortHandle}@${serverName}`
|
||||
await navigator.clipboard.writeText(accountName)
|
||||
}
|
||||
catch (err) {
|
||||
console.error('Failed to copy account name:', err)
|
||||
}
|
||||
|
||||
isCopied.value = true
|
||||
setTimeout(() => {
|
||||
isCopied.value = false
|
||||
}, 2000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div flex flex-col>
|
||||
<div v-if="relationship?.requestedBy" p-4 flex justify-between items-center bg-card>
|
||||
<span text-primary font-bold>{{ $t('account.requested', [account.displayName]) }}</span>
|
||||
<AccountFollowRequestButton :account="account" :relationship="relationship" />
|
||||
</div>
|
||||
<component :is="hasHeader ? 'button' : 'div'" border="b base" z-1 @click="hasHeader ? previewHeader() : undefined">
|
||||
<img h-50 height="200" w-full object-cover :src="account.header" :alt="t('account.profile_description', [account.username])">
|
||||
</component>
|
||||
<div p4 mt--18 flex flex-col gap-4>
|
||||
<div relative>
|
||||
<div flex justify-between>
|
||||
<button shrink-0 h-full :class="{ 'rounded-full': !isSelf, 'squircle': isSelf }" p1 bg-base border-bg-base z-2 @click="previewAvatar">
|
||||
<AccountAvatar :square="isSelf" :account="account" hover:opacity-90 transition-opacity w-28 h-28 />
|
||||
</button>
|
||||
<div inset-ie-0 flex="~ wrap row-reverse" gap-2 items-center pt18 justify-start>
|
||||
<!-- Edit profile -->
|
||||
<NuxtLink
|
||||
v-if="isSelf"
|
||||
to="/settings/profile/appearance"
|
||||
gap-1 items-center border="1" rounded-full flex="~ gap2 center" font-500 min-w-30 h-fit px3 py1
|
||||
hover="border-primary text-primary bg-active"
|
||||
>
|
||||
{{ $t('settings.profile.appearance.title') }}
|
||||
</NuxtLink>
|
||||
<AccountFollowButton :account="account" :command="command" />
|
||||
<span inset-ie-0 flex gap-2 items-center>
|
||||
<AccountMoreButton
|
||||
:account="account" :command="command"
|
||||
@add-note="isEditingPersonalNote = true"
|
||||
@remove-note="() => { isEditingPersonalNote = false; personalNoteDraft = '' }"
|
||||
/>
|
||||
<CommonTooltip v-if="!isSelf && relationship?.following" :content="getNotificationIconTitle()">
|
||||
<button
|
||||
:aria-pressed="isNotifiedOnPost"
|
||||
:aria-label="t('account.notifications_on_post_enable', { username: `@${account.username}` })"
|
||||
rounded-full text-sm p2 border-1 transition-colors
|
||||
:class="isNotifiedOnPost ? 'text-primary border-primary hover:bg-red/20 hover:text-red hover:border-red' : 'border-base hover:text-primary'"
|
||||
@click="toggleNotifications"
|
||||
>
|
||||
<span v-if="isNotifiedOnPost" i-ri:notification-4-fill block text-current />
|
||||
<span v-else i-ri-notification-4-line block text-current />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
<CommonTooltip :content="$t('list.modify_account')">
|
||||
<VDropdown v-if="!isSelf && relationship?.following">
|
||||
<button
|
||||
:aria-label="$t('list.modify_account')"
|
||||
rounded-full text-sm p2 border-1 transition-colors
|
||||
border-base hover:text-primary
|
||||
>
|
||||
<span i-ri:play-list-add-fill block text-current />
|
||||
</button>
|
||||
<template #popper>
|
||||
<ListLists :user-id="account.id" />
|
||||
</template>
|
||||
</VDropdown>
|
||||
</CommonTooltip>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div flex="~ col gap1" pt2>
|
||||
<div flex gap2 items-center flex-wrap>
|
||||
<AccountDisplayName :account="account" font-bold sm:text-2xl text-xl />
|
||||
<AccountLockIndicator v-if="account.locked" show-label />
|
||||
<AccountBotIndicator v-if="account.bot" show-label />
|
||||
</div>
|
||||
|
||||
<div flex items-center gap-1>
|
||||
<AccountHandle :account="account" overflow-unset line-clamp-unset />
|
||||
<CommonTooltip placement="bottom" :content="$t('account.copy_account_name')" flex>
|
||||
<button text-secondary-light text-sm :class="isCopied ? 'i-ri:check-fill text-green' : 'i-ri:file-copy-line'" @click="copyAccountName">
|
||||
<span sr-only>{{ $t('account.copy_account_name') }}</span>
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
</div>
|
||||
<div self-start mt-1>
|
||||
<AccountRolesIndicator v-if="account.roles?.length" :account="account" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<label
|
||||
v-if="isEditingPersonalNote || (relationship?.note && relationship.note.length > 0)"
|
||||
space-y-2
|
||||
pb-4
|
||||
block
|
||||
border="b base"
|
||||
>
|
||||
<div flex flex-row space-x-2 flex-v-center>
|
||||
<div i-ri-edit-2-line />
|
||||
<p font-medium>
|
||||
{{ $t('account.profile_personal_note') }}
|
||||
</p>
|
||||
<p text-secondary text-sm :class="{ 'text-orange': personalNoteDraft.length > (personalNoteMaxLength - 100) }">
|
||||
{{ personalNoteDraft.length }} / {{ personalNoteMaxLength }}
|
||||
</p>
|
||||
</div>
|
||||
<div position-relative>
|
||||
<div
|
||||
input-base
|
||||
min-h-10ex
|
||||
whitespace-pre-wrap
|
||||
opacity-0
|
||||
:class="{ 'trailing-newline': personalNoteDraft.endsWith('\n') }"
|
||||
>
|
||||
{{ personalNoteDraft }}
|
||||
</div>
|
||||
<textarea
|
||||
v-model="personalNoteDraft"
|
||||
input-base
|
||||
position-absolute
|
||||
style="height: 100%"
|
||||
top-0
|
||||
resize-none
|
||||
:maxlength="personalNoteMaxLength"
|
||||
@change="editNote"
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
<div v-if="account.note" max-h-100 overflow-y-auto>
|
||||
<ContentRich text-4 text-base :content="account.note" :emojis="account.emojis" />
|
||||
</div>
|
||||
<div v-if="namedFields.length" flex="~ col wrap gap1">
|
||||
<div v-for="field in namedFields" :key="field.name" flex="~ gap-1" items-center>
|
||||
<div mt="0.5" text-secondary uppercase text-xs font-bold>
|
||||
<ContentRich :content="field.name" :emojis="account.emojis" />
|
||||
</div>
|
||||
<span text-secondary text-xs font-bold>|</span>
|
||||
<ContentRich :content="field.value" :emojis="account.emojis" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="iconFields.length" flex="~ wrap gap-2">
|
||||
<div v-for="field in iconFields" :key="field.name" flex="~ gap-1" px1 items-center :class="`${field.verifiedAt ? 'border-1 rounded-full border-dark' : ''}`">
|
||||
<CommonTooltip :content="getFieldIconTitle(field.name)">
|
||||
<div text-secondary :class="getAccountFieldIcon(field.name)" :title="getFieldIconTitle(field.name)" />
|
||||
</CommonTooltip>
|
||||
<ContentRich text-sm :content="field.value" :emojis="account.emojis" />
|
||||
</div>
|
||||
</div>
|
||||
<AccountPostsFollowers :account="account" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.trailing-newline::after {
|
||||
content: '\a';
|
||||
}
|
||||
</style>
|
||||
24
app/components/account/AccountHoverCard.vue
Normal file
24
app/components/account/AccountHoverCard.vue
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const { account } = defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
}>()
|
||||
|
||||
const relationship = useRelationship(account)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-show="relationship" flex="~ col gap2" rounded min-w-90 max-w-120 z-100 overflow-hidden p-4>
|
||||
<div flex="~ gap2" items-center>
|
||||
<NuxtLink :to="getAccountRoute(account)" flex-auto rounded-full hover:bg-active transition-100 pe5 me-a>
|
||||
<AccountInfo :account="account" :hover-card="false" />
|
||||
</NuxtLink>
|
||||
<AccountFollowButton text-sm :account="account" :relationship="relationship" />
|
||||
</div>
|
||||
<div v-if="account.note" max-h-100 overflow-y-auto>
|
||||
<ContentRich text-4 text-secondary :content="account.note" :emojis="account.emojis" />
|
||||
</div>
|
||||
<AccountPostsFollowers text-sm :account="account" :is-hover-card="true" />
|
||||
</div>
|
||||
</template>
|
||||
70
app/components/account/AccountHoverWrapper.vue
Normal file
70
app/components/account/AccountHoverWrapper.vue
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
import { fetchAccountByHandle } from '~/composables/cache'
|
||||
|
||||
type WatcherType = [acc?: mastodon.v1.Account | null, h?: string, v?: boolean]
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const props = defineProps<{
|
||||
account?: mastodon.v1.Account | null
|
||||
handle?: string
|
||||
disabled?: boolean
|
||||
}>()
|
||||
|
||||
const accountHover = ref()
|
||||
const hovered = useElementHover(accountHover)
|
||||
const account = ref<mastodon.v1.Account | null | undefined>(props.account)
|
||||
|
||||
watch(
|
||||
() => [props.account, props.handle, hovered.value] satisfies WatcherType,
|
||||
([newAccount, newHandle, newVisible], oldProps) => {
|
||||
if (!newVisible || process.test)
|
||||
return
|
||||
|
||||
if (newAccount) {
|
||||
account.value = newAccount
|
||||
return
|
||||
}
|
||||
|
||||
if (newHandle) {
|
||||
const [_oldAccount, oldHandle, _oldVisible] = oldProps ?? [undefined, undefined, false]
|
||||
if (!oldHandle || newHandle !== oldHandle || !account.value) {
|
||||
// new handle can be wrong: using server instead of webDomain
|
||||
fetchAccountByHandle(newHandle).then((acc) => {
|
||||
if (newHandle === props.handle)
|
||||
account.value = acc
|
||||
})
|
||||
}
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
account.value = undefined
|
||||
},
|
||||
{ immediate: true, flush: 'post' },
|
||||
)
|
||||
|
||||
const userSettings = useUserSettings()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span ref="accountHover">
|
||||
<VMenu
|
||||
v-if="!disabled && account && !getPreferences(userSettings, 'hideAccountHoverCard')"
|
||||
placement="bottom-start"
|
||||
:delay="{ show: 500, hide: 100 }"
|
||||
v-bind="$attrs"
|
||||
:close-on-content-click="false"
|
||||
no-auto-focus
|
||||
>
|
||||
<slot />
|
||||
<template #popper>
|
||||
<AccountHoverCard v-if="account" :account="account" />
|
||||
</template>
|
||||
</VMenu>
|
||||
<slot v-else />
|
||||
</span>
|
||||
</template>
|
||||
35
app/components/account/AccountInfo.vue
Normal file
35
app/components/account/AccountInfo.vue
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const { as = 'div' } = defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
as?: string
|
||||
hoverCard?: boolean
|
||||
square?: boolean
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<!-- TODO: Make this work for both buttons and links -->
|
||||
<!-- This is sometimes (like in the sidebar) used directly as a button, and sometimes, like in follow notifications, as a link. I think this component may need a second refactor that either lets an implementation pass in a link or an action and adapt to what's passed in, or the implementations need to be updated to wrap in the action they want to take and this be just the layout for these items -->
|
||||
<template>
|
||||
<component :is="as" flex items-center gap-3 v-bind="$attrs">
|
||||
<AccountHoverWrapper :disabled="!hoverCard" :account="account">
|
||||
<AccountBigAvatar :account="account" shrink-0 :square="square" />
|
||||
</AccountHoverWrapper>
|
||||
<div flex="~ col" shrink h-full overflow-hidden justify-center leading-none select-none p-1>
|
||||
<div flex="~" gap-2>
|
||||
<AccountDisplayName :account="account" font-bold line-clamp-1 ws-pre-wrap break-all text-lg />
|
||||
<AccountLockIndicator v-if="account.locked" text-xs />
|
||||
<AccountBotIndicator v-if="account.bot" text-xs />
|
||||
</div>
|
||||
<AccountHandle :account="account" text-secondary-light />
|
||||
<div self-start mt-1>
|
||||
<AccountRolesIndicator v-if="account.roles?.length" :account="account" :limit="1" />
|
||||
</div>
|
||||
</div>
|
||||
</component>
|
||||
</template>
|
||||
31
app/components/account/AccountInlineInfo.vue
Normal file
31
app/components/account/AccountInlineInfo.vue
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const { link = true, avatar = true } = defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
link?: boolean
|
||||
avatar?: boolean
|
||||
}>()
|
||||
|
||||
const userSettings = useUserSettings()
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AccountHoverWrapper :account="account">
|
||||
<NuxtLink
|
||||
:to="link ? getAccountRoute(account) : undefined"
|
||||
:class="link ? 'text-link-rounded -ml-1.5rem pl-1.5rem rtl-(ml0 pl-0.5rem -mr-1.5rem pr-1.5rem)' : ''"
|
||||
v-bind="$attrs"
|
||||
min-w-0 flex gap-2 items-center
|
||||
>
|
||||
<AccountAvatar v-if="avatar" :account="account" w-5 h-5 />
|
||||
<AccountDisplayName :account="account" :hide-emojis="getPreferences(userSettings, 'hideUsernameEmojis')" line-clamp-1 ws-pre-wrap break-all />
|
||||
</NuxtLink>
|
||||
</AccountHoverWrapper>
|
||||
</template>
|
||||
23
app/components/account/AccountLockIndicator.vue
Normal file
23
app/components/account/AccountLockIndicator.vue
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
showLabel?: boolean
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
flex="~ gap1" items-center
|
||||
:class="{ 'border border-base rounded-md px-1': showLabel }"
|
||||
text-secondary-light
|
||||
>
|
||||
<slot name="prepend" />
|
||||
<CommonTooltip content="Lock" :disabled="showLabel">
|
||||
<div i-ri:lock-line />
|
||||
</CommonTooltip>
|
||||
<div v-if="showLabel">
|
||||
{{ t('account.lock') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
215
app/components/account/AccountMoreButton.vue
Normal file
215
app/components/account/AccountMoreButton.vue
Normal file
|
|
@ -0,0 +1,215 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
import { toggleBlockAccount, toggleBlockDomain, toggleMuteAccount } from '~/composables/masto/relationship'
|
||||
|
||||
const { account } = defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
command?: boolean
|
||||
}>()
|
||||
const emit = defineEmits<{
|
||||
(evt: 'addNote'): void
|
||||
(evt: 'removeNote'): void
|
||||
}>()
|
||||
|
||||
const relationship = useRelationship(account)
|
||||
|
||||
const isSelf = useSelfAccount(() => account)
|
||||
|
||||
const { t } = useI18n()
|
||||
const { client } = useMasto()
|
||||
const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
|
||||
const { share, isSupported: isShareSupported } = useShare()
|
||||
|
||||
function shareAccount() {
|
||||
share({ url: location.href })
|
||||
}
|
||||
|
||||
async function toggleReblogs() {
|
||||
if (!relationship.value!.showingReblogs) {
|
||||
const dialogChoice = await openConfirmDialog({
|
||||
title: t('confirm.show_reblogs.title'),
|
||||
description: t('confirm.show_reblogs.description', [account.acct]),
|
||||
confirm: t('confirm.show_reblogs.confirm'),
|
||||
cancel: t('confirm.show_reblogs.cancel'),
|
||||
})
|
||||
if (dialogChoice.choice !== 'confirm')
|
||||
return
|
||||
}
|
||||
|
||||
const showingReblogs = !relationship.value?.showingReblogs
|
||||
relationship.value = await client.value.v1.accounts.$select(account.id).follow({ reblogs: showingReblogs })
|
||||
}
|
||||
|
||||
async function addUserNote() {
|
||||
emit('addNote')
|
||||
}
|
||||
|
||||
async function removeUserNote() {
|
||||
if (!relationship.value!.note || relationship.value!.note.length === 0)
|
||||
return
|
||||
|
||||
const newNote = await client.value.v1.accounts.$select(account.id).note.create({ comment: '' })
|
||||
relationship.value!.note = newNote.note
|
||||
emit('removeNote')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CommonDropdown :eager-mount="command">
|
||||
<button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group :aria-label="t('actions.more')">
|
||||
<div rounded-5 p2 elk-group-hover="bg-purple/10">
|
||||
<div i-ri:more-2-fill />
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<template #popper>
|
||||
<NuxtLink :to="account.url" external target="_blank">
|
||||
<CommonDropdownItem
|
||||
:text="$t('menu.open_in_original_site')"
|
||||
icon="i-ri:arrow-right-up-line"
|
||||
:command="command"
|
||||
/>
|
||||
</NuxtLink>
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-if="isShareSupported"
|
||||
:text="$t('menu.share_account', [`@${account.acct}`])"
|
||||
icon="i-ri:share-line"
|
||||
:command="command"
|
||||
@click="shareAccount()"
|
||||
/>
|
||||
|
||||
<template v-if="currentUser">
|
||||
<template v-if="!isSelf">
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
:text="$t('menu.mention_account', [`@${account.acct}`])"
|
||||
icon="i-ri:at-line"
|
||||
:command="command"
|
||||
@click="mentionUser(account)"
|
||||
/>
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
:text="$t('menu.direct_message_account', [`@${account.acct}`])"
|
||||
icon="i-ri:message-3-line"
|
||||
:command="command"
|
||||
@click="directMessageUser(account)"
|
||||
/>
|
||||
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-if="!relationship?.showingReblogs"
|
||||
icon="i-ri:repeat-line"
|
||||
:text="$t('menu.show_reblogs', [`@${account.acct}`])"
|
||||
:command="command"
|
||||
@click="toggleReblogs()"
|
||||
/>
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-else
|
||||
:text="$t('menu.hide_reblogs', [`@${account.acct}`])"
|
||||
icon="i-ri:repeat-line"
|
||||
:command="command"
|
||||
@click="toggleReblogs()"
|
||||
/>
|
||||
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-if="!relationship?.note || relationship?.note?.length === 0"
|
||||
:text="$t('menu.add_personal_note', [`@${account.acct}`])"
|
||||
icon="i-ri-edit-2-line"
|
||||
:command="command"
|
||||
@click="addUserNote()"
|
||||
/>
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-else
|
||||
:text="$t('menu.remove_personal_note', [`@${account.acct}`])"
|
||||
icon="i-ri-edit-2-line"
|
||||
:command="command"
|
||||
@click="removeUserNote()"
|
||||
/>
|
||||
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-if="!relationship?.muting"
|
||||
:text="$t('menu.mute_account', [`@${account.acct}`])"
|
||||
icon="i-ri:volume-mute-line"
|
||||
:command="command"
|
||||
@click="toggleMuteAccount (relationship!, account)"
|
||||
/>
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-else
|
||||
:text="$t('menu.unmute_account', [`@${account.acct}`])"
|
||||
icon="i-ri:volume-up-fill"
|
||||
:command="command"
|
||||
@click="toggleMuteAccount (relationship!, account)"
|
||||
/>
|
||||
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-if="!relationship?.blocking"
|
||||
:text="$t('menu.block_account', [`@${account.acct}`])"
|
||||
icon="i-ri:forbid-2-line"
|
||||
:command="command"
|
||||
@click="toggleBlockAccount (relationship!, account)"
|
||||
/>
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-else
|
||||
:text="$t('menu.unblock_account', [`@${account.acct}`])"
|
||||
icon="i-ri:checkbox-circle-line"
|
||||
:command="command"
|
||||
@click="toggleBlockAccount (relationship!, account)"
|
||||
/>
|
||||
|
||||
<template v-if="getServerName(account) !== currentServer">
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-if="!relationship?.domainBlocking"
|
||||
:text="$t('menu.block_domain', [getServerName(account)])"
|
||||
icon="i-ri:shut-down-line"
|
||||
:command="command"
|
||||
@click="toggleBlockDomain(relationship!, account)"
|
||||
/>
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
v-else
|
||||
:text="$t('menu.unblock_domain', [getServerName(account)])"
|
||||
icon="i-ri:restart-line"
|
||||
:command="command"
|
||||
@click="toggleBlockDomain(relationship!, account)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<CommonDropdownItem
|
||||
is="button"
|
||||
:text="$t('menu.report_account', [`@${account.acct}`])"
|
||||
icon="i-ri:flag-2-line"
|
||||
:command="command"
|
||||
@click="openReportDialog(account)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<NuxtLink to="/pinned">
|
||||
<CommonDropdownItem :text="$t('account.pinned')" icon="i-ri:pushpin-line" :command="command" />
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/favourites">
|
||||
<CommonDropdownItem :text="$t('account.favourites')" :icon="useStarFavoriteIcon ? 'i-ri:star-line' : 'i-ri:heart-3-line'" :command="command" />
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/mutes">
|
||||
<CommonDropdownItem :text="$t('account.muted_users')" icon="i-ri:volume-mute-line" :command="command" />
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/blocks">
|
||||
<CommonDropdownItem :text="$t('account.blocked_users')" icon="i-ri:forbid-2-line" :command="command" />
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/domain_blocks">
|
||||
<CommonDropdownItem :text="$t('account.blocked_domains')" icon="i-ri:shut-down-line" :command="command" />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</CommonDropdown>
|
||||
</template>
|
||||
28
app/components/account/AccountMoved.vue
Normal file
28
app/components/account/AccountMoved.vue
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div flex="~ col gap-2" p4>
|
||||
<div flex="~ gap-1" justify-center>
|
||||
<AccountInlineInfo :account="account" :link="false" />
|
||||
{{ $t('account.moved_title') }}
|
||||
</div>
|
||||
|
||||
<div flex>
|
||||
<NuxtLink :to="getAccountRoute(account.moved!)">
|
||||
<AccountInfo :account="account.moved!" />
|
||||
</NuxtLink>
|
||||
<div flex-auto />
|
||||
<div flex items-center>
|
||||
<NuxtLink :to="getAccountRoute(account.moved as any)" btn-solid inline-block h-fit>
|
||||
{{ $t('account.go_to_profile') }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
43
app/components/account/AccountPaginator.vue
Normal file
43
app/components/account/AccountPaginator.vue
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
const { account, context } = defineProps<{
|
||||
paginator: mastodon.Paginator<mastodon.v1.Account[], mastodon.DefaultPaginationParams | undefined>
|
||||
context?: 'following' | 'followers'
|
||||
account?: mastodon.v1.Account
|
||||
relationshipContext?: 'followedBy' | 'following'
|
||||
}>()
|
||||
|
||||
const fallbackContext = computed(() => {
|
||||
return ['following', 'followers'].includes(context!)
|
||||
})
|
||||
const showOriginSite = computed(() =>
|
||||
account && account.id !== currentUser.value?.account.id && getServerName(account) !== currentServer.value,
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CommonPaginator :paginator="paginator">
|
||||
<template #default="{ item }">
|
||||
<AccountCard
|
||||
:account="item"
|
||||
:relationship-context="relationshipContext"
|
||||
hover-card
|
||||
border="b base" py2 px4
|
||||
/>
|
||||
</template>
|
||||
<template v-if="fallbackContext && showOriginSite" #done>
|
||||
<div p5 text-secondary text-center flex flex-col items-center gap1>
|
||||
<span italic>{{ $t(`account.view_other_${context}`) }}</span>
|
||||
<NuxtLink
|
||||
:href="account!.url" target="_blank" external
|
||||
flex="~ gap-1" items-center text-primary
|
||||
hover="underline text-primary-active"
|
||||
>
|
||||
<div i-ri:external-link-fill />
|
||||
{{ $t('menu.open_in_original_site') }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
</CommonPaginator>
|
||||
</template>
|
||||
78
app/components/account/AccountPostsFollowers.vue
Normal file
78
app/components/account/AccountPostsFollowers.vue
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
isHoverCard?: boolean
|
||||
}>()
|
||||
|
||||
const userSettings = useUserSettings()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div flex gap-5>
|
||||
<NuxtLink
|
||||
:to="getAccountRoute(account)"
|
||||
replace
|
||||
text-secondary
|
||||
exact-active-class="text-primary"
|
||||
>
|
||||
<template #default="{ isExactActive }">
|
||||
<CommonLocalizedNumber
|
||||
keypath="account.posts_count"
|
||||
:count="account.statusesCount"
|
||||
font-bold
|
||||
:class="isExactActive ? 'text-primary' : 'text-base'"
|
||||
/>
|
||||
</template>
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
v-if="!(isHoverCard && getPreferences(userSettings, 'hideFollowerCount'))"
|
||||
:to="getAccountFollowingRoute(account)"
|
||||
replace
|
||||
text-secondary exact-active-class="text-primary"
|
||||
>
|
||||
<template #default="{ isExactActive }">
|
||||
<template
|
||||
v-if="!getPreferences(userSettings, 'hideFollowerCount')"
|
||||
>
|
||||
<CommonLocalizedNumber
|
||||
v-if="account.followingCount >= 0"
|
||||
keypath="account.following_count"
|
||||
:count="account.followingCount"
|
||||
font-bold
|
||||
:class="isExactActive ? 'text-primary' : 'text-base'"
|
||||
/>
|
||||
<div v-else flex gap-x-1>
|
||||
<span font-bold text-base>Hidden</span>
|
||||
<span>{{ $t('account.following') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else>{{ $t('account.following') }}</span>
|
||||
</template>
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
v-if="!(isHoverCard && getPreferences(userSettings, 'hideFollowerCount'))"
|
||||
:to="getAccountFollowersRoute(account)"
|
||||
replace text-secondary
|
||||
exact-active-class="text-primary"
|
||||
>
|
||||
<template #default="{ isExactActive }">
|
||||
<template v-if="!getPreferences(userSettings, 'hideFollowerCount')">
|
||||
<CommonLocalizedNumber
|
||||
v-if="account.followersCount >= 0"
|
||||
keypath="account.followers_count"
|
||||
:count="account.followersCount"
|
||||
font-bold
|
||||
:class="isExactActive ? 'text-primary' : 'text-base'"
|
||||
/>
|
||||
<div v-else flex gap-x-1>
|
||||
<span font-bold text-base>Hidden</span>
|
||||
<span>{{ $t('account.followers') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else>{{ $t('account.followers') }}</span>
|
||||
</template>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
31
app/components/account/AccountRolesIndicator.vue
Normal file
31
app/components/account/AccountRolesIndicator.vue
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
defineProps<{
|
||||
account: mastodon.v1.Account
|
||||
limit?: number
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
flex="~ gap1" items-center
|
||||
class="border border-base rounded-md px-1"
|
||||
text-secondary-light
|
||||
>
|
||||
<slot name="prepend" />
|
||||
<div v-for="role in account.roles?.slice(0, limit)" :key="role.id" flex>
|
||||
<div :style="`color: ${role.color}; border-color: ${role.color}`">
|
||||
{{ role.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="limit && account.roles?.length > limit"
|
||||
flex="~ gap1" items-center
|
||||
class="border border-base rounded-md px-1"
|
||||
text-secondary-light
|
||||
>
|
||||
+{{ account.roles?.length - limit }}
|
||||
</div>
|
||||
</template>
|
||||
43
app/components/account/AccountTabs.vue
Normal file
43
app/components/account/AccountTabs.vue
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<script setup lang="ts">
|
||||
import type { CommonRouteTabOption } from '#shared/types'
|
||||
|
||||
const { t } = useI18n()
|
||||
const route = useRoute()
|
||||
|
||||
const server = computed(() => route.params.server as string)
|
||||
const account = computed(() => route.params.account as string)
|
||||
|
||||
const tabs = computed<CommonRouteTabOption[]>(() => [
|
||||
{
|
||||
name: 'account-index',
|
||||
to: {
|
||||
name: 'account-index',
|
||||
params: { server: server.value, account: account.value },
|
||||
},
|
||||
display: t('tab.posts'),
|
||||
icon: 'i-ri:file-list-2-line',
|
||||
},
|
||||
{
|
||||
name: 'account-replies',
|
||||
to: {
|
||||
name: 'account-replies',
|
||||
params: { server: server.value, account: account.value },
|
||||
},
|
||||
display: t('tab.posts_with_replies'),
|
||||
icon: 'i-ri:chat-1-line',
|
||||
},
|
||||
{
|
||||
name: 'account-media',
|
||||
to: {
|
||||
name: 'account-media',
|
||||
params: { server: server.value, account: account.value },
|
||||
},
|
||||
display: t('tab.media'),
|
||||
icon: 'i-ri:camera-2-line',
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CommonRouteTabs force replace :options="tabs" prevent-scroll-top command border="base b" />
|
||||
</template>
|
||||
46
app/components/account/TagHoverWrapper.vue
Normal file
46
app/components/account/TagHoverWrapper.vue
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const { tagName } = defineProps<{
|
||||
tagName?: string
|
||||
disabled?: boolean
|
||||
}>()
|
||||
|
||||
const tag = ref<mastodon.v1.Tag>()
|
||||
const tagHover = ref()
|
||||
const hovered = useElementHover(tagHover)
|
||||
|
||||
watch(hovered, (newHovered) => {
|
||||
if (newHovered && tagName) {
|
||||
fetchTag(tagName).then((t) => {
|
||||
tag.value = t
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const userSettings = useUserSettings()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span ref="tagHover">
|
||||
<VMenu
|
||||
v-if="!disabled && !getPreferences(userSettings, 'hideTagHoverCard')"
|
||||
placement="bottom-start"
|
||||
:delay="{ show: 500, hide: 100 }"
|
||||
v-bind="$attrs"
|
||||
:close-on-content-click="false"
|
||||
no-auto-focus
|
||||
>
|
||||
<slot />
|
||||
<template #popper>
|
||||
<TagCardSkeleton v-if="!tag" />
|
||||
<TagCard v-else :tag="tag" />
|
||||
</template>
|
||||
</VMenu>
|
||||
<slot v-else />
|
||||
</span>
|
||||
</template>
|
||||
Loading…
Add table
Add a link
Reference in a new issue