refactor: app.js (#1291)

* refactor: frontend

* Fix avatar gallery sort

* Update .NET dependencies

* Update npm dependencies

electron v37.1.0

* bulkRefreshFriends

* fix dark theme

* Remove crowdin

* Fix config.json dialog not updating

* VRCX log file fixes & add Cef log

* Remove SharedVariable, fix startup

* Revert init theme change

* Logging date not working? Fix WinformThemer designer error

* Add Cef request hander, no more escaping main page

* clean

* fix

* fix

* clean

* uh

* Apply thememode at startup, fixes random user colours

* Split database into files

* Instance info remove empty lines

* Open external VRC links with VRCX

* Electron fixes

* fix userdialog style

* ohhhh

* fix store

* fix store

* fix: load all group members after kicking a user

* fix: world dialog favorite button style

* fix: Clear VRCX Cache Timer input value

* clean

* Fix VR overlay

* Fix VR overlay 2

* Fix Discord discord rich presence for RPC worlds

* Clean up age verified user tags

* Fix playerList being occupied after program reload

* no `this`

* Fix login stuck loading

* writable: false

* Hide dialogs on logout

* add flush sync option

* rm LOGIN event

* rm LOGOUT event

* remove duplicate event listeners

* remove duplicate event listeners

* clean

* remove duplicate event listeners

* clean

* fix theme style

* fix t

* clearable

* clean

* fix ipcEvent

* Small changes

* Popcorn Palace support

* Remove checkActiveFriends

* Clean up

* Fix dragEnterCef

* Block API requests when not logged in

* Clear state on login & logout

* Fix worldDialog instances not updating

* use <script setup>

* Fix avatar change event, CheckGameRunning at startup

* Fix image dragging

* fix

* Remove PWI

* fix updateLoop

* add webpack-dev-server to dev environment

* rm unnecessary chunks

* use <script setup>

* webpack-dev-server changes

* use <script setup>

* use <script setup>

* Fix UGC text size

* Split login event

* t

* use <script setup>

* fix

* Update .gitignore and enable checkJs in jsconfig

* fix i18n t

* use <script setup>

* use <script setup>

* clean

* global types

* fix

* use checkJs for debugging

* Add watchState for login watchers

* fix .vue template

* type fixes

* rm Vue.filter

* Cef v138.0.170, VC++ 2022

* Settings fixes

* Remove 'USER:CURRENT'

* clean up 2FA callbacks

* remove userApply

* rm i18n import

* notification handling to use notification store methods

* refactor favorite handling to use favorite store methods and clean up event emissions

* refactor moderation handling to use dedicated functions for player moderation events

* refactor friend handling to use dedicated functions for friend events

* Fix program startup, move lang init

* Fix friend state

* Fix status change error

* Fix user notes diff

* fix

* rm group event

* rm auth event

* rm avatar event

* clean

* clean

* getUser

* getFriends

* getFavoriteWorlds, getFavoriteAvatars

* AvatarGalleryUpload btn style & package.json update

* Fix friend requests

* Apply user

* Apply world

* Fix note diff

* Fix VR overlay

* Fixes

* Update build scripts

* Apply avatar

* Apply instance

* Apply group

* update hidden VRC+ badge

* Fix sameInstance "private"

* fix 502/504 API errors

* fix 502/504 API errors

* clean

* Fix friend in same instance on orange showing twice in friends list

* Add back in broken friend state repair methods

* add types

---------

Co-authored-by: Natsumi <cmcooper123@hotmail.com>

src/views/Settings/dialogs/RegistryBackupDialog.vue

@@ -9,13 +9,13 @@
         <div style="margin-top: 10px">
             <div style="display: flex; align-items: center; justify-content: space-between; font-size: 12px">
                 <span class="name" style="margin-right: 24px">{{ t('dialog.registry_backup.auto_backup') }}</span>
-                <el-switch v-model="vrcRegistryAutoBackup" @change="saveVrcRegistryAutoBackup"></el-switch>
+                <el-switch v-model="vrcRegistryAutoBackup" @change="setVrcRegistryAutoBackup"></el-switch>
             </div>
             <data-tables v-bind="registryBackupTable" style="margin-top: 10px">
                 <el-table-column :label="t('dialog.registry_backup.name')" prop="name"></el-table-column>
                 <el-table-column :label="t('dialog.registry_backup.date')" prop="date">
                     <template #default="scope">
-                        <span>{{ scope.row.date | formatDate('long') }}</span>
+                        <span>{{ formatDateFilter(scope.row.date, 'long') }}</span>
                     </template>
                 </el-table-column>
                 <el-table-column :label="t('dialog.registry_backup.action')" width="90" align="right">
@@ -71,32 +71,25 @@
 </template>
 
 <script setup>
+    import { storeToRefs } from 'pinia';
     import { getCurrentInstance, ref, watch } from 'vue';
     import { useI18n } from 'vue-i18n-bridge';
-    import utils from '../../../classes/utils';
-    import { downloadAndSaveJson } from '../../../composables/shared/utils';
     import configRepository from '../../../service/config';
+    import { downloadAndSaveJson, removeFromArray, formatDateFilter } from '../../../shared/utils';
+
+    import { useAppearanceSettingsStore, useVrcxStore, useAdvancedSettingsStore } from '../../../stores';
+
+    const { hideTooltips } = storeToRefs(useAppearanceSettingsStore());
+    const { backupVrcRegistry } = useVrcxStore();
+    const { isRegistryBackupDialogVisible } = storeToRefs(useVrcxStore());
+    const { vrcRegistryAutoBackup } = storeToRefs(useAdvancedSettingsStore());
+    const { setVrcRegistryAutoBackup } = useAdvancedSettingsStore();
 
     const { t } = useI18n();
 
     const instance = getCurrentInstance();
     const { $confirm, $message, $prompt } = instance.proxy;
 
-    const props = defineProps({
-        isRegistryBackupDialogVisible: {
-            type: Boolean
-        },
-        hideTooltips: {
-            type: Boolean,
-            default: false
-        },
-        backupVrcRegistry: {
-            type: Function
-        }
-    });
-
-    const emit = defineEmits(['update:isRegistryBackupDialogVisible']);
-
     const registryBackupTable = ref({
         data: [],
         tableProps: {
@@ -110,10 +103,8 @@
         layout: 'table'
     });
 
-    const vrcRegistryAutoBackup = ref(false);
-
     watch(
-        () => props.isRegistryBackupDialogVisible,
+        () => isRegistryBackupDialogVisible.value,
         (newVal) => {
             if (newVal) {
                 updateRegistryBackupDialog();
@@ -121,23 +112,11 @@
         }
     );
 
-    setVrcRegistryAutoBackup();
-
-    function setVrcRegistryAutoBackup() {
-        configRepository.getBool('VRCX_vrcRegistryAutoBackup', true).then((value) => {
-            vrcRegistryAutoBackup.value = value;
-        });
-    }
-
     async function updateRegistryBackupDialog() {
-        let backupsJson = await configRepository.getString('VRCX_VRChatRegistryBackups');
+        const backupsJson = await configRepository.getString('VRCX_VRChatRegistryBackups');
         registryBackupTable.value.data = JSON.parse(backupsJson || '[]');
     }
 
-    async function saveVrcRegistryAutoBackup() {
-        await configRepository.setBool('VRCX_vrcRegistryAutoBackup', vrcRegistryAutoBackup.value);
-    }
-
     function restoreVrcRegistryBackup(row) {
         $confirm('Continue? Restore Backup', 'Confirm', {
             confirmButtonText: 'Confirm',
@@ -172,7 +151,7 @@
 
     async function deleteVrcRegistryBackup(row) {
         const backups = registryBackupTable.value.data;
-        utils.removeFromArray(backups, row);
+        removeFromArray(backups, row);
         await configRepository.setString('VRCX_VRChatRegistryBackups', JSON.stringify(backups));
         await updateRegistryBackupDialog();
     }
@@ -197,7 +176,7 @@
     }
 
     async function handleBackupVrcRegistry(name) {
-        await props.backupVrcRegistry(name);
+        await backupVrcRegistry(name);
         await updateRegistryBackupDialog();
     }
 
@@ -295,6 +274,6 @@
     }
 
     function closeDialog() {
-        emit('update:isRegistryBackupDialogVisible', false);
+        isRegistryBackupDialogVisible.value = false;
     }
 </script>