Resolve #6145

3 files changed, 36 insertions, 12 deletions

diff --git a/src/client/components/remote-caution.vue b/src/client/components/remote-caution.vue
new file mode 100644
index 0000000000..b24b9af2db
--- /dev/null
+++ b/src/client/components/remote-caution.vue
@@ -0,0 +1,29 @@
+<template>
+<div class="jmgmzlwq _panel"><fa :icon="faExclamationTriangle" style="margin-right: 8px;"/>{{ $t('remoteUserCaution') }}<a :href="href" rel="nofollow noopener" target="_blank">{{ $t('showOnRemote') }}</a></div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../i18n';
+export default Vue.extend({
+	i18n,
+	props: {
+		href: {
+			type: String,
+			required: true
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.jmgmzlwq {
+	font-size: 0.8em;
+	padding: 16px;
+
+	> a {
+		margin-left: 4px;
+		color: var(--accent);
+	}
+}
+</style>
diff --git a/src/client/pages/note.vue b/src/client/pages/note.vue
index 3f270b115a..5f57d0d999 100644
--- a/src/client/pages/note.vue
+++ b/src/client/pages/note.vue
@@ -9,6 +9,8 @@
 	</portal>
 
 	<div v-if="note">
+		<mk-remote-caution v-if="note.user.host != null" :href="note.url" style="margin-bottom: var(--margin)"/>
+		
 		<button class="_panel _button" v-if="hasNext && !showNext" @click="showNext = true" style="margin: 0 auto var(--margin) auto;"><fa :icon="faChevronUp"/></button>
 		<x-notes v-if="showNext" ref="next" :pagination="next"/>
 		<hr v-if="showNext"/>
@@ -32,6 +34,7 @@ import i18n from '../i18n';
 import Progress from '../scripts/loading';
 import XNote from '../components/note.vue';
 import XNotes from '../components/notes.vue';
+import MkRemoteCaution from '../components/remote-caution.vue';
 
 export default Vue.extend({
 	i18n,
@@ -43,6 +46,7 @@ export default Vue.extend({
 	components: {
 		XNote,
 		XNotes,
+		MkRemoteCaution,
 	},
 	data() {
 		return {
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index f7a51c1fbc..827f7e1c9e 100644
--- a/src/client/pages/user/index.vue
+++ b/src/client/pages/user/index.vue
@@ -3,7 +3,7 @@
 	<portal to="title" v-if="user"><mk-user-name :user="user" :nowrap="false" class="name"/></portal>
 	<portal to="avatar" v-if="user"><mk-avatar class="avatar" :user="user" :disable-preview="true"/></portal>
 	
-	<div class="remote-caution _panel" v-if="user.host != null"><fa :icon="faExclamationTriangle" style="margin-right: 8px;"/>{{ $t('remoteUserCaution') }}<a :href="user.url" rel="nofollow noopener" target="_blank">{{ $t('showOnRemote') }}</a></div>
+	<mk-remote-caution v-if="user.host != null" :href="user.url" style="margin-bottom: var(--margin)"/>
 	<div class="profile _panel" :key="user.id">
 		<div class="banner-container" :style="style">
 			<div class="banner" ref="banner" :style="style"></div>
@@ -113,6 +113,7 @@ import XUserMenu from '../../components/user-menu.vue';
 import XNote from '../../components/note.vue';
 import MkFollowButton from '../../components/follow-button.vue';
 import MkContainer from '../../components/ui/container.vue';
+import MkRemoteCaution from '../../components/remote-caution.vue';
 import Progress from '../../scripts/loading';
 import parseAcct from '../../../misc/acct/parse';
 
@@ -122,6 +123,7 @@ export default Vue.extend({
 		XNote,
 		MkFollowButton,
 		MkContainer,
+		MkRemoteCaution,
 		XPhotos: () => import('./index.photos.vue').then(m => m.default),
 		XActivity: () => import('./index.activity.vue').then(m => m.default),
 	},
@@ -215,17 +217,6 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 .mk-user-page {
-	> .remote-caution {
-		font-size: 0.8em;
-		padding: 16px;
-		margin-bottom: var(--margin);
-
-		> a {
-			margin-left: 4px;
-			color: var(--accent);
-		}
-	}
-
 	> .profile {
 		position: relative;
 		margin-bottom: var(--margin);