feat(frontend): サーバーの表示をアイコンのみに切り替えられるように

locales/index.d.ts

@@ -7491,13 +7491,21 @@ export interface Locale extends ILocale {
          */
         "none": string;
         /**
-         * リモートユーザーに表示
+         * リモートユーザーに表示(バナー)
          */
         "remote": string;
         /**
-         * 常に表示
+         * 常に表示(バナー)
          */
         "always": string;
+        /**
+         * リモートユーザーに表示(アイコン)
+         */
+        "remoteIcon": string;
+        /**
+         * 常に表示(アイコン)
+         */
+        "alwaysIcon": string;
     };
     "_serverDisconnectedBehavior": {
         /**

locales/ja-JP.yml

@@ -1955,8 +1955,10 @@ _displayOfSensitiveMedia:
 
 _instanceTicker:
   none: "表示しない"
-  remote: "リモートユーザーに表示"
-  always: "常に表示"
+  remote: "リモートユーザーに表示(バナー)"
+  always: "常に表示(バナー)"
+  remoteIcon: "リモートユーザーに表示(アイコン)"
+  alwaysIcon: "常に表示(アイコン)"
 
 _serverDisconnectedBehavior:
   reload: "自動でリロード"

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"/>
+		<MkAvatar :class="$style.avatar" :user="appearNote.user" :link="!mock" :preview="!mock" :showInstance="showIcon && !showTicker"/>
 		<div :class="$style.main">
 			<MkNoteHeader :note="appearNote" :mini="true"/>
 			<MkInstanceTicker v-if="showTicker" :host="appearNote.user.host" :instance="appearNote.user.instance"/>
@@ -288,6 +288,7 @@ const showSoftWordMutedWord = computed(() => defaultStore.state.showSoftWordMute
 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 showIcon = (defaultStore.state.instanceTicker === 'alwaysIcon') || (defaultStore.state.instanceTicker === 'remoteIcon' && appearNote.value.user.instance);
 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 && (

packages/frontend/src/components/MkNoteDetailed.vue

@@ -70,7 +70,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<img v-for="(role, i) in appearNote.user.badgeRoles" :key="i" v-tooltip="role.name" :class="$style.noteHeaderBadgeRole" :src="role.iconUrl!"/>
 					</div>
 				</div>
-				<MkInstanceTicker v-if="showTicker" :host="appearNote.user.host" :instance="appearNote.user.instance"/>
+				<MkInstanceTicker v-if="showTicker || showInstanceIcon" :host="appearNote.user.host" :instance="appearNote.user.instance"/>
 			</div>
 		</header>
 		<div :class="$style.noteContent">
@@ -304,6 +304,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);

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="instanceName"/>
+	</div>
 	<template v-if="showDecoration">
 		<img
 			v-for="decoration in decorations ?? user.avatarDecorations"
@@ -42,10 +45,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { watch, ref, computed } from 'vue';
 import * as Misskey from 'misskey-js';
+import { instanceName as localInstanceName } 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 localInstance } 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';
@@ -62,13 +67,22 @@ const props = withDefaults(defineProps<{
 	indicator?: boolean;
 	decorations?: (Omit<Misskey.entities.UserDetailed['avatarDecorations'][number], 'id'> & { blink?: boolean; })[];
 	forceShowDecoration?: boolean;
+	showInstance?: boolean;
+	host?: string | null;
+	instance?: {
+		faviconUrl?: string | null
+		name?: string | null
+	}
 }>(), {
 	target: null,
 	link: false,
 	preview: false,
 	indicator: false,
 	decorations: undefined,
 	forceShowDecoration: false,
+	showInstance: false,
+	host: null,
+	instance: undefined,
 });
 
 const emit = defineEmits<{
@@ -77,6 +91,22 @@ const emit = defineEmits<{
 
 const showDecoration = props.forceShowDecoration || defaultStore.state.showAvatarDecorations;
 
+const instanceName = computed(() => props.host == null ? localInstanceName : props.instance?.name ?? props.host);
+
+const faviconUrl = computed(() => {
+	let imageSrc: string | null = null;
+	if (props.host == null) {
+		if (localInstance.iconUrl == null) {
+			return '/favicon.ico';
+		} else {
+			imageSrc = localInstance.iconUrl;
+		}
+	} else {
+		imageSrc = props.instance?.faviconUrl ?? null;
+	}
+	return getProxiedImageUrlNullable(imageSrc);
+});
+
 const bound = computed(() => props.link
 	? { to: userPage(props.user), target: props.target }
 	: {});
@@ -343,4 +373,32 @@ watch(() => props.user.avatarBlurhash, () => {
 		filter: brightness(1);
 	}
 }
+
+.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) {
+		width: 21px;
+		height: 21px;
+	}
+
+	@container (max-width: 450px) {
+		width: 19px;
+		height: 19px;
+	}
+
+	@container (max-width: 300px) {
+		width: 17px;
+		height: 17px;
+	}
+}
 </style>

packages/frontend/src/pages/settings/general.vue

@@ -68,7 +68,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #label>{{ i18n.ts.instanceTicker }}</template>
 				<option value="none">{{ i18n.ts._instanceTicker.none }}</option>
 				<option value="remote">{{ i18n.ts._instanceTicker.remote }}</option>
+				<option value="remoteIcon">{{ i18n.ts._instanceTicker.remoteIcon }}</option>
 				<option value="always">{{ i18n.ts._instanceTicker.always }}</option>
+				<option value="alwaysIcon">{{ i18n.ts._instanceTicker.alwaysIcon }}</option>
 			</MkSelect>
 
 			<MkSelect v-model="nsfw">

packages/frontend/src/store.ts

@@ -297,7 +297,7 @@ export const defaultStore = markRaw(new Storage('base', {
 	},
 	instanceTicker: {
 		where: 'device',
-		default: 'remote' as 'none' | 'remote' | 'always',
+		default: 'remote' as 'none' | 'remote' | 'always' | 'remoteIcon' | 'alwaysIcon',
 	},
 	emojiPickerScale: {
 		where: 'device',