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/components/dialogs/UserDialog/BioDialog.vue

@@ -20,7 +20,6 @@
             <el-input
                 v-for="(link, index) in bioDialog.bioLinks"
                 :key="index"
-                v-model="bioDialog.bioLinks[index]"
                 :value="link"
                 size="small"
                 style="margin-top: 5px">
@@ -52,7 +51,7 @@
     import { getCurrentInstance } from 'vue';
     import { useI18n } from 'vue-i18n-bridge';
     import { userRequest } from '../../../api';
-    import { getFaviconUrl } from '../../../composables/shared/utils';
+    import { getFaviconUrl } from '../../../shared/utils';
 
     const { t } = useI18n();
     const { $message } = getCurrentInstance().proxy;

src/components/dialogs/UserDialog/LanguageDialog.vue

@@ -6,7 +6,7 @@
         width="400px"
         append-to-body>
         <div v-loading="languageDialog.loading">
-            <div v-for="item in API.currentUser.$languages" :key="item.key" style="margin: 6px 0">
+            <div v-for="item in currentUser.$languages" :key="item.key" style="margin: 6px 0">
                 <el-tag
                     size="small"
                     type="info"
@@ -23,9 +23,7 @@
             </div>
             <el-select
                 value=""
-                :disabled="
-                    languageDialog.loading || (API.currentUser.$languages && API.currentUser.$languages.length === 3)
-                "
+                :disabled="languageDialog.loading || (currentUser.$languages && currentUser.$languages.length === 3)"
                 :placeholder="t('dialog.language.select_language')"
                 style="margin-top: 14px"
                 @change="addUserLanguage">
@@ -46,29 +44,21 @@
 </template>
 
 <script setup>
-    import { inject } from 'vue';
-
+    import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n-bridge';
     import { userRequest } from '../../../api';
-
-    import { languageClass } from '../../../composables/user/utils';
+    import { languageClass } from '../../../shared/utils';
+    import { useUserStore } from '../../../stores';
 
     const { t } = useI18n();
 
-    const API = inject('API');
-
-    const props = defineProps({
-        languageDialog: {
-            type: Object,
-            required: true
-        }
-    });
+    const { languageDialog, currentUser } = storeToRefs(useUserStore());
 
     function removeUserLanguage(language) {
         if (language !== String(language)) {
             return;
         }
-        const D = props.languageDialog;
+        const D = languageDialog.value;
         D.loading = true;
         userRequest
             .removeUserTags({
@@ -83,7 +73,7 @@
         if (language !== String(language)) {
             return;
         }
-        const D = props.languageDialog;
+        const D = languageDialog.value;
         D.loading = true;
         userRequest
             .addUserTags({

src/components/dialogs/UserDialog/PreviousInstancesUserDialog.vue

@@ -15,22 +15,20 @@
         <data-tables v-loading="loading" v-bind="previousInstancesUserDialogTable" style="margin-top: 10px">
             <el-table-column :label="$t('table.previous_instances.date')" prop="created_at" sortable width="170">
                 <template slot-scope="scope">
-                    <span>{{ scope.row.created_at | formatDate('long') }}</span>
+                    <span>{{ formatDateFilter(scope.row.created_at, 'long') }}</span>
                 </template>
             </el-table-column>
             <el-table-column :label="$t('table.previous_instances.world')" prop="name" sortable>
                 <template slot-scope="scope">
-                    <location
+                    <Location
                         :location="scope.row.location"
                         :hint="scope.row.worldName"
-                        :grouphint="scope.row.groupName"></location>
+                        :grouphint="scope.row.groupName" />
                 </template>
             </el-table-column>
             <el-table-column :label="$t('table.previous_instances.instance_creator')" prop="location" width="170">
                 <template slot-scope="scope">
-                    <display-name
-                        :userid="scope.row.$location.userId"
-                        :location="scope.row.$location.tag"></display-name>
+                    <DisplayName :userid="scope.row.$location.userId" :location="scope.row.$location.tag" />
                 </template>
             </el-table-column>
             <el-table-column :label="$t('table.previous_instances.time')" prop="time" width="100" sortable>
@@ -69,138 +67,115 @@
     </safe-dialog>
 </template>
 
-<script>
-    import utils from '../../../classes/utils';
-    import { parseLocation } from '../../../composables/instance/utils';
-    import database from '../../../service/database';
-    import Location from '../../Location.vue';
+<script setup>
+    import { storeToRefs } from 'pinia';
+    import { computed, getCurrentInstance, nextTick, reactive, ref, watch } from 'vue';
+    import { database } from '../../../service/database';
+    import {
+        adjustDialogZ,
+        compareByCreatedAt,
+        parseLocation,
+        removeFromArray,
+        timeToText,
+        formatDateFilter
+    } from '../../../shared/utils';
+    import { useInstanceStore, useLaunchStore, useUiStore } from '../../../stores';
 
-    export default {
-        name: 'PreviousInstancesUserDialog',
-        components: {
-            Location
-        },
-        inject: ['adjustDialogZ', 'showLaunchDialog', 'showPreviousInstancesInfoDialog'],
-        props: {
-            previousInstancesUserDialog: {
-                type: Object,
-                default: () => ({
-                    visible: false,
-                    userRef: {},
-                    loading: false,
-                    forceUpdate: 0,
-                    previousInstances: [],
-                    previousInstancesTable: {
-                        data: [],
-                        filters: [
-                            {
-                                prop: 'displayName',
-                                value: ''
-                            }
-                        ],
-                        tableProps: {
-                            stripe: true,
-                            size: 'mini',
-                            height: '400px'
-                        }
-                    }
-                })
-            },
-            shiftHeld: {
-                type: Boolean,
-                default: false
-            }
-        },
-        data() {
-            return {
-                previousInstancesUserDialogTable: {
+    const props = defineProps({
+        previousInstancesUserDialog: {
+            type: Object,
+            default: () => ({
+                visible: false,
+                userRef: {},
+                loading: false,
+                forceUpdate: 0,
+                previousInstances: [],
+                previousInstancesTable: {
                     data: [],
-                    filters: [
-                        {
-                            prop: 'worldName',
-                            value: ''
-                        }
-                    ],
-                    tableProps: {
-                        stripe: true,
-                        size: 'mini',
-                        defaultSort: {
-                            prop: 'created_at',
-                            order: 'descending'
-                        }
-                    },
-                    pageSize: 10,
-                    paginationProps: {
-                        small: true,
-                        layout: 'sizes,prev,pager,next,total',
-                        pageSizes: [10, 25, 50, 100]
-                    }
-                },
-                loading: false
-            };
-        },
-        computed: {
-            isVisible: {
-                get() {
-                    return this.previousInstancesUserDialog.visible;
-                },
-                set(value) {
-                    this.$emit('update:previous-instances-user-dialog', {
-                        ...this.previousInstancesUserDialog,
-                        visible: value
-                    });
+                    filters: [{ prop: 'displayName', value: '' }],
+                    tableProps: { stripe: true, size: 'mini', height: '400px' }
                 }
-            }
+            })
+        }
+    });
+
+    const emit = defineEmits(['update:previous-instances-user-dialog']);
+    const { proxy } = getCurrentInstance();
+
+    const loading = ref(false);
+    const previousInstancesUserDialogTable = reactive({
+        data: [],
+        filters: [{ prop: 'worldName', value: '' }],
+        tableProps: {
+            stripe: true,
+            size: 'mini',
+            defaultSort: { prop: 'created_at', order: 'descending' }
         },
-        watch: {
-            'previousInstancesUserDialog.openFlg'() {
-                if (this.previousInstancesUserDialog.visible) {
-                    this.$nextTick(() => {
-                        this.adjustDialogZ(this.$refs.previousInstancesUserDialog.$el);
-                    });
-                    this.refreshPreviousInstancesUserTable();
-                }
-            }
-        },
-        methods: {
-            refreshPreviousInstancesUserTable() {
-                this.loading = true;
-                database.getpreviousInstancesByUserId(this.previousInstancesUserDialog.userRef).then((data) => {
-                    const array = [];
-                    for (const ref of data.values()) {
-                        ref.$location = parseLocation(ref.location);
-                        if (ref.time > 0) {
-                            ref.timer = utils.timeToText(ref.time);
-                        } else {
-                            ref.timer = '';
-                        }
-                        array.push(ref);
-                    }
-                    array.sort(utils.compareByCreatedAt);
-                    this.previousInstancesUserDialogTable.data = array;
-                    this.loading = false;
-                });
-            },
-            deleteGameLogUserInstance(row) {
-                database.deleteGameLogInstance({
-                    id: this.previousInstancesUserDialog.userRef.id,
-                    displayName: this.previousInstancesUserDialog.userRef.displayName,
-                    location: row.location
-                });
-                utils.removeFromArray(this.previousInstancesUserDialogTable.data, row);
-            },
-            deleteGameLogUserInstancePrompt(row) {
-                this.$confirm('Continue? Delete User From GameLog Instance', 'Confirm', {
-                    confirmButtonText: 'Confirm',
-                    cancelButtonText: 'Cancel',
-                    type: 'info',
-                    callback: (action) => {
-                        if (action === 'confirm') {
-                            this.deleteGameLogUserInstance(row);
-                        }
-                    }
+        pageSize: 10,
+        paginationProps: {
+            small: true,
+            layout: 'sizes,prev,pager,next,total',
+            pageSizes: [10, 25, 50, 100]
+        }
+    });
+
+    const { showLaunchDialog } = useLaunchStore();
+    const { showPreviousInstancesInfoDialog } = useInstanceStore();
+    const { shiftHeld } = storeToRefs(useUiStore());
+
+    const isVisible = computed({
+        get: () => props.previousInstancesUserDialog.visible,
+        set: (value) => {
+            emit('update:previous-instances-user-dialog', {
+                ...props.previousInstancesUserDialog,
+                visible: value
+            });
+        }
+    });
+
+    const refreshPreviousInstancesUserTable = async () => {
+        loading.value = true;
+        const data = await database.getPreviousInstancesByUserId(props.previousInstancesUserDialog.userRef);
+        const array = [];
+        for (const item of data.values()) {
+            item.$location = parseLocation(item.location);
+            item.timer = item.time > 0 ? timeToText(item.time) : '';
+            array.push(item);
+        }
+        array.sort(compareByCreatedAt);
+        previousInstancesUserDialogTable.data = array;
+        loading.value = false;
+    };
+
+    watch(
+        () => props.previousInstancesUserDialog.openFlg,
+        () => {
+            if (props.previousInstancesUserDialog.visible) {
+                nextTick(() => {
+                    adjustDialogZ(proxy.$refs.previousInstancesUserDialog.$el);
                 });
+                refreshPreviousInstancesUserTable();
             }
         }
-    };
+    );
+
+    function deleteGameLogUserInstance(row) {
+        database.deleteGameLogInstance({
+            id: props.previousInstancesUserDialog.userRef.id,
+            displayName: props.previousInstancesUserDialog.userRef.displayName,
+            location: row.location
+        });
+        removeFromArray(previousInstancesUserDialogTable.data, row);
+    }
+
+    function deleteGameLogUserInstancePrompt(row) {
+        proxy.$confirm('Continue? Delete User From GameLog Instance', 'Confirm', {
+            confirmButtonText: 'Confirm',
+            cancelButtonText: 'Cancel',
+            type: 'info',
+            callback: (action) => {
+                if (action === 'confirm') deleteGameLogUserInstance(row);
+            }
+        });
+    }
 </script>

src/components/dialogs/UserDialog/SendInviteRequestDialog.vue

@@ -6,7 +6,7 @@
         width="800px"
         append-to-body
         @close="cancelSendInviteRequest">
-        <template v-if="API.currentUser.$isVRCPlus">
+        <template v-if="currentUser.$isVRCPlus">
             <input class="inviteImageUploadButton" type="file" accept="image/*" @change="inviteImageUpload" />
         </template>
 
@@ -45,7 +45,7 @@
             <el-button type="small" @click="cancelSendInviteRequest">{{
                 t('dialog.invite_request_message.cancel')
             }}</el-button>
-            <el-button type="small" @click="API.refreshInviteMessageTableData('request')">{{
+            <el-button type="small" @click="refreshInviteMessageTableData('request')">{{
                 t('dialog.invite_request_message.refresh')
             }}</el-button>
         </template>
@@ -53,37 +53,37 @@
             :visible.sync="isSendInviteConfirmDialogVisible"
             :send-invite-dialog="sendInviteDialog"
             :invite-dialog="inviteDialog"
-            :upload-image="uploadImage"
             @closeInviteDialog="closeInviteDialog" />
         <EditAndSendInviteDialog
             :edit-and-send-invite-dialog.sync="editAndSendInviteDialog"
             :send-invite-dialog="sendInviteDialog"
             :invite-dialog="inviteDialog"
-            :upload-image="uploadImage"
             @closeInviteDialog="closeInviteDialog" />
     </safe-dialog>
 </template>
 
 <script setup>
-    import { inject, ref } from 'vue';
+    import { storeToRefs } from 'pinia';
+    import { ref } from 'vue';
     import { useI18n } from 'vue-i18n-bridge';
+    import { useGalleryStore, useInviteStore, useUserStore } from '../../../stores';
     import EditAndSendInviteDialog from '../InviteDialog/EditAndSendInviteDialog.vue';
     import SendInviteConfirmDialog from '../InviteDialog/SendInviteConfirmDialog.vue';
 
     const { t } = useI18n();
 
-    const API = inject('API');
-    const inviteImageUpload = inject('inviteImageUpload');
+    const inviteStore = useInviteStore();
+    const { refreshInviteMessageTableData } = inviteStore;
+    const { inviteRequestMessageTable } = storeToRefs(inviteStore);
+    const galleryStore = useGalleryStore();
+    const { inviteImageUpload } = galleryStore;
+    const { currentUser } = storeToRefs(useUserStore());
 
     const props = defineProps({
         sendInviteRequestDialogVisible: {
             type: Boolean,
             default: false
         },
-        inviteRequestMessageTable: {
-            type: Object,
-            default: () => ({})
-        },
         sendInviteDialog: {
             type: Object,
             default: () => ({})
@@ -92,10 +92,6 @@
             type: Object,
             require: false,
             default: () => ({})
-        },
-        uploadImage: {
-            type: String,
-            default: ''
         }
     });
 
@@ -120,7 +116,6 @@
             visible: true
         };
     }
-
     function cancelSendInviteRequest() {
         emit('update:sendInviteRequestDialogVisible', false);
     }

src/components/dialogs/UserDialog/SocialStatusDialog.vue

@@ -34,7 +34,7 @@
                 <el-option :label="t('dialog.user.status.busy')" value="busy">
                     <i class="x-user-status busy"></i> {{ t('dialog.user.status.busy') }}
                 </el-option>
-                <el-option v-if="API.currentUser.$isModerator" :label="t('dialog.user.status.offline')" value="offline">
+                <el-option v-if="currentUser.$isModerator" :label="t('dialog.user.status.offline')" value="offline">
                     <i class="x-user-status offline"></i> {{ t('dialog.user.status.offline') }}
                 </el-option>
             </el-select>
@@ -44,6 +44,7 @@
                 :placeholder="t('dialog.social_status.status_placeholder')"
                 maxlength="32"
                 show-word-limit
+                clearable
                 style="display: block; margin-top: 10px"></el-input>
         </div>
 
@@ -56,13 +57,16 @@
 </template>
 
 <script setup>
-    import { inject, getCurrentInstance } from 'vue';
+    import { storeToRefs } from 'pinia';
+    import { getCurrentInstance } from 'vue';
     import { useI18n } from 'vue-i18n-bridge';
     import { userRequest } from '../../../api';
+    import { useUserStore } from '../../../stores';
 
     const { t } = useI18n();
     const { $message } = getCurrentInstance().proxy;
-    const API = inject('API');
+
+    const { currentUser } = storeToRefs(useUserStore());
 
     const props = defineProps({
         socialStatusDialog: {