refactor: getAccountHandle, getAccountPath, getStatusPath

components/account/AccountHeader.vue

@@ -20,14 +20,14 @@ const createdAt = $computed(() => {
       <div flex justify-between>
         <div flex flex-col gap-2>
           <div>
-            <NuxtLink :to="`/@${account.acct}`">
+            <NuxtLink :to="getAccountPath(account)">
               <AccountAvatar :account="account" w-30 h-30 />
             </NuxtLink>
           </div>
           <div flex flex-col>
             <CommonRichContent font-bold text-2xl :content="getDisplayName(account)" :emojis="account.emojis" />
             <p op50>
-              @{{ account.acct }}
+              {{ getAccountHandle(account) }}
             </p>
           </div>
         </div>
@@ -65,13 +65,13 @@ const createdAt = $computed(() => {
         </div>
       </div>
       <div flex gap-5>
-        <NuxtLink :to="`/@${account.acct}/`" active-class="text-primary">
+        <NuxtLink :to="`/${getAccountHandle(account)}/`" active-class="text-primary">
           <span font-bold>{{ account.statusesCount }}</span> Posts
         </NuxtLink>
-        <NuxtLink :to="`/@${account.acct}/following`" active-class="text-primary">
+        <NuxtLink :to="`/${getAccountHandle(account)}/following`" active-class="text-primary">
           <span font-bold>{{ account.followingCount }}</span> Following
         </NuxtLink>
-        <NuxtLink :to="`/@${account.acct}/followers`" active-class="text-primary">
+        <NuxtLink :to="`/${getAccountHandle(account)}/followers`" active-class="text-primary">
           <span font-bold>{{ account.followersCount }}</span> Followers
         </NuxtLink>
       </div>

components/account/AccountInfo.vue

@@ -7,17 +7,17 @@ const { account, link = true, fullServer = false } = defineProps<{
   fullServer?: boolean
 }>()
 
-const id = computed(() => fullServer && !account.acct.includes('@') ? `@${account.acct}@${account.url.match(UserLinkRE)?.[1]}` : `@${account.acct}`)
+const id = computed(() => fullServer && !account.acct.includes('@') ? `@${account.acct}@${account.url.match(UserLinkRE)?.[1]}` : getAccountHandle(account))
 </script>
 
 <template>
   <div flex gap-3>
     <div>
-      <NuxtLink :to="link ? `/@${account.acct}` : null">
+      <NuxtLink :to="link ? getAccountPath(account) : null">
         <AccountAvatar :account="account" w-12 h-12 />
       </NuxtLink>
     </div>
-    <NuxtLink flex flex-col :to="link ? `/@${account.acct}` : null">
+    <NuxtLink flex flex-col :to="link ? getAccountPath(account) : null">
       <CommonRichContent font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
       <p op35 text-sm>
         {{ id }}

components/account/AccountInlineInfo.vue

@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-  <NuxtLink :href="`/@${account.acct}`" flex gap-1 items-center>
+  <NuxtLink :href="getAccountPath(account)" flex gap-1 items-center>
     <AccountAvatar :account="account" w-5 h-5 />
     <CommonRichContent :content="getDisplayName(account)" :emojis="account.emojis" />
   </NuxtLink>

components/account/AccountLink.vue

@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-  <NuxtLink :to="`/@${account.acct}`">
+  <NuxtLink :to="getAccountPath(account)">
     {{ getDisplayName(account) }}
   </NuxtLink>
 </template>

components/status/StatusActions.vue

@@ -37,7 +37,7 @@ const toggleBookmark = () => toggleStatusAction(
 
 <template>
   <div flex justify-between gap-8>
-    <RouterLink flex gap-1 items-center rounded op50 hover="op100 text-blue" group :to="`/@${status.account.acct}/${status.id}`">
+    <RouterLink flex gap-1 items-center rounded op50 hover="op100 text-blue" group :to="getStatusPath(status)">
       <div rounded-full p2 group-hover="bg-blue/10">
         <div i-ri:chat-3-line />
       </div>

components/status/StatusCard.vue

@@ -26,7 +26,7 @@ function go(e: MouseEvent) {
   const path = e.composedPath() as HTMLElement[]
   const el = path.find(el => ['A', 'BUTTON', 'IMG', 'VIDEO'].includes(el.tagName?.toUpperCase()))
   if (!el)
-    router.push(`/@${status.account.acct}/${status.id}`)
+    router.push(getStatusPath(status))
 }
 
 const timeago = useTimeAgo(() => status.createdAt, {

components/user/UserSwitcher.vue

@@ -41,7 +41,7 @@ const sorted = computed(() => {
         @click="signout"
       >
         <div i-ri:logout-box-line />
-        Sign out @{{ currentUser.account!.acct }}
+        Sign out {{ getAccountHandle(currentUser.account!) }}
       </button>
     </div>
   </div>

composables/masto.ts

@@ -1,10 +1,22 @@
 import type { Ref } from 'vue'
-import type { Account, Relationship } from 'masto'
+import type { Account, Relationship, Status } from 'masto'
 
 export function getDisplayName(account: Account) {
   return account.displayName || account.username
 }
 
+export function getAccountHandle(account: Account) {
+  return `@${account.acct}`
+}
+
+export function getAccountPath(account: Account) {
+  return `/${getAccountHandle(account)}`
+}
+
+export function getStatusPath(status: Status) {
+  return `${getAccountPath(status.account)}/${status.id}`
+}
+
 // Batch requests for relationships when used in the UI
 // We don't want to hold to old values, so every time a Relationship is needed it
 // is requested again from the server to show the latest state