Storage improve (#6976)

* wip

* wip

* wip

* wip

* wip

* Update storage.ts

* wip

* wip

* wip

* wip

* Update storage.ts

* Update storage.ts

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update storage.ts

* wip

* wip

* wip

* wip

* 🍕

* wip

* wip

* wip

* wip

* wip

* wip

* Update deck-storage.ts

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update store.ts

* wip

* wip

* wip

* wip

* Update init.ts

* wip

* wip

* Update pizzax.ts

* wip

* wip

* Update timeline.vue

* Update init.ts

* wip

* wip

* Update init.ts

src/client/init.ts

@@ -4,26 +4,54 @@
 
 import '@/style.scss';
 
-import { createApp } from 'vue';
+// TODO: そのうち消す
+if (localStorage.getItem('vuex') != null) {
+	const vuex = JSON.parse(localStorage.getItem('vuex'));
+
+	localStorage.setItem('accounts', JSON.stringify(vuex.device.accounts));
+	localStorage.setItem('miux:themes', JSON.stringify(vuex.device.themes));
+
+	for (const [k, v] of 	Object.entries(vuex.device.userData)) {
+		localStorage.setItem('pizzax::base::' + k, JSON.stringify({
+			widgets: v.widgets
+		}));
+
+		if (v.deck) {
+			localStorage.setItem('pizzax::deck::' + k, JSON.stringify({
+				columns: v.deck.columns,
+				layout: v.deck.layout,
+			}));
+		}
+	}
+
+	localStorage.removeItem('vuex');
+}
+
+import { createApp, watch } from 'vue';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
-import widgets from './widgets';
-import directives from './directives';
+import widgets from '@/widgets';
+import directives from '@/directives';
 import components from '@/components';
-import { version, apiUrl, ui } from '@/config';
-import { store } from './store';
-import { router } from './router';
+import { version, ui } from '@/config';
+import { router } from '@/router';
 import { applyTheme } from '@/scripts/theme';
 import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';
-import { i18n, lang } from './i18n';
+import { i18n, lang } from '@/i18n';
 import { stream, isMobile, dialog } from '@/os';
-import * as sound from './scripts/sound';
+import * as sound from '@/scripts/sound';
+import { $i, refreshAccount, login, updateAccount, signout } from '@/account';
+import { defaultStore, ColdDeviceStorage } from '@/store';
+import { fetchInstance, instance } from '@/instance';
 
 console.info(`Misskey v${version}`);
 
 if (_DEV_) {
 	console.warn('Development mode!!!');
 
+	(window as any).$i = $i;
+	(window as any).$store = defaultStore;
+
 	window.addEventListener('error', event => {
 		console.error(event);
 		/*
@@ -81,80 +109,52 @@ html.setAttribute('lang', lang);
 //#endregion
 
 //#region Fetch user
-const signout = () => {
-	store.dispatch('logout');
-	location.href = '/';
-};
-
-// ユーザーをフェッチしてコールバックする
-const fetchme = (token) => new Promise((done, fail) => {
-	// Fetch user
-	fetch(`${apiUrl}/i`, {
-		method: 'POST',
-		body: JSON.stringify({
-			i: token
-		})
-	})
-	.then(res => {
-		// When failed to authenticate user
-		if (res.status !== 200 && res.status < 500) {
-			return signout();
-		}
-
-		// Parse response
-		res.json().then(i => {
-			i.token = token;
-			done(i);
-		});
-	})
-	.catch(fail);
-});
-
-// キャッシュがあったとき
-if (store.state.i != null) {
-	// TODO: i.token が null になるケースってどんな時だっけ？
-	if (store.state.i.token == null) {
-		signout();
+if ($i && $i.token) {
+	if (_DEV_) {
+		console.log('account cache found. refreshing...');
 	}
 
-	// 後から新鮮なデータをフェッチ
-	fetchme(store.state.i.token).then(freshData => {
-		store.dispatch('mergeMe', freshData);
-	});
+	refreshAccount();
 } else {
-	// Get token from localStorage
-	let i = localStorage.getItem('i');
+	if (_DEV_) {
+		console.log('no account cache found.');
+	}
 
 	// 連携ログインの場合用にCookieを参照する
-	if (i == null || i === 'null') {
-		i = (document.cookie.match(/igi=(\w+)/) || [null, null])[1];
-	}
+	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>';
-			const me = await fetchme(i);
-			await store.dispatch('login', me);
+			await login(i);
 			location.reload();
 		} catch (e) {
 			// Render the error screen
 			// TODO: ちゃんとしたコンポーネントをレンダリングする(v10とかのトラブルシューティングゲーム付きのやつみたいな)
 			document.body.innerHTML = '<div id="err">Oops!</div>';
 		}
+	} else {
+		if (_DEV_) {
+			console.log('not signed in');
+		}
 	}
 }
 //#endregion
 
-store.dispatch('instance/fetch').then(() => {
+fetchInstance().then(() => {
 	// Init service worker
 	//if (this.store.state.instance.meta.swPublickey) this.registerSw(this.store.state.instance.meta.swPublickey);
 });
 
-stream.init(store.state.i);
+stream.init($i);
 
 const app = createApp(await (
 	window.location.search === '?zen' ? import('@/ui/zen.vue') :
-	!store.getters.isSignedIn         ? import('@/ui/visitor.vue') :
+	!$i                               ? import('@/ui/visitor.vue') :
 	ui === 'deck'                     ? import('@/ui/deck.vue') :
 	ui === 'desktop'                  ? import('@/ui/desktop.vue') :
 	import('@/ui/default.vue')
@@ -164,7 +164,12 @@ if (_DEV_) {
 	app.config.performance = true;
 }
 
-app.use(store);
+app.config.globalProperties = {
+	$i,
+	$store: defaultStore,
+	$instance: instance,
+};
+
 app.use(router);
 app.use(i18n);
 // eslint-disable-next-line vue/component-definition-name-casing
@@ -180,46 +185,34 @@ await router.isReady();
 
 app.mount('body');
 
-// 他のタブと永続化されたstateを同期
-window.addEventListener('storage', e => {
-	if (e.key === 'vuex') {
-		store.replaceState({
-			...store.state,
-			...JSON.parse(e.newValue)
-		});
-	} else if (e.key === 'i') {
-		location.reload();
-	}
-}, false);
-
-store.watch(state => state.device.darkMode, darkMode => {
+watch(defaultStore.reactiveState.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)));
+		const themes = builtinThemes.concat(ColdDeviceStorage.get('themes'));
+		applyTheme(themes.find(x => x.id === (darkMode ? ColdDeviceStorage.get('darkTheme') : ColdDeviceStorage.get('lightTheme'))));
 	});
 });
 
 //#region Sync dark mode
-if (store.state.device.syncDeviceDarkMode) {
-	store.commit('device/set', { key: 'darkMode', value: isDeviceDarkmode() });
+if (ColdDeviceStorage.get('syncDeviceDarkMode')) {
+	defaultStore.set('darkMode', isDeviceDarkmode());
 }
 
 window.matchMedia('(prefers-color-scheme: dark)').addListener(mql => {
-	if (store.state.device.syncDeviceDarkMode) {
-		store.commit('device/set', { key: 'darkMode', value: mql.matches });
+	if (ColdDeviceStorage.get('syncDeviceDarkMode')) {
+		defaultStore.set('darkMode', mql.matches);
 	}
 });
 //#endregion
 
-store.watch(state => state.device.useBlurEffectForModal, v => {
+watch(defaultStore.reactiveState.useBlurEffectForModal, v => {
 	document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none');
 }, { immediate: true });
 
 let reloadDialogShowing = false;
 stream.on('_disconnected_', async () => {
-	if (store.state.device.serverDisconnectedBehavior === 'reload') {
+	if (defaultStore.state.serverDisconnectedBehavior === 'reload') {
 		location.reload();
-	} else if (store.state.device.serverDisconnectedBehavior === 'dialog') {
+	} else if (defaultStore.state.serverDisconnectedBehavior === 'dialog') {
 		if (reloadDialogShowing) return;
 		reloadDialogShowing = true;
 		const { canceled } = await dialog({
@@ -240,13 +233,13 @@ stream.on('emojiAdded', data => {
 	//store.commit('instance/set', );
 });
 
-for (const plugin of store.state.deviceUser.plugins.filter(p => p.active)) {
+for (const plugin of ColdDeviceStorage.get('plugins').filter(p => p.active)) {
 	import('./plugin').then(({ install }) => {
 		install(plugin);
 	});
 }
 
-if (store.getters.isSignedIn) {
+if ($i) {
 	if ('Notification' in window) {
 		// 許可を得ていなかったらリクエスト
 		if (Notification.permission === 'default') {
@@ -258,103 +251,73 @@ if (store.getters.isSignedIn) {
 
 	// 自分の情報が更新されたとき
 	main.on('meUpdated', i => {
-		store.dispatch('mergeMe', i);
+		updateAccount(i);
 	});
 
 	main.on('readAllNotifications', () => {
-		store.dispatch('mergeMe', {
-			hasUnreadNotification: false
-		});
+		updateAccount({ hasUnreadNotification: false });
 	});
 
 	main.on('unreadNotification', () => {
-		store.dispatch('mergeMe', {
-			hasUnreadNotification: true
-		});
+		updateAccount({ hasUnreadNotification: true });
 	});
 
 	main.on('unreadMention', () => {
-		store.dispatch('mergeMe', {
-			hasUnreadMentions: true
-		});
+		updateAccount({ hasUnreadMentions: true });
 	});
 
 	main.on('readAllUnreadMentions', () => {
-		store.dispatch('mergeMe', {
-			hasUnreadMentions: false
-		});
+		updateAccount({ hasUnreadMentions: false });
 	});
 
 	main.on('unreadSpecifiedNote', () => {
-		store.dispatch('mergeMe', {
-			hasUnreadSpecifiedNotes: true
-		});
+		updateAccount({ hasUnreadSpecifiedNotes: true });
 	});
 
 	main.on('readAllUnreadSpecifiedNotes', () => {
-		store.dispatch('mergeMe', {
-			hasUnreadSpecifiedNotes: false
-		});
+		updateAccount({ hasUnreadSpecifiedNotes: false });
 	});
 
 	main.on('readAllMessagingMessages', () => {
-		store.dispatch('mergeMe', {
-			hasUnreadMessagingMessage: false
-		});
+		updateAccount({ hasUnreadMessagingMessage: false });
 	});
 
 	main.on('unreadMessagingMessage', () => {
-		store.dispatch('mergeMe', {
-			hasUnreadMessagingMessage: true
-		});
-
+		updateAccount({ hasUnreadMessagingMessage: true });
 		sound.play('chatBg');
 	});
 
 	main.on('readAllAntennas', () => {
-		store.dispatch('mergeMe', {
-			hasUnreadAntenna: false
-		});
+		updateAccount({ hasUnreadAntenna: false });
 	});
 
 	main.on('unreadAntenna', () => {
-		store.dispatch('mergeMe', {
-			hasUnreadAntenna: true
-		});
-
+		updateAccount({ hasUnreadAntenna: true });
 		sound.play('antenna');
 	});
 
 	main.on('readAllAnnouncements', () => {
-		store.dispatch('mergeMe', {
-			hasUnreadAnnouncement: false
-		});
+		updateAccount({ hasUnreadAnnouncement: false });
 	});
 
 	main.on('readAllChannels', () => {
-		store.dispatch('mergeMe', {
-			hasUnreadChannel: false
-		});
+		updateAccount({ hasUnreadChannel: false });
 	});
 
 	main.on('unreadChannel', () => {
-		store.dispatch('mergeMe', {
-			hasUnreadChannel: true
-		});
-
+		updateAccount({ hasUnreadChannel: true });
 		sound.play('channel');
 	});
 
 	main.on('readAllAnnouncements', () => {
-		store.dispatch('mergeMe', {
-			hasUnreadAnnouncement: false
-		});
+		updateAccount({ hasUnreadAnnouncement: false });
 	});
 
 	main.on('clientSettingUpdated', x => {
-		store.commit('settings/set', {
-			key: x.key,
-			value: x.value
+		updateAccount({
+			clientData: {
+				[x.key]: x.value
+			}
 		});
 	});
 
@@ -364,4 +327,3 @@ if (store.getters.isSignedIn) {
 		signout();
 	});
 }
-