fix(frontend): 支援メニューがデッキUIで正常に動作しない問題を修正 (MisskeyIO#861)

+ kawaiiモードのメニュー追加

MSKY-1

packages/frontend/src/components/MkVisitorDashboard.vue

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div v-if="instance" :class="$style.root">
 	<div :class="[$style.main, $style.panel]">
-		<img v-if="miLocalStorage.getItem('kawaii')" src="/client-assets/kawaii/misskey-io.png" alt="Logo by @sawaratsuki@misskey.io" :class="$style.mainIconAlt"/>
+		<img v-if="kawaiiMode" src="/client-assets/kawaii/misskey-io.png" alt="Logo by @sawaratsuki@misskey.io" :class="$style.mainIconAlt"/>
 		<img v-else :src="instance.iconUrl || '/favicon.ico'" alt="" :class="$style.mainIcon"/>
 		<button class="_button _acrylic" :class="$style.mainMenu" @click="showMenu"><i class="ti ti-dots"></i></button>
 		<div :class="$style.mainFg">
@@ -87,6 +87,7 @@ import MkNumber from '@/components/MkNumber.vue';
 import XActiveUsersChart from '@/components/MkVisitorDashboard.ActiveUsersChart.vue';
 import { openInstanceMenu } from '@/ui/_common_/common';
 
+const kawaiiMode = miLocalStorage.getItem('kawaii') === 'true';
 const stats = ref<Misskey.entities.StatsResponse | null>(null);
 
 misskeyApiGet('stats').then((res) => {

packages/frontend/src/navbar.ts

@@ -15,6 +15,8 @@ import { ui, host } from '@/config.js';
 import { unisonReload } from '@/scripts/unison-reload.js';
 import { instance } from '@/instance.js';
 
+const kawaiiMode = miLocalStorage.getItem('kawaii') === 'true';
+
 export const navbarItemDef = reactive({
 	notifications: {
 		title: i18n.ts.notifications,
@@ -178,10 +180,21 @@ export const navbarItemDef = reactive({
 		show: computed(() => $i != null),
 		to: `/@${$i?.username}`,
 	},
+	kawaii: {
+		title: kawaiiMode ? 'no uwu plz' : 'uwu?',
+		icon: kawaiiMode ? 'ti ti-mood-smile' : 'ti ti-mood-wink',
+		action: (ev) => {
+			if (kawaiiMode) miLocalStorage.removeItem('kawaii');
+			else miLocalStorage.setItem('kawaii', 'true');
+			location.reload();
+		},
+	},
 	support: {
 		title: i18n.tsx.supportThisInstance({ name: instance.name ?? host }),
 		icon: 'ti ti-pig-money',
-		to: 'https://go.misskey.io/donate',
+		action: (ev) => {
+			window.open('https://go.misskey.io/donate', '_blank', 'noopener');
+		},
 	},
 	cacheClear: {
 		title: i18n.ts.clearCache,

packages/frontend/src/pages/about-misskey.vue

@@ -11,9 +11,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div class="_gaps_m znqjceqz">
 				<div v-panel class="about">
 					<div ref="containerEl" class="container" :class="{ playing: easterEggEngine != null }">
-						<img v-if="miLocalStorage.getItem('kawaii')" src="/client-assets/kawaii/about-icon.png" alt="" class="iconAlt" draggable="false" @load="iconLoaded" @click="gravity"/>
+						<img v-if="kawaiiMode" src="/client-assets/kawaii/about-icon.png" alt="" class="iconAlt" draggable="false" @load="iconLoaded" @click="gravity"/>
 						<img v-else src="/client-assets/about-icon.png" alt="" class="icon" draggable="false" @load="iconLoaded" @click="gravity"/>
-						<Mfm v-if="miLocalStorage.getItem('kawaii')" text="Logo by @sawaratsuki@misskey.io" class="iconCredit"/>
+						<Mfm v-if="kawaiiMode" text="Logo by @sawaratsuki@misskey.io" class="iconCredit"/>
 						<div class="misskey">Misskey</div>
 						<div class="version">v{{ version }}</div>
 						<span v-for="emoji in easterEggEmojis" :key="emoji.id" class="emoji" :data-physics-x="emoji.left" :data-physics-y="emoji.top" :class="{ _physics_circle_: !emoji.emoji.startsWith(':') }">
@@ -145,6 +145,8 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { claimAchievement, claimedAchievements } from '@/scripts/achievements.js';
 import { $i } from '@/account.js';
 
+const kawaiiMode = miLocalStorage.getItem('kawaii') === 'true';
+
 const patronsWithIcon = [{
 	name: 'カイヤン',
 	icon: 'https://assets.misskey-hub.net/patrons/a2820716883e408cb87773e377ce7c8d.jpg',

packages/frontend/src/pages/about.vue

@@ -11,9 +11,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div class="_gaps_m">
 				<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }">
 					<div style="overflow: clip;">
-						<img v-if="miLocalStorage.getItem('kawaii')" src="/client-assets/kawaii/misskey-io.png" alt="" :class="$style.bannerIconAlt"/>
+						<img v-if="kawaiiMode" src="/client-assets/kawaii/misskey-io.png" alt="" :class="$style.bannerIconAlt"/>
 						<img v-else :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" alt="" :class="$style.bannerIcon"/>
-						<Mfm v-if="miLocalStorage.getItem('kawaii')" text="Logo by @sawaratsuki@misskey.io" :class="$style.iconCredit"/>
+						<Mfm v-if="kawaiiMode" text="Logo by @sawaratsuki@misskey.io" :class="$style.iconCredit"/>
 						<div :class="$style.bannerName">
 							<b>{{ instance.name ?? host }}</b>
 						</div>
@@ -178,6 +178,7 @@ const props = withDefaults(defineProps<{
 	initialTab: 'overview',
 });
 
+const kawaiiMode = miLocalStorage.getItem('kawaii') === 'true';
 const stats = ref<Misskey.entities.StatsResponse | null>(null);
 const tab = ref(props.initialTab);
 

packages/frontend/src/ui/_common_/navbar.vue

@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div :class="$style.top">
 			<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
 			<button v-tooltip.noDelay.right="instance.name ?? i18n.ts.instance" class="_button" :class="$style.instance" @click="openInstanceMenu">
-				<img v-if="miLocalStorage.getItem('kawaii')" src="/client-assets/kawaii/misskey-io.png" alt="" :class="$style.instanceIconAlt"/>
+				<img v-if="kawaiiMode" src="/client-assets/kawaii/misskey-io.png" alt="" :class="$style.instanceIconAlt"/>
 				<img v-else :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
 			</button>
 		</div>
@@ -72,6 +72,7 @@ import { instance } from '@/instance.js';
 import { miLocalStorage } from '@/local-storage.js';
 
 const iconOnly = ref(false);
+const kawaiiMode = miLocalStorage.getItem('kawaii') === 'true';
 
 const menu = computed(() => defaultStore.state.menu);
 const otherMenuItemIndicated = computed(() => {