elk/pages/[[server]]/@[account]/index.vue

<script setup lang="ts">
definePageMeta({
  key: route => `${route.params.server}:${route.params.account}`,
})

const params = useRoute().params
const accountName = $(computedEager(() => toShortHandle(params.account as string)))

const { t } = useI18n()

const { data: account, pending, refresh } = $(await useAsyncData(() => fetchAccountByHandle(accountName).catch(() => null), { immediate: process.client }))
const relationship = $computed(() => account ? useRelationship(account).value : undefined)

onReactivated(() => {
  // Silently update data when reentering the page
  // The user will see the previous content first, and any changes will be updated to the UI when the request is completed
  refresh()
})
</script>

<template>
  <MainContent back>
    <template #title>
      <ContentRich timeline-title-style :content="account ? getDisplayName(account) : t('nav.profile')" />
    </template>

    <template v-if="pending" />
    <template v-else-if="account">
      <AccountMoved v-if="account.moved" :account="account" />
      <AccountHeader :account="account" command border="b base" :class="{ 'op-50 grayscale-50': !!account.moved }" />

      <div v-if="relationship?.blockedBy" h-30 flex="~ col center gap-2">
        <div text-secondary>
          {{ $t('account.profile_unavailable') }}
        </div>
        <div text-secondary-light text-sm>
          {{ $t('account.blocked_by') }}
        </div>
      </div>
      <NuxtPage v-else />
    </template>

    <CommonNotFound v-else>
      {{ $t('error.account_not_found', [`@${accountName}`]) }}
    </CommonNotFound>
  </MainContent>
</template>