feat(user): migrate color scheme settings to persistance in db

src/composables/useColorScheme.ts

@@ -1,6 +1,7 @@
 import {computed, watch, readonly} from 'vue'
-import {useStorage, createSharedComposable, usePreferredColorScheme, tryOnMounted} from '@vueuse/core'
+import {createSharedComposable, usePreferredColorScheme, tryOnMounted} from '@vueuse/core'
 import type {BasicColorSchema} from '@vueuse/core'
+import {useAuthStore} from '@/stores/auth'
 
 const STORAGE_KEY = 'color-scheme'
 
@@ -17,7 +18,8 @@ const CLASS_LIGHT = 'light'
 // - value is synced via `createSharedComposable`
 // https://github.com/vueuse/vueuse/blob/main/packages/core/useDark/index.ts 
 export const useColorScheme = createSharedComposable(() => {
-	const store = useStorage<BasicColorSchema>(STORAGE_KEY, DEFAULT_COLOR_SCHEME_SETTING)
+	const authStore = useAuthStore()
+	const store = computed(() => authStore.settings.frontendSettings.colorSchema)
 
 	const preferredColorScheme = usePreferredColorScheme()
 

src/modelTypes/IUserSettings.ts

@@ -2,10 +2,12 @@
 import type {IAbstract} from './IAbstract'
 import type {IProject} from './IProject'
 import type {PrefixMode} from '@/modules/parseTaskText'
+import type {BasicColorSchema} from '@vueuse/core'
 
 export interface IFrontendSettings {
 	playSoundWhenDone: boolean
 	quickAddMagicMode: PrefixMode
+	colorSchema: BasicColorSchema
 }
 
 export interface IUserSettings extends IAbstract {

src/models/userSettings.ts

@@ -18,6 +18,7 @@ export default class UserSettingsModel extends AbstractModel<IUserSettings> impl
 	frontendSettings: IFrontendSettings = {
 		playSoundWhenDone: true,
 		quickAddMagicMode: PrefixMode.Default,
+		colorSchema: 'auto'
 	}
 
 	constructor(data: Partial<IUserSettings> = {}) {

src/stores/auth.ts

@@ -94,12 +94,14 @@ export const useAuthStore = defineStore('auth', () => {
 		settings.value = new UserSettingsModel({
 			...newSettings,
 			frontendSettings: {
-				...newSettings.frontendSettings,
 				// Need to set default settings here in case the user does not have any saved in the api already
+				playSoundWhenDone: true,
 				quickAddMagicMode: PrefixMode.Default,
+				colorSchema: 'auto',
+				...newSettings.frontendSettings,
 			}
 		})
-		console.log(settings.value.frontendSettings)
+		console.log('settings from auth store', {...settings.value.frontendSettings})
 	}
 
 	function setAuthenticated(newAuthenticated: boolean) {

src/views/user/settings/General.vue

@@ -111,7 +111,7 @@
 					{{ $t('user.settings.appearance.title') }}
 				</span>
 				<div class="select ml-2">
-					<select v-model="activeColorSchemeSetting">
+					<select v-model="settings.frontendSettings.colorSchema">
 						<!-- TODO: use the Vikunja logo in color scheme as option buttons -->
 						<option v-for="(title, schemeId) in colorSchemeSettings" :key="schemeId" :value="schemeId">
 							{{ title }}
@@ -161,10 +161,8 @@ import ProjectSearch from '@/components/tasks/partials/projectSearch.vue'
 import {SUPPORTED_LOCALES} from '@/i18n'
 import {playSoundWhenDoneKey, playPopSound} from '@/helpers/playPop'
 import {createRandomID} from '@/helpers/randomId'
-import {success} from '@/message'
 import {AuthenticatedHTTPFactory} from '@/helpers/fetcher'
 
-import {useColorScheme} from '@/composables/useColorScheme'
 import {useTitle} from '@/composables/useTitle'
 
 import {useProjectStore} from '@/stores/projects'
@@ -176,30 +174,11 @@ useTitle(() => `${t('user.settings.general.title')} - ${t('user.settings.title')
 
 const DEFAULT_PROJECT_ID = 0
 
-function useColorSchemeSetting() {
+const colorSchemeSettings = computed(() => ({
-	const {t} = useI18n({useScope: 'global'})
+	light: t('user.settings.appearance.colorScheme.light'),
-	const colorSchemeSettings = computed(() => ({
+	auto: t('user.settings.appearance.colorScheme.system'),
-		light: t('user.settings.appearance.colorScheme.light'),
+	dark: t('user.settings.appearance.colorScheme.dark'),
-		auto: t('user.settings.appearance.colorScheme.system'),
+}))
-		dark: t('user.settings.appearance.colorScheme.dark'),
-	}))
-
-	const {store} = useColorScheme()
-	watch(store, (schemeId) => {
-		success({
-			message: t('user.settings.appearance.setSuccess', {
-				colorScheme: colorSchemeSettings.value[schemeId],
-			}),
-		})
-	})
-
-	return {
-		colorSchemeSettings,
-		activeColorSchemeSetting: store,
-	}
-}
-
-const {colorSchemeSettings, activeColorSchemeSetting} = useColorSchemeSetting()
 
 function useAvailableTimezones() {
 	const availableTimezones = ref([])
@@ -222,7 +201,7 @@ const settings = ref<IUserSettings>({
 		// Sub objects get exported as read only as well, so we need to 
 		// explicitly spread the object here to allow modification
 		...authStore.settings.frontendSettings,
-	}
+	},
 })
 const id = ref(createRandomID())
 const availableLanguageOptions = ref(