テーマをレジストリに保存するように

6 files changed, 78 insertions, 12 deletions

diff --git a/src/client/init.ts b/src/client/init.ts
index f09097fe31..554b4b3320 100644
--- a/src/client/init.ts
+++ b/src/client/init.ts
@@ -56,6 +56,7 @@ import { defaultStore, ColdDeviceStorage } from '@/store';
 import { fetchInstance, instance } from '@/instance';
 import { makeHotkey } from './scripts/hotkey';
 import { search } from './scripts/search';
+import { getThemes } from './theme-store';
 
 console.info(`Misskey v${version}`);
 
@@ -211,7 +212,7 @@ app.mount('body');
 
 watch(defaultStore.reactiveState.darkMode, (darkMode) => {
 	import('@/scripts/theme').then(({ builtinThemes }) => {
-		const themes = builtinThemes.concat(ColdDeviceStorage.get('themes'));
+		const themes = builtinThemes.concat(getThemes());
 		applyTheme(themes.find(x => x.id === (darkMode ? ColdDeviceStorage.get('darkTheme') : ColdDeviceStorage.get('lightTheme'))));
 	});
 }, { immediate: localStorage.theme == null });
diff --git a/src/client/pages/settings/theme.install.vue b/src/client/pages/settings/theme.install.vue
index 407b755375..852d39f78b 100644
--- a/src/client/pages/settings/theme.install.vue
+++ b/src/client/pages/settings/theme.install.vue
@@ -25,6 +25,7 @@ import FormButton from '@/components/form/button.vue';
 import { applyTheme, validateTheme } from '@/scripts/theme';
 import * as os from '@/os';
 import { ColdDeviceStorage } from '@/store';
+import { addTheme, getThemes } from '@/theme-store';
 
 export default defineComponent({
 	components: {
@@ -74,7 +75,7 @@ export default defineComponent({
 				});
 				return false;
 			}
-			if (ColdDeviceStorage.get('themes').some(t => t.id === theme.id)) {
+			if (getThemes().some(t => t.id === theme.id)) {
 				os.dialog({
 					type: 'info',
 					text: this.$ts._theme.alreadyInstalled
@@ -90,11 +91,10 @@ export default defineComponent({
 			if (theme) applyTheme(theme, false);
 		},
 
-		install(code) {
+		async install(code) {
 			const theme = this.parseThemeCode(code);
 			if (!theme) return;
-			const themes = ColdDeviceStorage.get('themes').concat(theme);
-			ColdDeviceStorage.set('themes', themes);
+			await addTheme(theme);
 			os.dialog({
 				type: 'success',
 				text: this.$t('_theme.installed', { name: theme.name })
diff --git a/src/client/pages/settings/theme.manage.vue b/src/client/pages/settings/theme.manage.vue
index b8126b3905..5b9e075305 100644
--- a/src/client/pages/settings/theme.manage.vue
+++ b/src/client/pages/settings/theme.manage.vue
@@ -37,6 +37,7 @@ import { Theme, builtinThemes } from '@/scripts/theme';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
 import * as os from '@/os';
 import { ColdDeviceStorage } from '@/store';
+import { getThemes, removeTheme } from '@/theme-store';
 
 export default defineComponent({
 	components: {
@@ -57,7 +58,7 @@ export default defineComponent({
 				title: this.$ts._theme.manage,
 				icon: faFolderOpen
 			},
-			installedThemes: ColdDeviceStorage.ref('themes'),
+			installedThemes: getThemes(),
 			builtinThemes,
 			selectedThemeId: null,
 			faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye
@@ -91,10 +92,7 @@ export default defineComponent({
 		},
 
 		uninstall() {
-			const theme = this.selectedTheme;
-			const themes = ColdDeviceStorage.get('themes').filter(t => t.id != theme.id);
-			ColdDeviceStorage.set('themes', themes);
-			os.success();
+			removeTheme(this.selectedTheme);
 		},
 	}
 });
diff --git a/src/client/pages/settings/theme.vue b/src/client/pages/settings/theme.vue
index da1ad618b5..ddb5254410 100644
--- a/src/client/pages/settings/theme.vue
+++ b/src/client/pages/settings/theme.vue
@@ -77,6 +77,7 @@ import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';
 import { ColdDeviceStorage } from '@/store';
 import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
+import { fetchThemes, getThemes } from '@/theme-store';
 
 export default defineComponent({
 	components: {
@@ -96,7 +97,7 @@ export default defineComponent({
 			icon: faPalette
 		};
 
-		const installedThemes = ColdDeviceStorage.ref('themes');
+		const installedThemes = ref(getThemes());
 		const themes = computed(() => builtinThemes.concat(installedThemes.value));
 		const darkThemes = computed(() => themes.value.filter(t => t.base == 'dark' || t.kind == 'dark'));
 		const lightThemes = computed(() => themes.value.filter(t => t.base == 'light' || t.kind == 'light'));
@@ -137,6 +138,10 @@ export default defineComponent({
 			emit('info', INFO);
 		});
 
+		fetchThemes().then(() => {
+			installedThemes.value = getThemes();
+		});
+
 		return {
 			INFO,
 			darkThemes,
diff --git a/src/client/store.ts b/src/client/store.ts
index f4f6091941..bf042d8ab4 100644
--- a/src/client/store.ts
+++ b/src/client/store.ts
@@ -208,7 +208,7 @@ type Plugin = {
  */
 export class ColdDeviceStorage {
 	public static default = {
-		themes: [] as Theme[],
+		themes: [] as Theme[], // TODO: そのうち消す
 		darkTheme: '8050783a-7f63-445a-b270-36d0f6ba1677',
 		lightTheme: '4eea646f-7afa-4645-83e9-83af0333cd37',
 		syncDeviceDarkMode: true,
diff --git a/src/client/theme-store.ts b/src/client/theme-store.ts
new file mode 100644
index 0000000000..5e440efbf9
--- /dev/null
+++ b/src/client/theme-store.ts
@@ -0,0 +1,62 @@
+import { api } from '@/os';
+import { $i } from '@/account';
+import { ColdDeviceStorage } from './store';
+import { Theme } from './scripts/theme';
+
+const lsCacheKey = $i ? `themes:${$i.id}` : '';
+
+export function getThemes(): Theme[] {
+	return JSON.parse(localStorage.getItem(lsCacheKey) || '[]');
+}
+
+export async function fetchThemes(): Promise<void> {
+	if ($i == null) return;
+
+	try {
+		const themes = await api('i/registry/get', { scope: ['client'], key: 'themes' });
+		localStorage.setItem(lsCacheKey, JSON.stringify(themes));
+	} catch (e) {
+		if (e.code === 'NO_SUCH_KEY') return;
+		throw e;
+	}
+}
+
+export async function addTheme(theme: Theme): Promise<void> {
+	await fetchThemes();
+	const themes = getThemes().concat(theme);
+	await api('i/registry/set', { scope: ['client'], key: 'themes', value: themes });
+	localStorage.setItem(lsCacheKey, JSON.stringify(themes));
+}
+
+export async function removeTheme(theme: Theme): Promise<void> {
+	const themes = getThemes().filter(t => t.id != theme.id);
+	await api('i/registry/set', { scope: ['client'], key: 'themes', value: themes });
+	localStorage.setItem(lsCacheKey, JSON.stringify(themes));
+}
+
+// TODO: そのうち消す
+if (ColdDeviceStorage.get('themes').length > 0) {
+	const lsThemes = ColdDeviceStorage.get('themes');
+	let registryThemes;
+	try {
+		registryThemes = await api('i/registry/get', { scope: ['client'], key: 'themes' });
+	} catch (e) {
+		if (e.code === 'NO_SUCH_KEY') {
+			registryThemes = [];
+		} else {
+			throw e;
+		}
+	}
+	const themes = [] as Theme[];
+	for (const theme of lsThemes) {
+		if (themes.some(x => x.id === theme.id)) continue;
+		themes.push(theme);
+	}
+	for (const theme of registryThemes) {
+		if (themes.some(x => x.id === theme.id)) continue;
+		themes.push(theme);
+	}
+	await api('i/registry/set', { scope: ['client'], key: 'themes', value: themes });
+	localStorage.setItem(lsCacheKey, JSON.stringify(themes));
+	ColdDeviceStorage.set('themes', []);
+}