From 1368f58b96436fe3dbf045c7f98b392483316f86 Mon Sep 17 00:00:00 2001
From: MattyaDaihuku <87429435+MattyaDaihuku@users.noreply.github.com>
Date: Sun, 17 Nov 2024 05:21:58 +0000
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20MkAvatar=E5=86=85=E3=81=ABMkIn?=
 =?UTF-8?q?stanceIcon=E3=81=AE=E5=86=85=E5=AE=B9=E3=82=92=E5=90=AB?=
 =?UTF-8?q?=E3=82=81=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/MkInstanceIcon.vue         | 54 -------------------
 packages/frontend/src/components/MkNote.vue   |  2 +-
 .../src/components/MkNoteDetailed.vue         |  3 +-
 .../src/components/global/MkAvatar.vue        | 42 ++++++++++-----
 4 files changed, 32 insertions(+), 69 deletions(-)
 delete mode 100644 packages/frontend/src/components/MkInstanceIcon.vue

diff --git a/packages/frontend/src/components/MkInstanceIcon.vue b/packages/frontend/src/components/MkInstanceIcon.vue
deleted file mode 100644
index 791f8ffa00..0000000000
--- a/packages/frontend/src/components/MkInstanceIcon.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<div>
-	<img v-if="faviconUrl" :class="$style.instanceIcon" :src="faviconUrl"/>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { instance as Instance } from '@/instance.js';
-import { getProxiedImageUrlNullable } from '@/scripts/media-proxy.js';
-const props = defineProps<{
-	instance?: {
-		faviconUrl?: string | null
-	}
-}>();
-const faviconUrl = computed(() => props.instance ? getProxiedImageUrlNullable(props.instance.faviconUrl, 'preview') : getProxiedImageUrlNullable(Instance.iconUrl, 'preview') ?? '/favicon.ico');
-</script>
-
-<style lang="scss" module>
-.instanceIcon {
-	width: 25px;
-	height: 25px;
-	border-radius: 50%;
-	opacity: 0.7;
-	background: var(--MI_THEME-panel);
-	box-shadow: 0 0 0 2px var(--MI_THEME-panel);
-}
-
-@container (max-width: 580px) {
-	.instanceIcon {
-		width: 21px;
-		height: 21px;
-	}
-}
-
-@container (max-width: 450px) {
-	.instanceIcon {
-		width: 19px;
-		height: 19px;
-	}
-}
-
-@container (max-width: 300px) {
-	.instanceIcon {
-		width: 17px;
-		height: 17px;
-	}
-}
-</style>
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 0f6a23cadc..10fd98f15e 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -47,7 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 	<article v-else :class="$style.article" @contextmenu.stop="onContextmenu">
 		<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
-		<MkAvatar :class="$style.avatar" :user="appearNote.user" :link="!mock" :preview="!mock" :showInstance="showInstanceIcon"/>
+		<MkAvatar :class="$style.avatar" :user="appearNote.user" :link="!mock" :preview="!mock" :showInstance="showInstanceIcon && !showTicker"/>
 		<div :class="$style.main">
 			<MkNoteHeader :note="appearNote" :mini="true"/>
 			<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/>
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index e0473dce5e..19ce5405f6 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -63,7 +63,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</div>
 				</div>
 				<div :class="$style.noteHeaderUsername"><MkAcct :user="appearNote.user"/></div>
-				<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/>
+				<MkInstanceTicker v-if="showTicker || showInstanceIcon" :instance="appearNote.user.instance"/>
 			</div>
 		</header>
 		<div :class="$style.noteContent">
@@ -295,6 +295,7 @@ const translating = ref(false);
 const parsed = appearNote.value.text ? mfm.parse(appearNote.value.text) : null;
 const urls = parsed ? extractUrlFromMfm(parsed).filter((url) => appearNote.value.renote?.url !== url && appearNote.value.renote?.uri !== url) : null;
 const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.value.user.instance);
+const showInstanceIcon = (defaultStore.state.instanceTicker === 'alwaysIcon') || (defaultStore.state.instanceTicker === 'remoteIcon' && appearNote.value.user.instance);
 const conversation = ref<Misskey.entities.Note[]>([]);
 const replies = ref<Misskey.entities.Note[]>([]);
 const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || appearNote.value.userId === $i?.id);
diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue
index b4aba8fa7f..ea0f1fe9ec 100644
--- a/packages/frontend/src/components/global/MkAvatar.vue
+++ b/packages/frontend/src/components/global/MkAvatar.vue
@@ -23,6 +23,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</div>
 	</div>
+	<div v-if="showInstance">
+		<img v-if="faviconUrl" :class="$style.instanceIcon" :src="faviconUrl" :title="instance.name ?? undefined"/>
+	</div>
 	<template v-if="showDecoration">
 		<img
 			v-for="decoration in decorations ?? user.avatarDecorations"
@@ -36,21 +39,21 @@ SPDX-License-Identifier: AGPL-3.0-only
 			alt=""
 		>
 	</template>
-	<MkInstanceIcon v-if="showInstance" :class="$style.instanceicon" :instance="user.instance"/>
 </component>
 </template>
 
 <script lang="ts" setup>
 import { watch, ref, computed } from 'vue';
 import * as Misskey from 'misskey-js';
+import { instanceName } from '@@/js/config.js';
 import { extractAvgColorFromBlurhash } from '@@/js/extract-avg-color-from-blurhash.js';
 import MkImgWithBlurhash from '../MkImgWithBlurhash.vue';
 import MkA from './MkA.vue';
-import { getStaticImageUrl } from '@/scripts/media-proxy.js';
+import { instance as Instance } from '@/instance.js';
+import { getStaticImageUrl, getProxiedImageUrlNullable } from '@/scripts/media-proxy.js';
 import { acct, userPage } from '@/filters/user.js';
 import MkUserOnlineIndicator from '@/components/MkUserOnlineIndicator.vue';
 import { defaultStore } from '@/store.js';
-import MkInstanceIcon from '@/components/MkInstanceIcon.vue';
 
 const animation = ref(defaultStore.state.animation);
 const squareAvatars = ref(defaultStore.state.squareAvatars);
@@ -65,6 +68,10 @@ const props = withDefaults(defineProps<{
 	decorations?: (Omit<Misskey.entities.UserDetailed['avatarDecorations'][number], 'id'> & { blink?: boolean; })[];
 	forceShowDecoration?: boolean;
 	showInstance?: boolean;
+	instance?: {
+		faviconUrl?: string | null,
+		name?: string | null,
+	};
 }>(), {
 	target: null,
 	link: false,
@@ -73,6 +80,7 @@ const props = withDefaults(defineProps<{
 	decorations: undefined,
 	forceShowDecoration: false,
 	showInstance: false,
+	instance: undefined,
 });
 
 const emit = defineEmits<{
@@ -81,6 +89,12 @@ const emit = defineEmits<{
 
 const showDecoration = props.forceShowDecoration || defaultStore.state.showAvatarDecorations;
 
+const instance = props.instance ?? {
+	name: instanceName,
+};
+
+const faviconUrl = computed(() => props.instance ? getProxiedImageUrlNullable(props.instance.faviconUrl, 'preview') : getProxiedImageUrlNullable(Instance.iconUrl, 'preview') ?? '/favicon.ico');
+
 const bound = computed(() => props.link
 	? { to: userPage(props.user), target: props.target }
 	: {});
@@ -348,28 +362,30 @@ watch(() => props.user.avatarBlurhash, () => {
 	}
 }
 
-.instanceicon {
+.instanceIcon {
+	width: 25px;
 	height: 25px;
+	border-radius: 50%;
+	opacity: 0.65;
 	z-index: 2;
 	position: absolute;
 	left: 0;
 	bottom: 0;
-}
+	background: var(--MI_THEME-panel);
+	box-shadow: 0 0 0 2px var(--MI_THEME-panel);
 
-@container (max-width: 580px) {
-	.instanceicon {
+	@container (max-width: 580px) {
+		width: 21px;
 		height: 21px;
 	}
-}
 
-@container (max-width: 450px) {
-	.instanceicon {
+	@container (max-width: 450px) {
+		width: 19px;
 		height: 19px;
 	}
-}
 
-@container (max-width: 300px) {
-	.instanceicon {
+	@container (max-width: 300px) {
+		width: 17px;
 		height: 17px;
 	}
 }