リモートユーザーの情報更新簡単にした

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;

locales/ja-JP.yml

@@ -303,6 +303,7 @@ gamingModeInfo: "ボタンなどの装飾をいい感じのグラデーション
 light: "ライト"
 dark: "ダーク"
 lightThemes: "明るいテーマ"
+remoteUserInfoUpdate: "アイコンなどが正常に表示されない場合にここをクリックしてください。"
 darkThemes: "暗いテーマ"
 syncDeviceDarkMode: "デバイスのダークモードと同期する"
 drive: "ドライブ"

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>

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);