diff --git a/packages/frontend/src/components/MkInstanceTicker.vue b/packages/frontend/src/components/MkInstanceTicker.vue index 570c50b627..70c33a692d 100644 --- a/packages/frontend/src/components/MkInstanceTicker.vue +++ b/packages/frontend/src/components/MkInstanceTicker.vue @@ -17,6 +17,7 @@ import { instance as localInstance } from '@/instance.js'; import { getProxiedImageUrlNullable } from '@/scripts/media-proxy.js'; const props = defineProps<{ + host: string | null; instance?: { faviconUrl?: string | null name?: string | null @@ -25,12 +26,24 @@ const props = defineProps<{ }>(); // if no instance data is given, this is for the local instance -const instanceName = computed(() => props.instance?.name ?? localInstanceName); +const instanceName = computed(() => props.host == null ? localInstanceName : props.instance?.name ?? props.host); -const faviconUrl = computed(() => getProxiedImageUrlNullable(props.instance?.faviconUrl ?? localInstance.iconUrl, 'preview') ?? '/favicon.ico'); +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 themeColorStyle = computed<CSSProperties>(() => { - const themeColor = props.instance?.themeColor ?? localInstance.themeColor ?? '#777777'; + const themeColor = (props.host == null ? localInstance.themeColor : props.instance?.themeColor) ?? '#777777'; return { background: `linear-gradient(90deg, ${themeColor}, ${themeColor}00)`, }; diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index 06183a5747..52d0485743 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -50,7 +50,7 @@ SPDX-License-Identifier: AGPL-3.0-only <MkAvatar :class="$style.avatar" :user="appearNote.user" :link="!mock" :preview="!mock"/> <div :class="$style.main"> <MkNoteHeader :note="appearNote" :mini="true"/> - <MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/> + <MkInstanceTicker v-if="showTicker" :host="appearNote.user.host" :instance="appearNote.user.instance"/> <div style="container-type: inline-size;"> <p v-if="appearNote.cw != null" :class="$style.cw"> <Mfm diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue index b6ae478f28..9d3374d433 100644 --- a/packages/frontend/src/components/MkNoteDetailed.vue +++ b/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" :instance="appearNote.user.instance"/> + <MkInstanceTicker v-if="showTicker" :host="appearNote.user.host" :instance="appearNote.user.instance"/> </div> </header> <div :class="$style.noteContent">