From 4bb29107617468dba5a2fa07abd7398dd61ab130 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Sat, 26 Nov 2022 00:49:56 +0100
Subject: [PATCH] feat: status route using full account (#115)

---
 components/status/StatusReplyingTo.vue     |  2 +-
 composables/masto.ts                       |  6 ++-
 pages/@[account].vue                       | 25 -----------
 pages/@[account]/[status].vue              | 41 ++++++++++++++++++
 pages/@[account]/index.vue                 | 35 ++++++++-------
 pages/@[account]/{ => index}/followers.vue |  0
 pages/@[account]/{ => index}/following.vue |  0
 pages/@[account]/index/index.vue           | 26 +++++++++++
 pages/status/[status].vue                  | 50 ++++++----------------
 9 files changed, 104 insertions(+), 81 deletions(-)
 delete mode 100644 pages/@[account].vue
 create mode 100644 pages/@[account]/[status].vue
 rename pages/@[account]/{ => index}/followers.vue (100%)
 rename pages/@[account]/{ => index}/following.vue (100%)
 create mode 100644 pages/@[account]/index/index.vue

diff --git a/components/status/StatusReplyingTo.vue b/components/status/StatusReplyingTo.vue
index d27a745f..66ae05c2 100644
--- a/components/status/StatusReplyingTo.vue
+++ b/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" />
diff --git a/composables/masto.ts b/composables/masto.ts
index a7f742f2..e9e36660 100644
--- a/composables/masto.ts
+++ b/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) {
diff --git a/pages/@[account].vue b/pages/@[account].vue
deleted file mode 100644
index 57d5545a..00000000
--- a/pages/@[account].vue
+++ /dev/null
@@ -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>
diff --git a/pages/@[account]/[status].vue b/pages/@[account]/[status].vue
new file mode 100644
index 00000000..92726b56
--- /dev/null
+++ b/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>
diff --git a/pages/@[account]/index.vue b/pages/@[account]/index.vue
index 543699eb..57d5545a 100644
--- a/pages/@[account]/index.vue
+++ b/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 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>
diff --git a/pages/@[account]/followers.vue b/pages/@[account]/index/followers.vue
similarity index 100%
rename from pages/@[account]/followers.vue
rename to pages/@[account]/index/followers.vue
diff --git a/pages/@[account]/following.vue b/pages/@[account]/index/following.vue
similarity index 100%
rename from pages/@[account]/following.vue
rename to pages/@[account]/index/following.vue
diff --git a/pages/@[account]/index/index.vue b/pages/@[account]/index/index.vue
new file mode 100644
index 00000000..543699eb
--- /dev/null
+++ b/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>
diff --git a/pages/status/[status].vue b/pages/status/[status].vue
index 5b8c1dee..bcef771d 100644
--- a/pages/status/[status].vue
+++ b/pages/status/[status].vue
@@ -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)
-
-const status = await fetchStatus(id)
-const { data: context } = useAsyncData(`context:${id}`, () => masto.statuses.fetchContext(id))
+definePageMeta({
+  middleware: async (to) => {
+    const params = to.params
+    const id = params.status as string
+    const status = await fetchStatus(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>