Implement remote account resolution

src/web/app/mobile/views/components/notification.vue

@@ -2,15 +2,15 @@
 <div class="mk-notification">
 	<div class="notification reaction" v-if="notification.type == 'reaction'">
 		<mk-time :time="notification.created_at"/>
-		<router-link class="avatar-anchor" :to="`/@${notification.user.username}`">
+		<router-link class="avatar-anchor" :to="`/@${acct}`">
 			<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
 		</router-link>
 		<div class="text">
 			<p>
 				<mk-reaction-icon :reaction="notification.reaction"/>
-				<router-link :to="`/@${notification.user.username}`">{{ notification.user.name }}</router-link>
+				<router-link :to="`/@${acct}`">{{ notification.user.name }}</router-link>
 			</p>
-			<router-link class="post-ref" :to="`/@${notification.post.user.username}/${notification.post.id}`">
+			<router-link class="post-ref" :to="`/@${acct}/${notification.post.id}`">
 				%fa:quote-left%{{ getPostSummary(notification.post) }}
 				%fa:quote-right%
 			</router-link>
@@ -19,15 +19,15 @@
 
 	<div class="notification repost" v-if="notification.type == 'repost'">
 		<mk-time :time="notification.created_at"/>
-		<router-link class="avatar-anchor" :to="`/@${notification.post.user.username}`">
+		<router-link class="avatar-anchor" :to="`/@${acct}`">
 			<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
 		</router-link>
 		<div class="text">
 			<p>
 				%fa:retweet%
-				<router-link :to="`/@${notification.post.user.username}`">{{ notification.post.user.name }}</router-link>
+				<router-link :to="`/@${acct}`">{{ notification.post.user.name }}</router-link>
 			</p>
-			<router-link class="post-ref" :to="`/@${notification.post.user.username}/${notification.post.id}`">
+			<router-link class="post-ref" :to="`/@${acct}/${notification.post.id}`">
 				%fa:quote-left%{{ getPostSummary(notification.post.repost) }}%fa:quote-right%
 			</router-link>
 		</div>
@@ -39,13 +39,13 @@
 
 	<div class="notification follow" v-if="notification.type == 'follow'">
 		<mk-time :time="notification.created_at"/>
-		<router-link class="avatar-anchor" :to="`/@${notification.user.username}`">
+		<router-link class="avatar-anchor" :to="`/@${acct}`">
 			<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
 		</router-link>
 		<div class="text">
 			<p>
 				%fa:user-plus%
-				<router-link :to="`/@${notification.user.username}`">{{ notification.user.name }}</router-link>
+				<router-link :to="`/@${acct}`">{{ notification.user.name }}</router-link>
 			</p>
 		</div>
 	</div>
@@ -60,15 +60,15 @@
 
 	<div class="notification poll_vote" v-if="notification.type == 'poll_vote'">
 		<mk-time :time="notification.created_at"/>
-		<router-link class="avatar-anchor" :to="`/@${notification.user.username}`">
+		<router-link class="avatar-anchor" :to="`/@${acct}`">
 			<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
 		</router-link>
 		<div class="text">
 			<p>
 				%fa:chart-pie%
-				<router-link :to="`/@${notification.user.username}`">{{ notification.user.name }}</router-link>
+				<router-link :to="`/@${acct}`">{{ notification.user.name }}</router-link>
 			</p>
-			<router-link class="post-ref" :to="`/@${notification.post.user.username}/${notification.post.id}`">
+			<router-link class="post-ref" :to="`/@${acct}/${notification.post.id}`">
 				%fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right%
 			</router-link>
 		</div>
@@ -79,9 +79,15 @@
 <script lang="ts">
 import Vue from 'vue';
 import getPostSummary from '../../../../../common/get-post-summary';
+import getAcct from '../../../../../common/user/get-acct';
 
 export default Vue.extend({
 	props: ['notification'],
+	computed: {
+		acct() {
+			return getAcct(this.notification.user);
+		}
+	},
 	data() {
 		return {
 			getPostSummary

src/web/app/mobile/views/components/post-card.vue

@@ -1,8 +1,8 @@
 <template>
 <div class="mk-post-card">
-	<a :href="`/@${post.user.username}/${post.id}`">
+	<a :href="`/@${acct}/${post.id}`">
 		<header>
-			<img :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/><h3>{{ post.user.name }}</h3>
+			<img :src="`${acct}?thumbnail&size=64`" alt="avatar"/><h3>{{ post.user.name }}</h3>
 		</header>
 		<div>
 			{{ text }}
@@ -15,10 +15,14 @@
 <script lang="ts">
 import Vue from 'vue';
 import summary from '../../../../../common/get-post-summary';
+import getAcct from '../../../../../common/user/get-acct';
 
 export default Vue.extend({
 	props: ['post'],
 	computed: {
+		acct() {
+			return getAcct(this.post.user);
+		},
 		text(): string {
 			return summary(this.post);
 		}

src/web/app/mobile/views/components/post-detail.sub.vue

@@ -1,13 +1,13 @@
 <template>
 <div class="root sub">
-	<router-link class="avatar-anchor" :to="`/@${post.user.username}`">
+	<router-link class="avatar-anchor" :to="`/@${acct}`">
 		<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
 	</router-link>
 	<div class="main">
 		<header>
-			<router-link class="name" :to="`/@${post.user.username}`">{{ post.user.name }}</router-link>
-			<span class="username">@{{ post.user.username }}</span>
-			<router-link class="time" :to="`/@${post.user.username}/${post.id}`">
+			<router-link class="name" :to="`/@${acct}`">{{ post.user.name }}</router-link>
+			<span class="username">@{{ acct }}</span>
+			<router-link class="time" :to="`/@${acct}/${post.id}`">
 				<mk-time :time="post.created_at"/>
 			</router-link>
 		</header>
@@ -20,8 +20,15 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import getAcct from '../../../../../common/user/get-acct';
+
 export default Vue.extend({
-	props: ['post']
+	props: ['post'],
+	computed: {
+		acct() {
+			return getAcct(this.post.user);
+		}
+	}
 });
 </script>
 

src/web/app/mobile/views/components/post-detail.vue

@@ -17,11 +17,11 @@
 	</div>
 	<div class="repost" v-if="isRepost">
 		<p>
-			<router-link class="avatar-anchor" :to="`/@${post.user.username}`">
+			<router-link class="avatar-anchor" :to="`/@${acct}`">
 				<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=32`" alt="avatar"/>
 			</router-link>
 			%fa:retweet%
-			<router-link class="name" :to="`/@${post.user.username}`">
+			<router-link class="name" :to="`/@${acct}`">
 				{{ post.user.name }}
 			</router-link>
 			がRepost
@@ -29,12 +29,12 @@
 	</div>
 	<article>
 		<header>
-			<router-link class="avatar-anchor" :to="`/@${p.user.username}`">
+			<router-link class="avatar-anchor" :to="`/@${pAcct}`">
 				<img class="avatar" :src="`${p.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
 			</router-link>
 			<div>
-				<router-link class="name" :to="`/@${p.user.username}`">{{ p.user.name }}</router-link>
-				<span class="username">@{{ p.user.username }}</span>
+				<router-link class="name" :to="`/@${pAcct}`">{{ p.user.name }}</router-link>
+				<span class="username">@{{ pAcct }}</span>
 			</div>
 		</header>
 		<div class="body">
@@ -53,7 +53,7 @@
 				<mk-post-preview :post="p.repost"/>
 			</div>
 		</div>
-		<router-link class="time" :to="`/@${p.user.username}/${p.id}`">
+		<router-link class="time" :to="`/@${pAcct}/${p.id}`">
 			<mk-time :time="p.created_at" mode="detail"/>
 		</router-link>
 		<footer>
@@ -80,6 +80,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import getAcct from '../../../../../common/user/get-acct';
 import MkPostMenu from '../../../common/views/components/post-menu.vue';
 import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
 import XSub from './post-detail.sub.vue';
@@ -105,6 +106,12 @@ export default Vue.extend({
 		};
 	},
 	computed: {
+		acct() {
+			return getAcct(this.post.user);
+		},
+		pAcct() {
+			return getAcct(this.p.user);
+		},
 		isRepost(): boolean {
 			return (this.post.repost &&
 				this.post.text == null &&

src/web/app/mobile/views/components/post-preview.vue

@@ -1,13 +1,13 @@
 <template>
 <div class="mk-post-preview">
-	<router-link class="avatar-anchor" :to="`/@${post.user.username}`">
+	<router-link class="avatar-anchor" :to="`/@${acct}`">
 		<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
 	</router-link>
 	<div class="main">
 		<header>
-			<router-link class="name" :to="`/@${post.user.username}`">{{ post.user.name }}</router-link>
-			<span class="username">@{{ post.user.username }}</span>
-			<router-link class="time" :to="`/@${post.user.username}/${post.id}`">
+			<router-link class="name" :to="`/@${acct}`">{{ post.user.name }}</router-link>
+			<span class="username">@{{ acct }}</span>
+			<router-link class="time" :to="`/@${acct}/${post.id}`">
 				<mk-time :time="post.created_at"/>
 			</router-link>
 		</header>
@@ -20,8 +20,15 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import getAcct from '../../../../../common/user/get-acct';
+
 export default Vue.extend({
-	props: ['post']
+	props: ['post'],
+	computed: {
+		acct() {
+			return getAcct(this.post.user);
+		}
+	}
 });
 </script>
 

src/web/app/mobile/views/components/post.sub.vue

@@ -1,13 +1,13 @@
 <template>
 <div class="sub">
-	<router-link class="avatar-anchor" :to="`/@${post.user.username}`">
+	<router-link class="avatar-anchor" :to="`/@${acct}`">
 		<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=96`" alt="avatar"/>
 	</router-link>
 	<div class="main">
 		<header>
-			<router-link class="name" :to="`/@${post.user.username}`">{{ post.user.name }}</router-link>
-			<span class="username">@{{ post.user.username }}</span>
-			<router-link class="created-at" :to="`/@${post.user.username}/${post.id}`">
+			<router-link class="name" :to="`/@${acct}`">{{ post.user.name }}</router-link>
+			<span class="username">@{{ acct }}</span>
+			<router-link class="created-at" :to="`/@${acct}/${post.id}`">
 				<mk-time :time="post.created_at"/>
 			</router-link>
 		</header>
@@ -20,8 +20,15 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import getAcct from '../../../../../common/user/get-acct';
+
 export default Vue.extend({
-	props: ['post']
+	props: ['post'],
+	computed: {
+		acct() {
+			return getAcct(this.post.user);
+		}
+	}
 });
 </script>
 

src/web/app/mobile/views/components/post.vue

@@ -5,25 +5,25 @@
 	</div>
 	<div class="repost" v-if="isRepost">
 		<p>
-			<router-link class="avatar-anchor" :to="`/@${post.user.username}`">
+			<router-link class="avatar-anchor" :to="`/@${acct}`">
 				<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
 			</router-link>
 			%fa:retweet%
 			<span>{{ '%i18n:mobile.tags.mk-timeline-post.reposted-by%'.substr(0, '%i18n:mobile.tags.mk-timeline-post.reposted-by%'.indexOf('{')) }}</span>
-			<router-link class="name" :to="`/@${post.user.username}`">{{ post.user.name }}</router-link>
+			<router-link class="name" :to="`/@${acct}`">{{ post.user.name }}</router-link>
 			<span>{{ '%i18n:mobile.tags.mk-timeline-post.reposted-by%'.substr('%i18n:mobile.tags.mk-timeline-post.reposted-by%'.indexOf('}') + 1) }}</span>
 		</p>
 		<mk-time :time="post.created_at"/>
 	</div>
 	<article>
-		<router-link class="avatar-anchor" :to="`/@${p.user.username}`">
+		<router-link class="avatar-anchor" :to="`/@${pAcct}`">
 			<img class="avatar" :src="`${p.user.avatar_url}?thumbnail&size=96`" alt="avatar"/>
 		</router-link>
 		<div class="main">
 			<header>
-				<router-link class="name" :to="`/@${p.user.username}`">{{ p.user.name }}</router-link>
-				<span class="is-bot" v-if="p.user.account.is_bot">bot</span>
-				<span class="username">@{{ p.user.username }}</span>
+				<router-link class="name" :to="`/@${pAcct}`">{{ p.user.name }}</router-link>
+				<span class="is-bot" v-if="p.user.host === null && p.user.account.is_bot">bot</span>
+				<span class="username">@{{ pAcct }}</span>
 				<div class="info">
 					<span class="mobile" v-if="p.via_mobile">%fa:mobile-alt%</span>
 					<router-link class="created-at" :to="url">
@@ -77,6 +77,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import getAcct from '../../../../../common/user/get-acct';
 import MkPostMenu from '../../../common/views/components/post-menu.vue';
 import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
 import XSub from './post.sub.vue';
@@ -93,6 +94,12 @@ export default Vue.extend({
 		};
 	},
 	computed: {
+		acct() {
+			return getAcct(this.post.user);
+		},
+		pAcct() {
+			return getAcct(this.p.user);
+		},
 		isRepost(): boolean {
 			return (this.post.repost &&
 				this.post.text == null &&
@@ -110,7 +117,7 @@ export default Vue.extend({
 				: 0;
 		},
 		url(): string {
-			return `/@${this.p.user.username}/${this.p.id}`;
+			return `/@${this.pAcct}/${this.p.id}`;
 		},
 		urls(): string[] {
 			if (this.p.ast) {

src/web/app/mobile/views/components/user-card.vue

@@ -1,20 +1,27 @@
 <template>
 <div class="mk-user-card">
 	<header :style="user.banner_url ? `background-image: url(${user.banner_url}?thumbnail&size=1024)` : ''">
-		<a :href="`/@${user.username}`">
+		<a :href="`/@${acct}`">
 			<img :src="`${user.avatar_url}?thumbnail&size=200`" alt="avatar"/>
 		</a>
 	</header>
-	<a class="name" :href="`/@${user.username}`" target="_blank">{{ user.name }}</a>
-	<p class="username">@{{ user.username }}</p>
+	<a class="name" :href="`/@${acct}`" target="_blank">{{ user.name }}</a>
+	<p class="username">@{{ acct }}</p>
 	<mk-follow-button :user="user"/>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import getAcct from '../../../../../common/user/get-acct';
+
 export default Vue.extend({
-	props: ['user']
+	props: ['user'],
+	computed: {
+		acct() {
+			return getAcct(this.user);
+		}
+	}
 });
 </script>
 

src/web/app/mobile/views/components/user-preview.vue

@@ -1,12 +1,12 @@
 <template>
 <div class="mk-user-preview">
-	<router-link class="avatar-anchor" :to="`/@${user.username}`">
+	<router-link class="avatar-anchor" :to="`/@${acct}`">
 		<img class="avatar" :src="`${user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
 	</router-link>
 	<div class="main">
 		<header>
-			<router-link class="name" :to="`/@${user.username}`">{{ user.name }}</router-link>
-			<span class="username">@{{ user.username }}</span>
+			<router-link class="name" :to="`/@${acct}`">{{ user.name }}</router-link>
+			<span class="username">@{{ acct }}</span>
 		</header>
 		<div class="body">
 			<div class="description">{{ user.description }}</div>
@@ -17,8 +17,15 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import getAcct from '../../../../../common/user/get-acct';
+
 export default Vue.extend({
-	props: ['user']
+	props: ['user'],
+	computed: {
+		acct() {
+			return getAcct(this.user);
+		}
+	}
 });
 </script>