refactor: store state

src/stores/settings/advanced.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { computed, reactive, watch } from 'vue';
+import { ref, reactive, watch } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { useI18n } from 'vue-i18n';
 import configRepository from '../../service/config';
@@ -19,70 +19,80 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
     const { t } = useI18n();
 
     const state = reactive({
-        enablePrimaryPassword: false,
-        relaunchVRChatAfterCrash: false,
-        vrcQuitFix: true,
-        autoSweepVRChatCache: false,
-        selfInviteOverride: false,
-        saveInstancePrints: false,
-        cropInstancePrints: false,
-        saveInstanceStickers: false,
-        avatarRemoteDatabase: true,
-        enableAppLauncher: true,
-        enableAppLauncherAutoClose: true,
-        enableAppLauncherRunProcessOnce: true,
-        screenshotHelper: true,
-        screenshotHelperModifyFilename: false,
-        screenshotHelperCopyToClipboard: false,
-        youTubeApi: false,
-        youTubeApiKey: '',
-        progressPie: false,
-        progressPieFilter: true,
-        showConfirmationOnSwitchAvatar: false,
-        gameLogDisabled: false,
-        sqliteTableSizes: {},
-        ugcFolderPath: '',
-        currentUserInventory: new Map(),
-        autoDeleteOldPrints: false,
-        notificationOpacity: 100,
-        folderSelectorDialogVisible: false,
-        isVRChatConfigDialogVisible: false,
-        saveInstanceEmoji: false,
-        vrcRegistryAutoBackup: true,
-        vrcRegistryAskRestore: true,
-        sentryErrorReporting: false
+        folderSelectorDialogVisible: false
     });
 
+    const enablePrimaryPassword = ref(false);
+    const relaunchVRChatAfterCrash = ref(false);
+    const vrcQuitFix = ref(true);
+    const autoSweepVRChatCache = ref(false);
+    const selfInviteOverride = ref(false);
+    const saveInstancePrints = ref(false);
+    const cropInstancePrints = ref(false);
+    const saveInstanceStickers = ref(false);
+    const avatarRemoteDatabase = ref(true);
+    const enableAppLauncher = ref(true);
+    const enableAppLauncherAutoClose = ref(true);
+    const enableAppLauncherRunProcessOnce = ref(true);
+    const screenshotHelper = ref(true);
+    const screenshotHelperModifyFilename = ref(false);
+    const screenshotHelperCopyToClipboard = ref(false);
+    const youTubeApi = ref(false);
+    const youTubeApiKey = ref('');
+    const progressPie = ref(false);
+    const progressPieFilter = ref(true);
+    const showConfirmationOnSwitchAvatar = ref(false);
+    const gameLogDisabled = ref(false);
+    const sqliteTableSizes = ref({});
+    const ugcFolderPath = ref('');
+    const autoDeleteOldPrints = ref(false);
+    const notificationOpacity = ref(100);
+    const currentUserInventory = ref(new Map());
+    const isVRChatConfigDialogVisible = ref(false);
+    const saveInstanceEmoji = ref(false);
+    const vrcRegistryAutoBackup = ref(true);
+    const vrcRegistryAskRestore = ref(true);
+    const sentryErrorReporting = ref(false);
+
+    watch(
+        () => watchState.isLoggedIn,
+        () => {
+            currentUserInventory.value.clear();
+            isVRChatConfigDialogVisible.value = false;
+        },
+        { flush: 'sync' }
+    );
+
     async function initAdvancedSettings() {
         const [
-            enablePrimaryPassword,
-            relaunchVRChatAfterCrash,
-            vrcQuitFix,
-            autoSweepVRChatCache,
-            selfInviteOverride,
-            saveInstancePrints,
-            cropInstancePrints,
-            saveInstanceStickers,
-            avatarRemoteDatabase,
-            enableAppLauncher,
-            enableAppLauncherAutoClose,
-            enableAppLauncherRunProcessOnce,
-            screenshotHelper,
-            screenshotHelperModifyFilename,
-            screenshotHelperCopyToClipboard,
-            youTubeApi,
-            youTubeApiKey,
-            progressPie,
-            progressPieFilter,
-            showConfirmationOnSwitchAvatar,
-            gameLogDisabled,
-            ugcFolderPath,
-            autoDeleteOldPrints,
-            notificationOpacity,
-            saveInstanceEmoji,
-            vrcRegistryAutoBackup,
-            vrcRegistryAskRestore,
-            sentryErrorReporting
+            enablePrimaryPasswordConfig,
+            relaunchVRChatAfterCrashConfig,
+            vrcQuitFixConfig,
+            autoSweepVRChatCacheConfig,
+            selfInviteOverrideConfig,
+            saveInstancePrintsConfig,
+            cropInstancePrintsConfig,
+            saveInstanceStickersConfig,
+            avatarRemoteDatabaseConfig,
+            enableAppLauncherConfig,
+            enableAppLauncherAutoCloseConfig,
+            enableAppLauncherRunProcessOnceConfig,
+            screenshotHelperConfig,
+            screenshotHelperModifyFilenameConfig,
+            screenshotHelperCopyToClipboardConfig,
+            youTubeApiConfig,
+            youTubeApiKeyConfig,
+            progressPieConfig,
+            progressPieFilterConfig,
+            showConfirmationOnSwitchAvatarConfig,
+            gameLogDisabledConfig,
+            ugcFolderPathConfig,
+            autoDeleteOldPrintsConfig,
+            notificationOpacityConfig,
+            saveInstanceEmojiConfig,
+            vrcRegistryAutoBackupConfig,
+            vrcRegistryAskRestoreConfig,
+            sentryErrorReportingConfig
         ] = await Promise.all([
             configRepository.getBool('enablePrimaryPassword', false),
             configRepository.getBool('VRCX_relaunchVRChatAfterCrash', false),
@@ -126,41 +136,45 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
             configRepository.getString('VRCX_SentryEnabled', '')
         ]);
 
-        state.enablePrimaryPassword = enablePrimaryPassword;
-        state.relaunchVRChatAfterCrash = relaunchVRChatAfterCrash;
-        state.vrcQuitFix = vrcQuitFix;
-        state.autoSweepVRChatCache = autoSweepVRChatCache;
-        state.selfInviteOverride = selfInviteOverride;
-        state.saveInstancePrints = saveInstancePrints;
-        state.cropInstancePrints = cropInstancePrints;
-        state.saveInstanceStickers = saveInstanceStickers;
-        state.avatarRemoteDatabase = avatarRemoteDatabase;
-        state.enableAppLauncher = enableAppLauncher;
-        state.enableAppLauncherAutoClose = enableAppLauncherAutoClose;
-        state.enableAppLauncherRunProcessOnce = enableAppLauncherRunProcessOnce;
-        state.screenshotHelper = screenshotHelper;
-        state.screenshotHelperModifyFilename = screenshotHelperModifyFilename;
-        state.screenshotHelperCopyToClipboard = screenshotHelperCopyToClipboard;
-        state.youTubeApi = youTubeApi;
-        state.youTubeApiKey = youTubeApiKey;
-        state.progressPie = progressPie;
-        state.progressPieFilter = progressPieFilter;
-        state.showConfirmationOnSwitchAvatar = showConfirmationOnSwitchAvatar;
-        state.gameLogDisabled = gameLogDisabled;
-        state.ugcFolderPath = ugcFolderPath;
-        state.autoDeleteOldPrints = autoDeleteOldPrints;
-        state.notificationOpacity = notificationOpacity;
-        state.saveInstanceEmoji = saveInstanceEmoji;
-        state.vrcRegistryAutoBackup = vrcRegistryAutoBackup;
-        state.vrcRegistryAskRestore = vrcRegistryAskRestore;
-        state.sentryErrorReporting = sentryErrorReporting === 'true';
+        enablePrimaryPassword.value = enablePrimaryPasswordConfig;
+        relaunchVRChatAfterCrash.value = relaunchVRChatAfterCrashConfig;
+        vrcQuitFix.value = vrcQuitFixConfig;
+        autoSweepVRChatCache.value = autoSweepVRChatCacheConfig;
+        selfInviteOverride.value = selfInviteOverrideConfig;
+        saveInstancePrints.value = saveInstancePrintsConfig;
+        cropInstancePrints.value = cropInstancePrintsConfig;
+        saveInstanceStickers.value = saveInstanceStickersConfig;
+        avatarRemoteDatabase.value = avatarRemoteDatabaseConfig;
+        enableAppLauncher.value = enableAppLauncherConfig;
+        enableAppLauncherAutoClose.value = enableAppLauncherAutoCloseConfig;
+        enableAppLauncherRunProcessOnce.value =
+            enableAppLauncherRunProcessOnceConfig;
+        screenshotHelper.value = screenshotHelperConfig;
+        screenshotHelperModifyFilename.value =
+            screenshotHelperModifyFilenameConfig;
+        screenshotHelperCopyToClipboard.value =
+            screenshotHelperCopyToClipboardConfig;
+        youTubeApi.value = youTubeApiConfig;
+        youTubeApiKey.value = youTubeApiKeyConfig;
+        progressPie.value = progressPieConfig;
+        progressPieFilter.value = progressPieFilterConfig;
+        showConfirmationOnSwitchAvatar.value =
+            showConfirmationOnSwitchAvatarConfig;
+        gameLogDisabled.value = gameLogDisabledConfig;
+        ugcFolderPath.value = ugcFolderPathConfig;
+        autoDeleteOldPrints.value = autoDeleteOldPrintsConfig;
+        notificationOpacity.value = notificationOpacityConfig;
+        saveInstanceEmoji.value = saveInstanceEmojiConfig;
+        vrcRegistryAutoBackup.value = vrcRegistryAutoBackupConfig;
+        vrcRegistryAskRestore.value = vrcRegistryAskRestoreConfig;
+        sentryErrorReporting.value = sentryErrorReportingConfig === 'true';
 
         handleSetAppLauncherSettings();
 
         setTimeout(() => {
             if (
                 VRCXUpdaterStore.branch === 'Nightly' &&
-                sentryErrorReporting === ''
+                sentryErrorReportingConfig === ''
             ) {
                 checkSentryConsent();
             }
@@ -169,79 +183,6 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
 
     initAdvancedSettings();
 
-    watch(
-        () => watchState.isLoggedIn,
-        () => {
-            state.currentUserInventory.clear();
-            state.isVRChatConfigDialogVisible = false;
-        },
-        { flush: 'sync' }
-    );
-
-    const enablePrimaryPassword = computed({
-        get: () => state.enablePrimaryPassword,
-        set: (value) => (state.enablePrimaryPassword = value)
-    });
-    const relaunchVRChatAfterCrash = computed(
-        () => state.relaunchVRChatAfterCrash
-    );
-    const vrcQuitFix = computed(() => state.vrcQuitFix);
-    const autoSweepVRChatCache = computed(() => state.autoSweepVRChatCache);
-    const selfInviteOverride = computed(() => state.selfInviteOverride);
-    const saveInstancePrints = computed(() => state.saveInstancePrints);
-    const cropInstancePrints = computed(() => state.cropInstancePrints);
-    const saveInstanceStickers = computed(() => state.saveInstanceStickers);
-    const avatarRemoteDatabase = computed(() => state.avatarRemoteDatabase);
-    const enableAppLauncher = computed(() => state.enableAppLauncher);
-    const enableAppLauncherAutoClose = computed(
-        () => state.enableAppLauncherAutoClose
-    );
-    const enableAppLauncherRunProcessOnce = computed(
-        () => state.enableAppLauncherRunProcessOnce
-    );
-    const screenshotHelper = computed(() => state.screenshotHelper);
-    ``;
-    const screenshotHelperModifyFilename = computed(
-        () => state.screenshotHelperModifyFilename
-    );
-    const screenshotHelperCopyToClipboard = computed(
-        () => state.screenshotHelperCopyToClipboard
-    );
-    const youTubeApi = computed(() => state.youTubeApi);
-    const youTubeApiKey = computed({
-        get: () => state.youTubeApiKey,
-        set: (value) => (state.youTubeApiKey = value)
-    });
-    const progressPie = computed(() => state.progressPie);
-    const progressPieFilter = computed(() => state.progressPieFilter);
-    const showConfirmationOnSwitchAvatar = computed(
-        () => state.showConfirmationOnSwitchAvatar
-    );
-    const gameLogDisabled = computed(() => state.gameLogDisabled);
-    const sqliteTableSizes = computed(() => state.sqliteTableSizes);
-    const ugcFolderPath = computed(() => state.ugcFolderPath);
-    const autoDeleteOldPrints = computed(() => state.autoDeleteOldPrints);
-    const notificationOpacity = computed(() => state.notificationOpacity);
-
-    const currentUserInventory = computed({
-        get: () => state.currentUserInventory,
-        set: (value) => {
-            state.currentUserInventory = value;
-        }
-    });
-    const isVRChatConfigDialogVisible = computed({
-        get: () => state.isVRChatConfigDialogVisible,
-        set: (value) => (state.isVRChatConfigDialogVisible = value)
-    });
-
-    const saveInstanceEmoji = computed({
-        get: () => state.saveInstanceEmoji,
-        set: (value) => (state.saveInstanceEmoji = value)
-    });
-    const vrcRegistryAutoBackup = computed(() => state.vrcRegistryAutoBackup);
-    const vrcRegistryAskRestore = computed(() => state.vrcRegistryAskRestore);
-    const sentryErrorReporting = computed(() => state.sentryErrorReporting);
-
     /**
      * @param {boolean} value
      */
@@ -249,155 +190,155 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
         configRepository.setBool('enablePrimaryPassword', value);
     }
     function setRelaunchVRChatAfterCrash() {
-        state.relaunchVRChatAfterCrash = !state.relaunchVRChatAfterCrash;
+        relaunchVRChatAfterCrash.value = !relaunchVRChatAfterCrash.value;
         configRepository.setBool(
             'VRCX_relaunchVRChatAfterCrash',
-            state.relaunchVRChatAfterCrash
+            relaunchVRChatAfterCrash.value
         );
     }
     function setVrcQuitFix() {
-        state.vrcQuitFix = !state.vrcQuitFix;
-        configRepository.setBool('VRCX_vrcQuitFix', state.vrcQuitFix);
+        vrcQuitFix.value = !vrcQuitFix.value;
+        configRepository.setBool('VRCX_vrcQuitFix', vrcQuitFix.value);
     }
     function setAutoSweepVRChatCache() {
-        state.autoSweepVRChatCache = !state.autoSweepVRChatCache;
+        autoSweepVRChatCache.value = !autoSweepVRChatCache.value;
         configRepository.setBool(
             'VRCX_autoSweepVRChatCache',
-            state.autoSweepVRChatCache
+            autoSweepVRChatCache.value
         );
     }
     function setSelfInviteOverride() {
-        state.selfInviteOverride = !state.selfInviteOverride;
+        selfInviteOverride.value = !selfInviteOverride.value;
         configRepository.setBool(
             'VRCX_selfInviteOverride',
-            state.selfInviteOverride
+            selfInviteOverride.value
         );
     }
     function setSaveInstancePrints() {
-        state.saveInstancePrints = !state.saveInstancePrints;
+        saveInstancePrints.value = !saveInstancePrints.value;
         configRepository.setBool(
             'VRCX_saveInstancePrints',
-            state.saveInstancePrints
+            saveInstancePrints.value
         );
     }
     function setCropInstancePrints() {
-        state.cropInstancePrints = !state.cropInstancePrints;
+        cropInstancePrints.value = !cropInstancePrints.value;
         configRepository.setBool(
             'VRCX_cropInstancePrints',
-            state.cropInstancePrints
+            cropInstancePrints.value
         );
     }
     function setSaveInstanceStickers() {
-        state.saveInstanceStickers = !state.saveInstanceStickers;
+        saveInstanceStickers.value = !saveInstanceStickers.value;
         configRepository.setBool(
             'VRCX_saveInstanceStickers',
-            state.saveInstanceStickers
+            saveInstanceStickers.value
         );
     }
     /**
      * @param {boolean} value
      */
     function setAvatarRemoteDatabase(value) {
-        state.avatarRemoteDatabase = value;
+        avatarRemoteDatabase.value = value;
         configRepository.setBool(
             'VRCX_avatarRemoteDatabase',
-            state.avatarRemoteDatabase
+            avatarRemoteDatabase.value
         );
     }
     async function setEnableAppLauncher() {
-        state.enableAppLauncher = !state.enableAppLauncher;
+        enableAppLauncher.value = !enableAppLauncher.value;
         await configRepository.setBool(
             'VRCX_enableAppLauncher',
-            state.enableAppLauncher
+            enableAppLauncher.value
         );
         handleSetAppLauncherSettings();
     }
     async function setEnableAppLauncherAutoClose() {
-        state.enableAppLauncherAutoClose = !state.enableAppLauncherAutoClose;
+        enableAppLauncherAutoClose.value = !enableAppLauncherAutoClose.value;
         await configRepository.setBool(
             'VRCX_enableAppLauncherAutoClose',
-            state.enableAppLauncherAutoClose
+            enableAppLauncherAutoClose.value
         );
         handleSetAppLauncherSettings();
     }
     async function setEnableAppLauncherRunProcessOnce() {
-        state.enableAppLauncherRunProcessOnce =
-            !state.enableAppLauncherRunProcessOnce;
+        enableAppLauncherRunProcessOnce.value =
+            !enableAppLauncherRunProcessOnce.value;
         await configRepository.setBool(
             'VRCX_enableAppLauncherRunProcessOnce',
-            state.enableAppLauncherRunProcessOnce
+            enableAppLauncherRunProcessOnce.value
         );
         handleSetAppLauncherSettings();
     }
     async function setScreenshotHelper() {
-        state.screenshotHelper = !state.screenshotHelper;
+        screenshotHelper.value = !screenshotHelper.value;
         await configRepository.setBool(
             'VRCX_screenshotHelper',
-            state.screenshotHelper
+            screenshotHelper.value
         );
     }
     async function setScreenshotHelperModifyFilename() {
-        state.screenshotHelperModifyFilename =
-            !state.screenshotHelperModifyFilename;
+        screenshotHelperModifyFilename.value =
+            !screenshotHelperModifyFilename.value;
         await configRepository.setBool(
             'VRCX_screenshotHelperModifyFilename',
-            state.screenshotHelperModifyFilename
+            screenshotHelperModifyFilename.value
         );
     }
     async function setScreenshotHelperCopyToClipboard() {
-        state.screenshotHelperCopyToClipboard =
-            !state.screenshotHelperCopyToClipboard;
+        screenshotHelperCopyToClipboard.value =
+            !screenshotHelperCopyToClipboard.value;
         await configRepository.setBool(
             'VRCX_screenshotHelperCopyToClipboard',
-            state.screenshotHelperCopyToClipboard
+            screenshotHelperCopyToClipboard.value
         );
     }
     async function setYouTubeApi() {
-        state.youTubeApi = !state.youTubeApi;
-        await configRepository.setBool('VRCX_youtubeAPI', state.youTubeApi);
+        youTubeApi.value = !youTubeApi.value;
+        await configRepository.setBool('VRCX_youtubeAPI', youTubeApi.value);
     }
     /**
      * @param {string} value
      */
     async function setYouTubeApiKey(value) {
-        state.youTubeApiKey = value;
+        youTubeApiKey.value = value;
         await configRepository.setString(
             'VRCX_youtubeAPIKey',
-            state.youTubeApiKey
+            youTubeApiKey.value
         );
     }
     async function setProgressPie() {
-        state.progressPie = !state.progressPie;
-        await configRepository.setBool('VRCX_progressPie', state.progressPie);
+        progressPie.value = !progressPie.value;
+        await configRepository.setBool('VRCX_progressPie', progressPie.value);
     }
     async function setProgressPieFilter() {
-        state.progressPieFilter = !state.progressPieFilter;
+        progressPieFilter.value = !progressPieFilter.value;
         await configRepository.setBool(
             'VRCX_progressPieFilter',
-            state.progressPieFilter
+            progressPieFilter.value
         );
     }
     async function setShowConfirmationOnSwitchAvatar() {
-        state.showConfirmationOnSwitchAvatar =
-            !state.showConfirmationOnSwitchAvatar;
+        showConfirmationOnSwitchAvatar.value =
+            !showConfirmationOnSwitchAvatar.value;
         await configRepository.setBool(
             'VRCX_showConfirmationOnSwitchAvatar',
-            state.showConfirmationOnSwitchAvatar
+            showConfirmationOnSwitchAvatar.value
         );
     }
     async function setGameLogDisabled() {
-        state.gameLogDisabled = !state.gameLogDisabled;
+        gameLogDisabled.value = !gameLogDisabled.value;
         await configRepository.setBool(
             'VRCX_gameLogDisabled',
-            state.gameLogDisabled
+            gameLogDisabled.value
         );
     }
 
     async function setSaveInstanceEmoji() {
-        state.saveInstanceEmoji = !state.saveInstanceEmoji;
+        saveInstanceEmoji.value = !saveInstanceEmoji.value;
         await configRepository.setBool(
             'VRCX_saveInstanceEmoji',
-            state.saveInstanceEmoji
+            saveInstanceEmoji.value
         );
     }
 
@@ -405,36 +346,36 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
         if (typeof path !== 'string') {
             path = '';
         }
-        state.ugcFolderPath = path;
+        ugcFolderPath.value = path;
         await configRepository.setString('VRCX_userGeneratedContentPath', path);
     }
 
     async function setAutoDeleteOldPrints() {
-        state.autoDeleteOldPrints = !state.autoDeleteOldPrints;
+        autoDeleteOldPrints.value = !autoDeleteOldPrints.value;
         await configRepository.setBool(
             'VRCX_autoDeleteOldPrints',
-            state.autoDeleteOldPrints
+            autoDeleteOldPrints.value
         );
     }
 
     async function setNotificationOpacity(value) {
-        state.notificationOpacity = value;
+        notificationOpacity.value = value;
         await configRepository.setInt('VRCX_notificationOpacity', value);
     }
 
     async function setVrcRegistryAutoBackup() {
-        state.vrcRegistryAutoBackup = !state.vrcRegistryAutoBackup;
+        vrcRegistryAutoBackup.value = !vrcRegistryAutoBackup.value;
         await configRepository.setBool(
             'VRCX_vrcRegistryAutoBackup',
-            state.vrcRegistryAutoBackup
+            vrcRegistryAutoBackup.value
         );
     }
 
     async function setVrcRegistryAskRestore() {
-        state.vrcRegistryAskRestore = !state.vrcRegistryAskRestore;
+        vrcRegistryAskRestore.value = !vrcRegistryAskRestore.value;
         await configRepository.setBool(
             'VRCX_vrcRegistryAskRestore',
-            state.vrcRegistryAskRestore
+            vrcRegistryAskRestore.value
         );
     }
 
@@ -456,7 +397,7 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
             }
         )
             .then(() => {
-                state.sentryErrorReporting = true;
+                sentryErrorReporting.value = true;
                 configRepository.setString('VRCX_SentryEnabled', 'true');
 
                 ElMessageBox.confirm(
@@ -478,7 +419,7 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
                 const act =
                     typeof action === 'string' ? action : action?.action;
                 if (act === 'cancel') {
-                    state.sentryErrorReporting = false;
+                    sentryErrorReporting.value = false;
                     configRepository.setString('VRCX_SentryEnabled', 'false');
                 }
             });
@@ -489,10 +430,10 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
             return;
         }
 
-        state.sentryErrorReporting = !state.sentryErrorReporting;
+        sentryErrorReporting.value = !sentryErrorReporting.value;
         await configRepository.setString(
             'VRCX_SentryEnabled',
-            state.sentryErrorReporting ? 'true' : 'false'
+            sentryErrorReporting.value ? 'true' : 'false'
         );
 
         ElMessageBox.confirm(
@@ -542,7 +483,7 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
             database.getExternalTableSize()
         ]);
 
-        state.sqliteTableSizes = {
+        sqliteTableSizes.value = {
             gps,
             status,
             bio,
@@ -561,9 +502,9 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
 
     function handleSetAppLauncherSettings() {
         AppApi.SetAppLauncherSettings(
-            state.enableAppLauncher,
-            state.enableAppLauncherAutoClose,
-            state.enableAppLauncherRunProcessOnce
+            enableAppLauncher.value,
+            enableAppLauncherAutoClose.value,
+            enableAppLauncherRunProcessOnce.value
         );
     }
 
@@ -571,14 +512,14 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
      * @param {string} videoId
      */
     async function lookupYouTubeVideo(videoId) {
-        if (!state.youTubeApi) {
+        if (!youTubeApi.value) {
             console.warn('no Youtube API key configured');
             return null;
         }
         let data = null;
         let apiKey = '';
-        if (state.youTubeApiKey) {
-            apiKey = state.youTubeApiKey;
+        if (youTubeApiKey.value) {
+            apiKey = youTubeApiKey.value;
         }
         try {
             const response = await webApiService.execute({
@@ -606,7 +547,7 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
     }
 
     function cropPrintsChanged() {
-        if (!state.cropInstancePrints) return;
+        if (!cropInstancePrints.value) return;
         ElMessageBox.confirm(
             t(
                 'view.settings.advanced.advanced.save_instance_prints_to_file.crop_convert_old'
@@ -629,7 +570,7 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
                     duration: 0
                 });
                 try {
-                    await AppApi.CropAllPrints(state.ugcFolderPath);
+                    await AppApi.CropAllPrints(ugcFolderPath.value);
                     ElMessage({
                         message: 'Batch print cropping complete',
                         type: 'success'
@@ -715,10 +656,10 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
     }
 
     async function openUGCFolder() {
-        if (LINUX && state.ugcFolderPath == null) {
+        if (LINUX && ugcFolderPath.value == null) {
             resetUGCFolder();
         }
-        await AppApi.OpenUGCPhotosFolder(state.ugcFolderPath);
+        await AppApi.OpenUGCPhotosFolder(ugcFolderPath.value);
     }
 
     async function folderSelectorDialog(oldPath) {
@@ -740,12 +681,12 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
     }
 
     async function openUGCFolderSelector() {
-        const path = await folderSelectorDialog(state.ugcFolderPath);
+        const path = await folderSelectorDialog(ugcFolderPath.value);
         await setUGCFolderPath(path);
     }
 
     async function showVRChatConfig() {
-        state.isVRChatConfigDialogVisible = true;
+        isVRChatConfigDialogVisible.value = true;
         if (!gameStore.VRChatUsedCacheSize) {
             gameStore.getVRChatCacheSize();
         }

src/stores/settings/appearance.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { computed, reactive, watch } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { ElMessageBox } from 'element-plus';
 
@@ -41,68 +41,72 @@ export const useAppearanceSettingsStore = defineStore(
 
         const { t, availableLocales, locale } = useI18n();
 
-        const state = reactive({
-            appLanguage: 'en',
-            themeMode: '',
-            isDarkMode: false,
-            displayVRCPlusIconsAsAvatar: false,
-            hideNicknames: false,
-            isAgeGatedInstancesVisible: false,
-            sortFavorites: true,
-            instanceUsersSortAlphabetical: false,
-            tablePageSize: 15,
-            dtHour12: false,
-            dtIsoFormat: false,
-            sidebarSortMethod1: 'Sort Private to Bottom',
-            sidebarSortMethod2: 'Sort by Time in Instance',
-            sidebarSortMethod3: 'Sort by Last Active',
-            sidebarSortMethods: [
-                'Sort Private to Bottom',
-                'Sort by Time in Instance',
-                'Sort by Last Active'
-            ],
-            asideWidth: 300,
-            isSidebarGroupByInstance: true,
-            isHideFriendsInSameInstance: false,
-            isSidebarDivideByFriendGroup: false,
-            hideUserNotes: false,
-            hideUserMemos: false,
-            hideUnfriends: false,
-            randomUserColours: false,
-            trustColor: {
-                untrusted: '#CCCCCC',
-                basic: '#1778FF',
-                known: '#2BCF5C',
-                trusted: '#FF7B42',
-                veteran: '#B18FFF',
-                vip: '#FF2626',
-                troll: '#782F2F'
-            },
-            currentCulture: ''
+        const appLanguage = ref('en');
+        const themeMode = ref('');
+        const isDarkMode = ref(false);
+        const displayVRCPlusIconsAsAvatar = ref(false);
+        const hideNicknames = ref(false);
+        const isAgeGatedInstancesVisible = ref(false);
+        const sortFavorites = ref(true);
+        const instanceUsersSortAlphabetical = ref(false);
+        const tablePageSize = ref(15);
+        const dtHour12 = ref(false);
+        const dtIsoFormat = ref(false);
+        const sidebarSortMethod1 = ref('Sort Private to Bottom');
+        const sidebarSortMethod2 = ref('Sort by Time in Instance');
+        const sidebarSortMethod3 = ref('Sort by Last Active');
+        const sidebarSortMethods = ref([
+            'Sort Private to Bottom',
+            'Sort by Time in Instance',
+            'Sort by Last Active'
+        ]);
+        const asideWidth = ref(300);
+        const isSidebarGroupByInstance = ref(true);
+        const isHideFriendsInSameInstance = ref(false);
+        const isSidebarDivideByFriendGroup = ref(false);
+        const hideUserNotes = ref(false);
+        const hideUserMemos = ref(false);
+        const hideUnfriends = ref(false);
+        const randomUserColours = ref(false);
+        const trustColor = ref({
+            untrusted: '#CCCCCC',
+            basic: '#1778FF',
+            known: '#2BCF5C',
+            trusted: '#FF7B42',
+            veteran: '#B18FFF',
+            vip: '#FF2626',
+            troll: '#782F2F'
+        });
+        const currentCulture = ref('');
+        const isSideBarTabShow = computed(() => {
+            return !(
+                uiStore.menuActiveIndex === 'friendList' ||
+                uiStore.menuActiveIndex === 'charts'
+            );
         });
 
         async function initAppearanceSettings() {
             const [
-                appLanguage,
-                themeMode,
-                displayVRCPlusIconsAsAvatar,
-                hideNicknames,
-                isAgeGatedInstancesVisible,
-                sortFavorites,
-                instanceUsersSortAlphabetical,
-                tablePageSize,
-                dtHour12,
-                dtIsoFormat,
-                sidebarSortMethods,
-                asideWidth,
-                isSidebarGroupByInstance,
-                isHideFriendsInSameInstance,
-                isSidebarDivideByFriendGroup,
-                hideUserNotes,
-                hideUserMemos,
-                hideUnfriends,
-                randomUserColours,
-                trustColor
+                appLanguageConfig,
+                themeModeConfig,
+                displayVRCPlusIconsAsAvatarConfig,
+                hideNicknamesConfig,
+                isAgeGatedInstancesVisibleConfig,
+                sortFavoritesConfig,
+                instanceUsersSortAlphabeticalConfig,
+                tablePageSizeConfig,
+                dtHour12Config,
+                dtIsoFormatConfig,
+                sidebarSortMethodsConfig,
+                asideWidthConfig,
+                isSidebarGroupByInstanceConfig,
+                isHideFriendsInSameInstanceConfig,
+                isSidebarDivideByFriendGroupConfig,
+                hideUserNotesConfig,
+                hideUserMemosConfig,
+                hideUnfriendsConfig,
+                randomUserColoursConfig,
+                trustColorConfig
             ] = await Promise.all([
                 configRepository.getString('VRCX_appLanguage'),
                 configRepository.getString('VRCX_ThemeMode', 'system'),
@@ -156,7 +160,7 @@ export const useAppearanceSettingsStore = defineStore(
                 )
             ]);
 
-            if (!appLanguage) {
+            if (!appLanguageConfig) {
                 const result = await AppApi.CurrentLanguage();
 
                 const lang = result.split('-')[0];
@@ -167,98 +171,58 @@ export const useAppearanceSettingsStore = defineStore(
                     }
                 });
             } else {
-                changeAppLanguage(appLanguage);
+                changeAppLanguage(appLanguageConfig);
             }
 
-            state.themeMode = themeMode;
+            themeMode.value = themeModeConfig;
             applyThemeMode();
 
-            state.displayVRCPlusIconsAsAvatar = displayVRCPlusIconsAsAvatar;
-            state.hideNicknames = hideNicknames;
-            state.isAgeGatedInstancesVisible = isAgeGatedInstancesVisible;
-            state.sortFavorites = sortFavorites;
-            state.instanceUsersSortAlphabetical = instanceUsersSortAlphabetical;
+            displayVRCPlusIconsAsAvatar.value =
+                displayVRCPlusIconsAsAvatarConfig;
+            hideNicknames.value = hideNicknamesConfig;
+            isAgeGatedInstancesVisible.value = isAgeGatedInstancesVisibleConfig;
+            sortFavorites.value = sortFavoritesConfig;
+            instanceUsersSortAlphabetical.value =
+                instanceUsersSortAlphabeticalConfig;
 
-            setTablePageSize(tablePageSize);
-            handleSetTablePageSize(state.tablePageSize);
+            setTablePageSize(tablePageSizeConfig);
+            handleSetTablePageSize(tablePageSize.value);
 
-            state.dtHour12 = dtHour12;
-            state.dtIsoFormat = dtIsoFormat;
+            dtHour12.value = dtHour12Config;
+            dtIsoFormat.value = dtIsoFormatConfig;
 
-            state.currentCulture = await AppApi.CurrentCulture();
+            currentCulture.value = await AppApi.CurrentCulture();
 
-            state.sidebarSortMethods = JSON.parse(sidebarSortMethods);
-            if (state.sidebarSortMethods?.length === 3) {
-                state.sidebarSortMethod1 = state.sidebarSortMethods[0];
-                state.sidebarSortMethod2 = state.sidebarSortMethods[1];
-                state.sidebarSortMethod3 = state.sidebarSortMethods[2];
+            sidebarSortMethods.value = JSON.parse(sidebarSortMethodsConfig);
+            if (sidebarSortMethods.value?.length === 3) {
+                sidebarSortMethod1.value = sidebarSortMethods.value[0];
+                sidebarSortMethod2.value = sidebarSortMethods.value[1];
+                sidebarSortMethod3.value = sidebarSortMethods.value[2];
             }
 
-            state.trustColor = JSON.parse(trustColor);
-            state.asideWidth = asideWidth;
-            state.isSidebarGroupByInstance = isSidebarGroupByInstance;
-            state.isHideFriendsInSameInstance = isHideFriendsInSameInstance;
-            state.isSidebarDivideByFriendGroup = isSidebarDivideByFriendGroup;
-            state.hideUserNotes = hideUserNotes;
-            state.hideUserMemos = hideUserMemos;
-            state.hideUnfriends = hideUnfriends;
-            state.randomUserColours = randomUserColours;
+            trustColor.value = JSON.parse(trustColorConfig);
+            asideWidth.value = asideWidthConfig;
+            isSidebarGroupByInstance.value = isSidebarGroupByInstanceConfig;
+            isHideFriendsInSameInstance.value =
+                isHideFriendsInSameInstanceConfig;
+            isSidebarDivideByFriendGroup.value =
+                isSidebarDivideByFriendGroupConfig;
+            hideUserNotes.value = hideUserNotesConfig;
+            hideUserMemos.value = hideUserMemosConfig;
+            hideUnfriends.value = hideUnfriendsConfig;
+            randomUserColours.value = randomUserColoursConfig;
 
             // Migrate old settings
             // Assume all exist if one does
             await mergeOldSortMethodsSettings();
 
-            updateTrustColorClasses(state.trustColor);
+            updateTrustColorClasses(trustColor.value);
 
             vrStore.updateVRConfigVars();
         }
 
         initAppearanceSettings();
 
-        const appLanguage = computed(() => state.appLanguage);
-        const themeMode = computed(() => state.themeMode);
-        const isDarkMode = computed(() => state.isDarkMode);
-        const displayVRCPlusIconsAsAvatar = computed(
-            () => state.displayVRCPlusIconsAsAvatar
-        );
-        const hideNicknames = computed(() => state.hideNicknames);
-        const isAgeGatedInstancesVisible = computed(
-            () => state.isAgeGatedInstancesVisible
-        );
-        const sortFavorites = computed(() => state.sortFavorites);
-        const instanceUsersSortAlphabetical = computed(
-            () => state.instanceUsersSortAlphabetical
-        );
-        const tablePageSize = computed(() => state.tablePageSize);
-        const dtHour12 = computed(() => state.dtHour12);
-        const dtIsoFormat = computed(() => state.dtIsoFormat);
-        const sidebarSortMethod1 = computed(() => state.sidebarSortMethod1);
-        const sidebarSortMethod2 = computed(() => state.sidebarSortMethod2);
-        const sidebarSortMethod3 = computed(() => state.sidebarSortMethod3);
-        const sidebarSortMethods = computed(() => state.sidebarSortMethods);
-        const asideWidth = computed(() => state.asideWidth);
-        const isSidebarGroupByInstance = computed(
-            () => state.isSidebarGroupByInstance
-        );
-        const isHideFriendsInSameInstance = computed(
-            () => state.isHideFriendsInSameInstance
-        );
-        const isSidebarDivideByFriendGroup = computed(
-            () => state.isSidebarDivideByFriendGroup
-        );
-        const hideUserNotes = computed(() => state.hideUserNotes);
-        const hideUserMemos = computed(() => state.hideUserMemos);
-        const hideUnfriends = computed(() => state.hideUnfriends);
-        const randomUserColours = computed(() => state.randomUserColours);
-        const trustColor = computed(() => state.trustColor);
-        const currentCulture = computed(() => state.currentCulture);
-        const isSideBarTabShow = computed(() => {
-            return !(
-                uiStore.menuActiveIndex === 'friendList' ||
-                uiStore.menuActiveIndex === 'charts'
-            );
-        });
-
         watch(
             () => watchState.isFriendsLoaded,
             (isFriendsLoaded) => {
@@ -283,9 +247,9 @@ export const useAppearanceSettingsStore = defineStore(
          */
         function setAppLanguage(language) {
             console.log('Language changed:', language);
-            state.appLanguage = language;
+            appLanguage.value = language;
             configRepository.setString('VRCX_appLanguage', language);
-            locale.value = state.appLanguage;
+            locale.value = appLanguage.value;
             changeHtmlLangAttribute(language);
         }
 
@@ -299,7 +263,7 @@ export const useAppearanceSettingsStore = defineStore(
         }
 
         async function changeThemeMode() {
-            await changeAppThemeStyle(state.themeMode);
+            await changeAppThemeStyle(themeMode.value);
             vrStore.updateVRConfigVars();
             await updateTrustColor(undefined, undefined);
         }
@@ -320,11 +284,11 @@ export const useAppearanceSettingsStore = defineStore(
             }
             if (field && color) {
                 setTrustColor({
-                    ...state.trustColor,
+                    ...trustColor.value,
                     [field]: color
                 });
             }
-            if (state.randomUserColours) {
+            if (randomUserColours.value) {
                 const colour = await getNameColour(userStore.currentUser.id);
                 userStore.currentUser.$userColour = colour;
                 userColourInit();
@@ -334,7 +298,7 @@ export const useAppearanceSettingsStore = defineStore(
                     applyUserTrustLevel(ref);
                 });
             }
-            updateTrustColorClasses(state.trustColor);
+            updateTrustColorClasses(trustColor.value);
         }
 
         async function userColourInit() {
@@ -362,7 +326,7 @@ export const useAppearanceSettingsStore = defineStore(
                 ref.developerType && ref.developerType !== 'none';
             ref.$isTroll = false;
             ref.$isProbableTroll = false;
-            let trustColor = '';
+            let trustColorTemp = '';
             const { tags } = ref;
             if (tags.includes('admin_moderator')) {
                 ref.$isModerator = true;
@@ -376,52 +340,52 @@ export const useAppearanceSettingsStore = defineStore(
             if (tags.includes('system_trust_veteran')) {
                 ref.$trustLevel = 'Trusted User';
                 ref.$trustClass = 'x-tag-veteran';
-                trustColor = 'veteran';
+                trustColorTemp = 'veteran';
                 ref.$trustSortNum = 5;
             } else if (tags.includes('system_trust_trusted')) {
                 ref.$trustLevel = 'Known User';
                 ref.$trustClass = 'x-tag-trusted';
-                trustColor = 'trusted';
+                trustColorTemp = 'trusted';
                 ref.$trustSortNum = 4;
             } else if (tags.includes('system_trust_known')) {
                 ref.$trustLevel = 'User';
                 ref.$trustClass = 'x-tag-known';
-                trustColor = 'known';
+                trustColorTemp = 'known';
                 ref.$trustSortNum = 3;
             } else if (tags.includes('system_trust_basic')) {
                 ref.$trustLevel = 'New User';
                 ref.$trustClass = 'x-tag-basic';
-                trustColor = 'basic';
+                trustColorTemp = 'basic';
                 ref.$trustSortNum = 2;
             } else {
                 ref.$trustLevel = 'Visitor';
                 ref.$trustClass = 'x-tag-untrusted';
-                trustColor = 'untrusted';
+                trustColorTemp = 'untrusted';
                 ref.$trustSortNum = 1;
             }
             if (ref.$isTroll || ref.$isProbableTroll) {
-                trustColor = 'troll';
+                trustColorTemp = 'troll';
                 ref.$trustSortNum += 0.1;
             }
             if (ref.$isModerator) {
-                trustColor = 'vip';
+                trustColorTemp = 'vip';
                 ref.$trustSortNum += 0.3;
             }
-            if (state.randomUserColours && watchState.isFriendsLoaded) {
+            if (randomUserColours.value && watchState.isFriendsLoaded) {
                 if (!ref.$userColour) {
                     getNameColour(ref.id).then((colour) => {
                         ref.$userColour = colour;
                     });
                 }
             } else {
-                ref.$userColour = state.trustColor[trustColor];
+                ref.$userColour = trustColor.value[trustColorTemp];
             }
         }
 
         window
             .matchMedia('(prefers-color-scheme: dark)')
             .addEventListener('change', async () => {
-                if (state.themeMode === 'system') {
+                if (themeMode.value === 'system') {
                     await changeThemeMode();
                 }
             });
@@ -430,14 +394,14 @@ export const useAppearanceSettingsStore = defineStore(
          * @param {string} mode
          */
         function setThemeMode(mode) {
-            state.themeMode = mode;
+            themeMode.value = mode;
             configRepository.setString('VRCX_ThemeMode', mode);
             applyThemeMode();
         }
         function applyThemeMode() {
-            if (state.themeMode === 'light') {
+            if (themeMode.value === 'light') {
                 setIsDarkMode(false);
-            } else if (state.themeMode === 'system') {
+            } else if (themeMode.value === 'system') {
                 setIsDarkMode(systemIsDarkMode());
             } else {
                 setIsDarkMode(true);
@@ -447,82 +411,82 @@ export const useAppearanceSettingsStore = defineStore(
          * @param {boolean} isDark
          */
         function setIsDarkMode(isDark) {
-            state.isDarkMode = isDark;
+            isDarkMode.value = isDark;
             changeAppDarkStyle(isDark);
         }
         function setDisplayVRCPlusIconsAsAvatar() {
-            state.displayVRCPlusIconsAsAvatar =
-                !state.displayVRCPlusIconsAsAvatar;
+            displayVRCPlusIconsAsAvatar.value =
+                !displayVRCPlusIconsAsAvatar.value;
             configRepository.setBool(
                 'displayVRCPlusIconsAsAvatar',
-                state.displayVRCPlusIconsAsAvatar
+                displayVRCPlusIconsAsAvatar.value
             );
         }
         function setHideNicknames() {
-            state.hideNicknames = !state.hideNicknames;
-            configRepository.setBool('VRCX_hideNicknames', state.hideNicknames);
+            hideNicknames.value = !hideNicknames.value;
+            configRepository.setBool('VRCX_hideNicknames', hideNicknames.value);
         }
         function setIsAgeGatedInstancesVisible() {
-            state.isAgeGatedInstancesVisible =
-                !state.isAgeGatedInstancesVisible;
+            isAgeGatedInstancesVisible.value =
+                !isAgeGatedInstancesVisible.value;
             configRepository.setBool(
                 'VRCX_isAgeGatedInstancesVisible',
-                state.isAgeGatedInstancesVisible
+                isAgeGatedInstancesVisible.value
             );
         }
         function setSortFavorites() {
-            state.sortFavorites = !state.sortFavorites;
-            configRepository.setBool('VRCX_sortFavorites', state.sortFavorites);
+            sortFavorites.value = !sortFavorites.value;
+            configRepository.setBool('VRCX_sortFavorites', sortFavorites.value);
         }
         function setInstanceUsersSortAlphabetical() {
-            state.instanceUsersSortAlphabetical =
-                !state.instanceUsersSortAlphabetical;
+            instanceUsersSortAlphabetical.value =
+                !instanceUsersSortAlphabetical.value;
             configRepository.setBool(
                 'VRCX_instanceUsersSortAlphabetical',
-                state.instanceUsersSortAlphabetical
+                instanceUsersSortAlphabetical.value
             );
         }
         /**
          * @param {number} size
          */
         function setTablePageSize(size) {
-            state.tablePageSize = size;
+            tablePageSize.value = size;
             configRepository.setInt('VRCX_tablePageSize', size);
         }
         function setDtHour12() {
-            state.dtHour12 = !state.dtHour12;
-            configRepository.setBool('VRCX_dtHour12', state.dtHour12);
+            dtHour12.value = !dtHour12.value;
+            configRepository.setBool('VRCX_dtHour12', dtHour12.value);
         }
         function setDtIsoFormat() {
-            state.dtIsoFormat = !state.dtIsoFormat;
-            configRepository.setBool('VRCX_dtIsoFormat', state.dtIsoFormat);
+            dtIsoFormat.value = !dtIsoFormat.value;
+            configRepository.setBool('VRCX_dtIsoFormat', dtIsoFormat.value);
         }
         /**
          * @param {string} method
          */
         function setSidebarSortMethod1(method) {
-            state.sidebarSortMethod1 = method;
+            sidebarSortMethod1.value = method;
             handleSaveSidebarSortOrder();
         }
         /**
          * @param {string} method
          */
         function setSidebarSortMethod2(method) {
-            state.sidebarSortMethod2 = method;
+            sidebarSortMethod2.value = method;
             handleSaveSidebarSortOrder();
         }
         /**
          * @param {string} method
          */
         function setSidebarSortMethod3(method) {
-            state.sidebarSortMethod3 = method;
+            sidebarSortMethod3.value = method;
             handleSaveSidebarSortOrder();
         }
         /**
          * @param {Array<string>} methods
          */
         function setSidebarSortMethods(methods) {
-            state.sidebarSortMethods = methods;
+            sidebarSortMethods.value = methods;
             configRepository.setString(
                 'VRCX_sidebarSortMethods',
                 JSON.stringify(methods)
@@ -535,7 +499,7 @@ export const useAppearanceSettingsStore = defineStore(
         function setAsideWidth(panelNumber, widthArray) {
             if (Array.isArray(widthArray) && widthArray[1]) {
                 requestAnimationFrame(() => {
-                    state.asideWidth = widthArray[1];
+                    asideWidth.value = widthArray[1];
                     configRepository.setInt(
                         'VRCX_sidePanelWidth',
                         widthArray[1]
@@ -544,52 +508,52 @@ export const useAppearanceSettingsStore = defineStore(
             }
         }
         function setIsSidebarGroupByInstance() {
-            state.isSidebarGroupByInstance = !state.isSidebarGroupByInstance;
+            isSidebarGroupByInstance.value = !isSidebarGroupByInstance.value;
             configRepository.setBool(
                 'VRCX_sidebarGroupByInstance',
-                state.isSidebarGroupByInstance
+                isSidebarGroupByInstance.value
             );
         }
         function setIsHideFriendsInSameInstance() {
-            state.isHideFriendsInSameInstance =
-                !state.isHideFriendsInSameInstance;
+            isHideFriendsInSameInstance.value =
+                !isHideFriendsInSameInstance.value;
             configRepository.setBool(
                 'VRCX_hideFriendsInSameInstance',
-                state.isHideFriendsInSameInstance
+                isHideFriendsInSameInstance.value
             );
         }
         function setIsSidebarDivideByFriendGroup() {
-            state.isSidebarDivideByFriendGroup =
-                !state.isSidebarDivideByFriendGroup;
+            isSidebarDivideByFriendGroup.value =
+                !isSidebarDivideByFriendGroup.value;
             configRepository.setBool(
                 'VRCX_sidebarDivideByFriendGroup',
-                state.isSidebarDivideByFriendGroup
+                isSidebarDivideByFriendGroup.value
             );
         }
         function setHideUserNotes() {
-            state.hideUserNotes = !state.hideUserNotes;
-            configRepository.setBool('VRCX_hideUserNotes', state.hideUserNotes);
+            hideUserNotes.value = !hideUserNotes.value;
+            configRepository.setBool('VRCX_hideUserNotes', hideUserNotes.value);
         }
         function setHideUserMemos() {
-            state.hideUserMemos = !state.hideUserMemos;
-            configRepository.setBool('VRCX_hideUserMemos', state.hideUserMemos);
+            hideUserMemos.value = !hideUserMemos.value;
+            configRepository.setBool('VRCX_hideUserMemos', hideUserMemos.value);
         }
         function setHideUnfriends() {
-            state.hideUnfriends = !state.hideUnfriends;
-            configRepository.setBool('VRCX_hideUnfriends', state.hideUnfriends);
+            hideUnfriends.value = !hideUnfriends.value;
+            configRepository.setBool('VRCX_hideUnfriends', hideUnfriends.value);
         }
         function setRandomUserColours() {
-            state.randomUserColours = !state.randomUserColours;
+            randomUserColours.value = !randomUserColours.value;
             configRepository.setBool(
                 'VRCX_randomUserColours',
-                state.randomUserColours
+                randomUserColours.value
             );
         }
         /**
          * @param {object} color
          */
         function setTrustColor(color) {
-            state.trustColor = color;
+            trustColor.value = color;
             configRepository.setString(
                 'VRCX_trustColor',
                 JSON.stringify(color)
@@ -597,25 +561,25 @@ export const useAppearanceSettingsStore = defineStore(
         }
 
         function handleSaveSidebarSortOrder() {
-            if (state.sidebarSortMethod1 === state.sidebarSortMethod2) {
-                state.sidebarSortMethod2 = '';
+            if (sidebarSortMethod1.value === sidebarSortMethod2.value) {
+                sidebarSortMethod2.value = '';
             }
-            if (state.sidebarSortMethod1 === state.sidebarSortMethod3) {
-                state.sidebarSortMethod3 = '';
+            if (sidebarSortMethod1.value === sidebarSortMethod3.value) {
+                sidebarSortMethod3.value = '';
             }
-            if (state.sidebarSortMethod2 === state.sidebarSortMethod3) {
-                state.sidebarSortMethod3 = '';
+            if (sidebarSortMethod2.value === sidebarSortMethod3.value) {
+                sidebarSortMethod3.value = '';
             }
-            if (!state.sidebarSortMethod1) {
-                state.sidebarSortMethod2 = '';
+            if (!sidebarSortMethod1.value) {
+                sidebarSortMethod2.value = '';
             }
-            if (!state.sidebarSortMethod2) {
-                state.sidebarSortMethod3 = '';
+            if (!sidebarSortMethod2.value) {
+                sidebarSortMethod3.value = '';
             }
             const sidebarSortMethods = [
-                state.sidebarSortMethod1,
-                state.sidebarSortMethod2,
-                state.sidebarSortMethod3
+                sidebarSortMethod1.value,
+                sidebarSortMethod2.value,
+                sidebarSortMethod3.value
             ];
             setSidebarSortMethods(sidebarSortMethods);
         }
@@ -662,10 +626,10 @@ export const useAppearanceSettingsStore = defineStore(
                     while (sortOrder.length < 3) {
                         sortOrder.push('');
                     }
-                    state.sidebarSortMethods = sortOrder;
-                    state.sidebarSortMethod1 = sortOrder[0];
-                    state.sidebarSortMethod2 = sortOrder[1];
-                    state.sidebarSortMethod3 = sortOrder[2];
+                    sidebarSortMethods.value = sortOrder;
+                    sidebarSortMethod1.value = sortOrder[0];
+                    sidebarSortMethod2.value = sortOrder[1];
+                    sidebarSortMethod3.value = sortOrder[2];
                 }
                 setSidebarSortMethods(sortOrder);
             }
@@ -713,7 +677,7 @@ export const useAppearanceSettingsStore = defineStore(
         }
 
         async function tryInitUserColours() {
-            if (!state.randomUserColours) {
+            if (!randomUserColours.value) {
                 return;
             }
             const colour = await getNameColour(userStore.currentUser.id);
@@ -722,8 +686,6 @@ export const useAppearanceSettingsStore = defineStore(
         }
 
         return {
-            state,
-
             appLanguage,
             themeMode,
             isDarkMode,

src/stores/settings/discordPresence.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { computed, reactive } from 'vue';
+import { ref, reactive } from 'vue';
 import { worldRequest } from '../../api';
 import configRepository from '../../service/config';
 import {
@@ -31,14 +31,6 @@ export const useDiscordPresenceSettingsStore = defineStore(
         const { t } = useI18n();
 
         const state = reactive({
-            discordActive: false,
-            discordInstance: true,
-            discordHideInvite: true,
-            discordJoinButton: false,
-            discordHideImage: false,
-            discordShowPlatform: true,
-            discordWorldIntegration: true,
-            discordWorldNameAsDiscordStatus: false,
             isDiscordActive: false,
             lastLocationDetails: {
                 tag: '',
@@ -56,16 +48,77 @@ export const useDiscordPresenceSettingsStore = defineStore(
             }
         });
 
+        const discordActive = ref(false);
+        const discordInstance = ref(true);
+        const discordHideInvite = ref(true);
+        const discordJoinButton = ref(false);
+        const discordHideImage = ref(false);
+        const discordShowPlatform = ref(true);
+        const discordWorldIntegration = ref(true);
+        const discordWorldNameAsDiscordStatus = ref(false);
+
+        function setDiscordActive() {
+            discordActive.value = !discordActive.value;
+            configRepository.setBool('discordActive', discordActive.value);
+        }
+        function setDiscordInstance() {
+            discordInstance.value = !discordInstance.value;
+            configRepository.setBool('discordInstance', discordInstance.value);
+        }
+        function setDiscordHideInvite() {
+            discordHideInvite.value = !discordHideInvite.value;
+            configRepository.setBool(
+                'discordHideInvite',
+                discordHideInvite.value
+            );
+        }
+        function setDiscordJoinButton() {
+            discordJoinButton.value = !discordJoinButton.value;
+            configRepository.setBool(
+                'discordJoinButton',
+                discordJoinButton.value
+            );
+        }
+        function setDiscordHideImage() {
+            discordHideImage.value = !discordHideImage.value;
+            configRepository.setBool(
+                'discordHideImage',
+                discordHideImage.value
+            );
+        }
+        function setDiscordShowPlatform() {
+            discordShowPlatform.value = !discordShowPlatform.value;
+            configRepository.setBool(
+                'discordShowPlatform',
+                discordShowPlatform.value
+            );
+        }
+        function setDiscordWorldIntegration() {
+            discordWorldIntegration.value = !discordWorldIntegration.value;
+            configRepository.setBool(
+                'discordWorldIntegration',
+                discordWorldIntegration.value
+            );
+        }
+        function setDiscordWorldNameAsDiscordStatus() {
+            discordWorldNameAsDiscordStatus.value =
+                !discordWorldNameAsDiscordStatus.value;
+            configRepository.setBool(
+                'discordWorldNameAsDiscordStatus',
+                discordWorldNameAsDiscordStatus.value
+            );
+        }
+
         async function initDiscordPresenceSettings() {
             const [
-                discordActive,
-                discordInstance,
-                discordHideInvite,
-                discordJoinButton,
-                discordHideImage,
-                discordShowPlatform,
-                discordWorldIntegration,
-                discordWorldNameAsDiscordStatus
+                discordActiveConfig,
+                discordInstanceConfig,
+                discordHideInviteConfig,
+                discordJoinButtonConfig,
+                discordHideImageConfig,
+                discordShowPlatformConfig,
+                discordWorldIntegrationConfig,
+                discordWorldNameAsDiscordStatusConfig
             ] = await Promise.all([
                 configRepository.getBool('discordActive', false),
                 configRepository.getBool('discordInstance', true),
@@ -80,80 +133,15 @@ export const useDiscordPresenceSettingsStore = defineStore(
                 )
             ]);
 
-            state.discordActive = discordActive;
-            state.discordInstance = discordInstance;
-            state.discordHideInvite = discordHideInvite;
-            state.discordJoinButton = discordJoinButton;
-            state.discordHideImage = discordHideImage;
-            state.discordShowPlatform = discordShowPlatform;
-            state.discordWorldIntegration = discordWorldIntegration;
-            state.discordWorldNameAsDiscordStatus =
-                discordWorldNameAsDiscordStatus;
-        }
-
-        const discordActive = computed(() => state.discordActive);
-        const discordInstance = computed(() => state.discordInstance);
-        const discordHideInvite = computed(() => state.discordHideInvite);
-        const discordJoinButton = computed(() => state.discordJoinButton);
-        const discordHideImage = computed(() => state.discordHideImage);
-        const discordShowPlatform = computed(() => state.discordShowPlatform);
-        const discordWorldIntegration = computed(
-            () => state.discordWorldIntegration
-        );
-        const discordWorldNameAsDiscordStatus = computed(
-            () => state.discordWorldNameAsDiscordStatus
-        );
-
-        function setDiscordActive() {
-            state.discordActive = !state.discordActive;
-            configRepository.setBool('discordActive', state.discordActive);
-        }
-        function setDiscordInstance() {
-            state.discordInstance = !state.discordInstance;
-            configRepository.setBool('discordInstance', state.discordInstance);
-        }
-        function setDiscordHideInvite() {
-            state.discordHideInvite = !state.discordHideInvite;
-            configRepository.setBool(
-                'discordHideInvite',
-                state.discordHideInvite
-            );
-        }
-        function setDiscordJoinButton() {
-            state.discordJoinButton = !state.discordJoinButton;
-            configRepository.setBool(
-                'discordJoinButton',
-                state.discordJoinButton
-            );
-        }
-        function setDiscordHideImage() {
-            state.discordHideImage = !state.discordHideImage;
-            configRepository.setBool(
-                'discordHideImage',
-                state.discordHideImage
-            );
-        }
-        function setDiscordShowPlatform() {
-            state.discordShowPlatform = !state.discordShowPlatform;
-            configRepository.setBool(
-                'discordShowPlatform',
-                state.discordShowPlatform
-            );
-        }
-        function setDiscordWorldIntegration() {
-            state.discordWorldIntegration = !state.discordWorldIntegration;
-            configRepository.setBool(
-                'discordWorldIntegration',
-                state.discordWorldIntegration
-            );
-        }
-        function setDiscordWorldNameAsDiscordStatus() {
-            state.discordWorldNameAsDiscordStatus =
-                !state.discordWorldNameAsDiscordStatus;
-            configRepository.setBool(
-                'discordWorldNameAsDiscordStatus',
-                state.discordWorldNameAsDiscordStatus
-            );
+            discordActive.value = discordActiveConfig;
+            discordInstance.value = discordInstanceConfig;
+            discordHideInvite.value = discordHideInviteConfig;
+            discordJoinButton.value = discordJoinButtonConfig;
+            discordHideImage.value = discordHideImageConfig;
+            discordShowPlatform.value = discordShowPlatformConfig;
+            discordWorldIntegration.value = discordWorldIntegrationConfig;
+            discordWorldNameAsDiscordStatus.value =
+                discordWorldNameAsDiscordStatusConfig;
         }
 
         initDiscordPresenceSettings();
@@ -174,7 +162,7 @@ export const useDiscordPresenceSettingsStore = defineStore(
                         userStore.currentUser.$travelingToLocation;
                 }
             }
-            if (!state.discordActive || !isRealInstance(currentLocation)) {
+            if (!discordActive.value || !isRealInstance(currentLocation)) {
                 setIsDiscordActive(false);
                 return;
             }
@@ -213,7 +201,7 @@ export const useDiscordPresenceSettingsStore = defineStore(
                 }
 
                 let platform = '';
-                if (state.discordShowPlatform) {
+                if (discordShowPlatform.value) {
                     if (gameStore.isGameRunning) {
                         platform = gameStore.isGameNoVR
                             ? ` (${t('view.settings.discord_presence.rpc.desktop')})`
@@ -284,7 +272,7 @@ export const useDiscordPresenceSettingsStore = defineStore(
             setIsDiscordActive(true);
             let hidePrivate = false;
             if (
-                state.discordHideInvite &&
+                discordHideInvite.value &&
                 (state.lastLocationDetails.accessType === 'invite' ||
                     state.lastLocationDetails.accessType === 'invite+' ||
                     state.lastLocationDetails.groupAccessType === 'members')
@@ -305,7 +293,7 @@ export const useDiscordPresenceSettingsStore = defineStore(
                 case 'ask me':
                     statusName = t('dialog.user.status.ask_me');
                     statusImage = 'askme';
-                    if (state.discordHideInvite) {
+                    if (discordHideInvite.value) {
                         hidePrivate = true;
                     }
                     break;
@@ -324,7 +312,7 @@ export const useDiscordPresenceSettingsStore = defineStore(
             let stateText = state.lastLocationDetails.accessName;
             let endTime = 0;
             let activityType = ActivityType.Playing;
-            let statusDisplayType = state.discordWorldNameAsDiscordStatus
+            let statusDisplayType = discordWorldNameAsDiscordStatus.value
                 ? StatusDisplayType.Details
                 : StatusDisplayType.Name;
             let appId = '883308884863901717';
@@ -343,7 +331,7 @@ export const useDiscordPresenceSettingsStore = defineStore(
             if (partySize === 0) {
                 partyMaxSize = 0;
             }
-            if (!state.discordInstance) {
+            if (!discordInstance.value) {
                 partySize = 0;
                 partyMaxSize = 0;
                 stateText = '';
@@ -352,14 +340,14 @@ export const useDiscordPresenceSettingsStore = defineStore(
                 'view.settings.discord_presence.rpc.join_button'
             );
             let buttonUrl = state.lastLocationDetails.joinUrl;
-            if (!state.discordJoinButton) {
+            if (!discordJoinButton.value) {
                 buttonText = '';
                 buttonUrl = '';
             }
 
             if (
                 isRpcWorld(state.lastLocationDetails.tag) &&
-                state.discordWorldIntegration
+                discordWorldIntegration.value
             ) {
                 // custom world rpc
                 if (
@@ -418,7 +406,7 @@ export const useDiscordPresenceSettingsStore = defineStore(
                     statusDisplayType = StatusDisplayType.Details;
                     appId = '1095440531821170820';
                     if (
-                        !state.discordHideImage &&
+                        !discordHideImage.value &&
                         gameLogStore.nowPlaying.thumbnailUrl
                     ) {
                         bigIcon = gameLogStore.nowPlaying.thumbnailUrl;
@@ -437,7 +425,7 @@ export const useDiscordPresenceSettingsStore = defineStore(
                         1000;
                 }
             } else if (
-                !state.discordHideImage &&
+                !discordHideImage.value &&
                 state.lastLocationDetails.thumbnailImageUrl
             ) {
                 bigIcon = state.lastLocationDetails.thumbnailImageUrl;

src/stores/settings/general.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { computed, reactive } from 'vue';
+import { ref } from 'vue';
 import * as workerTimers from 'worker-timers';
 import { ElMessageBox } from 'element-plus';
 
@@ -15,42 +15,41 @@ export const useGeneralSettingsStore = defineStore('GeneralSettings', () => {
     const friendStore = useFriendStore();
 
     const { t } = useI18n();
-    const state = reactive({
-        isStartAtWindowsStartup: false,
-        isStartAsMinimizedState: false,
-        isCloseToTray: false,
-        disableGpuAcceleration: false,
-        disableVrOverlayGpuAcceleration: false,
-        localFavoriteFriendsGroups: [],
-        udonExceptionLogging: false,
-        logResourceLoad: false,
-        logEmptyAvatars: false,
-        autoStateChangeEnabled: false,
-        autoStateChangeAloneStatus: 'join me',
-        autoStateChangeCompanyStatus: 'busy',
-        autoStateChangeInstanceTypes: [],
-        autoStateChangeNoFriends: false,
-        autoAcceptInviteRequests: 'Off'
-    });
+
+    const isStartAtWindowsStartup = ref(false);
+    const isStartAsMinimizedState = ref(false);
+    const disableGpuAcceleration = ref(false);
+    const isCloseToTray = ref(false);
+    const disableVrOverlayGpuAcceleration = ref(false);
+    const localFavoriteFriendsGroups = ref([]);
+    const udonExceptionLogging = ref(false);
+    const logResourceLoad = ref(false);
+    const logEmptyAvatars = ref(false);
+    const autoStateChangeEnabled = ref(false);
+    const autoStateChangeAloneStatus = ref('join me');
+    const autoStateChangeCompanyStatus = ref('busy');
+    const autoStateChangeInstanceTypes = ref([]);
+    const autoStateChangeNoFriends = ref(false);
+    const autoAcceptInviteRequests = ref('Off');
 
     async function initGeneralSettings() {
         const [
-            isStartAtWindowsStartup,
-            isStartAsMinimizedState,
-            isCloseToTray,
-            isCloseToTrayConfigBool,
-            disableGpuAccelerationStr,
-            disableVrOverlayGpuAccelerationStr,
-            localFavoriteFriendsGroupsStr,
-            udonExceptionLogging,
-            logResourceLoad,
-            logEmptyAvatars,
-            autoStateChangeEnabled,
-            autoStateChangeAloneStatus,
-            autoStateChangeCompanyStatus,
-            autoStateChangeInstanceTypesStr,
-            autoStateChangeNoFriends,
-            autoAcceptInviteRequests
+            isStartAtWindowsStartupConfig,
+            isStartAsMinimizedStateConfig,
+            isCloseToTrayConfig,
+            isCloseToTrayConfigBoolConfig,
+            disableGpuAccelerationStrConfig,
+            disableVrOverlayGpuAccelerationStrConfig,
+            localFavoriteFriendsGroupsStrConfig,
+            udonExceptionLoggingConfig,
+            logResourceLoadConfig,
+            logEmptyAvatarsConfig,
+            autoStateChangeEnabledConfig,
+            autoStateChangeAloneStatusConfig,
+            autoStateChangeCompanyStatusConfig,
+            autoStateChangeInstanceTypesStrConfig,
+            autoStateChangeNoFriendsConfig,
+            autoAcceptInviteRequestsConfig
         ] = await Promise.all([
             configRepository.getBool('VRCX_StartAtWindowsStartup', false),
             VRCXStorage.Get('VRCX_StartAsMinimizedState'),
@@ -79,115 +78,83 @@ export const useGeneralSettingsStore = defineStore('GeneralSettings', () => {
             configRepository.getString('VRCX_autoAcceptInviteRequests', 'Off')
         ]);
 
-        state.isStartAtWindowsStartup = isStartAtWindowsStartup;
-        state.isStartAsMinimizedState = isStartAsMinimizedState === 'true';
+        isStartAtWindowsStartup.value = isStartAtWindowsStartupConfig;
+        isStartAsMinimizedState.value =
+            isStartAsMinimizedStateConfig === 'true';
 
-        if (isCloseToTrayConfigBool) {
-            state.isCloseToTray = isCloseToTrayConfigBool;
+        if (isCloseToTrayConfigBoolConfig) {
+            isCloseToTray.value = isCloseToTrayConfigBoolConfig;
 
             await VRCXStorage.Set(
                 'VRCX_CloseToTray',
-                state.isCloseToTray.toString()
+                isCloseToTray.value.toString()
             );
             await configRepository.remove('VRCX_CloseToTray');
         } else {
-            state.isCloseToTray = isCloseToTray === 'true';
+            isCloseToTray.value = isCloseToTrayConfig === 'true';
         }
 
-        state.disableGpuAcceleration = disableGpuAccelerationStr === 'true';
-        state.disableVrOverlayGpuAcceleration =
-            disableVrOverlayGpuAccelerationStr === 'true';
-        state.localFavoriteFriendsGroups = JSON.parse(
-            localFavoriteFriendsGroupsStr
+        disableGpuAcceleration.value =
+            disableGpuAccelerationStrConfig === 'true';
+        disableVrOverlayGpuAcceleration.value =
+            disableVrOverlayGpuAccelerationStrConfig === 'true';
+        localFavoriteFriendsGroups.value = JSON.parse(
+            localFavoriteFriendsGroupsStrConfig
         );
-        state.udonExceptionLogging = udonExceptionLogging;
-        state.logResourceLoad = logResourceLoad;
-        state.logEmptyAvatars = logEmptyAvatars;
-        state.autoStateChangeEnabled = autoStateChangeEnabled;
-        state.autoStateChangeAloneStatus = autoStateChangeAloneStatus;
-        state.autoStateChangeCompanyStatus = autoStateChangeCompanyStatus;
-        state.autoStateChangeInstanceTypes = JSON.parse(
-            autoStateChangeInstanceTypesStr
+        udonExceptionLogging.value = udonExceptionLoggingConfig;
+        logResourceLoad.value = logResourceLoadConfig;
+        logEmptyAvatars.value = logEmptyAvatarsConfig;
+        autoStateChangeEnabled.value = autoStateChangeEnabledConfig;
+        autoStateChangeAloneStatus.value = autoStateChangeAloneStatusConfig;
+        autoStateChangeCompanyStatus.value = autoStateChangeCompanyStatusConfig;
+        autoStateChangeInstanceTypes.value = JSON.parse(
+            autoStateChangeInstanceTypesStrConfig
         );
-        state.autoStateChangeNoFriends = autoStateChangeNoFriends;
-        state.autoAcceptInviteRequests = autoAcceptInviteRequests;
+        autoStateChangeNoFriends.value = autoStateChangeNoFriendsConfig;
+        autoAcceptInviteRequests.value = autoAcceptInviteRequestsConfig;
     }
 
     initGeneralSettings();
 
-    const isStartAtWindowsStartup = computed(
-        () => state.isStartAtWindowsStartup
-    );
-    const isStartAsMinimizedState = computed(
-        () => state.isStartAsMinimizedState
-    );
-    const disableGpuAcceleration = computed(() => state.disableGpuAcceleration);
-    const isCloseToTray = computed(() => state.isCloseToTray);
-    const disableVrOverlayGpuAcceleration = computed(
-        () => state.disableVrOverlayGpuAcceleration
-    );
-    const localFavoriteFriendsGroups = computed(
-        () => state.localFavoriteFriendsGroups
-    );
-    const udonExceptionLogging = computed(() => state.udonExceptionLogging);
-    const logResourceLoad = computed(() => state.logResourceLoad);
-    const logEmptyAvatars = computed(() => state.logEmptyAvatars);
-    const autoStateChangeEnabled = computed(() => state.autoStateChangeEnabled);
-    const autoStateChangeAloneStatus = computed(
-        () => state.autoStateChangeAloneStatus
-    );
-    const autoStateChangeCompanyStatus = computed(
-        () => state.autoStateChangeCompanyStatus
-    );
-    const autoStateChangeInstanceTypes = computed(
-        () => state.autoStateChangeInstanceTypes
-    );
-    const autoStateChangeNoFriends = computed(
-        () => state.autoStateChangeNoFriends
-    );
-    const autoAcceptInviteRequests = computed(
-        () => state.autoAcceptInviteRequests
-    );
-
     function setIsStartAtWindowsStartup() {
-        state.isStartAtWindowsStartup = !state.isStartAtWindowsStartup;
+        isStartAtWindowsStartup.value = !isStartAtWindowsStartup.value;
         configRepository.setBool(
             'VRCX_StartAtWindowsStartup',
-            state.isStartAtWindowsStartup
+            isStartAtWindowsStartup.value
         );
-        AppApi.SetStartup(state.isStartAtWindowsStartup);
+        AppApi.SetStartup(isStartAtWindowsStartup.value);
     }
     function setIsStartAsMinimizedState() {
-        state.isStartAsMinimizedState = !state.isStartAsMinimizedState;
+        isStartAsMinimizedState.value = !isStartAsMinimizedState.value;
         VRCXStorage.Set(
             'VRCX_StartAsMinimizedState',
-            state.isStartAsMinimizedState.toString()
+            isStartAsMinimizedState.value.toString()
         );
     }
     function setIsCloseToTray() {
-        state.isCloseToTray = !state.isCloseToTray;
-        VRCXStorage.Set('VRCX_CloseToTray', state.isCloseToTray.toString());
+        isCloseToTray.value = !isCloseToTray.value;
+        VRCXStorage.Set('VRCX_CloseToTray', isCloseToTray.value.toString());
     }
     function setDisableGpuAcceleration() {
-        state.disableGpuAcceleration = !state.disableGpuAcceleration;
+        disableGpuAcceleration.value = !disableGpuAcceleration.value;
         VRCXStorage.Set(
             'VRCX_DisableGpuAcceleration',
-            state.disableGpuAcceleration.toString()
+            disableGpuAcceleration.value.toString()
         );
     }
     function setDisableVrOverlayGpuAcceleration() {
-        state.disableVrOverlayGpuAcceleration =
-            !state.disableVrOverlayGpuAcceleration;
+        disableVrOverlayGpuAcceleration.value =
+            !disableVrOverlayGpuAcceleration.value;
         VRCXStorage.Set(
             'VRCX_DisableVrOverlayGpuAcceleration',
-            state.disableVrOverlayGpuAcceleration.toString()
+            disableVrOverlayGpuAcceleration.value.toString()
         );
     }
     /**
      * @param {string[]} value
      */
     function setLocalFavoriteFriendsGroups(value) {
-        state.localFavoriteFriendsGroups = value;
+        localFavoriteFriendsGroups.value = value;
         configRepository.setString(
             'VRCX_localFavoriteFriendsGroups',
             JSON.stringify(value)
@@ -195,69 +162,69 @@ export const useGeneralSettingsStore = defineStore('GeneralSettings', () => {
         friendStore.updateLocalFavoriteFriends();
     }
     function setUdonExceptionLogging() {
-        state.udonExceptionLogging = !state.udonExceptionLogging;
+        udonExceptionLogging.value = !udonExceptionLogging.value;
         configRepository.setBool(
             'VRCX_udonExceptionLogging',
-            state.udonExceptionLogging
+            udonExceptionLogging.value
         );
     }
     function setLogResourceLoad() {
-        state.logResourceLoad = !state.logResourceLoad;
-        configRepository.setBool('VRCX_logResourceLoad', state.logResourceLoad);
+        logResourceLoad.value = !logResourceLoad.value;
+        configRepository.setBool('VRCX_logResourceLoad', logResourceLoad.value);
     }
     function setLogEmptyAvatars() {
-        state.logEmptyAvatars = !state.logEmptyAvatars;
-        configRepository.setBool('VRCX_logEmptyAvatars', state.logEmptyAvatars);
+        logEmptyAvatars.value = !logEmptyAvatars.value;
+        configRepository.setBool('VRCX_logEmptyAvatars', logEmptyAvatars.value);
     }
     function setAutoStateChangeEnabled() {
-        state.autoStateChangeEnabled = !state.autoStateChangeEnabled;
+        autoStateChangeEnabled.value = !autoStateChangeEnabled.value;
         configRepository.setBool(
             'VRCX_autoStateChangeEnabled',
-            state.autoStateChangeEnabled
+            autoStateChangeEnabled.value
         );
     }
     /**
      * @param {string} value
      */
     function setAutoStateChangeAloneStatus(value) {
-        state.autoStateChangeAloneStatus = value;
+        autoStateChangeAloneStatus.value = value;
         configRepository.setString(
             'VRCX_autoStateChangeAloneStatus',
-            state.autoStateChangeAloneStatus
+            autoStateChangeAloneStatus.value
         );
     }
     /**
      * @param {string} value
      */
     function setAutoStateChangeCompanyStatus(value) {
-        state.autoStateChangeCompanyStatus = value;
+        autoStateChangeCompanyStatus.value = value;
         configRepository.setString(
             'VRCX_autoStateChangeCompanyStatus',
-            state.autoStateChangeCompanyStatus
+            autoStateChangeCompanyStatus.value
         );
     }
     function setAutoStateChangeInstanceTypes(value) {
-        state.autoStateChangeInstanceTypes = value;
+        autoStateChangeInstanceTypes.value = value;
         configRepository.setString(
             'VRCX_autoStateChangeInstanceTypes',
-            JSON.stringify(state.autoStateChangeInstanceTypes)
+            JSON.stringify(autoStateChangeInstanceTypes.value)
         );
     }
     function setAutoStateChangeNoFriends() {
-        state.autoStateChangeNoFriends = !state.autoStateChangeNoFriends;
+        autoStateChangeNoFriends.value = !autoStateChangeNoFriends.value;
         configRepository.setBool(
             'VRCX_autoStateChangeNoFriends',
-            state.autoStateChangeNoFriends
+            autoStateChangeNoFriends.value
         );
     }
     /**
      * @param {string} value
      */
     function setAutoAcceptInviteRequests(value) {
-        state.autoAcceptInviteRequests = value;
+        autoAcceptInviteRequests.value = value;
         configRepository.setString(
             'VRCX_autoAcceptInviteRequests',
-            state.autoAcceptInviteRequests
+            autoAcceptInviteRequests.value
         );
     }
 
@@ -303,8 +270,6 @@ export const useGeneralSettingsStore = defineStore('GeneralSettings', () => {
     }
 
     return {
-        state,
-
         isStartAtWindowsStartup,
         isStartAsMinimizedState,
         isCloseToTray,

src/stores/settings/notifications.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { computed, reactive } from 'vue';
+import { ref } from 'vue';
 import { ElMessageBox } from 'element-plus';
 
 import { useI18n } from 'vue-i18n';
@@ -13,129 +13,128 @@ export const useNotificationsSettingsStore = defineStore(
         const vrStore = useVrStore();
 
         const { t } = useI18n();
-        const state = reactive({
-            overlayToast: 'Game Running',
-            openVR: false,
-            overlayNotifications: true,
-            xsNotifications: true,
-            ovrtHudNotifications: true,
-            ovrtWristNotifications: false,
-            imageNotifications: true,
-            desktopToast: 'Never',
-            afkDesktopToast: false,
-            notificationTTS: 'Never',
-            notificationTTSNickName: false,
-            sharedFeedFilters: {
-                noty: {
-                    Location: 'Off',
-                    OnPlayerJoined: 'VIP',
-                    OnPlayerLeft: 'VIP',
-                    OnPlayerJoining: 'VIP',
-                    Online: 'VIP',
-                    Offline: 'VIP',
-                    GPS: 'Off',
-                    Status: 'Off',
-                    invite: 'Friends',
-                    requestInvite: 'Friends',
-                    inviteResponse: 'Friends',
-                    requestInviteResponse: 'Friends',
-                    friendRequest: 'On',
-                    Friend: 'On',
-                    Unfriend: 'On',
-                    DisplayName: 'VIP',
-                    TrustLevel: 'VIP',
-                    boop: 'Off',
-                    groupChange: 'On',
-                    'group.announcement': 'On',
-                    'group.informative': 'On',
-                    'group.invite': 'On',
-                    'group.joinRequest': 'Off',
-                    'group.transfer': 'On',
-                    'group.queueReady': 'On',
-                    'instance.closed': 'On',
-                    PortalSpawn: 'Everyone',
-                    Event: 'On',
-                    External: 'On',
-                    VideoPlay: 'Off',
-                    BlockedOnPlayerJoined: 'Off',
-                    BlockedOnPlayerLeft: 'Off',
-                    MutedOnPlayerJoined: 'Off',
-                    MutedOnPlayerLeft: 'Off',
-                    AvatarChange: 'Off',
-                    ChatBoxMessage: 'Off',
-                    Blocked: 'Off',
-                    Unblocked: 'Off',
-                    Muted: 'Off',
-                    Unmuted: 'Off'
-                },
-                wrist: {
-                    Location: 'On',
-                    OnPlayerJoined: 'Everyone',
-                    OnPlayerLeft: 'Everyone',
-                    OnPlayerJoining: 'Friends',
-                    Online: 'Friends',
-                    Offline: 'Friends',
-                    GPS: 'Friends',
-                    Status: 'Friends',
-                    invite: 'Friends',
-                    requestInvite: 'Friends',
-                    inviteResponse: 'Friends',
-                    requestInviteResponse: 'Friends',
-                    friendRequest: 'On',
-                    Friend: 'On',
-                    Unfriend: 'On',
-                    DisplayName: 'Friends',
-                    TrustLevel: 'Friends',
-                    boop: 'On',
-                    groupChange: 'On',
-                    'group.announcement': 'On',
-                    'group.informative': 'On',
-                    'group.invite': 'On',
-                    'group.joinRequest': 'On',
-                    'group.transfer': 'On',
-                    'group.queueReady': 'On',
-                    'instance.closed': 'On',
-                    PortalSpawn: 'Everyone',
-                    Event: 'On',
-                    External: 'On',
-                    VideoPlay: 'On',
-                    BlockedOnPlayerJoined: 'Off',
-                    BlockedOnPlayerLeft: 'Off',
-                    MutedOnPlayerJoined: 'Off',
-                    MutedOnPlayerLeft: 'Off',
-                    AvatarChange: 'Everyone',
-                    ChatBoxMessage: 'Off',
-                    Blocked: 'On',
-                    Unblocked: 'On',
-                    Muted: 'On',
-                    Unmuted: 'On'
-                }
+
+        const overlayToast = ref('Game Running');
+        const openVR = ref(false);
+        const overlayNotifications = ref(true);
+        const xsNotifications = ref(true);
+        const ovrtHudNotifications = ref(true);
+        const ovrtWristNotifications = ref(false);
+        const imageNotifications = ref(true);
+        const desktopToast = ref('Never');
+        const afkDesktopToast = ref(false);
+        const notificationTTS = ref('Never');
+        const notificationTTSNickName = ref(false);
+        const sharedFeedFilters = ref({
+            noty: {
+                Location: 'Off',
+                OnPlayerJoined: 'VIP',
+                OnPlayerLeft: 'VIP',
+                OnPlayerJoining: 'VIP',
+                Online: 'VIP',
+                Offline: 'VIP',
+                GPS: 'Off',
+                Status: 'Off',
+                invite: 'Friends',
+                requestInvite: 'Friends',
+                inviteResponse: 'Friends',
+                requestInviteResponse: 'Friends',
+                friendRequest: 'On',
+                Friend: 'On',
+                Unfriend: 'On',
+                DisplayName: 'VIP',
+                TrustLevel: 'VIP',
+                boop: 'Off',
+                groupChange: 'On',
+                'group.announcement': 'On',
+                'group.informative': 'On',
+                'group.invite': 'On',
+                'group.joinRequest': 'Off',
+                'group.transfer': 'On',
+                'group.queueReady': 'On',
+                'instance.closed': 'On',
+                PortalSpawn: 'Everyone',
+                Event: 'On',
+                External: 'On',
+                VideoPlay: 'Off',
+                BlockedOnPlayerJoined: 'Off',
+                BlockedOnPlayerLeft: 'Off',
+                MutedOnPlayerJoined: 'Off',
+                MutedOnPlayerLeft: 'Off',
+                AvatarChange: 'Off',
+                ChatBoxMessage: 'Off',
+                Blocked: 'Off',
+                Unblocked: 'Off',
+                Muted: 'Off',
+                Unmuted: 'Off'
             },
-            isTestTTSVisible: false,
-            notificationTTSVoice: 0,
-            notificationTTSTest: '',
-            TTSvoices: [],
-            notificationPosition: 'topCenter',
-            notificationTimeout: 3000
+            wrist: {
+                Location: 'On',
+                OnPlayerJoined: 'Everyone',
+                OnPlayerLeft: 'Everyone',
+                OnPlayerJoining: 'Friends',
+                Online: 'Friends',
+                Offline: 'Friends',
+                GPS: 'Friends',
+                Status: 'Friends',
+                invite: 'Friends',
+                requestInvite: 'Friends',
+                inviteResponse: 'Friends',
+                requestInviteResponse: 'Friends',
+                friendRequest: 'On',
+                Friend: 'On',
+                Unfriend: 'On',
+                DisplayName: 'Friends',
+                TrustLevel: 'Friends',
+                boop: 'On',
+                groupChange: 'On',
+                'group.announcement': 'On',
+                'group.informative': 'On',
+                'group.invite': 'On',
+                'group.joinRequest': 'On',
+                'group.transfer': 'On',
+                'group.queueReady': 'On',
+                'instance.closed': 'On',
+                PortalSpawn: 'Everyone',
+                Event: 'On',
+                External: 'On',
+                VideoPlay: 'On',
+                BlockedOnPlayerJoined: 'Off',
+                BlockedOnPlayerLeft: 'Off',
+                MutedOnPlayerJoined: 'Off',
+                MutedOnPlayerLeft: 'Off',
+                AvatarChange: 'Everyone',
+                ChatBoxMessage: 'Off',
+                Blocked: 'On',
+                Unblocked: 'On',
+                Muted: 'On',
+                Unmuted: 'On'
+            }
         });
+        const isTestTTSVisible = ref(false);
+        const notificationTTSVoice = ref(0);
+        const TTSvoices = ref([]);
+        const notificationTTSTest = ref('');
+        const notificationPosition = ref('topCenter');
+        const notificationTimeout = ref(3000);
 
         async function initNotificationsSettings() {
             const [
-                overlayToast,
-                overlayNotifications,
-                openVR,
-                xsNotifications,
-                ovrtHudNotifications,
-                ovrtWristNotifications,
-                imageNotifications,
-                desktopToast,
-                afkDesktopToast,
-                notificationTTS,
-                notificationTTSNickName,
-                sharedFeedFilters,
-                notificationTTSVoice,
-                notificationPosition,
-                notificationTimeout
+                overlayToastConfig,
+                overlayNotificationsConfig,
+                openVRConfig,
+                xsNotificationsConfig,
+                ovrtHudNotificationsConfig,
+                ovrtWristNotificationsConfig,
+                imageNotificationsConfig,
+                desktopToastConfig,
+                afkDesktopToastConfig,
+                notificationTTSConfig,
+                notificationTTSNickNameConfig,
+                sharedFeedFiltersConfig,
+                notificationTTSVoiceConfig,
+                notificationPositionConfig,
+                notificationTimeoutConfig
             ] = await Promise.all([
                 configRepository.getString('VRCX_overlayToast', 'Game Running'),
                 configRepository.getBool('VRCX_overlayNotifications', true),
@@ -160,22 +159,22 @@ export const useNotificationsSettingsStore = defineStore(
                 configRepository.getString('VRCX_notificationTimeout', '3000')
             ]);
 
-            state.overlayToast = overlayToast;
-            state.openVR = openVR;
-            state.overlayNotifications = overlayNotifications;
-            state.xsNotifications = xsNotifications;
-            state.ovrtHudNotifications = ovrtHudNotifications;
-            state.ovrtWristNotifications = ovrtWristNotifications;
-            state.imageNotifications = imageNotifications;
-            state.desktopToast = desktopToast;
-            state.afkDesktopToast = afkDesktopToast;
-            state.notificationTTS = notificationTTS;
-            state.notificationTTSNickName = notificationTTSNickName;
-            state.sharedFeedFilters = JSON.parse(sharedFeedFilters);
-            state.notificationTTSVoice = Number(notificationTTSVoice);
-            state.TTSvoices = speechSynthesis.getVoices();
-            state.notificationPosition = notificationPosition;
-            state.notificationTimeout = Number(notificationTimeout);
+            overlayToast.value = overlayToastConfig;
+            openVR.value = openVRConfig;
+            overlayNotifications.value = overlayNotificationsConfig;
+            xsNotifications.value = xsNotificationsConfig;
+            ovrtHudNotifications.value = ovrtHudNotificationsConfig;
+            ovrtWristNotifications.value = ovrtWristNotificationsConfig;
+            imageNotifications.value = imageNotificationsConfig;
+            desktopToast.value = desktopToastConfig;
+            afkDesktopToast.value = afkDesktopToastConfig;
+            notificationTTS.value = notificationTTSConfig;
+            notificationTTSNickName.value = notificationTTSNickNameConfig;
+            sharedFeedFilters.value = JSON.parse(sharedFeedFiltersConfig);
+            notificationTTSVoice.value = Number(notificationTTSVoiceConfig);
+            TTSvoices.value = speechSynthesis.getVoices();
+            notificationPosition.value = notificationPositionConfig;
+            notificationTimeout.value = Number(notificationTimeoutConfig);
 
             initSharedFeedFilters();
 
@@ -187,96 +186,55 @@ export const useNotificationsSettingsStore = defineStore(
 
         initNotificationsSettings();
 
-        const overlayToast = computed(() => state.overlayToast);
-        const openVR = computed(() => state.openVR);
-        const overlayNotifications = computed(() => state.overlayNotifications);
-        const xsNotifications = computed(() => state.xsNotifications);
-        const ovrtHudNotifications = computed(() => state.ovrtHudNotifications);
-        const ovrtWristNotifications = computed(
-            () => state.ovrtWristNotifications
-        );
-        const imageNotifications = computed(() => state.imageNotifications);
-        const desktopToast = computed(() => state.desktopToast);
-        const afkDesktopToast = computed(() => state.afkDesktopToast);
-        const notificationTTS = computed(() => state.notificationTTS);
-        const notificationTTSNickName = computed(
-            () => state.notificationTTSNickName
-        );
-        const sharedFeedFilters = computed({
-            get: () => state.sharedFeedFilters,
-            set: (value) => (state.sharedFeedFilters = value)
-        });
-        const isTestTTSVisible = computed({
-            get: () => state.isTestTTSVisible,
-            set: (value) => (state.isTestTTSVisible = value)
-        });
-        const notificationTTSVoice = computed({
-            get: () => state.notificationTTSVoice,
-            set: (value) => (state.notificationTTSVoice = value)
-        });
-        const TTSvoices = computed({
-            get: () => state.TTSvoices,
-            set: (value) => (state.TTSvoices = value)
-        });
-        const notificationTTSTest = computed({
-            get: () => state.notificationTTSTest,
-            set: (value) => (state.notificationTTSTest = value)
-        });
-        const notificationPosition = computed(() => state.notificationPosition);
-        const notificationTimeout = computed({
-            get: () => state.notificationTimeout,
-            set: (value) => (state.notificationTimeout = value)
-        });
-
         function setOverlayToast(value) {
-            state.overlayToast = value;
+            overlayToast.value = value;
             configRepository.setString('VRCX_overlayToast', value);
         }
         function setOverlayNotifications() {
-            state.overlayNotifications = !state.overlayNotifications;
+            overlayNotifications.value = !overlayNotifications.value;
             configRepository.setBool(
                 'VRCX_overlayNotifications',
-                state.overlayNotifications
+                overlayNotifications.value
             );
         }
         function setOpenVR() {
-            state.openVR = !state.openVR;
-            configRepository.setBool('openVR', state.openVR);
+            openVR.value = !openVR.value;
+            configRepository.setBool('openVR', openVR.value);
         }
         function setXsNotifications() {
-            state.xsNotifications = !state.xsNotifications;
+            xsNotifications.value = !xsNotifications.value;
             configRepository.setBool(
                 'VRCX_xsNotifications',
-                state.xsNotifications
+                xsNotifications.value
             );
         }
         function setOvrtHudNotifications() {
-            state.ovrtHudNotifications = !state.ovrtHudNotifications;
+            ovrtHudNotifications.value = !ovrtHudNotifications.value;
             configRepository.setBool(
                 'VRCX_ovrtHudNotifications',
-                state.ovrtHudNotifications
+                ovrtHudNotifications.value
             );
         }
         function setOvrtWristNotifications() {
-            state.ovrtWristNotifications = !state.ovrtWristNotifications;
+            ovrtWristNotifications.value = !ovrtWristNotifications.value;
             configRepository.setBool(
                 'VRCX_ovrtWristNotifications',
-                state.ovrtWristNotifications
+                ovrtWristNotifications.value
             );
         }
         function setImageNotifications() {
-            state.imageNotifications = !state.imageNotifications;
+            imageNotifications.value = !imageNotifications.value;
             configRepository.setBool(
                 'VRCX_imageNotifications',
-                state.imageNotifications
+                imageNotifications.value
             );
         }
 
         function changeNotificationPosition(value) {
-            state.notificationPosition = value;
+            notificationPosition.value = value;
             configRepository.setString(
                 'VRCX_notificationPosition',
-                state.notificationPosition
+                notificationPosition.value
             );
             vrStore.updateVRConfigVars();
         }
@@ -284,81 +242,81 @@ export const useNotificationsSettingsStore = defineStore(
          * @param {string} value
          */
         function setDesktopToast(value) {
-            state.desktopToast = value;
+            desktopToast.value = value;
             configRepository.setString('VRCX_desktopToast', value);
         }
         function setAfkDesktopToast() {
-            state.afkDesktopToast = !state.afkDesktopToast;
+            afkDesktopToast.value = !afkDesktopToast.value;
             configRepository.setBool(
                 'VRCX_afkDesktopToast',
-                state.afkDesktopToast
+                afkDesktopToast.value
             );
         }
         /**
          * @param {string} value
          */
         function setNotificationTTS(value) {
-            state.notificationTTS = value;
+            notificationTTS.value = value;
             configRepository.setString('VRCX_notificationTTS', value);
         }
         function setNotificationTTSNickName() {
-            state.notificationTTSNickName = !state.notificationTTSNickName;
+            notificationTTSNickName.value = !notificationTTSNickName.value;
             configRepository.setBool(
                 'VRCX_notificationTTSNickName',
-                state.notificationTTSNickName
+                notificationTTSNickName.value
             );
         }
         function initSharedFeedFilters() {
-            if (!state.sharedFeedFilters.noty.Blocked) {
-                state.sharedFeedFilters.noty.Blocked = 'Off';
-                state.sharedFeedFilters.noty.Unblocked = 'Off';
-                state.sharedFeedFilters.noty.Muted = 'Off';
-                state.sharedFeedFilters.noty.Unmuted = 'Off';
-                state.sharedFeedFilters.wrist.Blocked = 'On';
-                state.sharedFeedFilters.wrist.Unblocked = 'On';
-                state.sharedFeedFilters.wrist.Muted = 'On';
-                state.sharedFeedFilters.wrist.Unmuted = 'On';
+            if (!sharedFeedFilters.value.noty.Blocked) {
+                sharedFeedFilters.value.noty.Blocked = 'Off';
+                sharedFeedFilters.value.noty.Unblocked = 'Off';
+                sharedFeedFilters.value.noty.Muted = 'Off';
+                sharedFeedFilters.value.noty.Unmuted = 'Off';
+                sharedFeedFilters.value.wrist.Blocked = 'On';
+                sharedFeedFilters.value.wrist.Unblocked = 'On';
+                sharedFeedFilters.value.wrist.Muted = 'On';
+                sharedFeedFilters.value.wrist.Unmuted = 'On';
             }
-            if (!state.sharedFeedFilters.noty['group.announcement']) {
-                state.sharedFeedFilters.noty['group.announcement'] = 'On';
-                state.sharedFeedFilters.noty['group.informative'] = 'On';
-                state.sharedFeedFilters.noty['group.invite'] = 'On';
-                state.sharedFeedFilters.noty['group.joinRequest'] = 'Off';
-                state.sharedFeedFilters.wrist['group.announcement'] = 'On';
-                state.sharedFeedFilters.wrist['group.informative'] = 'On';
-                state.sharedFeedFilters.wrist['group.invite'] = 'On';
-                state.sharedFeedFilters.wrist['group.joinRequest'] = 'On';
+            if (!sharedFeedFilters.value.noty['group.announcement']) {
+                sharedFeedFilters.value.noty['group.announcement'] = 'On';
+                sharedFeedFilters.value.noty['group.informative'] = 'On';
+                sharedFeedFilters.value.noty['group.invite'] = 'On';
+                sharedFeedFilters.value.noty['group.joinRequest'] = 'Off';
+                sharedFeedFilters.value.wrist['group.announcement'] = 'On';
+                sharedFeedFilters.value.wrist['group.informative'] = 'On';
+                sharedFeedFilters.value.wrist['group.invite'] = 'On';
+                sharedFeedFilters.value.wrist['group.joinRequest'] = 'On';
             }
-            if (!state.sharedFeedFilters.noty['group.queueReady']) {
-                state.sharedFeedFilters.noty['group.queueReady'] = 'On';
-                state.sharedFeedFilters.wrist['group.queueReady'] = 'On';
+            if (!sharedFeedFilters.value.noty['group.queueReady']) {
+                sharedFeedFilters.value.noty['group.queueReady'] = 'On';
+                sharedFeedFilters.value.wrist['group.queueReady'] = 'On';
             }
-            if (!state.sharedFeedFilters.noty['instance.closed']) {
-                state.sharedFeedFilters.noty['instance.closed'] = 'On';
-                state.sharedFeedFilters.wrist['instance.closed'] = 'On';
+            if (!sharedFeedFilters.value.noty['instance.closed']) {
+                sharedFeedFilters.value.noty['instance.closed'] = 'On';
+                sharedFeedFilters.value.wrist['instance.closed'] = 'On';
             }
-            if (!state.sharedFeedFilters.noty.External) {
-                state.sharedFeedFilters.noty.External = 'On';
-                state.sharedFeedFilters.wrist.External = 'On';
+            if (!sharedFeedFilters.value.noty.External) {
+                sharedFeedFilters.value.noty.External = 'On';
+                sharedFeedFilters.value.wrist.External = 'On';
             }
-            if (!state.sharedFeedFilters.noty.groupChange) {
-                state.sharedFeedFilters.noty.groupChange = 'On';
-                state.sharedFeedFilters.wrist.groupChange = 'On';
+            if (!sharedFeedFilters.value.noty.groupChange) {
+                sharedFeedFilters.value.noty.groupChange = 'On';
+                sharedFeedFilters.value.wrist.groupChange = 'On';
             }
-            if (!state.sharedFeedFilters.noty['group.transfer']) {
-                state.sharedFeedFilters.noty['group.transfer'] = 'On';
-                state.sharedFeedFilters.wrist['group.transfer'] = 'On';
+            if (!sharedFeedFilters.value.noty['group.transfer']) {
+                sharedFeedFilters.value.noty['group.transfer'] = 'On';
+                sharedFeedFilters.value.wrist['group.transfer'] = 'On';
             }
-            if (!state.sharedFeedFilters.noty.boop) {
-                state.sharedFeedFilters.noty.boop = 'Off';
-                state.sharedFeedFilters.wrist.boop = 'On';
+            if (!sharedFeedFilters.value.noty.boop) {
+                sharedFeedFilters.value.noty.boop = 'Off';
+                sharedFeedFilters.value.wrist.boop = 'On';
             }
         }
         function setNotificationTTSVoice(index) {
-            state.notificationTTSVoice = index;
+            notificationTTSVoice.value = index;
             configRepository.setString(
                 'VRCX_notificationTTSVoice',
-                state.notificationTTSVoice.toString()
+                notificationTTSVoice.value.toString()
             );
         }
 
@@ -367,15 +325,15 @@ export const useNotificationsSettingsStore = defineStore(
             if (WINDOWS) {
                 voices = speechSynthesis.getVoices();
             } else {
-                voices = state.TTSvoices;
+                voices = TTSvoices.value;
             }
             if (voices.length === 0) {
                 return '';
             }
-            if (state.notificationTTSVoice >= voices.length) {
+            if (notificationTTSVoice.value >= voices.length) {
                 setNotificationTTSVoice(0);
             }
-            return voices[state.notificationTTSVoice].name;
+            return voices[notificationTTSVoice.value].name;
         }
 
         async function changeTTSVoice(index) {
@@ -384,7 +342,7 @@ export const useNotificationsSettingsStore = defineStore(
             if (WINDOWS) {
                 voices = speechSynthesis.getVoices();
             } else {
-                voices = state.TTSvoices;
+                voices = TTSvoices.value;
             }
             if (voices.length === 0) {
                 return;
@@ -395,7 +353,7 @@ export const useNotificationsSettingsStore = defineStore(
         }
 
         function updateTTSVoices() {
-            state.TTSvoices = speechSynthesis.getVoices();
+            TTSvoices.value = speechSynthesis.getVoices();
             if (LINUX) {
                 const voices = speechSynthesis.getVoices();
                 let uniqueVoices = [];
@@ -407,7 +365,7 @@ export const useNotificationsSettingsStore = defineStore(
                 uniqueVoices = uniqueVoices.filter((v) =>
                     v.lang.startsWith('en')
                 );
-                state.TTSvoices = uniqueVoices;
+                TTSvoices.value = uniqueVoices;
             }
         }
         async function saveNotificationTTS(value) {
@@ -424,7 +382,7 @@ export const useNotificationsSettingsStore = defineStore(
 
         function testNotificationTTS() {
             speechSynthesis.cancel();
-            speak(state.notificationTTSTest);
+            speak(notificationTTSTest.value);
         }
 
         function speak(text) {
@@ -434,8 +392,8 @@ export const useNotificationsSettingsStore = defineStore(
                 return;
             }
             let index = 0;
-            if (state.notificationTTSVoice < voices.length) {
-                index = state.notificationTTSVoice;
+            if (notificationTTSVoice.value < voices.length) {
+                index = notificationTTSVoice.value;
             }
             tts.voice = voices[index];
             tts.text = text;
@@ -450,7 +408,7 @@ export const useNotificationsSettingsStore = defineStore(
                     distinguishCancelAndClose: true,
                     confirmButtonText: t('prompt.notification_timeout.ok'),
                     cancelButtonText: t('prompt.notification_timeout.cancel'),
-                    inputValue: state.notificationTimeout / 1000,
+                    inputValue: notificationTimeout.value / 1000,
                     inputPattern: /\d+$/,
                     inputErrorMessage: t(
                         'prompt.notification_timeout.input_error'
@@ -459,12 +417,12 @@ export const useNotificationsSettingsStore = defineStore(
             )
                 .then(async ({ value }) => {
                     if (value && !isNaN(value)) {
-                        state.notificationTimeout = Math.trunc(
+                        notificationTimeout.value = Math.trunc(
                             Number(value) * 1000
                         );
                         await configRepository.setString(
                             'VRCX_notificationTimeout',
-                            state.notificationTimeout.toString()
+                            notificationTimeout.value.toString()
                         );
                         vrStore.updateVRConfigVars();
                     }
@@ -473,8 +431,6 @@ export const useNotificationsSettingsStore = defineStore(
         }
 
         return {
-            state,
-
             overlayToast,
             openVR,
             overlayNotifications,

src/stores/settings/wristOverlay.js

@@ -1,37 +1,35 @@
 import { defineStore } from 'pinia';
-import { computed, reactive } from 'vue';
+import { ref } from 'vue';
 import configRepository from '../../service/config';
 
 export const useWristOverlaySettingsStore = defineStore(
     'WristOverlaySettings',
     () => {
-        const state = reactive({
-            overlayWrist: true,
-            hidePrivateFromFeed: false,
-            openVRAlways: false,
-            overlaybutton: false,
-            overlayHand: '0',
-            vrBackgroundEnabled: false,
-            minimalFeed: true,
-            hideDevicesFromFeed: false,
-            vrOverlayCpuUsage: false,
-            hideUptimeFromFeed: false,
-            pcUptimeOnFeed: false
-        });
+        const overlayWrist = ref(true);
+        const hidePrivateFromFeed = ref(false);
+        const openVRAlways = ref(false);
+        const overlaybutton = ref(false);
+        const overlayHand = ref('0');
+        const vrBackgroundEnabled = ref(false);
+        const minimalFeed = ref(true);
+        const hideDevicesFromFeed = ref(false);
+        const vrOverlayCpuUsage = ref(false);
+        const hideUptimeFromFeed = ref(false);
+        const pcUptimeOnFeed = ref(false);
 
         async function initWristOverlaySettings() {
             const [
-                overlayWrist,
-                hidePrivateFromFeed,
-                openVRAlways,
-                overlaybutton,
-                overlayHand,
-                vrBackgroundEnabled,
-                minimalFeed,
-                hideDevicesFromFeed,
-                vrOverlayCpuUsage,
-                hideUptimeFromFeed,
-                pcUptimeOnFeed
+                overlayWristConfig,
+                hidePrivateFromFeedConfig,
+                openVRAlwaysConfig,
+                overlaybuttonConfig,
+                overlayHandConfig,
+                vrBackgroundEnabledConfig,
+                minimalFeedConfig,
+                hideDevicesFromFeedConfig,
+                vrOverlayCpuUsageConfig,
+                hideUptimeFromFeedConfig,
+                pcUptimeOnFeedConfig
             ] = await Promise.all([
                 configRepository.getBool('VRCX_overlayWrist', false),
                 configRepository.getBool('VRCX_hidePrivateFromFeed', false),
@@ -46,55 +44,43 @@ export const useWristOverlaySettingsStore = defineStore(
                 configRepository.getBool('VRCX_pcUptimeOnFeed', false)
             ]);
 
-            state.overlayWrist = overlayWrist;
-            state.hidePrivateFromFeed = hidePrivateFromFeed;
-            state.openVRAlways = openVRAlways;
-            state.overlaybutton = overlaybutton;
-            state.overlayHand = String(overlayHand);
-            state.vrBackgroundEnabled = vrBackgroundEnabled;
-            state.minimalFeed = minimalFeed;
-            state.hideDevicesFromFeed = hideDevicesFromFeed;
-            state.vrOverlayCpuUsage = vrOverlayCpuUsage;
-            state.hideUptimeFromFeed = hideUptimeFromFeed;
-            state.pcUptimeOnFeed = pcUptimeOnFeed;
+            overlayWrist.value = overlayWristConfig;
+            hidePrivateFromFeed.value = hidePrivateFromFeedConfig;
+            openVRAlways.value = openVRAlwaysConfig;
+            overlaybutton.value = overlaybuttonConfig;
+            overlayHand.value = String(overlayHandConfig);
+            vrBackgroundEnabled.value = vrBackgroundEnabledConfig;
+            minimalFeed.value = minimalFeedConfig;
+            hideDevicesFromFeed.value = hideDevicesFromFeedConfig;
+            vrOverlayCpuUsage.value = vrOverlayCpuUsageConfig;
+            hideUptimeFromFeed.value = hideUptimeFromFeedConfig;
+            pcUptimeOnFeed.value = pcUptimeOnFeedConfig;
         }
 
-        const overlayWrist = computed(() => state.overlayWrist);
-        const hidePrivateFromFeed = computed(() => state.hidePrivateFromFeed);
-        const openVRAlways = computed(() => state.openVRAlways);
-        const overlaybutton = computed(() => state.overlaybutton);
-        const overlayHand = computed(() => state.overlayHand);
-        const vrBackgroundEnabled = computed(() => state.vrBackgroundEnabled);
-        const minimalFeed = computed(() => state.minimalFeed);
-        const hideDevicesFromFeed = computed(() => state.hideDevicesFromFeed);
-        const vrOverlayCpuUsage = computed(() => state.vrOverlayCpuUsage);
-        const hideUptimeFromFeed = computed(() => state.hideUptimeFromFeed);
-        const pcUptimeOnFeed = computed(() => state.pcUptimeOnFeed);
-
         function setOverlayWrist() {
-            state.overlayWrist = !state.overlayWrist;
-            configRepository.setBool('VRCX_overlayWrist', state.overlayWrist);
+            overlayWrist.value = !overlayWrist.value;
+            configRepository.setBool('VRCX_overlayWrist', overlayWrist.value);
         }
         function setHidePrivateFromFeed() {
-            state.hidePrivateFromFeed = !state.hidePrivateFromFeed;
+            hidePrivateFromFeed.value = !hidePrivateFromFeed.value;
             configRepository.setBool(
                 'VRCX_hidePrivateFromFeed',
-                state.hidePrivateFromFeed
+                hidePrivateFromFeed.value
             );
         }
         function setOpenVRAlways() {
-            state.openVRAlways = !state.openVRAlways;
-            configRepository.setBool('openVRAlways', state.openVRAlways);
+            openVRAlways.value = !openVRAlways.value;
+            configRepository.setBool('openVRAlways', openVRAlways.value);
         }
         function setOverlaybutton() {
-            state.overlaybutton = !state.overlaybutton;
-            configRepository.setBool('VRCX_overlaybutton', state.overlaybutton);
+            overlaybutton.value = !overlaybutton.value;
+            configRepository.setBool('VRCX_overlaybutton', overlaybutton.value);
         }
         /**
          * @param {string} value
          */
         function setOverlayHand(value) {
-            state.overlayHand = value;
+            overlayHand.value = value;
             let overlayHandInt = parseInt(value, 10);
             if (isNaN(overlayHandInt)) {
                 overlayHandInt = 0;
@@ -102,50 +88,48 @@ export const useWristOverlaySettingsStore = defineStore(
             configRepository.setInt('VRCX_overlayHand', overlayHandInt);
         }
         function setVrBackgroundEnabled() {
-            state.vrBackgroundEnabled = !state.vrBackgroundEnabled;
+            vrBackgroundEnabled.value = !vrBackgroundEnabled.value;
             configRepository.setBool(
                 'VRCX_vrBackgroundEnabled',
-                state.vrBackgroundEnabled
+                vrBackgroundEnabled.value
             );
         }
         function setMinimalFeed() {
-            state.minimalFeed = !state.minimalFeed;
-            configRepository.setBool('VRCX_minimalFeed', state.minimalFeed);
+            minimalFeed.value = !minimalFeed.value;
+            configRepository.setBool('VRCX_minimalFeed', minimalFeed.value);
         }
         function setHideDevicesFromFeed() {
-            state.hideDevicesFromFeed = !state.hideDevicesFromFeed;
+            hideDevicesFromFeed.value = !hideDevicesFromFeed.value;
             configRepository.setBool(
                 'VRCX_hideDevicesFromFeed',
-                state.hideDevicesFromFeed
+                hideDevicesFromFeed.value
             );
         }
         function setVrOverlayCpuUsage() {
-            state.vrOverlayCpuUsage = !state.vrOverlayCpuUsage;
+            vrOverlayCpuUsage.value = !vrOverlayCpuUsage.value;
             configRepository.setBool(
                 'VRCX_vrOverlayCpuUsage',
-                state.vrOverlayCpuUsage
+                vrOverlayCpuUsage.value
             );
         }
         function setHideUptimeFromFeed() {
-            state.hideUptimeFromFeed = !state.hideUptimeFromFeed;
+            hideUptimeFromFeed.value = !hideUptimeFromFeed.value;
             configRepository.setBool(
                 'VRCX_hideUptimeFromFeed',
-                state.hideUptimeFromFeed
+                hideUptimeFromFeed.value
             );
         }
         function setPcUptimeOnFeed() {
-            state.pcUptimeOnFeed = !state.pcUptimeOnFeed;
+            pcUptimeOnFeed.value = !pcUptimeOnFeed.value;
             configRepository.setBool(
                 'VRCX_pcUptimeOnFeed',
-                state.pcUptimeOnFeed
+                pcUptimeOnFeed.value
             );
         }
 
         initWristOverlaySettings();
 
         return {
-            state,
-
             overlayWrist,
             hidePrivateFromFeed,
             openVRAlways,