feat(client): blur effect for modal

1 files changed, 38 insertions, 34 deletions

diff --git a/src/client/init.ts b/src/client/init.ts
index 7e11efe37c..7a0339d377 100644
--- a/src/client/init.ts
+++ b/src/client/init.ts
@@ -106,36 +106,17 @@ document.body.innerHTML = '<div id="app"></div>';
 
 const store = createStore();
 
-const os = new MiOS(store);
-
-os.init(async () => {
-	window.addEventListener('storage', e => {
-		if (e.key === 'vuex') {
-			store.replaceState(JSON.parse(localStorage['vuex']));
-		} else if (e.key === 'i') {
-			location.reload();
-		}
-	}, false);
-
-	store.watch(state => state.device.darkMode, darkMode => {
-		import('./scripts/theme').then(({ builtinThemes }) => {
-			const themes = builtinThemes.concat(store.state.device.themes);
-			applyTheme(themes.find(x => x.id === (darkMode ? store.state.device.darkTheme : store.state.device.lightTheme)));
-		});
-	});
-
-	//#region Sync dark mode
-	if (store.state.device.syncDeviceDarkMode) {
-		store.commit('device/set', { key: 'darkMode', value: isDeviceDarkmode() });
+window.addEventListener('storage', e => {
+	if (e.key === 'vuex') {
+		store.replaceState(JSON.parse(localStorage['vuex']));
+	} else if (e.key === 'i') {
+		location.reload();
 	}
+}, false);
 
-	window.matchMedia('(prefers-color-scheme: dark)').addListener(mql => {
-		if (store.state.device.syncDeviceDarkMode) {
-			store.commit('device/set', { key: 'darkMode', value: mql.matches });
-		}
-	});
-	//#endregion
+const os = new MiOS(store);
 
+os.init(async () => {
 	//#region Fetch locale data
 	const i18n = new VueI18n();
 
@@ -148,13 +129,6 @@ os.init(async () => {
 	});
 	//#endregion
 
-	if ('Notification' in window && store.getters.isSignedIn) {
-		// 許可を得ていなかったらリクエスト
-		if (Notification.permission === 'default') {
-			Notification.requestPermission();
-		}
-	}
-
 	const app = new Vue({
 		store: store,
 		i18n,
@@ -228,6 +202,29 @@ os.init(async () => {
 	// マウント
 	app.$mount('#app');
 
+	store.watch(state => state.device.darkMode, darkMode => {
+		import('./scripts/theme').then(({ builtinThemes }) => {
+			const themes = builtinThemes.concat(store.state.device.themes);
+			applyTheme(themes.find(x => x.id === (darkMode ? store.state.device.darkTheme : store.state.device.lightTheme)));
+		});
+	});
+
+	//#region Sync dark mode
+	if (store.state.device.syncDeviceDarkMode) {
+		store.commit('device/set', { key: 'darkMode', value: isDeviceDarkmode() });
+	}
+
+	window.matchMedia('(prefers-color-scheme: dark)').addListener(mql => {
+		if (store.state.device.syncDeviceDarkMode) {
+			store.commit('device/set', { key: 'darkMode', value: mql.matches });
+		}
+	});
+	//#endregion
+
+	store.watch(state => state.device.useBlurEffectForModal, v => {
+		document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none');
+	}, { immediate: true });
+
 	os.stream.on('emojiAdded', data => {
 		// TODO
 		//store.commit('instance/set', );
@@ -263,6 +260,13 @@ os.init(async () => {
 	}
 
 	if (store.getters.isSignedIn) {
+		if ('Notification' in window) {
+			// 許可を得ていなかったらリクエスト
+			if (Notification.permission === 'default') {
+				Notification.requestPermission();
+			}
+		}
+
 		const main = os.stream.useSharedConnection('main');
 
 		// 自分の情報が更新されたとき