elk/components/account/AccountHeader.vue

145 lines
4.7 KiB
Vue
Raw Normal View History

2022-11-15 03:26:52 +00:00
<script setup lang="ts">
2023-01-08 06:21:09 +00:00
import type { mastodon } from 'masto'
2022-11-15 03:26:52 +00:00
const { account } = defineProps<{
2023-01-08 06:21:09 +00:00
account: mastodon.v1.Account
command?: boolean
2022-11-15 03:26:52 +00:00
}>()
const masto = useMasto()
2022-12-02 02:18:36 +00:00
const { t } = useI18n()
const createdAt = $(useFormattedDateTime(() => account.createdAt, {
month: 'long',
day: 'numeric',
year: 'numeric',
}))
2022-11-24 06:41:29 +00:00
const relationship = $(useRelationship(account))
2023-01-08 06:21:09 +00:00
const namedFields = ref<mastodon.v1.AccountField[]>([])
const iconFields = ref<mastodon.v1.AccountField[]>([])
2022-11-24 06:41:29 +00:00
2022-12-02 02:18:36 +00:00
function getFieldIconTitle(fieldName: string) {
return fieldName === 'Joined' ? t('account.joined') : fieldName
}
function previewHeader() {
2022-11-30 03:27:19 +00:00
openMediaPreview([{
id: `${account.acct}:header`,
type: 'image',
previewUrl: account.header,
2022-12-02 02:18:36 +00:00
description: t('account.profile_description', [account.username]),
2022-11-30 03:27:19 +00:00
}])
}
function previewAvatar() {
2022-11-30 03:27:19 +00:00
openMediaPreview([{
id: `${account.acct}:avatar`,
type: 'image',
previewUrl: account.avatar,
2022-12-02 02:18:36 +00:00
description: t('account.avatar_description', [account.username]),
2022-11-30 03:27:19 +00:00
}])
}
2022-11-27 07:44:47 +00:00
async function toggleNotify() {
relationship!.notifying = !relationship!.notifying
try {
const newRel = await masto.v1.accounts.follow(account.id, { notify: relationship!.notifying })
Object.assign(relationship!, newRel)
}
catch {
// TODO error handling
relationship!.notifying = !relationship!.notifying
}
}
2022-11-27 07:44:47 +00:00
watchEffect(() => {
2023-01-08 06:21:09 +00:00
const named: mastodon.v1.AccountField[] = []
const icons: mastodon.v1.AccountField[] = []
2022-11-27 07:44:47 +00:00
account.fields?.forEach((field) => {
const icon = getAccountFieldIcon(field.name)
2022-11-27 07:44:47 +00:00
if (icon)
icons.push(field)
else
named.push(field)
})
icons.push({
name: 'Joined',
value: createdAt,
})
namedFields.value = named
iconFields.value = icons
})
const isSelf = $(useSelfAccount(() => account))
2022-11-15 03:26:52 +00:00
</script>
<template>
<div flex flex-col>
<button border="b base" z-1>
<img h-50 height="200" w-full object-cover :src="account.header" :alt="t('account.profile_description', [account.username])" @click="previewHeader">
</button>
2022-11-29 20:04:23 +00:00
<div p4 mt--18 flex flex-col gap-4>
<div relative>
<div flex="~ col gap-2 1">
<button :class="{ 'rounded-full': !isSelf, 'squircle': isSelf }" w-30 h-30 p1 bg-base border-bg-base z-2 @click="previewAvatar">
<AccountAvatar :square="isSelf" :account="account" hover:opacity-90 transition-opacity />
</button>
<div flex="~ col gap1">
2022-12-11 15:43:23 +00:00
<div flex justify-between>
<AccountDisplayName :account="account" font-bold sm:text-2xl text-xl />
2023-01-07 13:53:09 +00:00
<AccountBotIndicator v-if="account.bot" show-label />
2022-12-11 15:43:23 +00:00
</div>
<AccountHandle :account="account" />
2022-11-23 14:39:48 +00:00
</div>
2022-11-15 03:26:52 +00:00
</div>
<div absolute top-18 inset-ie-0 flex gap-2 items-center>
<AccountMoreButton :account="account" :command="command" />
<button v-if="!isSelf && relationship?.following" flex gap-1 items-center w-full rounded op75 hover="op100 text-pink" group @click="toggleNotify()">
<div rounded-full p2 group-hover="bg-pink/10">
<div v-if="relationship?.notifying" i-ri:bell-fill />
<div v-else i-ri-bell-line />
</div>
</button>
<AccountFollowButton :account="account" :command="command" />
<!-- 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>
2022-11-15 03:26:52 +00:00
</div>
</div>
2022-12-30 20:54:23 +00:00
<div v-if="account.note" max-h-100 overflow-y-auto>
2022-12-25 12:44:45 +00:00
<ContentRich text-4 text-base :content="account.note" :emojis="account.emojis" />
2022-11-15 03:26:52 +00:00
</div>
2022-11-27 07:44:47 +00:00
<div v-if="namedFields.length" flex="~ col wrap gap1">
<div v-for="field in namedFields" :key="field.name" flex="~ gap-1" items-center>
<div text-secondary uppercase text-xs font-bold>
2022-11-24 06:41:29 +00:00
{{ field.name }} |
</div>
<ContentRich :content="field.value" :emojis="account.emojis" />
2022-11-27 07:44:47 +00:00
</div>
</div>
<div v-if="iconFields.length" flex="~ wrap gap-4">
<div v-for="field in iconFields" :key="field.name" flex="~ gap-1" items-center>
<CommonTooltip :content="getFieldIconTitle(field.name)">
<div text-secondary :class="getAccountFieldIcon(field.name)" :title="getFieldIconTitle(field.name)" />
</CommonTooltip>
<ContentRich text-sm filter-saturate-0 :content="field.value" :emojis="account.emojis" />
2022-11-15 03:26:52 +00:00
</div>
</div>
2022-11-28 09:51:15 +00:00
<AccountPostsFollowers :account="account" />
2022-11-15 03:26:52 +00:00
</div>
</div>
</template>