From 3cf728a664b97ef7c17b6d12e7f1e050e0b77a1c Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sun, 19 Mar 2023 10:15:19 +0100
Subject: [PATCH] client: don't use refs for themes

I am not sure why ref's were used here before, since all changes to
those refs could only be from the same page the user was already on.
It seems the ColdDeviceStorage.ref was causing some circular thingies
that went wrong.

closes https://akkoma.dev/FoundKeyGang/FoundKey/issues/353

Changelog: Fixed
---
 packages/client/src/pages/settings/theme.vue | 37 ++++++++------------
 1 file changed, 14 insertions(+), 23 deletions(-)

diff --git a/packages/client/src/pages/settings/theme.vue b/packages/client/src/pages/settings/theme.vue
index 1d74216ea..e4481c9b7 100644
--- a/packages/client/src/pages/settings/theme.vue
+++ b/packages/client/src/pages/settings/theme.vue
@@ -71,7 +71,7 @@ import FormSelect from '@/components/form/select.vue';
 import FormSection from '@/components/form/section.vue';
 import FormLink from '@/components/form/link.vue';
 import MkButton from '@/components/ui/button.vue';
-import { getBuiltinThemesRef } from '@/scripts/theme';
+import { getBuiltinThemes } from '@/scripts/theme';
 import { selectFile } from '@/scripts/select-file';
 import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';
 import { ColdDeviceStorage , defaultStore } from '@/store';
@@ -81,38 +81,39 @@ import { uniqueBy } from '@/scripts/array';
 import { fetchThemes, getThemes } from '@/theme-store';
 import { definePageMetadata } from '@/scripts/page-metadata';
 
-const installedThemes = ref(getThemes());
-const builtinThemes = getBuiltinThemesRef();
+const [installedThemes, builtinThemes] = await Promise.all([fetchThemes(), getBuiltinThemes()]);
 const instanceThemes = [];
 
 if (instance.defaultLightTheme != null) instanceThemes.push(JSON5.parse(instance.defaultLightTheme));
 if (instance.defaultDarkTheme != null) instanceThemes.push(JSON5.parse(instance.defaultDarkTheme));
 
-const themes = computed(() => uniqueBy([ ...instanceThemes, ...builtinThemes.value, ...installedThemes.value ], theme => theme.id));
-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'));
-const darkTheme = ColdDeviceStorage.ref('darkTheme');
+const themes = uniqueBy([ ...instanceThemes, ...builtinThemes, ...installedThemes ], theme => theme.id);
+const darkThemes = themes.filter(t => t.base === 'dark' || t.kind === 'dark');
+const lightThemes = themes.filter(t => t.base === 'light' || t.kind === 'light');
+let darkTheme = $ref(ColdDeviceStorage.get('darkTheme'));
 const darkThemeId = computed({
 	get() {
-		return darkTheme.value.id;
+		return darkTheme.id;
 	},
 	set(id) {
-		ColdDeviceStorage.set('darkTheme', themes.value.find(x => x.id === id));
+		darkTheme = themes.find(x => x.id === id);
+		ColdDeviceStorage.set('darkTheme', darkTheme);
 	},
 });
-const lightTheme = ColdDeviceStorage.ref('lightTheme');
+let lightTheme = $ref(ColdDeviceStorage.get('lightTheme'));
 const lightThemeId = computed({
 	get() {
-		return lightTheme.value.id;
+		return lightTheme.id;
 	},
 	set(id) {
-		ColdDeviceStorage.set('lightTheme', themes.value.find(x => x.id === id));
+		lightTheme = themes.find(x => x.id === id);
+		ColdDeviceStorage.set('lightTheme', lightTheme);
 	},
 });
 const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
 const syncDeviceDarkMode = computed(ColdDeviceStorage.makeGetterSetter('syncDeviceDarkMode'));
 const wallpaper = ref(localStorage.getItem('wallpaper'));
-const themesCount = installedThemes.value.length;
+const themesCount = installedThemes.length;
 
 watch(syncDeviceDarkMode, () => {
 	if (syncDeviceDarkMode.value) {
@@ -129,16 +130,6 @@ watch(wallpaper, () => {
 	location.reload();
 });
 
-onActivated(() => {
-	fetchThemes().then(() => {
-		installedThemes.value = getThemes();
-	});
-});
-
-fetchThemes().then(() => {
-	installedThemes.value = getThemes();
-});
-
 function setWallpaper(event) {
 	selectFile(event.currentTarget ?? event.target, null).then(file => {
 		wallpaper.value = file.url;