feat: status route using full account (#115)

components/status/StatusReplyingTo.vue

@@ -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" />

composables/masto.ts

@@ -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) {

pages/@[account].vue

@@ -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>

pages/@[account]/[status].vue

@@ -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>

pages/@[account]/index.vue

@@ -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 account = await fetchAccountByName(accountName).catch(() => null)
-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.
+if (account) {
-const tab = $ref('Posts')
+  useHead({
-
+    title: () => `${account.displayName?.replace(/\:\w+\:/g, '') ?? ''} (@${account.acct})`,
-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>
+  <MainContent>
-    <CommonTabs v-model="tab" :options="tabNames" />
+    <template v-if="account">
-    <KeepAlive>
+      <AccountHeader :account="account" border="b base" />
-      <TimelinePaginator :key="tab" :paginator="paginator" />
+      <NuxtPage />
-    </KeepAlive>
+    </template>
-  </div>
+
+    <CommonNotFound v-else>
+      Account @{{ accountName }} not found
+    </CommonNotFound>
+  </MainContent>
 </template>

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

@@ -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>

pages/status/[status].vue

@@ -1,41 +1,19 @@
 <script setup lang="ts">
-import type { Component } from 'vue'
+definePageMeta({
-
+  middleware: async (to) => {
-const params = useRoute().params
+    const params = to.params
-const id = $computed(() => params.status as string)
+    const id = params.status as string
-const main = ref<Component | null>(null)
+    const status = await fetchStatus(id)
-
+    return {
-const status = await fetchStatus(id)
+      path: getStatusPath(status),
-const { data: context } = useAsyncData(`context:${id}`, () => masto.statuses.fetchContext(id))
+      state: {
+        status,
+      },
+    }
+  }
+})
 </script>
 
 <template>
-  <MainContent>
+  <div />
-    <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>