feat(user): migrate pop sound setting to store in api

src/modelTypes/IUserSettings.ts

@@ -1,6 +1,12 @@
 
 import type {IAbstract} from './IAbstract'
 import type {IProject} from './IProject'
+import type {PrefixMode} from '@/modules/parseTaskText'
+
+export interface IFrontendSettings {
+	playSoundWhenDone: boolean
+	quickAddMagicMode: PrefixMode
+}
 
 export interface IUserSettings extends IAbstract {
 	name: string
@@ -13,4 +19,5 @@ export interface IUserSettings extends IAbstract {
 	weekStart: 0 | 1 | 2 | 3 | 4 | 5 | 6
 	timezone: string
 	language: string
+	frontendSettings: IFrontendSettings
 }

src/models/userSettings.ts

@@ -1,7 +1,8 @@
 import AbstractModel from './abstractModel'
 
-import type {IUserSettings} from '@/modelTypes/IUserSettings'
+import type {IFrontendSettings, IUserSettings} from '@/modelTypes/IUserSettings'
 import {getCurrentLanguage} from '@/i18n'
+import {PrefixMode} from '@/modules/parseTaskText'
 
 export default class UserSettingsModel extends AbstractModel<IUserSettings> implements IUserSettings {
 	name = ''
@@ -14,6 +15,10 @@ export default class UserSettingsModel extends AbstractModel<IUserSettings> impl
 	weekStart = 0 as IUserSettings['weekStart']
 	timezone = ''
 	language = getCurrentLanguage()
+	frontendSettings: IFrontendSettings = {
+		playSoundWhenDone: true,
+		quickAddMagicMode: PrefixMode.Default,
+	}
 
 	constructor(data: Partial<IUserSettings> = {}) {
 		super()

src/views/user/settings/General.vue

@@ -57,7 +57,7 @@
 		</div>
 		<div class="field">
 			<label class="checkbox">
-				<input type="checkbox" v-model="playSoundWhenDone"/>
+				<input type="checkbox" v-model="settings.frontendSettings.playSoundWhenDone"/>
 				{{ $t('user.settings.general.playSoundWhenDone') }}
 			</label>
 		</div>
@@ -170,6 +170,7 @@ import {useTitle} from '@/composables/useTitle'
 
 import {useProjectStore} from '@/stores/projects'
 import {useAuthStore} from '@/stores/auth'
+import type {IUserSettings} from '@/modelTypes/IUserSettings'
 
 const {t} = useI18n({useScope: 'global'})
 useTitle(() => `${t('user.settings.general.title')} - ${t('user.settings.title')}`)
@@ -215,15 +216,15 @@ function useAvailableTimezones() {
 
 const availableTimezones = useAvailableTimezones()
 
-function getPlaySoundWhenDoneSetting() {
-	return localStorage.getItem(playSoundWhenDoneKey) === 'true' || localStorage.getItem(playSoundWhenDoneKey) === null
-}
-
-const playSoundWhenDone = ref(getPlaySoundWhenDoneSetting())
-const quickAddMagicMode = ref(getQuickAddMagicMode())
-
 const authStore = useAuthStore()
-const settings = ref({...authStore.settings})
+const settings = ref<IUserSettings>({
+	...authStore.settings,
+	frontendSettings: {
+		// 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(
 	Object.entries(SUPPORTED_LOCALES)
@@ -252,10 +253,10 @@ const defaultProject = computed({
 })
 const loading = computed(() => authStore.isLoadingGeneralSettings)
 
-watch(
-	playSoundWhenDone,
-	(play) => play && playPopSound(),
-)
+// watch(
+// 	settings.value.frontendSettings.playSoundWhenDone,
+// 	(play) => play && playPopSound(),
+// )
 
 async function updateSettings() {
 	localStorage.setItem(playSoundWhenDoneKey, playSoundWhenDone.value ? 'true' : 'false')