feat: use nested routes for profile

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>

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>

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>

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>

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

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>

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>

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>

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>

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>

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: [