From 696417140fedcaaea2e8bca112fe034ec2833019 Mon Sep 17 00:00:00 2001
From: mattyatea <mattyacocacora0@gmail.com>
Date: Fri, 6 Oct 2023 08:35:41 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=AA=E3=83=A2=E3=83=BC=E3=83=88=E3=83=A6?=
 =?UTF-8?q?=E3=83=BC=E3=82=B6=E3=83=BC=E3=81=AE=E6=83=85=E5=A0=B1=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E7=B0=A1=E5=8D=98=E3=81=AB=E3=81=97=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/index.d.ts                            |  1 +
 locales/ja-JP.yml                             |  1 +
 .../src/components/MkRemoteInfoUpdate.vue     | 39 +++++++++++++++++++
 packages/frontend/src/pages/user/home.vue     |  3 +-
 4 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 packages/frontend/src/components/MkRemoteInfoUpdate.vue

diff --git a/locales/index.d.ts b/locales/index.d.ts
index e254f2e9f2..feb74dec35 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -306,6 +306,7 @@ export interface Locale {
     "light": string;
     "dark": string;
     "lightThemes": string;
+    "remoteUserInfoUpdate": string;
     "darkThemes": string;
     "syncDeviceDarkMode": string;
     "drive": string;
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index c332fd9bf6..ccf1a3f81d 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -303,6 +303,7 @@ gamingModeInfo: "ボタンなどの装飾をいい感じのグラデーション
 light: "ライト"
 dark: "ダーク"
 lightThemes: "明るいテーマ"
+remoteUserInfoUpdate: "アイコンなどが正常に表示されない場合にここをクリックしてください。"
 darkThemes: "暗いテーマ"
 syncDeviceDarkMode: "デバイスのダークモードと同期する"
 drive: "ドライブ"
diff --git a/packages/frontend/src/components/MkRemoteInfoUpdate.vue b/packages/frontend/src/components/MkRemoteInfoUpdate.vue
new file mode 100644
index 0000000000..e8f8aec99a
--- /dev/null
+++ b/packages/frontend/src/components/MkRemoteInfoUpdate.vue
@@ -0,0 +1,39 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<a :class="$style.root" @click="UserInfoUpdate" ><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i>{{ i18n.ts.remoteUserInfoUpdate }}</a>
+</template>
+
+<script lang="ts" setup>
+import { i18n } from '@/i18n.js';
+import { api } from '@/os.js';
+const props = withDefaults(defineProps<{
+  UserId: string;
+}>(), {
+  UserId: null,
+});
+
+function UserInfoUpdate() {
+  api('federation/update-remote-user',{userId: props.UserId})
+}
+
+</script>
+
+<style lang="scss" module>
+.root {
+	font-size: 0.8em;
+	padding: 16px;
+	background: var(--infoWarnBg);
+	color: var(--infoWarnFg);
+	border-radius: var(--radius);
+	overflow: clip;
+}
+
+.link {
+	margin-left: 4px;
+	color: var(--accent);
+}
+</style>
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index db4eba4e72..1c1e1499fa 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div class="profile _gaps">
 				<MkAccountMoved v-if="user.movedTo" :movedTo="user.movedTo"/>
 				<MkRemoteCaution v-if="user.host != null" :href="user.url ?? user.uri!" class="warn"/>
-
+        <MkRemoteInfoUpdate v-if="user.host != null" :UserId="user.id" class="warn"/>
 				<div :key="user.id" class="main _panel">
 					<div class="banner-container" :style="style">
 						<div ref="bannerEl" class="banner" :style="style"></div>
@@ -168,6 +168,7 @@ import MkNotes from '@/components/MkNotes.vue';
 import { api } from '@/os.js';
 import { isFfVisibleForMe } from '@/scripts/isFfVisibleForMe.js';
 import MkNotifyButton from "@/components/MkNotifyButton.vue";
+import MkRemoteInfoUpdate from "@/components/MkRemoteInfoUpdate.vue";
 
 function calcAge(birthdate: string): number {
 	const date = new Date(birthdate);