forked from Mirrors/elk
feat: status route using full account (#115)
This commit is contained in:
patak
GitHub
parent
b36a803eef
commit
4bb2910761
9 changed files with 104 additions and 81 deletions
|
|
@ -12,7 +12,7 @@ const account = asyncComputed(() => fetchAccount(status.inReplyToAccountId!))
|
|||
<NuxtLink
|
||||
v-if="status.inReplyToId"
|
||||
flex="~ wrap" items-center text-sm text-gray:85
|
||||
:to="getStatusPath({ id: status.inReplyToId } as any)"
|
||||
:to="getStatusInReplyToPath(status)"
|
||||
:title="account ? `Replying to ${getDisplayName(account)}` : 'Replying to someone'"
|
||||
>
|
||||
<div i-ri:reply-fill rotate-180 op50 class="mr-1.5" />
|
||||
|
|
|
|||
|
|
@ -58,7 +58,11 @@ export function getAccountPath(account: Account) {
|
|||
}
|
||||
|
||||
export function getStatusPath(status: Status) {
|
||||
return `/status/${status.id}`
|
||||
return `/${getFullHandle(status.account)}/${status.id}`
|
||||
}
|
||||
|
||||
export function getStatusInReplyToPath(status: Status) {
|
||||
return `/status/${status.inReplyToId}`
|
||||
}
|
||||
|
||||
export function useAccountHandle(account: Account, fullServer = true) {
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const params = useRoute().params
|
||||
const accountName = $computed(() => toShortHandle(params.account as string))
|
||||
|
||||
const account = await fetchAccountByName(accountName).catch(() => null)
|
||||
|
||||
if (account) {
|
||||
useHead({
|
||||
title: () => `${account.displayName?.replace(/\:\w+\:/g, '') ?? ''} (@${account.acct})`,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MainContent>
|
||||
<template v-if="account">
|
||||
<AccountHeader :account="account" border="b base" />
|
||||
<NuxtPage />
|
||||
</template>
|
||||
|
||||
<CommonNotFound v-else>
|
||||
Account @{{ accountName }} not found
|
||||
</CommonNotFound>
|
||||
</MainContent>
|
||||
</template>
|
||||
41
pages/@[account]/[status].vue
Normal file
41
pages/@[account]/[status].vue
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<script setup lang="ts">
|
||||
import type { Component } from 'vue'
|
||||
|
||||
const route = useRoute()
|
||||
const id = $computed(() => route.params.status as string)
|
||||
const main = ref<Component | null>(null)
|
||||
|
||||
const status = window.history.state?.status ?? await fetchStatus(id)
|
||||
const { data: context } = useAsyncData(`context:${id}`, () => masto.statuses.fetchContext(id))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MainContent>
|
||||
<template v-if="status">
|
||||
<template v-if="context">
|
||||
<template v-for="comment of context?.ancestors" :key="comment.id">
|
||||
<StatusCard :status="comment" border="t base" py3 />
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<StatusDetails ref="main" :status="status" border="t base" />
|
||||
<PublishWidget
|
||||
v-if="currentUser"
|
||||
border="t base"
|
||||
:draft-key="`reply-${id}`"
|
||||
:placeholder="`Reply to ${status?.account ? getDisplayName(status?.account) : 'this thread'}`"
|
||||
:in-reply-to-id="id"
|
||||
/>
|
||||
|
||||
<template v-if="context">
|
||||
<template v-for="comment of context?.descendants" :key="comment.id">
|
||||
<StatusCard :status="comment" border="t base" py3 />
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<CommonNotFound v-else>
|
||||
Status not found
|
||||
</CommonNotFound>
|
||||
</MainContent>
|
||||
</template>
|
||||
|
|
@ -1,26 +1,25 @@
|
|||
<script setup lang="ts">
|
||||
const params = useRoute().params
|
||||
const accountName = $computed(() => params.account as string)
|
||||
const accountName = $computed(() => toShortHandle(params.account as string))
|
||||
|
||||
const account = await fetchAccountByName(accountName)
|
||||
const tabNames = ['Posts', 'Posts and replies'] as const
|
||||
const account = await fetchAccountByName(accountName).catch(() => null)
|
||||
|
||||
// Don't use local storage because it is better to default to Posts every time you visit a user's profile.
|
||||
const tab = $ref('Posts')
|
||||
|
||||
const paginatorPosts = masto.accounts.getStatusesIterable(account.id, { excludeReplies: true })
|
||||
const paginatorPostsWithReply = masto.accounts.getStatusesIterable(account.id, { excludeReplies: false })
|
||||
|
||||
const paginator = $computed(() => {
|
||||
return tab === 'Posts' ? paginatorPosts : paginatorPostsWithReply
|
||||
if (account) {
|
||||
useHead({
|
||||
title: () => `${account.displayName?.replace(/\:\w+\:/g, '') ?? ''} (@${account.acct})`,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<CommonTabs v-model="tab" :options="tabNames" />
|
||||
<KeepAlive>
|
||||
<TimelinePaginator :key="tab" :paginator="paginator" />
|
||||
</KeepAlive>
|
||||
</div>
|
||||
<MainContent>
|
||||
<template v-if="account">
|
||||
<AccountHeader :account="account" border="b base" />
|
||||
<NuxtPage />
|
||||
</template>
|
||||
|
||||
<CommonNotFound v-else>
|
||||
Account @{{ accountName }} not found
|
||||
</CommonNotFound>
|
||||
</MainContent>
|
||||
</template>
|
||||
|
|
|
|||
26
pages/@[account]/index/index.vue
Normal file
26
pages/@[account]/index/index.vue
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<script setup lang="ts">
|
||||
const params = useRoute().params
|
||||
const accountName = $computed(() => params.account as string)
|
||||
|
||||
const account = await fetchAccountByName(accountName)
|
||||
const tabNames = ['Posts', 'Posts and replies'] as const
|
||||
|
||||
// Don't use local storage because it is better to default to Posts every time you visit a user's profile.
|
||||
const tab = $ref('Posts')
|
||||
|
||||
const paginatorPosts = masto.accounts.getStatusesIterable(account.id, { excludeReplies: true })
|
||||
const paginatorPostsWithReply = masto.accounts.getStatusesIterable(account.id, { excludeReplies: false })
|
||||
|
||||
const paginator = $computed(() => {
|
||||
return tab === 'Posts' ? paginatorPosts : paginatorPostsWithReply
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<CommonTabs v-model="tab" :options="tabNames" />
|
||||
<KeepAlive>
|
||||
<TimelinePaginator :key="tab" :paginator="paginator" />
|
||||
</KeepAlive>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,41 +1,19 @@
|
|||
<script setup lang="ts">
|
||||
import type { Component } from 'vue'
|
||||
|
||||
const params = useRoute().params
|
||||
const id = $computed(() => params.status as string)
|
||||
const main = ref<Component | null>(null)
|
||||
|
||||
definePageMeta({
|
||||
middleware: async (to) => {
|
||||
const params = to.params
|
||||
const id = params.status as string
|
||||
const status = await fetchStatus(id)
|
||||
const { data: context } = useAsyncData(`context:${id}`, () => masto.statuses.fetchContext(id))
|
||||
return {
|
||||
path: getStatusPath(status),
|
||||
state: {
|
||||
status,
|
||||
},
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MainContent>
|
||||
<template v-if="status">
|
||||
<template v-if="context">
|
||||
<template v-for="comment of context?.ancestors" :key="comment.id">
|
||||
<StatusCard :status="comment" border="t base" py3 />
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<StatusDetails ref="main" :status="status" border="t base" />
|
||||
<PublishWidget
|
||||
v-if="currentUser"
|
||||
border="t base"
|
||||
:draft-key="`reply-${id}`"
|
||||
:placeholder="`Reply to ${status?.account ? getDisplayName(status?.account) : 'this thread'}`"
|
||||
:in-reply-to-id="id"
|
||||
/>
|
||||
|
||||
<template v-if="context">
|
||||
<template v-for="comment of context?.descendants" :key="comment.id">
|
||||
<StatusCard :status="comment" border="t base" py3 />
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<CommonNotFound v-else>
|
||||
Status not found
|
||||
</CommonNotFound>
|
||||
</MainContent>
|
||||
<div />
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in a new issue