From 64be9baed0b64d882115bbfd3732a0791baa3ff8 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 14 Jul 2022 17:22:06 +0900
Subject: [PATCH 01/26] chore(client): tweak style

---
 packages/client/src/ui/_common_/sidebar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/ui/_common_/sidebar.vue b/packages/client/src/ui/_common_/sidebar.vue
index a72bf786ad..f082af9aa8 100644
--- a/packages/client/src/ui/_common_/sidebar.vue
+++ b/packages/client/src/ui/_common_/sidebar.vue
@@ -244,7 +244,7 @@ function more(ev: MouseEvent) {
 				padding: 18px 0;
 				width: 100%;
 				text-align: center;
-				font-size: $ui-font-size * 1.1;
+				font-size: $ui-font-size;
 				line-height: initial;
 
 				> .icon,

From 242538ddce37de41d924f12ab8a3637c264d231c Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 14 Jul 2022 17:42:12 +0900
Subject: [PATCH 02/26] refactor(client): rename menu(sidebar) -> navbar

---
 locales/ja-JP.yml                                |  1 +
 packages/client/src/components/launch-pad.vue    |  4 ++--
 packages/client/src/{menu.ts => navbar.ts}       |  2 +-
 packages/client/src/pages/settings/index.vue     | 16 +++++++++-------
 .../src/pages/settings/{menu.vue => navbar.vue}  | 10 +++++-----
 .../src/pages/settings/statusbars.statusbar.vue  |  1 -
 ...ebar-for-mobile.vue => navbar-for-mobile.vue} | 14 +++++++-------
 .../src/ui/_common_/{sidebar.vue => navbar.vue}  | 12 ++++++------
 packages/client/src/ui/classic.header.vue        | 16 ++++++++--------
 packages/client/src/ui/classic.sidebar.vue       | 16 ++++++++--------
 packages/client/src/ui/classic.vue               |  1 -
 packages/client/src/ui/deck.vue                  | 10 +++++-----
 packages/client/src/ui/universal.vue             | 10 +++++-----
 13 files changed, 57 insertions(+), 56 deletions(-)
 rename packages/client/src/{menu.ts => navbar.ts} (98%)
 rename packages/client/src/pages/settings/{menu.vue => navbar.vue} (90%)
 rename packages/client/src/ui/_common_/{sidebar-for-mobile.vue => navbar-for-mobile.vue} (85%)
 rename packages/client/src/ui/_common_/{sidebar.vue => navbar.vue} (89%)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 0e278bead6..fd8aca868b 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -887,6 +887,7 @@ beta: "ベータ"
 enableAutoSensitive: "自動NSFW判定"
 enableAutoSensitiveDescription: "利用可能な場合は、機械学習を利用して自動でメディアにNSFWフラグを設定します。この機能をオフにしても、インスタンスによっては自動で設定されることがあります。"
 activeEmailValidationDescription: "ユーザーのメールアドレスのバリデーションを、捨てアドかどうかや実際に通信可能かどうかなどを判定しより積極的に行います。オフにすると単に文字列として正しいかどうかのみチェックされます。"
+navbar: "ナビゲーションバー"
 
 _sensitiveMediaDetection:
   description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てることができます。サーバーの負荷が少し増えます。"
diff --git a/packages/client/src/components/launch-pad.vue b/packages/client/src/components/launch-pad.vue
index a6025f8b27..4693df2916 100644
--- a/packages/client/src/components/launch-pad.vue
+++ b/packages/client/src/components/launch-pad.vue
@@ -36,7 +36,7 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import MkModal from '@/components/ui/modal.vue';
-import { menuDef } from '@/menu';
+import { navbarItemDef } from '@/navbar';
 import { instanceName } from '@/config';
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
@@ -62,7 +62,7 @@ const modal = $ref<InstanceType<typeof MkModal>>();
 
 const menu = defaultStore.state.menu;
 
-const items = Object.keys(menuDef).filter(k => !menu.includes(k)).map(k => menuDef[k]).filter(def => def.show == null ? true : def.show).map(def => ({
+const items = Object.keys(navbarItemDef).filter(k => !menu.includes(k)).map(k => navbarItemDef[k]).filter(def => def.show == null ? true : def.show).map(def => ({
 	type: def.to ? 'link' : 'button',
 	text: i18n.ts[def.title],
 	icon: def.icon,
diff --git a/packages/client/src/menu.ts b/packages/client/src/navbar.ts
similarity index 98%
rename from packages/client/src/menu.ts
rename to packages/client/src/navbar.ts
index 31b2ed597c..03e00b1c17 100644
--- a/packages/client/src/menu.ts
+++ b/packages/client/src/navbar.ts
@@ -6,7 +6,7 @@ import { i18n } from '@/i18n';
 import { ui } from '@/config';
 import { unisonReload } from '@/scripts/unison-reload';
 
-export const menuDef = reactive({
+export const navbarItemDef = reactive({
 	notifications: {
 		title: 'notifications',
 		icon: 'fas fa-bell',
diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
index 76410ec12f..f970660a4a 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -114,15 +114,15 @@ const menuDef = computed(() => [{
 		to: '/settings/theme',
 		active: props.initialPage === 'theme',
 	}, {
-		icon: 'fas fa-list-ul',
+		icon: 'fas fa-bars',
+		text: i18n.ts.navbar,
+		to: '/settings/navbar',
+		active: props.initialPage === 'navbar',
+	}, {
+		icon: 'fas fa-bars-progress',
 		text: i18n.ts.statusbar,
 		to: '/settings/statusbars',
 		active: props.initialPage === 'statusbars',
-	}, {
-		icon: 'fas fa-list-ul',
-		text: i18n.ts.menu,
-		to: '/settings/menu',
-		active: props.initialPage === 'menu',
 	}, {
 		icon: 'fas fa-music',
 		text: i18n.ts.sounds,
@@ -225,7 +225,7 @@ const component = computed(() => {
 		case 'theme': return defineAsyncComponent(() => import('./theme.vue'));
 		case 'theme/install': return defineAsyncComponent(() => import('./theme.install.vue'));
 		case 'theme/manage': return defineAsyncComponent(() => import('./theme.manage.vue'));
-		case 'menu': return defineAsyncComponent(() => import('./menu.vue'));
+		case 'navbar': return defineAsyncComponent(() => import('./navbar.vue'));
 		case 'statusbars': return defineAsyncComponent(() => import('./statusbars.vue'));
 		case 'sounds': return defineAsyncComponent(() => import('./sounds.vue'));
 		case 'custom-css': return defineAsyncComponent(() => import('./custom-css.vue'));
@@ -291,6 +291,8 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() => []);
 
 definePageMetadata(INFO);
+// w 890
+// h 700
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/settings/menu.vue b/packages/client/src/pages/settings/navbar.vue
similarity index 90%
rename from packages/client/src/pages/settings/menu.vue
rename to packages/client/src/pages/settings/navbar.vue
index 076654c105..534112c3e0 100644
--- a/packages/client/src/pages/settings/menu.vue
+++ b/packages/client/src/pages/settings/navbar.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="_formRoot">
 	<FormTextarea v-model="items" tall manual-save class="_formBlock">
-		<template #label>{{ i18n.ts.menu }}</template>
+		<template #label>{{ i18n.ts.navbar }}</template>
 		<template #caption><button class="_textButton" @click="addItem">{{ i18n.ts.addItem }}</button></template>
 	</FormTextarea>
 
@@ -23,7 +23,7 @@ import FormTextarea from '@/components/form/textarea.vue';
 import FormRadios from '@/components/form/radios.vue';
 import FormButton from '@/components/ui/button.vue';
 import * as os from '@/os';
-import { menuDef } from '@/menu';
+import { navbarItemDef } from '@/navbar';
 import { defaultStore } from '@/store';
 import { unisonReload } from '@/scripts/unison-reload';
 import { i18n } from '@/i18n';
@@ -45,11 +45,11 @@ async function reloadAsk() {
 }
 
 async function addItem() {
-	const menu = Object.keys(menuDef).filter(k => !defaultStore.state.menu.includes(k));
+	const menu = Object.keys(navbarItemDef).filter(k => !defaultStore.state.menu.includes(k));
 	const { canceled, result: item } = await os.select({
 		title: i18n.ts.addItem,
 		items: [...menu.map(k => ({
-			value: k, text: i18n.ts[menuDef[k].title],
+			value: k, text: i18n.ts[navbarItemDef[k].title],
 		})), {
 			value: '-', text: i18n.ts.divider,
 		}],
@@ -81,7 +81,7 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() => []);
 
 definePageMetadata({
-	title: i18n.ts.menu,
+	title: i18n.ts.navbar,
 	icon: 'fas fa-list-ul',
 });
 </script>
diff --git a/packages/client/src/pages/settings/statusbars.statusbar.vue b/packages/client/src/pages/settings/statusbars.statusbar.vue
index 206979925e..e19690209a 100644
--- a/packages/client/src/pages/settings/statusbars.statusbar.vue
+++ b/packages/client/src/pages/settings/statusbars.statusbar.vue
@@ -86,7 +86,6 @@ import FormRadios from '@/components/form/radios.vue';
 import FormButton from '@/components/ui/button.vue';
 import FormRange from '@/components/form/range.vue';
 import * as os from '@/os';
-import { menuDef } from '@/menu';
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
 
diff --git a/packages/client/src/ui/_common_/sidebar-for-mobile.vue b/packages/client/src/ui/_common_/navbar-for-mobile.vue
similarity index 85%
rename from packages/client/src/ui/_common_/sidebar-for-mobile.vue
rename to packages/client/src/ui/_common_/navbar-for-mobile.vue
index e789ae5e06..8ac4c1150a 100644
--- a/packages/client/src/ui/_common_/sidebar-for-mobile.vue
+++ b/packages/client/src/ui/_common_/navbar-for-mobile.vue
@@ -9,9 +9,9 @@
 		</MkA>
 		<template v-for="item in menu">
 			<div v-if="item === '-'" class="divider"></div>
-			<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
-				<i class="icon fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
-				<span v-if="menuDef[item].indicated" class="indicator"><i class="icon fas fa-circle"></i></span>
+			<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: navbarItemDef[item].active }]" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
+				<i class="icon fa-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ $ts[navbarItemDef[item].title] }}</span>
+				<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon fas fa-circle"></i></span>
 			</component>
 		</template>
 		<div class="divider"></div>
@@ -37,7 +37,7 @@ import { computed, defineAsyncComponent, defineComponent, ref, toRef, watch } fr
 import { host } from '@/config';
 import { search } from '@/scripts/search';
 import * as os from '@/os';
-import { menuDef } from '@/menu';
+import { navbarItemDef } from '@/navbar';
 import { openAccountMenu } from '@/account';
 import { defaultStore } from '@/store';
 
@@ -45,9 +45,9 @@ export default defineComponent({
 	setup(props, context) {
 		const menu = toRef(defaultStore.state, 'menu');
 		const otherMenuItemIndicated = computed(() => {
-			for (const def in menuDef) {
+			for (const def in navbarItemDef) {
 				if (menu.value.includes(def)) continue;
-				if (menuDef[def].indicated) return true;
+				if (navbarItemDef[def].indicated) return true;
 			}
 			return false;
 		});
@@ -57,7 +57,7 @@ export default defineComponent({
 			accounts: [],
 			connection: null,
 			menu,
-			menuDef: menuDef,
+			navbarItemDef: navbarItemDef,
 			otherMenuItemIndicated,
 			post: os.post,
 			search,
diff --git a/packages/client/src/ui/_common_/sidebar.vue b/packages/client/src/ui/_common_/navbar.vue
similarity index 89%
rename from packages/client/src/ui/_common_/sidebar.vue
rename to packages/client/src/ui/_common_/navbar.vue
index f082af9aa8..4fb3980142 100644
--- a/packages/client/src/ui/_common_/sidebar.vue
+++ b/packages/client/src/ui/_common_/navbar.vue
@@ -9,9 +9,9 @@
 		</MkA>
 		<template v-for="item in menu">
 			<div v-if="item === '-'" class="divider"></div>
-			<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
-				<i class="icon fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
-				<span v-if="menuDef[item].indicated" class="indicator"><i class="icon fas fa-circle"></i></span>
+			<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: navbarItemDef[item].active }]" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
+				<i class="icon fa-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ $ts[navbarItemDef[item].title] }}</span>
+				<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon fas fa-circle"></i></span>
 			</component>
 		</template>
 		<div class="divider"></div>
@@ -35,7 +35,7 @@
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, ref, watch } from 'vue';
 import * as os from '@/os';
-import { menuDef } from '@/menu';
+import { navbarItemDef } from '@/navbar';
 import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
 import { defaultStore } from '@/store';
 
@@ -43,9 +43,9 @@ const iconOnly = ref(false);
 
 const menu = computed(() => defaultStore.state.menu);
 const otherMenuItemIndicated = computed(() => {
-	for (const def in menuDef) {
+	for (const def in navbarItemDef) {
 		if (menu.value.includes(def)) continue;
-		if (menuDef[def].indicated) return true;
+		if (navbarItemDef[def].indicated) return true;
 	}
 	return false;
 });
diff --git a/packages/client/src/ui/classic.header.vue b/packages/client/src/ui/classic.header.vue
index 57008aeaed..131767c0e3 100644
--- a/packages/client/src/ui/classic.header.vue
+++ b/packages/client/src/ui/classic.header.vue
@@ -7,9 +7,9 @@
 			</MkA>
 			<template v-for="item in menu">
 				<div v-if="item === '-'" class="divider"></div>
-				<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-click-anime v-tooltip="$ts[menuDef[item].title]" class="item _button" :class="item" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
-					<i class="fa-fw" :class="menuDef[item].icon"></i>
-					<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
+				<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime v-tooltip="$ts[navbarItemDef[item].title]" class="item _button" :class="item" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
+					<i class="fa-fw" :class="navbarItemDef[item].icon"></i>
+					<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
 				</component>
 			</template>
 			<div class="divider"></div>
@@ -43,7 +43,7 @@ import { defineAsyncComponent, defineComponent } from 'vue';
 import { host } from '@/config';
 import { search } from '@/scripts/search';
 import * as os from '@/os';
-import { menuDef } from '@/menu';
+import { navbarItemDef } from '@/navbar';
 import { openAccountMenu } from '@/account';
 import MkButton from '@/components/ui/button.vue';
 
@@ -57,7 +57,7 @@ export default defineComponent({
 			host: host,
 			accounts: [],
 			connection: null,
-			menuDef: menuDef,
+			navbarItemDef: navbarItemDef,
 			settingsWindowed: false,
 		};
 	},
@@ -68,9 +68,9 @@ export default defineComponent({
 		},
 
 		otherNavItemIndicated(): boolean {
-			for (const def in this.menuDef) {
+			for (const def in this.navbarItemDef) {
 				if (this.menu.includes(def)) continue;
-				if (this.menuDef[def].indicated) return true;
+				if (this.navbarItemDef[def].indicated) return true;
 			}
 			return false;
 		},
@@ -113,7 +113,7 @@ export default defineComponent({
 				withExtraOperation: true,
 			}, ev);
 		},
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/ui/classic.sidebar.vue b/packages/client/src/ui/classic.sidebar.vue
index 6c0ce023e4..172401f420 100644
--- a/packages/client/src/ui/classic.sidebar.vue
+++ b/packages/client/src/ui/classic.sidebar.vue
@@ -14,9 +14,9 @@
 	</MkA>
 	<template v-for="item in menu">
 		<div v-if="item === '-'" class="divider"></div>
-		<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-click-anime class="item _button" :class="item" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
-			<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
-			<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
+		<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="item" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
+			<i class="fa-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ $ts[navbarItemDef[item].title] }}</span>
+			<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
 		</component>
 	</template>
 	<div class="divider"></div>
@@ -45,7 +45,7 @@ import { defineAsyncComponent, defineComponent } from 'vue';
 import { host } from '@/config';
 import { search } from '@/scripts/search';
 import * as os from '@/os';
-import { menuDef } from '@/menu';
+import { navbarItemDef } from '@/navbar';
 import { openAccountMenu } from '@/account';
 import MkButton from '@/components/ui/button.vue';
 import { StickySidebar } from '@/scripts/sticky-sidebar';
@@ -62,7 +62,7 @@ export default defineComponent({
 			host: host,
 			accounts: [],
 			connection: null,
-			menuDef: menuDef,
+			navbarItemDef: navbarItemDef,
 			iconOnly: false,
 			settingsWindowed: false,
 		};
@@ -74,9 +74,9 @@ export default defineComponent({
 		},
 
 		otherNavItemIndicated(): boolean {
-			for (const def in this.menuDef) {
+			for (const def in this.navbarItemDef) {
 				if (this.menu.includes(def)) continue;
-				if (this.menuDef[def].indicated) return true;
+				if (this.navbarItemDef[def].indicated) return true;
 			}
 			return false;
 		},
@@ -131,7 +131,7 @@ export default defineComponent({
 				withExtraOperation: true,
 			}, ev);
 		},
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/ui/classic.vue b/packages/client/src/ui/classic.vue
index 70db7ed12b..c42407f5b0 100644
--- a/packages/client/src/ui/classic.vue
+++ b/packages/client/src/ui/classic.vue
@@ -47,7 +47,6 @@ import XCommon from './_common_/common.vue';
 import { instanceName } from '@/config';
 import { StickySidebar } from '@/scripts/sticky-sidebar';
 import * as os from '@/os';
-import { menuDef } from '@/menu';
 import { mainRouter } from '@/router';
 import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
 import { defaultStore } from '@/store';
diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index 19a99a95aa..f330c99814 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -69,12 +69,12 @@ import { v4 as uuid } from 'uuid';
 import XCommon from './_common_/common.vue';
 import { deckStore, addColumn as addColumnToStore, loadDeck } from './deck/deck-store';
 import DeckColumnCore from '@/ui/deck/column-core.vue';
-import XSidebar from '@/ui/_common_/sidebar.vue';
-import XDrawerMenu from '@/ui/_common_/sidebar-for-mobile.vue';
+import XSidebar from '@/ui/_common_/navbar.vue';
+import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
 import MkButton from '@/components/ui/button.vue';
 import { getScrollContainer } from '@/scripts/scroll';
 import * as os from '@/os';
-import { menuDef } from '@/menu';
+import { navbarItemDef } from '@/navbar';
 import { $i } from '@/account';
 import { i18n } from '@/i18n';
 import { mainRouter } from '@/router';
@@ -105,8 +105,8 @@ const columns = deckStore.reactiveState.columns;
 const layout = deckStore.reactiveState.layout;
 const menuIndicated = computed(() => {
 	if ($i == null) return false;
-	for (const def in menuDef) {
-		if (menuDef[def].indicated) return true;
+	for (const def in navbarItemDef) {
+		if (navbarItemDef[def].indicated) return true;
 	}
 	return false;
 });
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 2edfb3f12d..fe4fc425cd 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -61,17 +61,17 @@ import { defineAsyncComponent, provide, onMounted, computed, ref, watch, Compute
 import XCommon from './_common_/common.vue';
 import { instanceName } from '@/config';
 import { StickySidebar } from '@/scripts/sticky-sidebar';
-import XDrawerMenu from '@/ui/_common_/sidebar-for-mobile.vue';
+import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
 import * as os from '@/os';
 import { defaultStore } from '@/store';
-import { menuDef } from '@/menu';
+import { navbarItemDef } from '@/navbar';
 import { i18n } from '@/i18n';
 import { $i } from '@/account';
 import { Router } from '@/nirax';
 import { mainRouter } from '@/router';
 import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
 const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
-const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/sidebar.vue'));
+const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
 const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
 
 const DESKTOP_THRESHOLD = 1100;
@@ -97,9 +97,9 @@ provideMetadataReceiver((info) => {
 });
 
 const menuIndicated = computed(() => {
-	for (const def in menuDef) {
+	for (const def in navbarItemDef) {
 		if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
-		if (menuDef[def].indicated) return true;
+		if (navbarItemDef[def].indicated) return true;
 	}
 	return false;
 });

From f3b0c6f1e7a37973f2d43a8ff56fbe19adc28ac4 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 14 Jul 2022 17:52:59 +0900
Subject: [PATCH 03/26] chore(client): tweak ui

---
 packages/client/src/components/ui/tooltip.vue |  2 +-
 packages/client/src/ui/_common_/navbar.vue    | 30 ++++++++++++-------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/client/src/components/ui/tooltip.vue b/packages/client/src/components/ui/tooltip.vue
index 152c939a1a..f81bf2fc5b 100644
--- a/packages/client/src/components/ui/tooltip.vue
+++ b/packages/client/src/components/ui/tooltip.vue
@@ -116,7 +116,7 @@ const setPosition = () => {
 		let top: number;
 
 		if (props.targetElement) {
-			left = (rect.left + window.pageXOffset) + props.innerMargin;
+			left = (rect.left + props.targetElement.offsetWidth + window.pageXOffset) + props.innerMargin;
 			top = rect.top + window.pageYOffset + (props.targetElement.offsetHeight / 2);
 		} else {
 			left = props.x + props.innerMargin;
diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
index 4fb3980142..924dda25d7 100644
--- a/packages/client/src/ui/_common_/navbar.vue
+++ b/packages/client/src/ui/_common_/navbar.vue
@@ -4,29 +4,38 @@
 		<button v-click-anime class="item _button account" @click="openAccountMenu">
 			<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
 		</button>
-		<MkA v-click-anime class="item index" active-class="active" to="/" exact>
-			<i class="icon fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
+		<MkA v-click-anime v-tooltip.right="i18n.ts.timeline" class="item index" active-class="active" to="/" exact>
+			<i class="icon fas fa-home fa-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
 		</MkA>
 		<template v-for="item in menu">
 			<div v-if="item === '-'" class="divider"></div>
-			<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: navbarItemDef[item].active }]" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
-				<i class="icon fa-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ $ts[navbarItemDef[item].title] }}</span>
+			<component
+				:is="navbarItemDef[item].to ? 'MkA' : 'button'"
+				v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)"
+				v-click-anime v-tooltip.right="i18n.ts[navbarItemDef[item].title]"
+				class="item _button"
+				:class="[item, { active: navbarItemDef[item].active }]"
+				active-class="active"
+				:to="navbarItemDef[item].to"
+				v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"
+			>
+				<i class="icon fa-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ i18n.ts[navbarItemDef[item].title] }}</span>
 				<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon fas fa-circle"></i></span>
 			</component>
 		</template>
 		<div class="divider"></div>
-		<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin">
-			<i class="icon fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
+		<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip.right="i18n.ts.controlPanel" class="item" active-class="active" to="/admin">
+			<i class="icon fas fa-door-open fa-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
 		</MkA>
 		<button v-click-anime class="item _button" @click="more">
-			<i class="icon fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
+			<i class="icon fa fa-ellipsis-h fa-fw"></i><span class="text">{{ i18n.ts.more }}</span>
 			<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon fas fa-circle"></i></span>
 		</button>
-		<MkA v-click-anime class="item" active-class="active" to="/settings">
-			<i class="icon fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
+		<MkA v-click-anime v-tooltip.right="i18n.ts.settings" class="item" active-class="active" to="/settings">
+			<i class="icon fas fa-cog fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
 		</MkA>
 		<button class="item _button post" data-cy-open-post-form @click="os.post">
-			<i class="icon fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
+			<i class="icon fas fa-pencil-alt fa-fw"></i><span class="text">{{ i18n.ts.note }}</span>
 		</button>
 	</div>
 </div>
@@ -38,6 +47,7 @@ import * as os from '@/os';
 import { navbarItemDef } from '@/navbar';
 import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
 import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
 
 const iconOnly = ref(false);
 

From 61e26696aa901033b28a604f0bcb4a856a3df3a3 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 14 Jul 2022 20:29:45 +0900
Subject: [PATCH 04/26] log error while client boot

---
 packages/backend/src/server/web/boot.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js
index 0a5cc0e0dc..f3116eb653 100644
--- a/packages/backend/src/server/web/boot.js
+++ b/packages/backend/src/server/web/boot.js
@@ -14,9 +14,11 @@
 // ブロックの中に入れないと、定義した変数がブラウザのグローバルスコープに登録されてしまい邪魔なので
 (async () => {
 	window.onerror = (e) => {
+		console.error(e);
 		renderError('SOMETHING_HAPPENED', e);
 	};
 	window.onunhandledrejection = (e) => {
+		console.error(e);
 		renderError('SOMETHING_HAPPENED_IN_PROMISE', e);
 	};
 

From cb00786f1e7ffcadf2b9da87bfffa8e875a1a28b Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 14 Jul 2022 20:41:17 +0900
Subject: [PATCH 05/26] improve error handling of client boot

---
 packages/backend/src/server/web/boot.js | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js
index f3116eb653..fa3ebbc2a2 100644
--- a/packages/backend/src/server/web/boot.js
+++ b/packages/backend/src/server/web/boot.js
@@ -59,6 +59,7 @@
 	import(`/assets/${CLIENT_ENTRY}`)
 		.catch(async e => {
 			await checkUpdate();
+			console.error(e);
 			renderError('APP_FETCH_FAILED', e);
 		})
 	//#endregion
@@ -271,17 +272,22 @@
 
 	// eslint-disable-next-line no-inner-declarations
 	async function checkUpdate() {
-		// TODO: サーバーが落ちている場合などのエラーハンドリング
-		const res = await fetch('/api/meta', {
-			method: 'POST',
-			cache: 'no-cache'
-		});
+		try {
+			const res = await fetch('/api/meta', {
+				method: 'POST',
+				cache: 'no-cache'
+			});
 
-		const meta = await res.json();
+			const meta = await res.json();
 
-		if (meta.version != v) {
-			localStorage.setItem('v', meta.version);
-			refresh();
+			if (meta.version != v) {
+				localStorage.setItem('v', meta.version);
+				refresh();
+			}
+		} catch (e) {
+			console.error(e);
+			renderError('UPDATE_CHECK_FAILED', e);
+			throw e;
 		}
 	}
 

From d78faf11348b284b1e1911a90d9a8f15e067ed64 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 14 Jul 2022 21:02:45 +0900
Subject: [PATCH 06/26] chore: use tab

---
 packages/backend/src/server/web/boot.js | 38 ++++++++++++-------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js
index fa3ebbc2a2..ca5f0639f8 100644
--- a/packages/backend/src/server/web/boot.js
+++ b/packages/backend/src/server/web/boot.js
@@ -117,33 +117,33 @@
 		if (!errorsElement) {
 			document.documentElement.innerHTML = `
 			<svg class="icon-warning" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-triangle" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-   			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-   			<path d="M12 9v2m0 4v.01"></path>
-   			<path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"></path>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+				<path d="M12 9v2m0 4v.01"></path>
+				<path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"></path>
 			</svg>
 			<h1>An error has occurred!</h1>
 			<button class="button-big" onclick="location.reload(true);">
 				<span class="button-label-big">Refresh</span>
 			</button>
-      <p class="dont-worry">Don't worry, it's (probably) not your fault.</p>
+			<p class="dont-worry">Don't worry, it's (probably) not your fault.</p>
 			<p>If the problem persists after refreshing, please contact your instance's administrator.<br>You may also try the following options:</p>
-      <a href="/flush">
-      <button class="button-small">
-        <span class="button-label-small">Clear preferences and cache</span>
-      </button>
-      </a>
+			<a href="/flush">
+				<button class="button-small">
+					<span class="button-label-small">Clear preferences and cache</span>
+				</button>
+			</a>
 			<br>
-      <a href="/cli">
-        <button class="button-small">
-          <span class="button-label-small">Start the simple client</span>
-        </button>
-      </a>
+			<a href="/cli">
+				<button class="button-small">
+					<span class="button-label-small">Start the simple client</span>
+				</button>
+			</a>
 			<br>
-      <a href="/bios">
-        <button class="button-small">
-          <span class="button-label-small">Start the repair tool</span>
-        </button>
-      </a>
+			<a href="/bios">
+				<button class="button-small">
+					<span class="button-label-small">Start the repair tool</span>
+				</button>
+			</a>
 			<br>
 			<div id="errors"></div>
 			`;

From 0ddabdbf68767566fd8f4fdeab1de82535dc44cb Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 14 Jul 2022 21:06:07 +0900
Subject: [PATCH 07/26] fix(client): revert es2017

---
 packages/client/src/init.ts    | 732 ++++++++++++++++-----------------
 packages/client/vite.config.ts |   1 -
 2 files changed, 365 insertions(+), 368 deletions(-)

diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index 94e7f9f6b3..98f69c701f 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -39,403 +39,401 @@ import { reactionPicker } from '@/scripts/reaction-picker';
 import { getUrlWithoutLoginId } from '@/scripts/login-id';
 import { getAccountFromId } from '@/scripts/get-account-from-id';
 
-(async () => {
-	console.info(`Misskey v${version}`);
+console.info(`Misskey v${version}`);
 
-	if (_DEV_) {
-		console.warn('Development mode!!!');
+if (_DEV_) {
+	console.warn('Development mode!!!');
 
-		console.info(`vue ${vueVersion}`);
+	console.info(`vue ${vueVersion}`);
 
-		(window as any).$i = $i;
-		(window as any).$store = defaultStore;
+	(window as any).$i = $i;
+	(window as any).$store = defaultStore;
 
-		window.addEventListener('error', event => {
-			console.error(event);
-			/*
-			alert({
-				type: 'error',
-				title: 'DEV: Unhandled error',
-				text: event.message
-			});
-			*/
+	window.addEventListener('error', event => {
+		console.error(event);
+		/*
+		alert({
+			type: 'error',
+			title: 'DEV: Unhandled error',
+			text: event.message
 		});
-
-		window.addEventListener('unhandledrejection', event => {
-			console.error(event);
-			/*
-			alert({
-				type: 'error',
-				title: 'DEV: Unhandled promise rejection',
-				text: event.reason
-			});
-			*/
-		});
-	}
-
-	// タッチデバイスでCSSの:hoverを機能させる
-	document.addEventListener('touchend', () => {}, { passive: true });
-
-	// 一斉リロード
-	reloadChannel.addEventListener('message', path => {
-		if (path !== null) location.href = path;
-		else location.reload();
+		*/
 	});
 
-	//#region SEE: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-	// TODO: いつの日にか消したい
+	window.addEventListener('unhandledrejection', event => {
+		console.error(event);
+		/*
+		alert({
+			type: 'error',
+			title: 'DEV: Unhandled promise rejection',
+			text: event.reason
+		});
+		*/
+	});
+}
+
+// タッチデバイスでCSSの:hoverを機能させる
+document.addEventListener('touchend', () => {}, { passive: true });
+
+// 一斉リロード
+reloadChannel.addEventListener('message', path => {
+	if (path !== null) location.href = path;
+	else location.reload();
+});
+
+//#region SEE: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+// TODO: いつの日にか消したい
+const vh = window.innerHeight * 0.01;
+document.documentElement.style.setProperty('--vh', `${vh}px`);
+window.addEventListener('resize', () => {
 	const vh = window.innerHeight * 0.01;
 	document.documentElement.style.setProperty('--vh', `${vh}px`);
-	window.addEventListener('resize', () => {
-		const vh = window.innerHeight * 0.01;
-		document.documentElement.style.setProperty('--vh', `${vh}px`);
-	});
-	//#endregion
+});
+//#endregion
 
-	// If mobile, insert the viewport meta tag
-	if (['smartphone', 'tablet'].includes(deviceKind)) {
-		const viewport = document.getElementsByName('viewport').item(0);
-		viewport.setAttribute('content',
-			`${viewport.getAttribute('content')}, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover`);
-	}
+// If mobile, insert the viewport meta tag
+if (['smartphone', 'tablet'].includes(deviceKind)) {
+	const viewport = document.getElementsByName('viewport').item(0);
+	viewport.setAttribute('content',
+		`${viewport.getAttribute('content')}, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover`);
+}
 
-	//#region Set lang attr
-	const html = document.documentElement;
-	html.setAttribute('lang', lang);
-	//#endregion
+//#region Set lang attr
+const html = document.documentElement;
+html.setAttribute('lang', lang);
+//#endregion
 
-	//#region loginId
-	const params = new URLSearchParams(location.search);
-	const loginId = params.get('loginId');
+//#region loginId
+const params = new URLSearchParams(location.search);
+const loginId = params.get('loginId');
 
-	if (loginId) {
-		const target = getUrlWithoutLoginId(location.href);
+if (loginId) {
+	const target = getUrlWithoutLoginId(location.href);
 
-		if (!$i || $i.id !== loginId) {
-			const account = await getAccountFromId(loginId);
-			if (account) {
-				await login(account.token, target);
-			}
+	if (!$i || $i.id !== loginId) {
+		const account = await getAccountFromId(loginId);
+		if (account) {
+			await login(account.token, target);
 		}
-
-		history.replaceState({ misskey: 'loginId' }, '', target);
 	}
 
-	//#endregion
+	history.replaceState({ misskey: 'loginId' }, '', target);
+}
 
-	//#region Fetch user
-	if ($i && $i.token) {
+//#endregion
+
+//#region Fetch user
+if ($i && $i.token) {
+	if (_DEV_) {
+		console.log('account cache found. refreshing...');
+	}
+
+	refreshAccount();
+} else {
+	if (_DEV_) {
+		console.log('no account cache found.');
+	}
+
+	// 連携ログインの場合用にCookieを参照する
+	const i = (document.cookie.match(/igi=(\w+)/) || [null, null])[1];
+
+	if (i != null && i !== 'null') {
 		if (_DEV_) {
-			console.log('account cache found. refreshing...');
+			console.log('signing...');
 		}
 
-		refreshAccount();
+		try {
+			document.body.innerHTML = '<div>Please wait...</div>';
+			await login(i);
+		} catch (err) {
+			// Render the error screen
+			// TODO: ちゃんとしたコンポーネントをレンダリングする(v10とかのトラブルシューティングゲーム付きのやつみたいな)
+			document.body.innerHTML = '<div id="err">Oops!</div>';
+		}
 	} else {
 		if (_DEV_) {
-			console.log('no account cache found.');
-		}
-
-		// 連携ログインの場合用にCookieを参照する
-		const i = (document.cookie.match(/igi=(\w+)/) || [null, null])[1];
-
-		if (i != null && i !== 'null') {
-			if (_DEV_) {
-				console.log('signing...');
-			}
-
-			try {
-				document.body.innerHTML = '<div>Please wait...</div>';
-				await login(i);
-			} catch (err) {
-				// Render the error screen
-				// TODO: ちゃんとしたコンポーネントをレンダリングする(v10とかのトラブルシューティングゲーム付きのやつみたいな)
-				document.body.innerHTML = '<div id="err">Oops!</div>';
-			}
-		} else {
-			if (_DEV_) {
-				console.log('not signed in');
-			}
+			console.log('not signed in');
 		}
 	}
-	//#endregion
+}
+//#endregion
 
-	const fetchInstanceMetaPromise = fetchInstance();
+const fetchInstanceMetaPromise = fetchInstance();
 
-	fetchInstanceMetaPromise.then(() => {
-		localStorage.setItem('v', instance.version);
+fetchInstanceMetaPromise.then(() => {
+	localStorage.setItem('v', instance.version);
 
-		// Init service worker
-		initializeSw();
-	});
+	// Init service worker
+	initializeSw();
+});
 
-	const app = createApp(
-		window.location.search === '?zen' ? defineAsyncComponent(() => import('@/ui/zen.vue')) :
-		!$i ? defineAsyncComponent(() => import('@/ui/visitor.vue')) :
-		ui === 'deck' ? defineAsyncComponent(() => import('@/ui/deck.vue')) :
-		ui === 'classic' ? defineAsyncComponent(() => import('@/ui/classic.vue')) :
-		defineAsyncComponent(() => import('@/ui/universal.vue')),
-	);
+const app = createApp(
+	window.location.search === '?zen' ? defineAsyncComponent(() => import('@/ui/zen.vue')) :
+	!$i ? defineAsyncComponent(() => import('@/ui/visitor.vue')) :
+	ui === 'deck' ? defineAsyncComponent(() => import('@/ui/deck.vue')) :
+	ui === 'classic' ? defineAsyncComponent(() => import('@/ui/classic.vue')) :
+	defineAsyncComponent(() => import('@/ui/universal.vue')),
+);
 
-	if (_DEV_) {
-		app.config.performance = true;
+if (_DEV_) {
+	app.config.performance = true;
+}
+
+app.config.globalProperties = {
+	$i,
+	$store: defaultStore,
+	$instance: instance,
+	$t: i18n.t,
+	$ts: i18n.ts,
+};
+
+widgets(app);
+directives(app);
+components(app);
+
+const splash = document.getElementById('splash');
+// 念のためnullチェック(HTMLが古い場合があるため(そのうち消す))
+if (splash) splash.addEventListener('transitionend', () => {
+	splash.remove();
+});
+
+// https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210
+// なぜかinit.tsの内容が2回実行されることがあるため、mountするdivを1つに制限する
+const rootEl = (() => {
+	const MISSKEY_MOUNT_DIV_ID = 'misskey_app';
+
+	const currentEl = document.getElementById(MISSKEY_MOUNT_DIV_ID);
+
+	if (currentEl) {
+		console.warn('multiple import detected');
+		return currentEl;
 	}
 
-	app.config.globalProperties = {
-		$i,
-		$store: defaultStore,
-		$instance: instance,
-		$t: i18n.t,
-		$ts: i18n.ts,
-	};
-
-	widgets(app);
-	directives(app);
-	components(app);
-
-	const splash = document.getElementById('splash');
-	// 念のためnullチェック(HTMLが古い場合があるため(そのうち消す))
-	if (splash) splash.addEventListener('transitionend', () => {
-		splash.remove();
-	});
-
-	// https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210
-	// なぜかinit.tsの内容が2回実行されることがあるため、mountするdivを1つに制限する
-	const rootEl = (() => {
-		const MISSKEY_MOUNT_DIV_ID = 'misskey_app';
-
-		const currentEl = document.getElementById(MISSKEY_MOUNT_DIV_ID);
-
-		if (currentEl) {
-			console.warn('multiple import detected');
-			return currentEl;
-		}
-
-		const rootEl = document.createElement('div');
-		rootEl.id = MISSKEY_MOUNT_DIV_ID;
-		document.body.appendChild(rootEl);
-		return rootEl;
-	})();
-
-	app.mount(rootEl);
-
-	// boot.jsのやつを解除
-	window.onerror = null;
-	window.onunhandledrejection = null;
-
-	reactionPicker.init();
-
-	if (splash) {
-		splash.style.opacity = '0';
-		splash.style.pointerEvents = 'none';
-	}
-
-	// クライアントが更新されたか？
-	const lastVersion = localStorage.getItem('lastVersion');
-	if (lastVersion !== version) {
-		localStorage.setItem('lastVersion', version);
-
-		// テーマリビルドするため
-		localStorage.removeItem('theme');
-
-		try { // 変なバージョン文字列来るとcompareVersionsでエラーになるため
-			if (lastVersion != null && compareVersions(version, lastVersion) === 1) {
-				// ログインしてる場合だけ
-				if ($i) {
-					popup(defineAsyncComponent(() => import('@/components/updated.vue')), {}, {}, 'closed');
-				}
-			}
-		} catch (err) {
-		}
-	}
-
-	// NOTE: この処理は必ず↑のクライアント更新時処理より後に来ること(テーマ再構築のため)
-	watch(defaultStore.reactiveState.darkMode, (darkMode) => {
-		applyTheme(darkMode ? ColdDeviceStorage.get('darkTheme') : ColdDeviceStorage.get('lightTheme'));
-	}, { immediate: localStorage.theme == null });
-
-	const darkTheme = computed(ColdDeviceStorage.makeGetterSetter('darkTheme'));
-	const lightTheme = computed(ColdDeviceStorage.makeGetterSetter('lightTheme'));
-
-	watch(darkTheme, (theme) => {
-		if (defaultStore.state.darkMode) {
-			applyTheme(theme);
-		}
-	});
-
-	watch(lightTheme, (theme) => {
-		if (!defaultStore.state.darkMode) {
-			applyTheme(theme);
-		}
-	});
-
-	//#region Sync dark mode
-	if (ColdDeviceStorage.get('syncDeviceDarkMode')) {
-		defaultStore.set('darkMode', isDeviceDarkmode());
-	}
-
-	window.matchMedia('(prefers-color-scheme: dark)').addListener(mql => {
-		if (ColdDeviceStorage.get('syncDeviceDarkMode')) {
-			defaultStore.set('darkMode', mql.matches);
-		}
-	});
-	//#endregion
-
-	fetchInstanceMetaPromise.then(() => {
-		if (defaultStore.state.themeInitial) {
-			if (instance.defaultLightTheme != null) ColdDeviceStorage.set('lightTheme', JSON5.parse(instance.defaultLightTheme));
-			if (instance.defaultDarkTheme != null) ColdDeviceStorage.set('darkTheme', JSON5.parse(instance.defaultDarkTheme));
-			defaultStore.set('themeInitial', false);
-		}
-	});
-
-	watch(defaultStore.reactiveState.useBlurEffectForModal, v => {
-		document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none');
-	}, { immediate: true });
-
-	watch(defaultStore.reactiveState.useBlurEffect, v => {
-		if (v) {
-			document.documentElement.style.removeProperty('--blur');
-		} else {
-			document.documentElement.style.setProperty('--blur', 'none');
-		}
-	}, { immediate: true });
-
-	let reloadDialogShowing = false;
-	stream.on('_disconnected_', async () => {
-		if (defaultStore.state.serverDisconnectedBehavior === 'reload') {
-			location.reload();
-		} else if (defaultStore.state.serverDisconnectedBehavior === 'dialog') {
-			if (reloadDialogShowing) return;
-			reloadDialogShowing = true;
-			const { canceled } = await confirm({
-				type: 'warning',
-				title: i18n.ts.disconnectedFromServer,
-				text: i18n.ts.reloadConfirm,
-			});
-			reloadDialogShowing = false;
-			if (!canceled) {
-				location.reload();
-			}
-		}
-	});
-
-	stream.on('emojiAdded', emojiData => {
-		// TODO
-		//store.commit('instance/set', );
-	});
-
-	for (const plugin of ColdDeviceStorage.get('plugins').filter(p => p.active)) {
-		import('./plugin').then(({ install }) => {
-			install(plugin);
-		});
-	}
-
-	const hotkeys = {
-		'd': (): void => {
-			defaultStore.set('darkMode', !defaultStore.state.darkMode);
-		},
-		's': search,
-	};
-
-	if ($i) {
-		// only add post shortcuts if logged in
-		hotkeys['p|n'] = post;
-
-		if ($i.isDeleted) {
-			alert({
-				type: 'warning',
-				text: i18n.ts.accountDeletionInProgress,
-			});
-		}
-
-		const lastUsed = localStorage.getItem('lastUsed');
-		if (lastUsed) {
-			const lastUsedDate = parseInt(lastUsed, 10);
-			// 二時間以上前なら
-			if (Date.now() - lastUsedDate > 1000 * 60 * 60 * 2) {
-				toast(i18n.t('welcomeBackWithName', {
-					name: $i.name || $i.username,
-				}));
-			}
-		}
-		localStorage.setItem('lastUsed', Date.now().toString());
-
-		if ('Notification' in window) {
-			// 許可を得ていなかったらリクエスト
-			if (Notification.permission === 'default') {
-				Notification.requestPermission();
-			}
-		}
-
-		const main = markRaw(stream.useChannel('main', null, 'System'));
-
-		// 自分の情報が更新されたとき
-		main.on('meUpdated', i => {
-			updateAccount(i);
-		});
-
-		main.on('readAllNotifications', () => {
-			updateAccount({ hasUnreadNotification: false });
-		});
-
-		main.on('unreadNotification', () => {
-			updateAccount({ hasUnreadNotification: true });
-		});
-
-		main.on('unreadMention', () => {
-			updateAccount({ hasUnreadMentions: true });
-		});
-
-		main.on('readAllUnreadMentions', () => {
-			updateAccount({ hasUnreadMentions: false });
-		});
-
-		main.on('unreadSpecifiedNote', () => {
-			updateAccount({ hasUnreadSpecifiedNotes: true });
-		});
-
-		main.on('readAllUnreadSpecifiedNotes', () => {
-			updateAccount({ hasUnreadSpecifiedNotes: false });
-		});
-
-		main.on('readAllMessagingMessages', () => {
-			updateAccount({ hasUnreadMessagingMessage: false });
-		});
-
-		main.on('unreadMessagingMessage', () => {
-			updateAccount({ hasUnreadMessagingMessage: true });
-			sound.play('chatBg');
-		});
-
-		main.on('readAllAntennas', () => {
-			updateAccount({ hasUnreadAntenna: false });
-		});
-
-		main.on('unreadAntenna', () => {
-			updateAccount({ hasUnreadAntenna: true });
-			sound.play('antenna');
-		});
-
-		main.on('readAllAnnouncements', () => {
-			updateAccount({ hasUnreadAnnouncement: false });
-		});
-
-		main.on('readAllChannels', () => {
-			updateAccount({ hasUnreadChannel: false });
-		});
-
-		main.on('unreadChannel', () => {
-			updateAccount({ hasUnreadChannel: true });
-			sound.play('channel');
-		});
-
-		// トークンが再生成されたとき
-		// このままではMisskeyが利用できないので強制的にサインアウトさせる
-		main.on('myTokenRegenerated', () => {
-			signout();
-		});
-	}
-
-	// shortcut
-	document.addEventListener('keydown', makeHotkey(hotkeys));
+	const rootEl = document.createElement('div');
+	rootEl.id = MISSKEY_MOUNT_DIV_ID;
+	document.body.appendChild(rootEl);
+	return rootEl;
 })();
+
+app.mount(rootEl);
+
+// boot.jsのやつを解除
+window.onerror = null;
+window.onunhandledrejection = null;
+
+reactionPicker.init();
+
+if (splash) {
+	splash.style.opacity = '0';
+	splash.style.pointerEvents = 'none';
+}
+
+// クライアントが更新されたか？
+const lastVersion = localStorage.getItem('lastVersion');
+if (lastVersion !== version) {
+	localStorage.setItem('lastVersion', version);
+
+	// テーマリビルドするため
+	localStorage.removeItem('theme');
+
+	try { // 変なバージョン文字列来るとcompareVersionsでエラーになるため
+		if (lastVersion != null && compareVersions(version, lastVersion) === 1) {
+			// ログインしてる場合だけ
+			if ($i) {
+				popup(defineAsyncComponent(() => import('@/components/updated.vue')), {}, {}, 'closed');
+			}
+		}
+	} catch (err) {
+	}
+}
+
+// NOTE: この処理は必ず↑のクライアント更新時処理より後に来ること(テーマ再構築のため)
+watch(defaultStore.reactiveState.darkMode, (darkMode) => {
+	applyTheme(darkMode ? ColdDeviceStorage.get('darkTheme') : ColdDeviceStorage.get('lightTheme'));
+}, { immediate: localStorage.theme == null });
+
+const darkTheme = computed(ColdDeviceStorage.makeGetterSetter('darkTheme'));
+const lightTheme = computed(ColdDeviceStorage.makeGetterSetter('lightTheme'));
+
+watch(darkTheme, (theme) => {
+	if (defaultStore.state.darkMode) {
+		applyTheme(theme);
+	}
+});
+
+watch(lightTheme, (theme) => {
+	if (!defaultStore.state.darkMode) {
+		applyTheme(theme);
+	}
+});
+
+//#region Sync dark mode
+if (ColdDeviceStorage.get('syncDeviceDarkMode')) {
+	defaultStore.set('darkMode', isDeviceDarkmode());
+}
+
+window.matchMedia('(prefers-color-scheme: dark)').addListener(mql => {
+	if (ColdDeviceStorage.get('syncDeviceDarkMode')) {
+		defaultStore.set('darkMode', mql.matches);
+	}
+});
+//#endregion
+
+fetchInstanceMetaPromise.then(() => {
+	if (defaultStore.state.themeInitial) {
+		if (instance.defaultLightTheme != null) ColdDeviceStorage.set('lightTheme', JSON5.parse(instance.defaultLightTheme));
+		if (instance.defaultDarkTheme != null) ColdDeviceStorage.set('darkTheme', JSON5.parse(instance.defaultDarkTheme));
+		defaultStore.set('themeInitial', false);
+	}
+});
+
+watch(defaultStore.reactiveState.useBlurEffectForModal, v => {
+	document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none');
+}, { immediate: true });
+
+watch(defaultStore.reactiveState.useBlurEffect, v => {
+	if (v) {
+		document.documentElement.style.removeProperty('--blur');
+	} else {
+		document.documentElement.style.setProperty('--blur', 'none');
+	}
+}, { immediate: true });
+
+let reloadDialogShowing = false;
+stream.on('_disconnected_', async () => {
+	if (defaultStore.state.serverDisconnectedBehavior === 'reload') {
+		location.reload();
+	} else if (defaultStore.state.serverDisconnectedBehavior === 'dialog') {
+		if (reloadDialogShowing) return;
+		reloadDialogShowing = true;
+		const { canceled } = await confirm({
+			type: 'warning',
+			title: i18n.ts.disconnectedFromServer,
+			text: i18n.ts.reloadConfirm,
+		});
+		reloadDialogShowing = false;
+		if (!canceled) {
+			location.reload();
+		}
+	}
+});
+
+stream.on('emojiAdded', emojiData => {
+	// TODO
+	//store.commit('instance/set', );
+});
+
+for (const plugin of ColdDeviceStorage.get('plugins').filter(p => p.active)) {
+	import('./plugin').then(({ install }) => {
+		install(plugin);
+	});
+}
+
+const hotkeys = {
+	'd': (): void => {
+		defaultStore.set('darkMode', !defaultStore.state.darkMode);
+	},
+	's': search,
+};
+
+if ($i) {
+	// only add post shortcuts if logged in
+	hotkeys['p|n'] = post;
+
+	if ($i.isDeleted) {
+		alert({
+			type: 'warning',
+			text: i18n.ts.accountDeletionInProgress,
+		});
+	}
+
+	const lastUsed = localStorage.getItem('lastUsed');
+	if (lastUsed) {
+		const lastUsedDate = parseInt(lastUsed, 10);
+		// 二時間以上前なら
+		if (Date.now() - lastUsedDate > 1000 * 60 * 60 * 2) {
+			toast(i18n.t('welcomeBackWithName', {
+				name: $i.name || $i.username,
+			}));
+		}
+	}
+	localStorage.setItem('lastUsed', Date.now().toString());
+
+	if ('Notification' in window) {
+		// 許可を得ていなかったらリクエスト
+		if (Notification.permission === 'default') {
+			Notification.requestPermission();
+		}
+	}
+
+	const main = markRaw(stream.useChannel('main', null, 'System'));
+
+	// 自分の情報が更新されたとき
+	main.on('meUpdated', i => {
+		updateAccount(i);
+	});
+
+	main.on('readAllNotifications', () => {
+		updateAccount({ hasUnreadNotification: false });
+	});
+
+	main.on('unreadNotification', () => {
+		updateAccount({ hasUnreadNotification: true });
+	});
+
+	main.on('unreadMention', () => {
+		updateAccount({ hasUnreadMentions: true });
+	});
+
+	main.on('readAllUnreadMentions', () => {
+		updateAccount({ hasUnreadMentions: false });
+	});
+
+	main.on('unreadSpecifiedNote', () => {
+		updateAccount({ hasUnreadSpecifiedNotes: true });
+	});
+
+	main.on('readAllUnreadSpecifiedNotes', () => {
+		updateAccount({ hasUnreadSpecifiedNotes: false });
+	});
+
+	main.on('readAllMessagingMessages', () => {
+		updateAccount({ hasUnreadMessagingMessage: false });
+	});
+
+	main.on('unreadMessagingMessage', () => {
+		updateAccount({ hasUnreadMessagingMessage: true });
+		sound.play('chatBg');
+	});
+
+	main.on('readAllAntennas', () => {
+		updateAccount({ hasUnreadAntenna: false });
+	});
+
+	main.on('unreadAntenna', () => {
+		updateAccount({ hasUnreadAntenna: true });
+		sound.play('antenna');
+	});
+
+	main.on('readAllAnnouncements', () => {
+		updateAccount({ hasUnreadAnnouncement: false });
+	});
+
+	main.on('readAllChannels', () => {
+		updateAccount({ hasUnreadChannel: false });
+	});
+
+	main.on('unreadChannel', () => {
+		updateAccount({ hasUnreadChannel: true });
+		sound.play('channel');
+	});
+
+	// トークンが再生成されたとき
+	// このままではMisskeyが利用できないので強制的にサインアウトさせる
+	main.on('myTokenRegenerated', () => {
+		signout();
+	});
+}
+
+// shortcut
+document.addEventListener('keydown', makeHotkey(hotkeys));
diff --git a/packages/client/vite.config.ts b/packages/client/vite.config.ts
index f23c621131..5800cf5021 100644
--- a/packages/client/vite.config.ts
+++ b/packages/client/vite.config.ts
@@ -49,7 +49,6 @@ export default defineConfig(({ command, mode }) => {
 				'chrome100',
 				'firefox100',
 				'safari15',
-				'es2017', // TODO: そのうち消す
 			],
 			manifest: 'manifest.json',
 			rollupOptions: {

From 1dec3461cda82802acb45fd9a89933f8940b3d62 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 14 Jul 2022 21:06:38 +0900
Subject: [PATCH 08/26] 12.114.0-beta.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 93df550f84..6aa9913746 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "12.113.0",
+	"version": "12.114.0-beta.1",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",

From fa5140310f05c00d641e794329073eb7d44f6825 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 14 Jul 2022 21:32:21 +0900
Subject: [PATCH 09/26] debug

---
 packages/client/src/init.ts | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index 98f69c701f..243d287543 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -74,12 +74,14 @@ if (_DEV_) {
 
 // タッチデバイスでCSSの:hoverを機能させる
 document.addEventListener('touchend', () => {}, { passive: true });
+console.info('1');
 
 // 一斉リロード
 reloadChannel.addEventListener('message', path => {
 	if (path !== null) location.href = path;
 	else location.reload();
 });
+console.info('2');
 
 //#region SEE: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
 // TODO: いつの日にか消したい
@@ -90,6 +92,7 @@ window.addEventListener('resize', () => {
 	document.documentElement.style.setProperty('--vh', `${vh}px`);
 });
 //#endregion
+console.info('3');
 
 // If mobile, insert the viewport meta tag
 if (['smartphone', 'tablet'].includes(deviceKind)) {
@@ -97,15 +100,18 @@ if (['smartphone', 'tablet'].includes(deviceKind)) {
 	viewport.setAttribute('content',
 		`${viewport.getAttribute('content')}, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover`);
 }
+console.info('4');
 
 //#region Set lang attr
 const html = document.documentElement;
 html.setAttribute('lang', lang);
 //#endregion
+console.info('5');
 
 //#region loginId
 const params = new URLSearchParams(location.search);
 const loginId = params.get('loginId');
+console.info('6', loginId);
 
 if (loginId) {
 	const target = getUrlWithoutLoginId(location.href);
@@ -119,6 +125,7 @@ if (loginId) {
 
 	history.replaceState({ misskey: 'loginId' }, '', target);
 }
+console.info('7');
 
 //#endregion
 
@@ -127,12 +134,14 @@ if ($i && $i.token) {
 	if (_DEV_) {
 		console.log('account cache found. refreshing...');
 	}
+	console.info('8');
 
 	refreshAccount();
 } else {
 	if (_DEV_) {
 		console.log('no account cache found.');
 	}
+	console.info('9');
 
 	// 連携ログインの場合用にCookieを参照する
 	const i = (document.cookie.match(/igi=(\w+)/) || [null, null])[1];
@@ -166,6 +175,7 @@ fetchInstanceMetaPromise.then(() => {
 	// Init service worker
 	initializeSw();
 });
+console.info('10');
 
 const app = createApp(
 	window.location.search === '?zen' ? defineAsyncComponent(() => import('@/ui/zen.vue')) :
@@ -175,6 +185,8 @@ const app = createApp(
 	defineAsyncComponent(() => import('@/ui/universal.vue')),
 );
 
+console.info('11');
+
 if (_DEV_) {
 	app.config.performance = true;
 }
@@ -191,12 +203,16 @@ widgets(app);
 directives(app);
 components(app);
 
+console.info('12');
+
 const splash = document.getElementById('splash');
 // 念のためnullチェック(HTMLが古い場合があるため(そのうち消す))
 if (splash) splash.addEventListener('transitionend', () => {
 	splash.remove();
 });
 
+console.info('13');
+
 // https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210
 // なぜかinit.tsの内容が2回実行されることがあるため、mountするdivを1つに制限する
 const rootEl = (() => {
@@ -215,19 +231,27 @@ const rootEl = (() => {
 	return rootEl;
 })();
 
+console.info('14');
+
 app.mount(rootEl);
 
+console.info('15');
+
 // boot.jsのやつを解除
 window.onerror = null;
 window.onunhandledrejection = null;
 
 reactionPicker.init();
 
+console.info('16');
+
 if (splash) {
 	splash.style.opacity = '0';
 	splash.style.pointerEvents = 'none';
 }
 
+console.info('17');
+
 // クライアントが更新されたか？
 const lastVersion = localStorage.getItem('lastVersion');
 if (lastVersion !== version) {
@@ -247,6 +271,8 @@ if (lastVersion !== version) {
 	}
 }
 
+console.info('18');
+
 // NOTE: この処理は必ず↑のクライアント更新時処理より後に来ること(テーマ再構築のため)
 watch(defaultStore.reactiveState.darkMode, (darkMode) => {
 	applyTheme(darkMode ? ColdDeviceStorage.get('darkTheme') : ColdDeviceStorage.get('lightTheme'));
@@ -267,6 +293,8 @@ watch(lightTheme, (theme) => {
 	}
 });
 
+console.info('19');
+
 //#region Sync dark mode
 if (ColdDeviceStorage.get('syncDeviceDarkMode')) {
 	defaultStore.set('darkMode', isDeviceDarkmode());
@@ -279,6 +307,8 @@ window.matchMedia('(prefers-color-scheme: dark)').addListener(mql => {
 });
 //#endregion
 
+console.info('20');
+
 fetchInstanceMetaPromise.then(() => {
 	if (defaultStore.state.themeInitial) {
 		if (instance.defaultLightTheme != null) ColdDeviceStorage.set('lightTheme', JSON5.parse(instance.defaultLightTheme));

From 7a43cac6b359b01275b93386505a949fc0225709 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 14 Jul 2022 21:32:33 +0900
Subject: [PATCH 10/26] 12.114.0-beta.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6aa9913746..bf2f681e39 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "12.114.0-beta.1",
+	"version": "12.114.0-beta.2",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",

From 800bbc4328e27944e785d2ad50da0293df0ee114 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 14 Jul 2022 21:40:30 +0900
Subject: [PATCH 11/26] debug

---
 packages/client/src/init.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index 243d287543..c826b6a33b 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -216,18 +216,26 @@ console.info('13');
 // https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210
 // なぜかinit.tsの内容が2回実行されることがあるため、mountするdivを1つに制限する
 const rootEl = (() => {
+	console.info('13-1');
 	const MISSKEY_MOUNT_DIV_ID = 'misskey_app';
+	console.info('13-2');
 
 	const currentEl = document.getElementById(MISSKEY_MOUNT_DIV_ID);
+	console.info('13-3');
 
 	if (currentEl) {
+		console.info('13-4');
 		console.warn('multiple import detected');
 		return currentEl;
 	}
 
+	console.info('13-5');
 	const rootEl = document.createElement('div');
+	console.info('13-6');
 	rootEl.id = MISSKEY_MOUNT_DIV_ID;
+	console.info('13-7');
 	document.body.appendChild(rootEl);
+	console.info('13-8');
 	return rootEl;
 })();
 

From d43eb123b1dc88c044fdf83a6e25703d9eab46c4 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 14 Jul 2022 21:40:55 +0900
Subject: [PATCH 12/26] 12.114.0-beta.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index bf2f681e39..cc83a9f467 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "12.114.0-beta.2",
+	"version": "12.114.0-beta.3",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",

From 10f4815d34817c4cb8f8857ef017b426c2457ef1 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 14 Jul 2022 21:52:58 +0900
Subject: [PATCH 13/26] tweak boot.js

---
 packages/backend/src/server/web/boot.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js
index ca5f0639f8..7357081425 100644
--- a/packages/backend/src/server/web/boot.js
+++ b/packages/backend/src/server/web/boot.js
@@ -49,7 +49,7 @@
 			localStorage.setItem('localeVersion', v);
 		} else {
 			await checkUpdate();
-			renderError('LOCALE_FETCH_FAILED');
+			renderError('LOCALE_FETCH');
 			return;
 		}
 	}
@@ -60,7 +60,7 @@
 		.catch(async e => {
 			await checkUpdate();
 			console.error(e);
-			renderError('APP_FETCH_FAILED', e);
+			renderError('APP_IMPORT', e);
 		})
 	//#endregion
 
@@ -115,7 +115,7 @@
 		let errorsElement = document.getElementById('errors');
 
 		if (!errorsElement) {
-			document.documentElement.innerHTML = `
+			document.body.innerHTML = `
 			<svg class="icon-warning" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-triangle" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
 				<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
 				<path d="M12 9v2m0 4v.01"></path>
@@ -286,7 +286,7 @@
 			}
 		} catch (e) {
 			console.error(e);
-			renderError('UPDATE_CHECK_FAILED', e);
+			renderError('UPDATE_CHECK', e);
 			throw e;
 		}
 	}

From f2e91f4d629cd40c8f956cca2d30058048192dfd Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 14 Jul 2022 22:04:16 +0900
Subject: [PATCH 14/26] tweak boot.js

---
 packages/backend/src/server/web/boot.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js
index 7357081425..b9f00bb21d 100644
--- a/packages/backend/src/server/web/boot.js
+++ b/packages/backend/src/server/web/boot.js
@@ -56,12 +56,14 @@
 	//#endregion
 
 	//#region Script
-	import(`/assets/${CLIENT_ENTRY}`)
-		.catch(async e => {
-			await checkUpdate();
-			console.error(e);
-			renderError('APP_IMPORT', e);
-		})
+	window.addEventListener('DOMContentLoaded', () => {
+		import(`/assets/${CLIENT_ENTRY}`)
+			.catch(async e => {
+				await checkUpdate();
+				console.error(e);
+				renderError('APP_IMPORT', e);
+			});
+	});
 	//#endregion
 
 	//#region Theme

From 3053767c7193c0e8eeb0ccfcdd9167b45bb193d9 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 14 Jul 2022 22:05:03 +0900
Subject: [PATCH 15/26] 12.114.0-beta.4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index cc83a9f467..3ac56e73f1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "12.114.0-beta.3",
+	"version": "12.114.0-beta.4",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",

From 1ba559a98bfb389b94e75441ef835fe93d097029 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 14 Jul 2022 22:13:00 +0900
Subject: [PATCH 16/26] Revert "debug"

This reverts commit 800bbc4328e27944e785d2ad50da0293df0ee114.
---
 packages/client/src/init.ts | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index c826b6a33b..243d287543 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -216,26 +216,18 @@ console.info('13');
 // https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210
 // なぜかinit.tsの内容が2回実行されることがあるため、mountするdivを1つに制限する
 const rootEl = (() => {
-	console.info('13-1');
 	const MISSKEY_MOUNT_DIV_ID = 'misskey_app';
-	console.info('13-2');
 
 	const currentEl = document.getElementById(MISSKEY_MOUNT_DIV_ID);
-	console.info('13-3');
 
 	if (currentEl) {
-		console.info('13-4');
 		console.warn('multiple import detected');
 		return currentEl;
 	}
 
-	console.info('13-5');
 	const rootEl = document.createElement('div');
-	console.info('13-6');
 	rootEl.id = MISSKEY_MOUNT_DIV_ID;
-	console.info('13-7');
 	document.body.appendChild(rootEl);
-	console.info('13-8');
 	return rootEl;
 })();
 

From e3bad795e057333019f937abd64270dd7f5bac4e Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 14 Jul 2022 22:13:04 +0900
Subject: [PATCH 17/26] Revert "debug"

This reverts commit fa5140310f05c00d641e794329073eb7d44f6825.
---
 packages/client/src/init.ts | 30 ------------------------------
 1 file changed, 30 deletions(-)

diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index 243d287543..98f69c701f 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -74,14 +74,12 @@ if (_DEV_) {
 
 // タッチデバイスでCSSの:hoverを機能させる
 document.addEventListener('touchend', () => {}, { passive: true });
-console.info('1');
 
 // 一斉リロード
 reloadChannel.addEventListener('message', path => {
 	if (path !== null) location.href = path;
 	else location.reload();
 });
-console.info('2');
 
 //#region SEE: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
 // TODO: いつの日にか消したい
@@ -92,7 +90,6 @@ window.addEventListener('resize', () => {
 	document.documentElement.style.setProperty('--vh', `${vh}px`);
 });
 //#endregion
-console.info('3');
 
 // If mobile, insert the viewport meta tag
 if (['smartphone', 'tablet'].includes(deviceKind)) {
@@ -100,18 +97,15 @@ if (['smartphone', 'tablet'].includes(deviceKind)) {
 	viewport.setAttribute('content',
 		`${viewport.getAttribute('content')}, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover`);
 }
-console.info('4');
 
 //#region Set lang attr
 const html = document.documentElement;
 html.setAttribute('lang', lang);
 //#endregion
-console.info('5');
 
 //#region loginId
 const params = new URLSearchParams(location.search);
 const loginId = params.get('loginId');
-console.info('6', loginId);
 
 if (loginId) {
 	const target = getUrlWithoutLoginId(location.href);
@@ -125,7 +119,6 @@ if (loginId) {
 
 	history.replaceState({ misskey: 'loginId' }, '', target);
 }
-console.info('7');
 
 //#endregion
 
@@ -134,14 +127,12 @@ if ($i && $i.token) {
 	if (_DEV_) {
 		console.log('account cache found. refreshing...');
 	}
-	console.info('8');
 
 	refreshAccount();
 } else {
 	if (_DEV_) {
 		console.log('no account cache found.');
 	}
-	console.info('9');
 
 	// 連携ログインの場合用にCookieを参照する
 	const i = (document.cookie.match(/igi=(\w+)/) || [null, null])[1];
@@ -175,7 +166,6 @@ fetchInstanceMetaPromise.then(() => {
 	// Init service worker
 	initializeSw();
 });
-console.info('10');
 
 const app = createApp(
 	window.location.search === '?zen' ? defineAsyncComponent(() => import('@/ui/zen.vue')) :
@@ -185,8 +175,6 @@ const app = createApp(
 	defineAsyncComponent(() => import('@/ui/universal.vue')),
 );
 
-console.info('11');
-
 if (_DEV_) {
 	app.config.performance = true;
 }
@@ -203,16 +191,12 @@ widgets(app);
 directives(app);
 components(app);
 
-console.info('12');
-
 const splash = document.getElementById('splash');
 // 念のためnullチェック(HTMLが古い場合があるため(そのうち消す))
 if (splash) splash.addEventListener('transitionend', () => {
 	splash.remove();
 });
 
-console.info('13');
-
 // https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210
 // なぜかinit.tsの内容が2回実行されることがあるため、mountするdivを1つに制限する
 const rootEl = (() => {
@@ -231,27 +215,19 @@ const rootEl = (() => {
 	return rootEl;
 })();
 
-console.info('14');
-
 app.mount(rootEl);
 
-console.info('15');
-
 // boot.jsのやつを解除
 window.onerror = null;
 window.onunhandledrejection = null;
 
 reactionPicker.init();
 
-console.info('16');
-
 if (splash) {
 	splash.style.opacity = '0';
 	splash.style.pointerEvents = 'none';
 }
 
-console.info('17');
-
 // クライアントが更新されたか？
 const lastVersion = localStorage.getItem('lastVersion');
 if (lastVersion !== version) {
@@ -271,8 +247,6 @@ if (lastVersion !== version) {
 	}
 }
 
-console.info('18');
-
 // NOTE: この処理は必ず↑のクライアント更新時処理より後に来ること(テーマ再構築のため)
 watch(defaultStore.reactiveState.darkMode, (darkMode) => {
 	applyTheme(darkMode ? ColdDeviceStorage.get('darkTheme') : ColdDeviceStorage.get('lightTheme'));
@@ -293,8 +267,6 @@ watch(lightTheme, (theme) => {
 	}
 });
 
-console.info('19');
-
 //#region Sync dark mode
 if (ColdDeviceStorage.get('syncDeviceDarkMode')) {
 	defaultStore.set('darkMode', isDeviceDarkmode());
@@ -307,8 +279,6 @@ window.matchMedia('(prefers-color-scheme: dark)').addListener(mql => {
 });
 //#endregion
 
-console.info('20');
-
 fetchInstanceMetaPromise.then(() => {
 	if (defaultStore.state.themeInitial) {
 		if (instance.defaultLightTheme != null) ColdDeviceStorage.set('lightTheme', JSON5.parse(instance.defaultLightTheme));

From 17500fc9c9fad0f4b00d8ce070597fb86d0b50fa Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 14 Jul 2022 22:14:42 +0900
Subject: [PATCH 18/26] Revert "fix(client): revert es2017"

This reverts commit 0ddabdbf68767566fd8f4fdeab1de82535dc44cb.
---
 packages/client/src/init.ts    | 728 +++++++++++++++++----------------
 packages/client/vite.config.ts |   1 +
 2 files changed, 366 insertions(+), 363 deletions(-)

diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index 98f69c701f..94e7f9f6b3 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -39,401 +39,403 @@ import { reactionPicker } from '@/scripts/reaction-picker';
 import { getUrlWithoutLoginId } from '@/scripts/login-id';
 import { getAccountFromId } from '@/scripts/get-account-from-id';
 
-console.info(`Misskey v${version}`);
+(async () => {
+	console.info(`Misskey v${version}`);
 
-if (_DEV_) {
-	console.warn('Development mode!!!');
+	if (_DEV_) {
+		console.warn('Development mode!!!');
 
-	console.info(`vue ${vueVersion}`);
+		console.info(`vue ${vueVersion}`);
 
-	(window as any).$i = $i;
-	(window as any).$store = defaultStore;
+		(window as any).$i = $i;
+		(window as any).$store = defaultStore;
 
-	window.addEventListener('error', event => {
-		console.error(event);
-		/*
-		alert({
-			type: 'error',
-			title: 'DEV: Unhandled error',
-			text: event.message
+		window.addEventListener('error', event => {
+			console.error(event);
+			/*
+			alert({
+				type: 'error',
+				title: 'DEV: Unhandled error',
+				text: event.message
+			});
+			*/
 		});
-		*/
+
+		window.addEventListener('unhandledrejection', event => {
+			console.error(event);
+			/*
+			alert({
+				type: 'error',
+				title: 'DEV: Unhandled promise rejection',
+				text: event.reason
+			});
+			*/
+		});
+	}
+
+	// タッチデバイスでCSSの:hoverを機能させる
+	document.addEventListener('touchend', () => {}, { passive: true });
+
+	// 一斉リロード
+	reloadChannel.addEventListener('message', path => {
+		if (path !== null) location.href = path;
+		else location.reload();
 	});
 
-	window.addEventListener('unhandledrejection', event => {
-		console.error(event);
-		/*
-		alert({
-			type: 'error',
-			title: 'DEV: Unhandled promise rejection',
-			text: event.reason
-		});
-		*/
-	});
-}
-
-// タッチデバイスでCSSの:hoverを機能させる
-document.addEventListener('touchend', () => {}, { passive: true });
-
-// 一斉リロード
-reloadChannel.addEventListener('message', path => {
-	if (path !== null) location.href = path;
-	else location.reload();
-});
-
-//#region SEE: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-// TODO: いつの日にか消したい
-const vh = window.innerHeight * 0.01;
-document.documentElement.style.setProperty('--vh', `${vh}px`);
-window.addEventListener('resize', () => {
+	//#region SEE: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+	// TODO: いつの日にか消したい
 	const vh = window.innerHeight * 0.01;
 	document.documentElement.style.setProperty('--vh', `${vh}px`);
-});
-//#endregion
+	window.addEventListener('resize', () => {
+		const vh = window.innerHeight * 0.01;
+		document.documentElement.style.setProperty('--vh', `${vh}px`);
+	});
+	//#endregion
 
-// If mobile, insert the viewport meta tag
-if (['smartphone', 'tablet'].includes(deviceKind)) {
-	const viewport = document.getElementsByName('viewport').item(0);
-	viewport.setAttribute('content',
-		`${viewport.getAttribute('content')}, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover`);
-}
-
-//#region Set lang attr
-const html = document.documentElement;
-html.setAttribute('lang', lang);
-//#endregion
-
-//#region loginId
-const params = new URLSearchParams(location.search);
-const loginId = params.get('loginId');
-
-if (loginId) {
-	const target = getUrlWithoutLoginId(location.href);
-
-	if (!$i || $i.id !== loginId) {
-		const account = await getAccountFromId(loginId);
-		if (account) {
-			await login(account.token, target);
-		}
+	// If mobile, insert the viewport meta tag
+	if (['smartphone', 'tablet'].includes(deviceKind)) {
+		const viewport = document.getElementsByName('viewport').item(0);
+		viewport.setAttribute('content',
+			`${viewport.getAttribute('content')}, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover`);
 	}
 
-	history.replaceState({ misskey: 'loginId' }, '', target);
-}
+	//#region Set lang attr
+	const html = document.documentElement;
+	html.setAttribute('lang', lang);
+	//#endregion
 
-//#endregion
+	//#region loginId
+	const params = new URLSearchParams(location.search);
+	const loginId = params.get('loginId');
 
-//#region Fetch user
-if ($i && $i.token) {
-	if (_DEV_) {
-		console.log('account cache found. refreshing...');
-	}
+	if (loginId) {
+		const target = getUrlWithoutLoginId(location.href);
 
-	refreshAccount();
-} else {
-	if (_DEV_) {
-		console.log('no account cache found.');
-	}
-
-	// 連携ログインの場合用にCookieを参照する
-	const i = (document.cookie.match(/igi=(\w+)/) || [null, null])[1];
-
-	if (i != null && i !== 'null') {
-		if (_DEV_) {
-			console.log('signing...');
-		}
-
-		try {
-			document.body.innerHTML = '<div>Please wait...</div>';
-			await login(i);
-		} catch (err) {
-			// Render the error screen
-			// TODO: ちゃんとしたコンポーネントをレンダリングする(v10とかのトラブルシューティングゲーム付きのやつみたいな)
-			document.body.innerHTML = '<div id="err">Oops!</div>';
-		}
-	} else {
-		if (_DEV_) {
-			console.log('not signed in');
-		}
-	}
-}
-//#endregion
-
-const fetchInstanceMetaPromise = fetchInstance();
-
-fetchInstanceMetaPromise.then(() => {
-	localStorage.setItem('v', instance.version);
-
-	// Init service worker
-	initializeSw();
-});
-
-const app = createApp(
-	window.location.search === '?zen' ? defineAsyncComponent(() => import('@/ui/zen.vue')) :
-	!$i ? defineAsyncComponent(() => import('@/ui/visitor.vue')) :
-	ui === 'deck' ? defineAsyncComponent(() => import('@/ui/deck.vue')) :
-	ui === 'classic' ? defineAsyncComponent(() => import('@/ui/classic.vue')) :
-	defineAsyncComponent(() => import('@/ui/universal.vue')),
-);
-
-if (_DEV_) {
-	app.config.performance = true;
-}
-
-app.config.globalProperties = {
-	$i,
-	$store: defaultStore,
-	$instance: instance,
-	$t: i18n.t,
-	$ts: i18n.ts,
-};
-
-widgets(app);
-directives(app);
-components(app);
-
-const splash = document.getElementById('splash');
-// 念のためnullチェック(HTMLが古い場合があるため(そのうち消す))
-if (splash) splash.addEventListener('transitionend', () => {
-	splash.remove();
-});
-
-// https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210
-// なぜかinit.tsの内容が2回実行されることがあるため、mountするdivを1つに制限する
-const rootEl = (() => {
-	const MISSKEY_MOUNT_DIV_ID = 'misskey_app';
-
-	const currentEl = document.getElementById(MISSKEY_MOUNT_DIV_ID);
-
-	if (currentEl) {
-		console.warn('multiple import detected');
-		return currentEl;
-	}
-
-	const rootEl = document.createElement('div');
-	rootEl.id = MISSKEY_MOUNT_DIV_ID;
-	document.body.appendChild(rootEl);
-	return rootEl;
-})();
-
-app.mount(rootEl);
-
-// boot.jsのやつを解除
-window.onerror = null;
-window.onunhandledrejection = null;
-
-reactionPicker.init();
-
-if (splash) {
-	splash.style.opacity = '0';
-	splash.style.pointerEvents = 'none';
-}
-
-// クライアントが更新されたか？
-const lastVersion = localStorage.getItem('lastVersion');
-if (lastVersion !== version) {
-	localStorage.setItem('lastVersion', version);
-
-	// テーマリビルドするため
-	localStorage.removeItem('theme');
-
-	try { // 変なバージョン文字列来るとcompareVersionsでエラーになるため
-		if (lastVersion != null && compareVersions(version, lastVersion) === 1) {
-			// ログインしてる場合だけ
-			if ($i) {
-				popup(defineAsyncComponent(() => import('@/components/updated.vue')), {}, {}, 'closed');
+		if (!$i || $i.id !== loginId) {
+			const account = await getAccountFromId(loginId);
+			if (account) {
+				await login(account.token, target);
 			}
 		}
-	} catch (err) {
+
+		history.replaceState({ misskey: 'loginId' }, '', target);
 	}
-}
 
-// NOTE: この処理は必ず↑のクライアント更新時処理より後に来ること(テーマ再構築のため)
-watch(defaultStore.reactiveState.darkMode, (darkMode) => {
-	applyTheme(darkMode ? ColdDeviceStorage.get('darkTheme') : ColdDeviceStorage.get('lightTheme'));
-}, { immediate: localStorage.theme == null });
+	//#endregion
 
-const darkTheme = computed(ColdDeviceStorage.makeGetterSetter('darkTheme'));
-const lightTheme = computed(ColdDeviceStorage.makeGetterSetter('lightTheme'));
+	//#region Fetch user
+	if ($i && $i.token) {
+		if (_DEV_) {
+			console.log('account cache found. refreshing...');
+		}
 
-watch(darkTheme, (theme) => {
-	if (defaultStore.state.darkMode) {
-		applyTheme(theme);
-	}
-});
-
-watch(lightTheme, (theme) => {
-	if (!defaultStore.state.darkMode) {
-		applyTheme(theme);
-	}
-});
-
-//#region Sync dark mode
-if (ColdDeviceStorage.get('syncDeviceDarkMode')) {
-	defaultStore.set('darkMode', isDeviceDarkmode());
-}
-
-window.matchMedia('(prefers-color-scheme: dark)').addListener(mql => {
-	if (ColdDeviceStorage.get('syncDeviceDarkMode')) {
-		defaultStore.set('darkMode', mql.matches);
-	}
-});
-//#endregion
-
-fetchInstanceMetaPromise.then(() => {
-	if (defaultStore.state.themeInitial) {
-		if (instance.defaultLightTheme != null) ColdDeviceStorage.set('lightTheme', JSON5.parse(instance.defaultLightTheme));
-		if (instance.defaultDarkTheme != null) ColdDeviceStorage.set('darkTheme', JSON5.parse(instance.defaultDarkTheme));
-		defaultStore.set('themeInitial', false);
-	}
-});
-
-watch(defaultStore.reactiveState.useBlurEffectForModal, v => {
-	document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none');
-}, { immediate: true });
-
-watch(defaultStore.reactiveState.useBlurEffect, v => {
-	if (v) {
-		document.documentElement.style.removeProperty('--blur');
+		refreshAccount();
 	} else {
-		document.documentElement.style.setProperty('--blur', 'none');
-	}
-}, { immediate: true });
+		if (_DEV_) {
+			console.log('no account cache found.');
+		}
 
-let reloadDialogShowing = false;
-stream.on('_disconnected_', async () => {
-	if (defaultStore.state.serverDisconnectedBehavior === 'reload') {
-		location.reload();
-	} else if (defaultStore.state.serverDisconnectedBehavior === 'dialog') {
-		if (reloadDialogShowing) return;
-		reloadDialogShowing = true;
-		const { canceled } = await confirm({
-			type: 'warning',
-			title: i18n.ts.disconnectedFromServer,
-			text: i18n.ts.reloadConfirm,
-		});
-		reloadDialogShowing = false;
-		if (!canceled) {
+		// 連携ログインの場合用にCookieを参照する
+		const i = (document.cookie.match(/igi=(\w+)/) || [null, null])[1];
+
+		if (i != null && i !== 'null') {
+			if (_DEV_) {
+				console.log('signing...');
+			}
+
+			try {
+				document.body.innerHTML = '<div>Please wait...</div>';
+				await login(i);
+			} catch (err) {
+				// Render the error screen
+				// TODO: ちゃんとしたコンポーネントをレンダリングする(v10とかのトラブルシューティングゲーム付きのやつみたいな)
+				document.body.innerHTML = '<div id="err">Oops!</div>';
+			}
+		} else {
+			if (_DEV_) {
+				console.log('not signed in');
+			}
+		}
+	}
+	//#endregion
+
+	const fetchInstanceMetaPromise = fetchInstance();
+
+	fetchInstanceMetaPromise.then(() => {
+		localStorage.setItem('v', instance.version);
+
+		// Init service worker
+		initializeSw();
+	});
+
+	const app = createApp(
+		window.location.search === '?zen' ? defineAsyncComponent(() => import('@/ui/zen.vue')) :
+		!$i ? defineAsyncComponent(() => import('@/ui/visitor.vue')) :
+		ui === 'deck' ? defineAsyncComponent(() => import('@/ui/deck.vue')) :
+		ui === 'classic' ? defineAsyncComponent(() => import('@/ui/classic.vue')) :
+		defineAsyncComponent(() => import('@/ui/universal.vue')),
+	);
+
+	if (_DEV_) {
+		app.config.performance = true;
+	}
+
+	app.config.globalProperties = {
+		$i,
+		$store: defaultStore,
+		$instance: instance,
+		$t: i18n.t,
+		$ts: i18n.ts,
+	};
+
+	widgets(app);
+	directives(app);
+	components(app);
+
+	const splash = document.getElementById('splash');
+	// 念のためnullチェック(HTMLが古い場合があるため(そのうち消す))
+	if (splash) splash.addEventListener('transitionend', () => {
+		splash.remove();
+	});
+
+	// https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210
+	// なぜかinit.tsの内容が2回実行されることがあるため、mountするdivを1つに制限する
+	const rootEl = (() => {
+		const MISSKEY_MOUNT_DIV_ID = 'misskey_app';
+
+		const currentEl = document.getElementById(MISSKEY_MOUNT_DIV_ID);
+
+		if (currentEl) {
+			console.warn('multiple import detected');
+			return currentEl;
+		}
+
+		const rootEl = document.createElement('div');
+		rootEl.id = MISSKEY_MOUNT_DIV_ID;
+		document.body.appendChild(rootEl);
+		return rootEl;
+	})();
+
+	app.mount(rootEl);
+
+	// boot.jsのやつを解除
+	window.onerror = null;
+	window.onunhandledrejection = null;
+
+	reactionPicker.init();
+
+	if (splash) {
+		splash.style.opacity = '0';
+		splash.style.pointerEvents = 'none';
+	}
+
+	// クライアントが更新されたか？
+	const lastVersion = localStorage.getItem('lastVersion');
+	if (lastVersion !== version) {
+		localStorage.setItem('lastVersion', version);
+
+		// テーマリビルドするため
+		localStorage.removeItem('theme');
+
+		try { // 変なバージョン文字列来るとcompareVersionsでエラーになるため
+			if (lastVersion != null && compareVersions(version, lastVersion) === 1) {
+				// ログインしてる場合だけ
+				if ($i) {
+					popup(defineAsyncComponent(() => import('@/components/updated.vue')), {}, {}, 'closed');
+				}
+			}
+		} catch (err) {
+		}
+	}
+
+	// NOTE: この処理は必ず↑のクライアント更新時処理より後に来ること(テーマ再構築のため)
+	watch(defaultStore.reactiveState.darkMode, (darkMode) => {
+		applyTheme(darkMode ? ColdDeviceStorage.get('darkTheme') : ColdDeviceStorage.get('lightTheme'));
+	}, { immediate: localStorage.theme == null });
+
+	const darkTheme = computed(ColdDeviceStorage.makeGetterSetter('darkTheme'));
+	const lightTheme = computed(ColdDeviceStorage.makeGetterSetter('lightTheme'));
+
+	watch(darkTheme, (theme) => {
+		if (defaultStore.state.darkMode) {
+			applyTheme(theme);
+		}
+	});
+
+	watch(lightTheme, (theme) => {
+		if (!defaultStore.state.darkMode) {
+			applyTheme(theme);
+		}
+	});
+
+	//#region Sync dark mode
+	if (ColdDeviceStorage.get('syncDeviceDarkMode')) {
+		defaultStore.set('darkMode', isDeviceDarkmode());
+	}
+
+	window.matchMedia('(prefers-color-scheme: dark)').addListener(mql => {
+		if (ColdDeviceStorage.get('syncDeviceDarkMode')) {
+			defaultStore.set('darkMode', mql.matches);
+		}
+	});
+	//#endregion
+
+	fetchInstanceMetaPromise.then(() => {
+		if (defaultStore.state.themeInitial) {
+			if (instance.defaultLightTheme != null) ColdDeviceStorage.set('lightTheme', JSON5.parse(instance.defaultLightTheme));
+			if (instance.defaultDarkTheme != null) ColdDeviceStorage.set('darkTheme', JSON5.parse(instance.defaultDarkTheme));
+			defaultStore.set('themeInitial', false);
+		}
+	});
+
+	watch(defaultStore.reactiveState.useBlurEffectForModal, v => {
+		document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none');
+	}, { immediate: true });
+
+	watch(defaultStore.reactiveState.useBlurEffect, v => {
+		if (v) {
+			document.documentElement.style.removeProperty('--blur');
+		} else {
+			document.documentElement.style.setProperty('--blur', 'none');
+		}
+	}, { immediate: true });
+
+	let reloadDialogShowing = false;
+	stream.on('_disconnected_', async () => {
+		if (defaultStore.state.serverDisconnectedBehavior === 'reload') {
 			location.reload();
+		} else if (defaultStore.state.serverDisconnectedBehavior === 'dialog') {
+			if (reloadDialogShowing) return;
+			reloadDialogShowing = true;
+			const { canceled } = await confirm({
+				type: 'warning',
+				title: i18n.ts.disconnectedFromServer,
+				text: i18n.ts.reloadConfirm,
+			});
+			reloadDialogShowing = false;
+			if (!canceled) {
+				location.reload();
+			}
 		}
-	}
-});
-
-stream.on('emojiAdded', emojiData => {
-	// TODO
-	//store.commit('instance/set', );
-});
-
-for (const plugin of ColdDeviceStorage.get('plugins').filter(p => p.active)) {
-	import('./plugin').then(({ install }) => {
-		install(plugin);
 	});
-}
 
-const hotkeys = {
-	'd': (): void => {
-		defaultStore.set('darkMode', !defaultStore.state.darkMode);
-	},
-	's': search,
-};
+	stream.on('emojiAdded', emojiData => {
+		// TODO
+		//store.commit('instance/set', );
+	});
 
-if ($i) {
-	// only add post shortcuts if logged in
-	hotkeys['p|n'] = post;
-
-	if ($i.isDeleted) {
-		alert({
-			type: 'warning',
-			text: i18n.ts.accountDeletionInProgress,
+	for (const plugin of ColdDeviceStorage.get('plugins').filter(p => p.active)) {
+		import('./plugin').then(({ install }) => {
+			install(plugin);
 		});
 	}
 
-	const lastUsed = localStorage.getItem('lastUsed');
-	if (lastUsed) {
-		const lastUsedDate = parseInt(lastUsed, 10);
-		// 二時間以上前なら
-		if (Date.now() - lastUsedDate > 1000 * 60 * 60 * 2) {
-			toast(i18n.t('welcomeBackWithName', {
-				name: $i.name || $i.username,
-			}));
-		}
-	}
-	localStorage.setItem('lastUsed', Date.now().toString());
+	const hotkeys = {
+		'd': (): void => {
+			defaultStore.set('darkMode', !defaultStore.state.darkMode);
+		},
+		's': search,
+	};
 
-	if ('Notification' in window) {
-		// 許可を得ていなかったらリクエスト
-		if (Notification.permission === 'default') {
-			Notification.requestPermission();
+	if ($i) {
+		// only add post shortcuts if logged in
+		hotkeys['p|n'] = post;
+
+		if ($i.isDeleted) {
+			alert({
+				type: 'warning',
+				text: i18n.ts.accountDeletionInProgress,
+			});
 		}
+
+		const lastUsed = localStorage.getItem('lastUsed');
+		if (lastUsed) {
+			const lastUsedDate = parseInt(lastUsed, 10);
+			// 二時間以上前なら
+			if (Date.now() - lastUsedDate > 1000 * 60 * 60 * 2) {
+				toast(i18n.t('welcomeBackWithName', {
+					name: $i.name || $i.username,
+				}));
+			}
+		}
+		localStorage.setItem('lastUsed', Date.now().toString());
+
+		if ('Notification' in window) {
+			// 許可を得ていなかったらリクエスト
+			if (Notification.permission === 'default') {
+				Notification.requestPermission();
+			}
+		}
+
+		const main = markRaw(stream.useChannel('main', null, 'System'));
+
+		// 自分の情報が更新されたとき
+		main.on('meUpdated', i => {
+			updateAccount(i);
+		});
+
+		main.on('readAllNotifications', () => {
+			updateAccount({ hasUnreadNotification: false });
+		});
+
+		main.on('unreadNotification', () => {
+			updateAccount({ hasUnreadNotification: true });
+		});
+
+		main.on('unreadMention', () => {
+			updateAccount({ hasUnreadMentions: true });
+		});
+
+		main.on('readAllUnreadMentions', () => {
+			updateAccount({ hasUnreadMentions: false });
+		});
+
+		main.on('unreadSpecifiedNote', () => {
+			updateAccount({ hasUnreadSpecifiedNotes: true });
+		});
+
+		main.on('readAllUnreadSpecifiedNotes', () => {
+			updateAccount({ hasUnreadSpecifiedNotes: false });
+		});
+
+		main.on('readAllMessagingMessages', () => {
+			updateAccount({ hasUnreadMessagingMessage: false });
+		});
+
+		main.on('unreadMessagingMessage', () => {
+			updateAccount({ hasUnreadMessagingMessage: true });
+			sound.play('chatBg');
+		});
+
+		main.on('readAllAntennas', () => {
+			updateAccount({ hasUnreadAntenna: false });
+		});
+
+		main.on('unreadAntenna', () => {
+			updateAccount({ hasUnreadAntenna: true });
+			sound.play('antenna');
+		});
+
+		main.on('readAllAnnouncements', () => {
+			updateAccount({ hasUnreadAnnouncement: false });
+		});
+
+		main.on('readAllChannels', () => {
+			updateAccount({ hasUnreadChannel: false });
+		});
+
+		main.on('unreadChannel', () => {
+			updateAccount({ hasUnreadChannel: true });
+			sound.play('channel');
+		});
+
+		// トークンが再生成されたとき
+		// このままではMisskeyが利用できないので強制的にサインアウトさせる
+		main.on('myTokenRegenerated', () => {
+			signout();
+		});
 	}
 
-	const main = markRaw(stream.useChannel('main', null, 'System'));
-
-	// 自分の情報が更新されたとき
-	main.on('meUpdated', i => {
-		updateAccount(i);
-	});
-
-	main.on('readAllNotifications', () => {
-		updateAccount({ hasUnreadNotification: false });
-	});
-
-	main.on('unreadNotification', () => {
-		updateAccount({ hasUnreadNotification: true });
-	});
-
-	main.on('unreadMention', () => {
-		updateAccount({ hasUnreadMentions: true });
-	});
-
-	main.on('readAllUnreadMentions', () => {
-		updateAccount({ hasUnreadMentions: false });
-	});
-
-	main.on('unreadSpecifiedNote', () => {
-		updateAccount({ hasUnreadSpecifiedNotes: true });
-	});
-
-	main.on('readAllUnreadSpecifiedNotes', () => {
-		updateAccount({ hasUnreadSpecifiedNotes: false });
-	});
-
-	main.on('readAllMessagingMessages', () => {
-		updateAccount({ hasUnreadMessagingMessage: false });
-	});
-
-	main.on('unreadMessagingMessage', () => {
-		updateAccount({ hasUnreadMessagingMessage: true });
-		sound.play('chatBg');
-	});
-
-	main.on('readAllAntennas', () => {
-		updateAccount({ hasUnreadAntenna: false });
-	});
-
-	main.on('unreadAntenna', () => {
-		updateAccount({ hasUnreadAntenna: true });
-		sound.play('antenna');
-	});
-
-	main.on('readAllAnnouncements', () => {
-		updateAccount({ hasUnreadAnnouncement: false });
-	});
-
-	main.on('readAllChannels', () => {
-		updateAccount({ hasUnreadChannel: false });
-	});
-
-	main.on('unreadChannel', () => {
-		updateAccount({ hasUnreadChannel: true });
-		sound.play('channel');
-	});
-
-	// トークンが再生成されたとき
-	// このままではMisskeyが利用できないので強制的にサインアウトさせる
-	main.on('myTokenRegenerated', () => {
-		signout();
-	});
-}
-
-// shortcut
-document.addEventListener('keydown', makeHotkey(hotkeys));
+	// shortcut
+	document.addEventListener('keydown', makeHotkey(hotkeys));
+})();
diff --git a/packages/client/vite.config.ts b/packages/client/vite.config.ts
index 5800cf5021..f23c621131 100644
--- a/packages/client/vite.config.ts
+++ b/packages/client/vite.config.ts
@@ -49,6 +49,7 @@ export default defineConfig(({ command, mode }) => {
 				'chrome100',
 				'firefox100',
 				'safari15',
+				'es2017', // TODO: そのうち消す
 			],
 			manifest: 'manifest.json',
 			rollupOptions: {

From 5fa8c62305291d40be1371a7b749722b2119351f Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 14 Jul 2022 22:15:08 +0900
Subject: [PATCH 19/26] 12.114.0-beta.5

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3ac56e73f1..9a5fe0ea59 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "12.114.0-beta.4",
+	"version": "12.114.0-beta.5",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",

From 44f560b453fe1161cc6e1dcad6e48fd0ac812cd4 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 14 Jul 2022 22:25:57 +0900
Subject: [PATCH 20/26] tweak boot.js

---
 packages/backend/src/server/web/boot.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js
index b9f00bb21d..9570115423 100644
--- a/packages/backend/src/server/web/boot.js
+++ b/packages/backend/src/server/web/boot.js
@@ -56,14 +56,23 @@
 	//#endregion
 
 	//#region Script
-	window.addEventListener('DOMContentLoaded', () => {
+	function importAppScript() {
 		import(`/assets/${CLIENT_ENTRY}`)
 			.catch(async e => {
 				await checkUpdate();
 				console.error(e);
 				renderError('APP_IMPORT', e);
 			});
-	});
+	}
+
+	// タイミングによっては、この時点でDOMの構築が済んでいる場合とそうでない場合とがある
+	if (document.readyState !== 'loading') {
+		importAppScript();
+	} else {
+		window.addEventListener('DOMContentLoaded', () => {
+			importAppScript();
+		});
+	}
 	//#endregion
 
 	//#region Theme

From c30ffec1aff4bee5858f936e6dc89fbf066b2ebe Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 14 Jul 2022 22:26:02 +0900
Subject: [PATCH 21/26] 12.114.0-beta.6

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9a5fe0ea59..133e885aa1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "12.114.0-beta.5",
+	"version": "12.114.0-beta.6",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",

From 7b7fe019c09402538c5959e8fe604123aaa83590 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 14 Jul 2022 23:24:10 +0900
Subject: [PATCH 22/26] Update CHANGELOG.md

---
 CHANGELOG.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 91d4edf120..2e1666b080 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,13 @@
 You should also include the user name that made the change.
 -->
 
+## 12.x.x (unreleased)
+
+### Improvements
+
+### Bugfixes
+- クライアントが起動しなくなることがある問題を修正 @syuilo
+
 ## 12.113.0 (2022/07/13)
 
 ### Improvements

From de241319933eeb2601d9bf535d60a3c6e32cb8d6 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 14 Jul 2022 23:31:01 +0900
Subject: [PATCH 23/26] use MkStickyContainer (#9000)

---
 packages/client/src/directives/index.ts       |  2 --
 .../client/src/directives/sticky-container.ts | 17 -----------
 .../client/src/pages/user/index.timeline.vue  | 28 +++++++++----------
 3 files changed, 14 insertions(+), 33 deletions(-)
 delete mode 100644 packages/client/src/directives/sticky-container.ts

diff --git a/packages/client/src/directives/index.ts b/packages/client/src/directives/index.ts
index fc9b6f86da..401a917cba 100644
--- a/packages/client/src/directives/index.ts
+++ b/packages/client/src/directives/index.ts
@@ -8,7 +8,6 @@ import tooltip from './tooltip';
 import hotkey from './hotkey';
 import appear from './appear';
 import anim from './anim';
-import stickyContainer from './sticky-container';
 import clickAnime from './click-anime';
 import panel from './panel';
 import adaptiveBorder from './adaptive-border';
@@ -24,7 +23,6 @@ export default function(app: App) {
 	app.directive('appear', appear);
 	app.directive('anim', anim);
 	app.directive('click-anime', clickAnime);
-	app.directive('sticky-container', stickyContainer);
 	app.directive('panel', panel);
 	app.directive('adaptive-border', adaptiveBorder);
 }
diff --git a/packages/client/src/directives/sticky-container.ts b/packages/client/src/directives/sticky-container.ts
deleted file mode 100644
index 3cf813054b..0000000000
--- a/packages/client/src/directives/sticky-container.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Directive } from 'vue';
-
-export default {
-	mounted(src, binding, vn) {
-		//const query = binding.value;
-
-		const header = src.children[0];
-		const body = src.children[1];
-		const currentStickyTop = getComputedStyle(src).getPropertyValue('--stickyTop') || '0px';
-		src.style.setProperty('--stickyTop', `calc(${currentStickyTop} + ${header.offsetHeight}px)`);
-		if (body) body.dataset.stickyContainerHeaderHeight = header.offsetHeight.toString();
-		header.style.setProperty('--stickyTop', currentStickyTop);
-		header.style.position = 'sticky';
-		header.style.top = 'var(--stickyTop)';
-		header.style.zIndex = '1';
-	},
-} as Directive;
diff --git a/packages/client/src/pages/user/index.timeline.vue b/packages/client/src/pages/user/index.timeline.vue
index a1329a7411..1bcc0a1b85 100644
--- a/packages/client/src/pages/user/index.timeline.vue
+++ b/packages/client/src/pages/user/index.timeline.vue
@@ -1,12 +1,14 @@
 <template>
-<div v-sticky-container class="yrzkoczt">
-	<MkTab v-model="include" class="tab">
-		<option :value="null">{{ $ts.notes }}</option>
-		<option value="replies">{{ $ts.notesAndReplies }}</option>
-		<option value="files">{{ $ts.withFiles }}</option>
-	</MkTab>
+<MkStickyContainer>
+	<template #header>
+		<MkTab v-model="include" :class="$style.tab">
+			<option :value="null">{{ $ts.notes }}</option>
+			<option value="replies">{{ $ts.notesAndReplies }}</option>
+			<option value="files">{{ $ts.withFiles }}</option>
+		</MkTab>
+	</template>
 	<XNotes :no-gap="true" :pagination="pagination"/>
-</div>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -33,12 +35,10 @@ const pagination = {
 };
 </script>
 
-<style lang="scss" scoped>
-.yrzkoczt {
-	> .tab {
-		margin: calc(var(--margin) / 2) 0;
-		padding: calc(var(--margin) / 2) 0;
-		background: var(--bg);
-	}
+<style lang="scss" module>
+.tab {
+	margin: calc(var(--margin) / 2) 0;
+	padding: calc(var(--margin) / 2) 0;
+	background: var(--bg);
 }
 </style>

From 77c2a7cd71efea318f4fd7ba0ee54b32e9c8f7ba Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 14 Jul 2022 23:32:00 +0900
Subject: [PATCH 24/26] refactor(client): remove useCssModule (#8999)

* refactor(client): remove useCssModule()

* use MkStickyContainer

* Revert "use MkStickyContainer"

This reverts commit 639746786bb7e3342db9cbd3452854fc29aacf88.
---
 packages/client/src/components/global/loading.vue | 4 +---
 packages/client/src/components/mention.vue        | 4 +---
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/components/global/loading.vue b/packages/client/src/components/global/loading.vue
index 5a7e362fcf..bcc6dfac01 100644
--- a/packages/client/src/components/global/loading.vue
+++ b/packages/client/src/components/global/loading.vue
@@ -16,9 +16,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useCssModule } from 'vue';
-
-useCssModule();
+import { } from 'vue';
 
 const props = withDefaults(defineProps<{
 	inline?: boolean;
diff --git a/packages/client/src/components/mention.vue b/packages/client/src/components/mention.vue
index cf69437771..3091b435e4 100644
--- a/packages/client/src/components/mention.vue
+++ b/packages/client/src/components/mention.vue
@@ -16,7 +16,7 @@
 
 <script lang="ts" setup>
 import { toUnicode } from 'punycode';
-import { useCssModule } from 'vue';
+import { } from 'vue';
 import tinycolor from 'tinycolor2';
 import { host as localHost } from '@/config';
 import { $i } from '@/account';
@@ -37,8 +37,6 @@ const isMe = $i && (
 const bg = tinycolor(getComputedStyle(document.documentElement).getPropertyValue(isMe ? '--mentionMe' : '--mention'));
 bg.setAlpha(0.1);
 const bgCss = bg.toRgbString();
-
-useCssModule();
 </script>
 
 <style lang="scss" scoped>

From ddc899938a295ea83128a3f5fd0b922819242ff9 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 14 Jul 2022 23:50:07 +0900
Subject: [PATCH 25/26] chore(client): improve usability

---
 packages/client/src/pages/settings/security.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/pages/settings/security.vue b/packages/client/src/pages/settings/security.vue
index eb3efa9afb..d926acce5d 100644
--- a/packages/client/src/pages/settings/security.vue
+++ b/packages/client/src/pages/settings/security.vue
@@ -12,7 +12,7 @@
 	
 	<FormSection>
 		<template #label>{{ i18n.ts.signinHistory }}</template>
-		<MkPagination :pagination="pagination">
+		<MkPagination :pagination="pagination" disable-auto-load>
 			<template #default="{items}">
 				<div>
 					<div v-for="item in items" :key="item.id" v-panel class="timnmucd">

From a4b5a0072d427ba2be4170041f98c11f8ea13e44 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 14 Jul 2022 23:54:52 +0900
Subject: [PATCH 26/26] move rollup to devDeps

---
 packages/client/package.json  |  2 +-
 packages/client/vite.json5.ts | 52 +++++++++++++++++------------------
 2 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/packages/client/package.json b/packages/client/package.json
index 8d2efd0b92..94f6688dd2 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -56,7 +56,6 @@
 		"random-seed": "0.3.0",
 		"reflect-metadata": "0.1.13",
 		"rndstr": "1.0.0",
-		"rollup": "2.76.0",
 		"s-age": "1.1.2",
 		"sass": "1.53.0",
 		"seedrandom": "3.0.5",
@@ -102,6 +101,7 @@
 		"@types/ws": "8.5.3",
 		"@typescript-eslint/eslint-plugin": "5.30.6",
 		"@typescript-eslint/parser": "5.30.6",
+		"rollup": "2.76.0",
 		"cross-env": "7.0.3",
 		"cypress": "10.3.0",
 		"eslint": "8.19.0",
diff --git a/packages/client/vite.json5.ts b/packages/client/vite.json5.ts
index 693ee7be06..0a37fbff44 100644
--- a/packages/client/vite.json5.ts
+++ b/packages/client/vite.json5.ts
@@ -6,33 +6,33 @@ import { createFilter, dataToEsm } from '@rollup/pluginutils';
 import { RollupJsonOptions } from '@rollup/plugin-json';
 
 export default function json5(options: RollupJsonOptions = {}): Plugin {
-  const filter = createFilter(options.include, options.exclude);
-  const indent = 'indent' in options ? options.indent : '\t';
+	const filter = createFilter(options.include, options.exclude);
+	const indent = 'indent' in options ? options.indent : '\t';
 
-  return {
-    name: 'json5',
+	return {
+		name: 'json5',
 
-    // eslint-disable-next-line no-shadow
-    transform(json, id) {
-      if (id.slice(-6) !== '.json5' || !filter(id)) return null;
+		// eslint-disable-next-line no-shadow
+		transform(json, id) {
+			if (id.slice(-6) !== '.json5' || !filter(id)) return null;
 
-      try {
-        const parsed = JSON5.parse(json);
-        return {
-          code: dataToEsm(parsed, {
-            preferConst: options.preferConst,
-            compact: options.compact,
-            namedExports: options.namedExports,
-            indent
-          }),
-          map: { mappings: '' }
-        };
-      } catch (err) {
-        const message = 'Could not parse JSON file';
-        const position = parseInt(/[\d]/.exec(err.message)[0], 10);
-        this.warn({ message, id, position });
-        return null;
-      }
-    }
-  };
+			try {
+				const parsed = JSON5.parse(json);
+				return {
+					code: dataToEsm(parsed, {
+						preferConst: options.preferConst,
+						compact: options.compact,
+						namedExports: options.namedExports,
+						indent,
+					}),
+					map: { mappings: '' },
+				};
+			} catch (err) {
+				const message = 'Could not parse JSON file';
+				const position = parseInt(/[\d]/.exec(err.message)[0], 10);
+				this.warn({ message, id, position });
+				return null;
+			}
+		},
+	};
 }