spec(frontend): kawaii モード

packages/frontend/assets/kawaii/LICENSE_MisskeyHQ

@@ -0,0 +1,20 @@
+LICENSE
+-------
+
+The following files:
+
+- misskey-io.png
+
+are owned by MisskeyHQ and are subject to copyright, with all rights reserved by MisskeyHQ. These files may not be redistributed, modified, or reused in any way without explicit permission from MisskeyHQ.
+
+Copyright (c) 2024 MisskeyHQ
+
+All rights reserved.
+
+This digital asset and related documentation are the property of MisskeyHQ.
+
+Permission is hereby granted to the user of this digital asset and related documentation to use, copy, and publish the asset for any purpose, provided that this notice and disclaimer of warranty appears in all copies. The user is expressly prohibited from distributing, sublicensing, selling, reselling, or transferring the asset for profit. Any form of modification or tampering with the asset is strictly prohibited.
+
+IN NO EVENT SHALL MISSKEYHQ BE LIABLE FOR ANY DAMAGES WHATSOEVER, INCLUDING BUT NOT LIMITED TO DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES, ARISING OUT OF THE USE, COPYING, PUBLISHING, OR MODIFICATION OF THIS ASSET.
+
+NO WARRANTIES OF ANY KIND ARE OFFERED FOR THIS ASSET. THIS ASSET IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.

packages/frontend/assets/kawaii/LICENSE_SAWARATSUKI

@@ -0,0 +1,12 @@
+LICENSE
+-------
+
+Copyright (c) by [さわらつき](https://github.com/SAWARATSUKI)
+
+The following files:
+
+- about-icon.png
+
+are licensed under a Creative Commons Attribution 4.0 International License.
+These files SHOULD NOT be considered as a part of the this project that has licensed under AGPL-3.0-only
+You should have received a copy of the license along with this work. If not, see <https://creativecommons.org/licenses/by/4.0/>.

packages/frontend/src/boot/common.ts

@@ -124,8 +124,8 @@ export async function common(createVue: () => App<Element>) {
 		miLocalStorage.setItem('v', instance.version);
 	});
 
-	//#region loginId
 	const params = new URLSearchParams(location.search);
+	//#region loginId
 	const loginId = params.get('loginId');
 
 	if (loginId) {
@@ -142,6 +142,14 @@ export async function common(createVue: () => App<Element>) {
 	}
 	//#endregion
 
+	//#region kawaii
+	if (params.has('kawaii')) {
+		miLocalStorage.setItem('kawaii', 'true');
+	} else {
+		miLocalStorage.removeItem('kawaii');
+	}
+	//#endregion
+
 	// NOTE: この処理は必ずクライアント更新チェック処理より後に来ること(テーマ再構築のため)
 	watch(defaultStore.reactiveState.darkMode, (darkMode) => {
 		applyTheme(darkMode ? ColdDeviceStorage.get('darkTheme') : ColdDeviceStorage.get('lightTheme'));

packages/frontend/src/components/MkVisitorDashboard.vue

@@ -6,7 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div v-if="instance" :class="$style.root">
 	<div :class="[$style.main, $style.panel]">
-		<img :src="instance.iconUrl || '/favicon.ico'" alt="" :class="$style.mainIcon"/>
+		<img v-if="miLocalStorage.getItem('kawaii')" src="/client-assets/kawaii/misskey-io.png" alt="Logo by @[email protected]" :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">
 			<h1 :class="$style.mainTitle">
@@ -81,6 +82,7 @@ import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
+import { miLocalStorage } from '@/local-storage.js';
 import MkNumber from '@/components/MkNumber.vue';
 import XActiveUsersChart from '@/components/MkVisitorDashboard.ActiveUsersChart.vue';
 import { openInstanceMenu } from '@/ui/_common_/common';
@@ -139,6 +141,13 @@ function exploreOtherServers() {
 	filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
 }
 
+.mainIconAlt {
+	width: 85%;
+	margin-top: -47px;
+	vertical-align: bottom;
+	filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
+}
+
 .mainMenu {
 	position: absolute;
 	top: 16px;

packages/frontend/src/local-storage.ts

@@ -38,7 +38,8 @@ type Keys =
 	`aiscript:${string}` |
 	'lastEmojisFetchedAt' | // DEPRECATED, stored in indexeddb (13.9.0~)
 	'emojis' | // DEPRECATED, stored in indexeddb (13.9.0~);
-	`channelLastReadedAt:${string}`
+	`channelLastReadedAt:${string}` |
+	'kawaii'
 
 export const miLocalStorage = {
 	getItem: (key: Keys): string | null => window.localStorage.getItem(key),

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

@@ -11,7 +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 src="/client-assets/about-icon.png" alt="" class="icon" draggable="false" @load="iconLoaded" @click="gravity"/>
+						<img v-if="miLocalStorage.getItem('kawaii')" 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 @[email protected]" 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(':') }">
@@ -137,6 +139,7 @@ import { physics } from '@/scripts/physics.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import { defaultStore } from '@/store.js';
+import { miLocalStorage } from '@/local-storage.js';
 import * as os from '@/os.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { claimAchievement, claimedAchievements } from '@/scripts/achievements.js';
@@ -443,6 +446,21 @@ definePageMetadata(() => ({
 				z-index: 1;
 			}
 
+			> .iconAlt {
+				display: block;
+				width: 85%;
+				margin: 0 auto;
+				position: relative;
+				z-index: 1;
+			}
+
+			> .iconCredit {
+				margin: 0 auto;
+				width: max-content;
+				position: relative;
+				z-index: 1;
+			}
+
 			> .misskey {
 				margin: 0.75em auto 0 auto;
 				width: max-content;

packages/frontend/src/pages/about.vue

@@ -11,7 +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 :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" alt="" :class="$style.bannerIcon"/>
+						<img v-if="miLocalStorage.getItem('kawaii')" 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"/>
 						<div :class="$style.bannerName">
 							<b>{{ instance.name ?? host }}</b>
 						</div>
@@ -168,6 +170,7 @@ import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { claimAchievement } from '@/scripts/achievements.js';
 import { instance } from '@/instance.js';
+import { miLocalStorage } from '@/local-storage.js';
 
 const props = withDefaults(defineProps<{
 	initialTab?: string;
@@ -230,6 +233,12 @@ definePageMetadata(() => ({
 	border-radius: 8px;
 }
 
+.bannerIconAlt {
+	display: block;
+	margin: 16px auto 0 auto;
+	width: 85%;
+}
+
 .bannerName {
 	display: block;
 	padding: 16px;
@@ -238,6 +247,13 @@ definePageMetadata(() => ({
 	background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
 }
 
+> .iconCredit {
+	margin: 0 auto;
+	width: max-content;
+	position: relative;
+	z-index: 1;
+}
+
 .rules {
 	counter-reset: item;
 	list-style: none;

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

@@ -9,7 +9,8 @@ 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 :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
+				<img v-if="miLocalStorage.getItem('kawaii')" 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>
 		<div :class="$style.middle">
@@ -68,6 +69,7 @@ import { $i, openAccountMenu as openAccountMenu_ } from '@/account.js';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
+import { miLocalStorage } from '@/local-storage.js';
 
 const iconOnly = ref(false);
 
@@ -173,6 +175,11 @@ function more(ev: MouseEvent) {
 		aspect-ratio: 1;
 	}
 
+	.instanceIconAlt {
+		display: inline-block;
+		width: 85%;
+	}
+
 	.bottom {
 		position: sticky;
 		bottom: 0;