Feat: InstanceTickerIconの背景表示追加

locales/index.d.ts

@@ -7121,6 +7121,10 @@ export interface Locale extends ILocale {
          * アイコンを表示
          */
         "icon": string;
+        /**
+         * アイコン(背景付き)を表示
+         */
+        "iconColor": string;
     };
     "_serverDisconnectedBehavior": {
         /**

locales/ja-JP.yml

@@ -1860,6 +1860,7 @@ _instanceTickerStyle:
   default: "デフォルト"
   minimal: "小さく表示"
   icon: "アイコンを表示"
+  iconColor: "アイコン(背景付き)を表示"
 
 _serverDisconnectedBehavior:
   reload: "自動でリロード"

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "2024.3.1-n.6",
+	"version": "2024.3.1-n.7",
 	"codename": "nasubi",
 	"repository": {
 		"type": "git",

packages/frontend/src/components/MkInstanceTickerIcon.vue

@@ -1,34 +1,44 @@
 <template>
-<div v-if="instance" v-tooltip="instance.name" :class="$style.root">
-	<img v-if="faviconUrl" :class="$style.icon" :src="faviconUrl"/>
+<div v-tooltip="instance.name" :class="$style.root">
+	<img v-if="faviconUrl && instance.themeColor && !darkMode" :class="$style.icon" :src="faviconUrl" :style="{ backgroundColor: instance.themeColor }"/>
+	<img v-else-if="faviconUrl && instance.themeColor" :class="$style.icon" :src="faviconUrl"/>
 	<i v-if="!faviconUrl" class="ti ti-whirl"></i>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import { instance as Instance } from '@/instance';
-import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
+import { computed, defineProps } from 'vue';
+import * as Misskey from 'misskey-js';
+import { instanceName } from '@/config.js';
+import { instance as Instance } from '@/instance.js';
+import { getProxiedImageUrlNullable } from '@/scripts/media-proxy.js';
+import { defaultStore } from '@/store';
 
 const props = defineProps<{
-	instance?: {
-		faviconUrl?: string
-		name: string
-	}
+	instance?: Misskey.entities.User['instance'];
 }>();
 
+// if no instance data is given, this is for the local instance
+const instance = props.instance ?? {
+	name: instanceName,
+	themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement).content,
+};
+
 const faviconUrl = computed(() => props.instance ? getProxiedImageUrlNullable(props.instance.faviconUrl, 'preview') : getProxiedImageUrlNullable(Instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(Instance.iconUrl, 'preview') ?? '/favicon.ico');
+
+const darkMode = defaultStore.state.darkMode;
+const TickerStyle = defaultStore.state.instanceTickerStyle;
 </script>
 
 <style lang="scss" module>
 .root {
 	display: inline-flex;
 	justify-content: center;
-	vertical-align: text-top;
+	vertical-align: top;
 }
 
 .icon {
-	height: 2ex;
+	height: 1.3em;
 	flex-shrink: 0;
 	border-radius: 25%;
 }

packages/frontend/src/components/MkInstanceTickerMini.vue

@@ -6,17 +6,14 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, defineProps } from 'vue';
+import * as Misskey from 'misskey-js';
 import { instanceName } from '@/config.js';
 import { instance as Instance } from '@/instance.js';
 import { getProxiedImageUrlNullable } from '@/scripts/media-proxy.js';
 
 const props = defineProps<{
-	instance?: {
-		faviconUrl?: string
-		name: string
-		themeColor?: string
-	}
+	instance?: Misskey.entities.User['instance'];
 }>();
 
 // if no instance data is given, this is for the local instance
@@ -25,8 +22,8 @@ const instance = props.instance ?? {
 	themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement).content,
 };
 
-const faviconUrl = computed(() => props.instance ? getProxiedImageUrlNullable(props.instance.faviconUrl, 'preview') : getProxiedImageUrlNullable(Instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(Instance.faviconUrl, 'preview') ?? '/favicon.ico');
-const firstLetter = instance.name.slice(0, 1);
+const faviconUrl = computed(() => props.instance ? getProxiedImageUrlNullable(props.instance.faviconUrl, 'preview') : getProxiedImageUrlNullable(Instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(Instance.iconUrl, 'preview') ?? '/favicon.ico');
+const firstLetter = instance.name?.slice(0, 1);
 
 const themeColor = instance.themeColor ?? '#777777';
 
@@ -41,13 +38,13 @@ const bg = {
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	height: 3.5ex;
-	width: 3.5ex;
+	height: 2em;
+	width: 2em;
 	border-radius: 0 0 8px 0;
 }
 
 .icon {
-	height: 2ex;
+	height: 1em;
 	flex-shrink: 0;
 	border-radius: 25%;
 	filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.75));

packages/frontend/src/components/MkNote.vue

@@ -50,7 +50,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkInstanceTickerMini v-if="showTicker && tickerStyle === 'minimal'" :class="$style.tickerMini" :instance="appearNote.user.instance"/>
 		<MkAvatar :class="$style.avatar" :user="appearNote.user" link preview/>
 		<div :class="$style.main">
-			<MkNoteHeader :class="$style.header" :note="appearNote" :mini="true" :showItance="showTicker && tickerStyle === 'icon'"/>
+			<MkNoteHeader :class="$style.header" :note="appearNote" :mini="true" :showInstance="showTicker && tickerStyle === 'icon'"/>
 			<MkInstanceTicker v-if="showTicker && tickerStyle === 'default'" :class="$style.ticker" :instance="appearNote.user.instance"/>
 			<div style="container-type: inline-size;">
 				<p v-if="appearNote.cw != null" :class="$style.cw">
@@ -199,6 +199,7 @@ import MkRippleEffect from '@/components/MkRippleEffect.vue';
 import { showMovedDialog } from '@/scripts/show-moved-dialog.js';
 import { shouldCollapsed } from '@/scripts/collapsed.js';
 import { isEnabledUrlPreview } from '@/instance.js';
+import MkInstanceTickerMini from '@/components/MkInstanceTickerMini.vue';
 
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;

packages/frontend/src/components/MkNoteHeader.vue

@@ -25,7 +25,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkA v-else :to="notePage(note)">
 			<MkTime :time="note.createdAt" colored/>
 		</MkA>
-		<MkInstanceTickerIcon v-if="showInstance" style="margin-left: 0.5em;" :instance="note.user.instance"/>
 		<span v-if="note.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[note.visibility]">
 			<i v-if="note.visibility === 'home'" class="ti ti-home"></i>
 			<i v-else-if="note.visibility === 'followers'" class="ti ti-lock"></i>
@@ -34,6 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-rocket-off"></i></span>
 		<span v-if="note.channel" style="margin-left: 0.5em;" :title="note.channel.name"><i class="ti ti-device-tv"></i></span>
 		<span v-if="note.deleteAt" style="margin-left: 0.5em;" :title="i18n.tsx.noteDeletationAt({ time: dateTimeFormat.format(new Date(note.deleteAt)) })"><i class="ti ti-bomb"></i></span>
+		<MkInstanceTickerIcon v-if="showInstance" style="margin-left: 0.5em;" :instance="note.user.instance"/>
 	</div>
 </header>
 </template>
@@ -44,11 +44,13 @@ import * as Misskey from 'misskey-js';
 import { i18n } from '@/i18n.js';
 import { notePage } from '@/filters/note.js';
 import { userPage } from '@/filters/user.js';
+import MkInstanceTickerIcon from '@/components/MkInstanceTickerIcon.vue';
 import { dateTimeFormat } from '@/scripts/intl-const.js';
 
 defineProps<{
 	note: Misskey.entities.Note & {isSchedule? : boolean, isScheduled? : boolean};
   scheduled?: boolean;
+	showInstance?: boolean;
 }>();
 
 const mock = inject<boolean>('mock', false);

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

@@ -82,6 +82,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<option value="default">{{ i18n.ts._instanceTickerStyle.default }}</option>
 				<option value="minimal">{{ i18n.ts._instanceTickerStyle.minimal }}</option>
 				<option value="icon">{{ i18n.ts._instanceTickerStyle.icon }}</option>
+				<!--
+					<option value="iconColor">{{ i18n.ts._instanceTickerStyle.iconColor }}</option>
+				-->
 			</MkSelect>
 
 			<MkSelect v-model="nsfw">

packages/frontend/src/store.ts

@@ -312,7 +312,7 @@ export const defaultStore = markRaw(new Storage('base', {
 	},
 	instanceTickerStyle: {
 		where: 'device',
-		default: 'default' as 'default' | 'minimal' | 'icon',
+		default: 'default' as 'default' | 'minimal' | 'icon' | 'iconColor',
 	},
 	emojiPickerScale: {
 		where: 'device',

update.sh

@@ -1,6 +1,5 @@
 #!/bin/sh
 sudo service misskey stop
-git pull
 git submodule update --init
 NODE_ENV=production pnpm install --frozen-lockfile
 NODE_ENV=production NODE_OPTIONS='--max-old-space-size=2048' pnpm run build