From 2dcd9118e93c218239f06e33de15da577ce14bd0 Mon Sep 17 00:00:00 2001
From: MattyaDaihuku <87429435+MattyaDaihuku@users.noreply.github.com>
Date: Wed, 23 Oct 2024 12:52:20 +0000
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E3=82=B5=E3=83=BC=E3=83=90?=
 =?UTF-8?q?=E3=83=BC=E3=81=AE=E8=A1=A8=E7=A4=BA=E3=82=92=E3=82=A2=E3=82=A4?=
 =?UTF-8?q?=E3=82=B3=E3=83=B3=E3=81=AE=E3=81=BF=E3=81=AB=E5=88=87=E3=82=8A?=
 =?UTF-8?q?=E6=9B=BF=E3=81=88=E3=82=89=E3=82=8C=E3=82=8B=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/index.d.ts                            |  4 ++
 locales/ja-JP.yml                             |  1 +
 .../src/components/MkInstanceIcon.vue         | 54 +++++++++++++++++++
 packages/frontend/src/components/MkNote.vue   |  5 +-
 .../src/components/global/MkAvatar.vue        | 30 +++++++++++
 .../frontend/src/pages/settings/general.vue   |  4 +-
 packages/frontend/src/store.ts                |  4 ++
 7 files changed, 99 insertions(+), 3 deletions(-)
 create mode 100644 packages/frontend/src/components/MkInstanceIcon.vue

diff --git a/locales/index.d.ts b/locales/index.d.ts
index e00254030746..b271708adb36 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -2922,6 +2922,10 @@ export interface Locale extends ILocale {
      * ノートのサーバー情報
      */
     "instanceTicker": string;
+    /**
+     * サーバー情報をアイコンのみにする
+     */
+    "instanceIcon": string;
     /**
      * {x}を待っています
      */
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index f3f7e5c77f0e..113566e749c4 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -726,6 +726,7 @@ openInSideView: "サイドビューで開く"
 defaultNavigationBehaviour: "デフォルトのナビゲーション"
 editTheseSettingsMayBreakAccount: "これらの設定を編集するとアカウントが破損する可能性があります。"
 instanceTicker: "ノートのサーバー情報"
+instanceIcon: "サーバー情報をアイコンのみにする"
 waitingFor: "{x}を待っています"
 random: "ランダム"
 system: "システム"
diff --git a/packages/frontend/src/components/MkInstanceIcon.vue b/packages/frontend/src/components/MkInstanceIcon.vue
new file mode 100644
index 000000000000..791f8ffa0045
--- /dev/null
+++ b/packages/frontend/src/components/MkInstanceIcon.vue
@@ -0,0 +1,54 @@
+<!--
+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 be1339ecc4b2..294856afac04 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -47,10 +47,10 @@ 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"/>
+		<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"/>
+			<MkInstanceTicker v-if="showTicker && !showInstanceIcon" :instance="appearNote.user.instance"/>
 			<div style="container-type: inline-size;">
 				<p v-if="appearNote.cw != null" :class="$style.cw">
 					<Mfm
@@ -274,6 +274,7 @@ const hardMuted = ref(props.withHardMute && checkMute(appearNote.value, $i?.hard
 const translation = ref<Misskey.entities.NotesTranslateResponse | null>(null);
 const translating = ref(false);
 const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.value.user.instance);
+const showInstanceIcon = ref(defaultStore.state.instanceIcon);
 const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || (appearNote.value.visibility === 'followers' && appearNote.value.userId === $i?.id));
 const renoteCollapsed = ref(
 	defaultStore.state.collapseRenotes && isRenote && (
diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue
index 35c07bc80ca3..13c39a5f29dc 100644
--- a/packages/frontend/src/components/global/MkAvatar.vue
+++ b/packages/frontend/src/components/global/MkAvatar.vue
@@ -35,6 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			}"
 			alt=""
 		>
+		<MkInstanceIcon v-if="showInstance" :class="$style.instanceicon" :instance="user.instance"/>
 	</template>
 </component>
 </template>
@@ -49,6 +50,7 @@ import { getStaticImageUrl } 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);
@@ -62,6 +64,7 @@ const props = withDefaults(defineProps<{
 	indicator?: boolean;
 	decorations?: (Omit<Misskey.entities.UserDetailed['avatarDecorations'][number], 'id'> & { blink?: boolean; })[];
 	forceShowDecoration?: boolean;
+	showInstance?: boolean;
 }>(), {
 	target: null,
 	link: false,
@@ -69,6 +72,7 @@ const props = withDefaults(defineProps<{
 	indicator: false,
 	decorations: undefined,
 	forceShowDecoration: false,
+	showInstance: false,
 });
 
 const emit = defineEmits<{
@@ -343,4 +347,30 @@ watch(() => props.user.avatarBlurhash, () => {
 		filter: brightness(1);
 	}
 }
+
+.instanceicon {
+	height: 25px;
+	z-index: 2;
+	position: absolute;
+	left: 0;
+	bottom: 0;
+}
+
+@container (max-width: 580px) {
+	.instanceicon {
+		height: 21px;
+	}
+}
+
+@container (max-width: 450px) {
+	.instanceicon {
+		height: 19px;
+	}
+}
+
+@container (max-width: 300px) {
+	.instanceicon {
+		height: 17px;
+	}
+}
 </style>
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index 1bfdfd0e7665..84d5784d4538 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -70,7 +70,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<option value="remote">{{ i18n.ts._instanceTicker.remote }}</option>
 				<option value="always">{{ i18n.ts._instanceTicker.always }}</option>
 			</MkSelect>
-
+			<MkSwitch v-if="instanceTicker !== 'none'" v-model="instanceIcon">{{ i18n.ts.instanceIcon }}</MkSwitch>
 			<MkSelect v-model="nsfw">
 				<template #label>{{ i18n.ts.displayOfSensitiveMedia }}</template>
 				<option value="respect">{{ i18n.ts._displayOfSensitiveMedia.respect }}</option>
@@ -304,6 +304,7 @@ const showFixedPostForm = computed(defaultStore.makeGetterSetter('showFixedPostF
 const showFixedPostFormInChannel = computed(defaultStore.makeGetterSetter('showFixedPostFormInChannel'));
 const numberOfPageCache = computed(defaultStore.makeGetterSetter('numberOfPageCache'));
 const instanceTicker = computed(defaultStore.makeGetterSetter('instanceTicker'));
+const instanceIcon = computed(defaultStore.makeGetterSetter('instanceIcon'));
 const enableInfiniteScroll = computed(defaultStore.makeGetterSetter('enableInfiniteScroll'));
 const useReactionPickerForContextMenu = computed(defaultStore.makeGetterSetter('useReactionPickerForContextMenu'));
 const squareAvatars = computed(defaultStore.makeGetterSetter('squareAvatars'));
@@ -353,6 +354,7 @@ watch([
 	showNoteActionsOnlyHover,
 	showGapBetweenNotesInTimeline,
 	instanceTicker,
+	instanceIcon,
 	overridedDeviceKind,
 	mediaListWithOneImageAppearance,
 	reactionsDisplaySize,
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index aab67e0b5cd9..d35a3ae54d80 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -296,6 +296,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: 'remote' as 'none' | 'remote' | 'always',
 	},
+	instanceIcon: {
+		where: 'device',
+		default: false,
+	},
 	emojiPickerScale: {
 		where: 'device',
 		default: 1,