Show full actor address instead of "acct" value

src/components/Post.vue

@@ -11,8 +11,8 @@
       >
         {{ authorName }}
       </router-link>
-      <div class="username" :title="'@' + post.account.acct">
-        @{{ post.account.acct }}
+      <div class="actor-address" :title="'@' + actorAddress">
+        @{{ actorAddress }}
       </div>
       <a
         class="icon icon-small"
@@ -226,8 +226,8 @@ export default class PostComponent extends Vue {
 
   private store = setup(() => {
     const { currentUser, ensureAuthToken } = useCurrentUser()
-    const { instance } = useInstanceInfo()
-    return { currentUser, ensureAuthToken, instance }
+    const { instance, getActorAddress } = useInstanceInfo()
+    return { currentUser, ensureAuthToken, instance, getActorAddress }
   })
 
   $refs!: { postContent: HTMLElement }
@@ -244,6 +244,10 @@ export default class PostComponent extends Vue {
     return this.post.account.display_name || this.post.account.username
   }
 
+  get actorAddress(): string {
+    return this.store.getActorAddress(this.post.account)
+  }
+
   highlight(postId: string | null) {
     this.$emit("highlight", postId)
   }
@@ -503,7 +507,7 @@ export default class PostComponent extends Vue {
     white-space: nowrap;
   }
 
-  .username {
+  .actor-address {
     flex-grow: 1;
     min-width: 15%;
     overflow: hidden;

src/components/ProfileCard.vue

@@ -8,7 +8,7 @@
         <avatar :profile="profile"></avatar>
         <div class="name-group">
           <div class="display-name">{{ profile.display_name || profile.username }}</div>
-          <div class="account-uri">{{ getAcct() }}</div>
+          <div class="actor-address">@{{ actorAddress }}</div>
         </div>
       </div>
       <div class="bio" v-html="profile.note"></div>
@@ -44,19 +44,12 @@ export default class ProfileCard extends Vue {
   compact = false
 
   private store = setup(() => {
-    const { instance } = useInstanceInfo()
-    return { instance }
+    const { instance, getActorAddress } = useInstanceInfo()
+    return { instance, getActorAddress }
   })
 
-  getAcct(): string {
-    if (this.profile.acct.includes("@")) {
-      // Remote account
-      return `@${this.profile.acct}`
-    }
-    if (!this.store.instance) {
-      return `@${this.profile.username}`
-    }
-    return `@${this.profile.username}@${this.store.instance.uri}`
+  get actorAddress(): string {
+    return this.store.getActorAddress(this.profile)
   }
 
 }
@@ -112,7 +105,7 @@ $profile-padding: $block-inner-padding / 2;
       font-weight: bold;
     }
 
-    .account-uri {
+    .actor-address {
       color: $secondary-text-color;
       overflow-x: hidden;
       text-overflow: ellipsis;

src/store/instance.ts

@@ -1,6 +1,7 @@
 import { ref } from "vue"
 
 import { InstanceInfo, getInstanceInfo } from "@/api/instance"
+import { Profile } from "@/api/users"
 
 const instance = ref<InstanceInfo | null>(null)
 
@@ -10,8 +11,20 @@ export function useInstanceInfo() {
     instance.value = await getInstanceInfo()
   }
 
+  function getActorAddress(profile: Profile): string {
+    if (profile.acct.includes("@")) {
+      // Remote account
+      return `${profile.acct}`
+    }
+    if (instance.value === null) {
+      return `${profile.username}`
+    }
+    return `${profile.username}@${instance.value.uri}`
+  }
+
   return {
     instance,
     loadInstanceInfo,
+    getActorAddress,
   }
 }

src/views/NotificationList.vue

@@ -42,7 +42,7 @@
             <avatar :profile="notification.account"></avatar>
           </div>
           <div class="display-name">{{ getSenderName(notification) }}</div>
-          <div class="username">@{{ notification.account.acct }}</div>
+          <div class="actor-address">@{{ getActorAddress(notification.account) }}</div>
           <div class="timestamp">{{ formatDate(notification.created_at) }}</div>
         </router-link>
       </div>
@@ -59,10 +59,12 @@ import { getNotifications } from "@/api/notifications"
 import Avatar from "@/components/Avatar.vue"
 import Post from "@/components/Post.vue"
 import Sidebar from "@/components/Sidebar.vue"
+import { useInstanceInfo } from "@/store/instance"
 import { useNotifications } from "@/store/notifications"
 import { useCurrentUser } from "@/store/user"
 import { formatDate } from "@/utils/format"
 
+const { getActorAddress } = useInstanceInfo()
 const { notifications } = useNotifications()
 
 onMounted(async () => {
@@ -118,7 +120,7 @@ function onPostDeleted(notificationIndex: number) {
     margin-right: $block-inner-padding / 2;
   }
 
-  .username {
+  .actor-address {
     color: $secondary-text-color;
     flex-grow: 1;
   }

src/views/PostOverlay.vue

@@ -15,7 +15,7 @@
       <div class="token-info">
         <router-link class="profile" :to="{ name: 'profile', params: { profileId: post.account.id }}">
           <avatar :profile="post.account"></avatar>
-          <div class="account-uri">@{{ post.account.acct }}</div>
+          <div class="actor-address">@{{ actorAddress }}</div>
         </router-link>
         <a
           v-if="transactionUrl"
@@ -72,9 +72,9 @@ export default class PostOverlay extends Vue {
   token: TokenMetadata | null = null
 
   private store = setup(() => {
-    const { instance } = useInstanceInfo()
     const { currentUser, authToken } = useCurrentUser()
-    return { instance, currentUser, authToken }
+    const { instance, getActorAddress } = useInstanceInfo()
+    return { currentUser, authToken, instance, getActorAddress }
   })
 
   async created() {
@@ -96,6 +96,13 @@ export default class PostOverlay extends Vue {
     this.$router.back()
   }
 
+  get actorAddress(): string {
+    if (!this.post) {
+      return ""
+    }
+    return this.store.getActorAddress(this.post.account)
+  }
+
   get transactionUrl(): string | null {
     const explorerUrl = this.store.instance?.ethereum_explorer_url
     if (!explorerUrl || !this.post?.token_tx_id) {

src/views/Profile.vue

@@ -9,7 +9,7 @@
           <avatar :profile="profile"></avatar>
           <div class="name-group">
             <div class="display-name">{{ profile.display_name || profile.username }}</div>
-            <div class="account-uri">@{{ profile.acct }}</div>
+            <div class="actor-address">@{{ actorAddress }}</div>
           </div>
           <div class="buttons">
             <router-link v-if="isCurrentUser()" class="edit-profile btn" to="/settings">Edit profile</router-link>
@@ -56,6 +56,7 @@ import {
 import Avatar from "@/components/Avatar.vue"
 import PostList from "@/components/PostList.vue"
 import Sidebar from "@/components/Sidebar.vue"
+import { useInstanceInfo } from "@/store/instance"
 import { useCurrentUser } from "@/store/user"
 
 @Options({
@@ -69,7 +70,8 @@ export default class ProfileView extends Vue {
 
   private store = setup(() => {
     const { currentUser, authToken, ensureAuthToken } = useCurrentUser()
-    return { currentUser, authToken, ensureAuthToken }
+    const { getActorAddress } = useInstanceInfo()
+    return { currentUser, authToken, ensureAuthToken, getActorAddress }
   })
 
   profile: Profile | null = null
@@ -93,6 +95,13 @@ export default class ProfileView extends Vue {
     )
   }
 
+  get actorAddress(): string {
+    if (!this.profile) {
+      return ""
+    }
+    return this.store.getActorAddress(this.profile)
+  }
+
   isCurrentUser(): boolean {
     if (!this.store.currentUser || !this.profile) {
       return false
@@ -203,7 +212,7 @@ $avatar-size: 170px;
       font-weight: bold;
     }
 
-    .account-uri {
+    .actor-address {
       color: $secondary-text-color;
       overflow-x: hidden;
       text-overflow: ellipsis;