From 2ed22678ed87173ce98d24f9347650ffa48d3a0a Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Sat, 26 Nov 2022 01:50:03 +0800
Subject: [PATCH] feat: use full id in url

---
 components/account/AccountHeader.vue    |  8 ++++----
 components/account/AccountHoverCard.vue |  6 +++---
 components/nav/NavSide.vue              |  2 +-
 components/user/UserSwitcher.vue        |  2 +-
 composables/masto.ts                    | 25 ++++++++++++++++++++++---
 pages/@[account].vue                    |  2 +-
 6 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index ffbcfb0f..eade033f 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -59,7 +59,7 @@ function getFieldNameIcon(fieldName: string) {
           <div flex flex-col>
             <ContentRich font-bold text-2xl break-words :content="getDisplayName(account)" :emojis="account.emojis" />
             <p op50>
-              {{ getAccountHandle(account) }}
+              {{ getShortHandle(account) }}
             </p>
           </div>
         </div>
@@ -86,13 +86,13 @@ function getFieldNameIcon(fieldName: string) {
         </div>
       </div>
       <div flex gap-5>
-        <NuxtLink :to="`/${getAccountHandle(account)}/`" exact-active-class="text-primary">
+        <NuxtLink :to="`/${getFullHandle(account)}/`" exact-active-class="text-primary">
           <span font-bold>{{ account.statusesCount }}</span> <span op50>Posts</span>
         </NuxtLink>
-        <NuxtLink :to="`/${getAccountHandle(account)}/following`" exact-active-class="text-primary">
+        <NuxtLink :to="`/${getFullHandle(account)}/following`" exact-active-class="text-primary">
           <span font-bold>{{ account.followingCount }}</span> <span op50>Following</span>
         </NuxtLink>
-        <NuxtLink :to="`/${getAccountHandle(account)}/followers`" exact-active-class="text-primary">
+        <NuxtLink :to="`/${getFullHandle(account)}/followers`" exact-active-class="text-primary">
           <span font-bold>{{ account.followersCount }}</span> <span op50>Followers</span>
         </NuxtLink>
       </div>
diff --git a/components/account/AccountHoverCard.vue b/components/account/AccountHoverCard.vue
index e05cb5f2..41d29c9c 100644
--- a/components/account/AccountHoverCard.vue
+++ b/components/account/AccountHoverCard.vue
@@ -10,15 +10,15 @@ defineProps<{
   <div bg-base border="~ base" rounded w-80 z-900 overflow-hidden p-4 class="account-hover-card">
     <AccountInfo :account="account" />
     <div text-sm flex flex-row text-gray mt-4>
-      <NuxtLink :to="`/${getAccountHandle(account)}/`">
+      <NuxtLink :to="`/${getShortHandle(account)}/`">
         {{ account.statusesCount }} Posts
       </NuxtLink>
       <span flex-1 text-center> • </span>
-      <NuxtLink :to="`/${getAccountHandle(account)}/following`">
+      <NuxtLink :to="`/${getShortHandle(account)}/following`">
         {{ account.followingCount }} Following
       </NuxtLink>
       <span flex-1 text-center> • </span>
-      <NuxtLink :to="`/${getAccountHandle(account)}/followers`">
+      <NuxtLink :to="`/${getShortHandle(account)}/followers`">
         {{ account.followersCount }} Followers
       </NuxtLink>
     </div>
diff --git a/components/nav/NavSide.vue b/components/nav/NavSide.vue
index e1163149..2d41a2d3 100644
--- a/components/nav/NavSide.vue
+++ b/components/nav/NavSide.vue
@@ -54,7 +54,7 @@
           <span>Bookmarks</span>
         </div>
       </NuxtLink>
-      <NuxtLink :to="`/@${currentUser.account?.username}`" active-class="text-primary" group>
+      <NuxtLink :to="getAccountPath(currentUser.account)" active-class="text-primary" group>
         <div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 hover:bg-active>
           <AccountAvatar :account="currentUser.account" h="1.2em" />
           <span>Profile</span>
diff --git a/components/user/UserSwitcher.vue b/components/user/UserSwitcher.vue
index 64e1d2b7..1349528d 100644
--- a/components/user/UserSwitcher.vue
+++ b/components/user/UserSwitcher.vue
@@ -41,7 +41,7 @@ const sorted = computed(() => {
         @click="signout"
       >
         <div i-ri:logout-box-line />
-        Sign out {{ getAccountHandle(currentUser.account) }}
+        Sign out {{ getShortHandle(currentUser.account) }}
       </button>
     </div>
   </div>
diff --git a/composables/masto.ts b/composables/masto.ts
index 623940af..a7f742f2 100644
--- a/composables/masto.ts
+++ b/composables/masto.ts
@@ -33,12 +33,28 @@ export function getDisplayName(account: Account) {
   return account.displayName || account.username
 }
 
-export function getAccountHandle(account: Account) {
+export function getShortHandle(account: Account) {
   return `@${account.acct}`
 }
 
+export function getFullHandle(account: Account) {
+  const handle = `@${account.acct}`
+  if (!currentUser.value || account.acct.includes('@'))
+    return handle
+  return `${handle}@${account.url.match(UserLinkRE)?.[1] || currentUser.value.server}`
+}
+
+export function toShortHandle(fullHandle: string) {
+  if (!currentUser.value)
+    return fullHandle
+  const server = currentUser.value.server
+  if (fullHandle.endsWith(`@${server}`))
+    return fullHandle.slice(0, -server.length - 1)
+  return fullHandle
+}
+
 export function getAccountPath(account: Account) {
-  return `/${getAccountHandle(account)}`
+  return `/${getFullHandle(account)}`
 }
 
 export function getStatusPath(status: Status) {
@@ -46,7 +62,10 @@ export function getStatusPath(status: Status) {
 }
 
 export function useAccountHandle(account: Account, fullServer = true) {
-  return computed(() => fullServer && !account.acct.includes('@') ? `@${account.acct}@${account.url.match(UserLinkRE)?.[1]}` : getAccountHandle(account))
+  return computed(() => fullServer
+    ? getFullHandle(account)
+    : getShortHandle(account),
+  )
 }
 
 // Batch requests for relationships when used in the UI
diff --git a/pages/@[account].vue b/pages/@[account].vue
index 5ab8f312..ead51051 100644
--- a/pages/@[account].vue
+++ b/pages/@[account].vue
@@ -1,6 +1,6 @@
 <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).catch(() => null)