From 1ee945447d99b2c908f440436954a577c11cc6e1 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 24 Nov 2022 14:18:05 +0800
Subject: [PATCH] feat: use nested routes for profile

---
 components/account/AccountHeader.vue          |  8 ++---
 components/account/AccountInfo.vue            |  2 +-
 components/account/AccountInlineInfo.vue      |  2 +-
 components/account/AccountPaginator.vue       |  2 +-
 .../ContentRich.ts}                           |  0
 components/main/MainContent.vue               |  7 ++++-
 components/status/StatusBody.vue              |  2 +-
 pages/@[account].vue                          | 31 +++++++++++++++++++
 pages/@[account]/followers.vue                |  7 -----
 pages/@[account]/following.vue                |  9 +-----
 pages/@[account]/index.vue                    | 20 ++++++------
 unocss.config.ts                              |  2 +-
 12 files changed, 56 insertions(+), 36 deletions(-)
 rename components/{common/CommonRichContent.ts => content/ContentRich.ts} (100%)
 create mode 100644 pages/@[account].vue

diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index e35cf2fe..de7ec250 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -25,7 +25,7 @@ const createdAt = $computed(() => {
             </NuxtLink>
           </div>
           <div flex flex-col>
-            <CommonRichContent font-bold text-2xl :content="getDisplayName(account)" :emojis="account.emojis" />
+            <ContentRich font-bold text-2xl :content="getDisplayName(account)" :emojis="account.emojis" />
             <p op50>
               {{ getAccountHandle(account) }}
             </p>
@@ -66,13 +66,13 @@ const createdAt = $computed(() => {
       </div>
       <div flex gap-5>
         <NuxtLink :to="`/${getAccountHandle(account)}/`" active-class="text-primary">
-          <span font-bold>{{ account.statusesCount }}</span> Posts
+          <span font-bold>{{ account.statusesCount }}</span> <span op50>Posts</span>
         </NuxtLink>
         <NuxtLink :to="`/${getAccountHandle(account)}/following`" active-class="text-primary">
-          <span font-bold>{{ account.followingCount }}</span> Following
+          <span font-bold>{{ account.followingCount }}</span> <span op50>Following</span>
         </NuxtLink>
         <NuxtLink :to="`/${getAccountHandle(account)}/followers`" active-class="text-primary">
-          <span font-bold>{{ account.followersCount }}</span> Followers
+          <span font-bold>{{ account.followersCount }}</span> <span op50>Followers</span>
         </NuxtLink>
       </div>
     </div>
diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue
index 6b87b01f..1448bde9 100644
--- a/components/account/AccountInfo.vue
+++ b/components/account/AccountInfo.vue
@@ -18,7 +18,7 @@ const id = computed(() => fullServer && !account.acct.includes('@') ? `@${accoun
       </NuxtLink>
     </div>
     <NuxtLink flex flex-col :to="link ? getAccountPath(account) : null">
-      <CommonRichContent font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
+      <ContentRich font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
       <p op35 text-sm>
         {{ id }}
       </p>
diff --git a/components/account/AccountInlineInfo.vue b/components/account/AccountInlineInfo.vue
index 6e96cb25..42fb8ca6 100644
--- a/components/account/AccountInlineInfo.vue
+++ b/components/account/AccountInlineInfo.vue
@@ -9,6 +9,6 @@ defineProps<{
 <template>
   <NuxtLink :href="getAccountPath(account)" flex gap-1 items-center>
     <AccountAvatar :account="account" w-5 h-5 />
-    <CommonRichContent :content="getDisplayName(account)" :emojis="account.emojis" />
+    <ContentRich :content="getDisplayName(account)" :emojis="account.emojis" />
   </NuxtLink>
 </template>
diff --git a/components/account/AccountPaginator.vue b/components/account/AccountPaginator.vue
index d0b135d0..faaabde7 100644
--- a/components/account/AccountPaginator.vue
+++ b/components/account/AccountPaginator.vue
@@ -11,7 +11,7 @@ const { paginator } = defineProps<{
     <template #default="{ item }">
       <AccountCard
         :account="item"
-        border="b base" p1
+        border="b base" py2 px4
       />
     </template>
   </CommonPaginator>
diff --git a/components/common/CommonRichContent.ts b/components/content/ContentRich.ts
similarity index 100%
rename from components/common/CommonRichContent.ts
rename to components/content/ContentRich.ts
diff --git a/components/main/MainContent.vue b/components/main/MainContent.vue
index b2f6fd51..870abf4a 100644
--- a/components/main/MainContent.vue
+++ b/components/main/MainContent.vue
@@ -7,7 +7,12 @@
     >
       <div flex justify-between px5 py4>
         <div flex gap-1>
-          <slot name="title" />
+          <slot name="title">
+            <NuxtLink flex="~ gap1" items-center btn-text p-0 @click="$router.go(-1)">
+              <div i-ri-arrow-left-line />
+              Back
+            </NuxtLink>
+          </slot>
         </div>
         <div flex>
           <slot name="actions" />
diff --git a/components/status/StatusBody.vue b/components/status/StatusBody.vue
index 0d52a7e1..02ec35e2 100644
--- a/components/status/StatusBody.vue
+++ b/components/status/StatusBody.vue
@@ -8,6 +8,6 @@ const { status } = defineProps<{
 
 <template>
   <div class="status-body">
-    <CommonRichContent :content="status.content" :emojis="status.emojis" />
+    <ContentRich :content="status.content" :emojis="status.emojis" />
   </div>
 </template>
diff --git a/pages/@[account].vue b/pages/@[account].vue
new file mode 100644
index 00000000..5d585867
--- /dev/null
+++ b/pages/@[account].vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue?: boolean
+}>()
+
+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 paginator = $computed(() => {
+  return masto.accounts.getStatusesIterable(account.id, { excludeReplies: tab === 'Posts' } as any)
+})
+</script>
+
+<template>
+  <MainContent>
+    <template v-if="account">
+      <AccountHeader :account="account" border="b base" />
+      <NuxtPage />
+    </template>
+
+    <CommonNotFound v-else>
+      Account @{{ params.user }} not found
+    </CommonNotFound>
+  </MainContent>
+</template>
diff --git a/pages/@[account]/followers.vue b/pages/@[account]/followers.vue
index 034e742d..8840092c 100644
--- a/pages/@[account]/followers.vue
+++ b/pages/@[account]/followers.vue
@@ -8,13 +8,6 @@ const paginator = account ? masto.accounts.getFollowersIterable(account!.id!, {}
 
 <template>
   <template v-if="account">
-    <div>
-      <AccountHeader :account="account" />
-    </div>
     <AccountPaginator :paginator="paginator" />
   </template>
-
-  <CommonNotFound v-else>
-    Account @{{ params.user }} not found
-  </CommonNotFound>
 </template>
diff --git a/pages/@[account]/following.vue b/pages/@[account]/following.vue
index e29042e9..fc60855b 100644
--- a/pages/@[account]/following.vue
+++ b/pages/@[account]/following.vue
@@ -3,18 +3,11 @@ const params = useRoute().params
 const accountName = $computed(() => params.account as string)
 
 const account = await fetchAccountByName(accountName)
-const paginator = account ? masto.accounts.getFollowingIterable(account!.id!, {}) : null
+const paginator = account ? masto.accounts.getFollowingIterable(account.id, {}) : null
 </script>
 
 <template>
   <template v-if="account">
-    <div>
-      <AccountHeader :account="account" />
-    </div>
     <AccountPaginator :paginator="paginator" />
   </template>
-
-  <CommonNotFound v-else>
-    Account @{{ params.user }} not found
-  </CommonNotFound>
 </template>
diff --git a/pages/@[account]/index.vue b/pages/@[account]/index.vue
index 2f04c891..37fe5836 100644
--- a/pages/@[account]/index.vue
+++ b/pages/@[account]/index.vue
@@ -12,21 +12,19 @@ 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 paginator1 = masto.accounts.getStatusesIterable(account.id, { excludeReplies: true })
+const paginator2 = masto.accounts.getStatusesIterable(account.id, { excludeReplies: false })
+
 const paginator = $computed(() => {
-  return masto.accounts.getStatusesIterable(account.id, { excludeReplies: tab === 'Posts' } as any)
+  return tab === 'Posts' ? paginator1 : paginator2
 })
 </script>
 
 <template>
-  <template v-if="account">
-    <div>
-      <AccountHeader :account="account" />
-    </div>
+  <div>
     <CommonTabs v-model="tab" :options="tabNames" />
-    <TimelinePaginator :key="tab" :paginator="paginator" />
-  </template>
-
-  <CommonNotFound v-else>
-    Account @{{ params.user }} not found
-  </CommonNotFound>
+    <KeepAlive>
+      <TimelinePaginator :key="tab" :paginator="paginator" />
+    </KeepAlive>
+  </div>
 </template>
diff --git a/unocss.config.ts b/unocss.config.ts
index 5a3b742e..18d32112 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -21,7 +21,7 @@ export default defineConfig({
       'interact-disabled': 'disabled:opacity-50 disabled:pointer-events-none disabled:saturate-0',
       'btn-solid': 'px-4 py-2 rounded text-white bg-$c-primary hover:bg-$c-primary-active interact-disabled',
       'btn-outline': 'px-4 py-2 rounded text-$c-primary border border-$c-primary hover:bg-$c-primary hover:text-white interact-disabled',
-      'btn-text': 'px-4 py-2 text-$c-primary hover:text-$c-primary-active interact-disabled',
+      'btn-text': 'px-4 py-2 text-$c-primary hover:text-$c-primary-active interact-disabled cursor-pointer',
     },
   ],
   presets: [