feat(account): predict relationship from context

zio/stable
三咲智子 2023-01-10 15:49:49 +08:00
parent b4cda4338f
commit 88731ee18d
No known key found for this signature in database
GPG Key ID: 69992F2250DFD93E
6 changed files with 20 additions and 10 deletions

View File

@ -4,6 +4,7 @@ import type { mastodon } from 'masto'
const { account } = defineProps<{
account: mastodon.v1.Account
hoverCard?: boolean
relationshipContext?: 'followedBy' | 'following'
}>()
cacheAccount(account)
@ -19,7 +20,7 @@ cacheAccount(account)
:to="getAccountRoute(account)"
/>
<div h-full p1 shrink-0>
<AccountFollowButton :account="account" />
<AccountFollowButton :account="account" :context="relationshipContext" />
</div>
</div>
</template>

View File

@ -1,9 +1,10 @@
<script setup lang="ts">
import type { mastodon } from 'masto'
const { account, command, ...props } = defineProps<{
const { account, command, context, ...props } = defineProps<{
account: mastodon.v1.Account
relationship?: mastodon.v1.Relationship
context?: 'followedBy' | 'following'
command?: boolean
}>()
@ -67,8 +68,8 @@ const buttonStyle = $computed(() => {
return 'text-base bg-code border-base'
// If following, use a label style with a strong border for Mutuals
if (relationship?.following)
return `text-base ${relationship.followedBy ? 'border-strong' : 'border-base'}`
if (relationship ? relationship.following : context === 'following')
return `text-base ${relationship?.followedBy ? 'border-strong' : 'border-base'}`
// If not following, use a button style
return 'text-inverted bg-primary border-primary'
@ -94,14 +95,14 @@ const buttonStyle = $computed(() => {
<span group-hover="hidden">{{ $t('account.muting') }}</span>
<span hidden group-hover="inline">{{ $t('account.unmute') }}</span>
</template>
<template v-else-if="relationship?.following">
<span group-hover="hidden">{{ relationship.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
<template v-else-if="relationship ? relationship.following : context === 'following'">
<span group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
<span hidden group-hover="inline">{{ $t('account.unfollow') }}</span>
</template>
<template v-else-if="relationship?.requested">
<span>{{ $t('account.follow_requested') }}</span>
</template>
<template v-else-if="relationship?.followedBy">
<template v-else-if="relationship ? relationship.followedBy : context === 'followedBy'">
<span group-hover="hidden">{{ $t('account.follows_you') }}</span>
<span hidden group-hover="inline">{{ $t('account.follow_back') }}</span>
</template>

View File

@ -3,6 +3,7 @@ import type { Paginator, mastodon } from 'masto'
const { paginator } = defineProps<{
paginator: Paginator<mastodon.v1.Account[], mastodon.DefaultPaginationParams>
relationshipContext?: 'followedBy' | 'following'
}>()
</script>
@ -11,6 +12,7 @@ const { paginator } = defineProps<{
<template #default="{ item }">
<AccountCard
:account="item"
:relationship-context="relationshipContext"
hover-card
border="b base" py2 px4
/>

View File

@ -1,7 +1,7 @@
import { login as loginMasto } from 'masto'
import type { WsEvents, mastodon } from 'masto'
import type { Ref } from 'vue'
import type { RemovableRef } from '@vueuse/core'
import type { MaybeComputedRef, RemovableRef } from '@vueuse/core'
import type { ElkMasto, UserLogin } from '~/types'
import {
DEFAULT_POST_CHARS_LIMIT,
@ -96,6 +96,8 @@ export const currentUserHandle = computed(() => currentUser.value?.account.id
)
export const useUsers = () => users
export const useSelfAccount = (user: MaybeComputedRef<mastodon.v1.Account | undefined>) =>
computed(() => currentUser.value && resolveUnref(user)?.id === currentUser.value.account.id)
export const characterLimit = computed(() => currentInstance.value?.configuration.statuses.maxCharacters ?? DEFAULT_POST_CHARS_LIMIT)

View File

@ -8,6 +8,8 @@ definePageMeta({ name: 'account-followers' })
const account = await fetchAccountByHandle(handle)
const paginator = account ? useMasto().v1.accounts.listFollowers(account.id, {}) : null
const isSelf = useSelfAccount(account)
if (account) {
useHeadFixed({
title: () => `${t('account.followers')} | ${getDisplayName(account)} (@${account})`,
@ -17,6 +19,6 @@ if (account) {
<template>
<template v-if="paginator">
<AccountPaginator :paginator="paginator" />
<AccountPaginator :paginator="paginator" :relationship-context="isSelf ? 'followedBy' : undefined" />
</template>
</template>

View File

@ -8,6 +8,8 @@ definePageMeta({ name: 'account-following' })
const account = await fetchAccountByHandle(handle)
const paginator = account ? useMasto().v1.accounts.listFollowing(account.id, {}) : null
const isSelf = useSelfAccount(account)
if (account) {
useHeadFixed({
title: () => `${t('account.following')} | ${getDisplayName(account)} (@${account.acct})`,
@ -17,6 +19,6 @@ if (account) {
<template>
<template v-if="paginator">
<AccountPaginator :paginator="paginator" />
<AccountPaginator :paginator="paginator" :relationship-context="isSelf ? 'following' : undefined" />
</template>
</template>