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/InviteDialog/EditAndSendInviteDialog.vue

@@ -32,17 +32,20 @@
 </template>
 
 <script setup>
-    import { getCurrentInstance, inject } from 'vue';
+    import { storeToRefs } from 'pinia';
+    import { getCurrentInstance } from 'vue';
     import { useI18n } from 'vue-i18n-bridge';
     import { instanceRequest, inviteMessagesRequest, notificationRequest } from '../../../api';
-    import { parseLocation } from '../../../composables/instance/utils';
+    import { parseLocation } from '../../../shared/utils';
+    import { useGalleryStore, useUserStore } from '../../../stores';
 
     const { t } = useI18n();
     const instance = getCurrentInstance();
     const $message = instance.proxy.$message;
 
-    const API = inject('API');
-    const clearInviteImageUpload = inject('clearInviteImageUpload');
+    const { uploadImage } = storeToRefs(useGalleryStore());
+    const { clearInviteImageUpload } = useGalleryStore();
+    const { currentUser } = storeToRefs(useUserStore());
 
     const props = defineProps({
         editAndSendInviteDialog: {
@@ -57,9 +60,6 @@
             type: Object,
             required: false,
             default: () => ({})
-        },
-        uploadImage: {
-            type: String
         }
     });
 
@@ -85,7 +85,6 @@
                     throw err;
                 })
                 .then((args) => {
-                    API.$emit(`INVITE:${messageType.toUpperCase()}`, args);
                     if (args.json[slot].message === I.messageSlot.message) {
                         $message({
                             message: "VRChat API didn't update message, try again",
@@ -103,7 +102,7 @@
             const inviteLoop = () => {
                 if (J.userIds.length > 0) {
                     const receiverUserId = J.userIds.shift();
-                    if (receiverUserId === API.currentUser.id) {
+                    if (receiverUserId === currentUser.value.id) {
                         // can't invite self!?
                         const L = parseLocation(J.worldId);
                         instanceRequest
@@ -112,7 +111,7 @@
                                 worldId: L.worldId
                             })
                             .finally(inviteLoop);
-                    } else if (props.uploadImage) {
+                    } else if (uploadImage.value) {
                         notificationRequest
                             .sendInvitePhoto(
                                 {
@@ -149,7 +148,7 @@
             inviteLoop();
         } else if (messageType === 'invite') {
             I.params.messageSlot = slot;
-            if (props.uploadImage) {
+            if (uploadImage.value) {
                 notificationRequest
                     .sendInvitePhoto(I.params, I.userId)
                     .catch((err) => {
@@ -178,7 +177,7 @@
             }
         } else if (messageType === 'request') {
             I.params.requestSlot = slot;
-            if (props.uploadImage) {
+            if (uploadImage.value) {
                 notificationRequest
                     .sendRequestInvitePhoto(I.params, I.userId)
                     .catch((err) => {

src/components/dialogs/InviteDialog/InviteDialog.vue

@@ -6,7 +6,7 @@
         width="500px"
         append-to-body>
         <div v-if="inviteDialog.visible" v-loading="inviteDialog.loading">
-            <location :location="inviteDialog.worldId" :link="false"></location>
+            <Location :location="inviteDialog.worldId" :link="false" />
             <br />
             <el-button size="mini" style="margin-top: 10px" @click="addSelfToInvite">{{
                 t('dialog.invite.add_self')
@@ -34,17 +34,17 @@
                 filterable
                 :disabled="inviteDialog.loading"
                 style="width: 100%; margin-top: 15px">
-                <el-option-group v-if="API.currentUser" :label="t('side_panel.me')">
+                <el-option-group v-if="currentUser" :label="t('side_panel.me')">
                     <el-option
                         class="x-friend-item"
-                        :label="API.currentUser.displayName"
-                        :value="API.currentUser.id"
+                        :label="currentUser.displayName"
+                        :value="currentUser.id"
                         style="height: auto">
-                        <div :class="['avatar', userStatusClass(API.currentUser)]">
-                            <img v-lazy="userImage(API.currentUser)" />
+                        <div :class="['avatar', userStatusClass(currentUser)]">
+                            <img v-lazy="userImage(currentUser)" />
                         </div>
                         <div class="detail">
-                            <span class="name">{{ API.currentUser.displayName }}</span>
+                            <span class="name">{{ currentUser.displayName }}</span>
                         </div>
                     </el-option>
                 </el-option-group>
@@ -156,57 +156,35 @@
         </template>
         <SendInviteDialog
             :send-invite-dialog-visible.sync="sendInviteDialogVisible"
-            :invite-message-table="inviteMessageTable"
             :send-invite-dialog="sendInviteDialog"
             :invite-dialog="inviteDialog"
-            :upload-image="uploadImage"
             @closeInviteDialog="closeInviteDialog" />
     </safe-dialog>
 </template>
 
 <script setup>
-    import { getCurrentInstance, inject, ref } from 'vue';
+    import { storeToRefs } from 'pinia';
+    import { getCurrentInstance, ref } from 'vue';
     import { useI18n } from 'vue-i18n-bridge';
-    import { instanceRequest, inviteMessagesRequest, notificationRequest } from '../../../api';
-    import { parseLocation } from '../../../composables/instance/utils';
-    import Location from '../../Location.vue';
+    import { instanceRequest, notificationRequest } from '../../../api';
+    import { parseLocation, userImage, userStatusClass } from '../../../shared/utils';
+    import { useFriendStore, useGalleryStore, useInviteStore, useUserStore } from '../../../stores';
     import SendInviteDialog from './SendInviteDialog.vue';
 
+    const { vipFriends, onlineFriends, activeFriends } = storeToRefs(useFriendStore());
+    const { refreshInviteMessageTableData } = useInviteStore();
+    const { currentUser } = storeToRefs(useUserStore());
+    const { clearInviteImageUpload } = useGalleryStore();
+
     const { t } = useI18n();
     const instance = getCurrentInstance();
     const $message = instance.proxy.$message;
     const $confirm = instance.proxy.$confirm;
 
-    const userStatusClass = inject('userStatusClass');
-    const userImage = inject('userImage');
-    const API = inject('API');
-    const clearInviteImageUpload = inject('clearInviteImageUpload');
-
     const props = defineProps({
         inviteDialog: {
             type: Object,
             required: true
-        },
-        vipFriends: {
-            type: Array,
-            required: true
-        },
-        onlineFriends: {
-            type: Array,
-            required: true
-        },
-        activeFriends: {
-            type: Array,
-            required: true
-        },
-        // SendInviteDialog
-        inviteMessageTable: {
-            type: Object,
-            default: () => ({})
-        },
-        uploadImage: {
-            type: String,
-            default: ''
         }
     });
 
@@ -229,15 +207,15 @@
             userId,
             messageSlot: {}
         };
-        inviteMessagesRequest.refreshInviteMessageTableData('message');
+        refreshInviteMessageTableData('message');
         clearInviteImageUpload();
         sendInviteDialogVisible.value = true;
     }
 
     function addSelfToInvite() {
         const D = props.inviteDialog;
-        if (!D.userIds.includes(API.currentUser.id)) {
-            D.userIds.push(API.currentUser.id);
+        if (!D.userIds.includes(currentUser.value.id)) {
+            D.userIds.push(currentUser.value.id);
         }
     }
 
@@ -273,7 +251,7 @@
                 const inviteLoop = () => {
                     if (D.userIds.length > 0) {
                         const receiverUserId = D.userIds.shift();
-                        if (receiverUserId === API.currentUser.id) {
+                        if (receiverUserId === currentUser.value.id) {
                             // can't invite self!?
                             const L = parseLocation(D.worldId);
                             instanceRequest

src/components/dialogs/InviteDialog/SendInviteConfirmDialog.vue

@@ -22,18 +22,21 @@
 </template>
 
 <script setup>
-    import { getCurrentInstance, inject } from 'vue';
+    import { storeToRefs } from 'pinia';
+    import { getCurrentInstance } from 'vue';
     import { useI18n } from 'vue-i18n-bridge';
     import { instanceRequest, notificationRequest } from '../../../api';
-    import { parseLocation } from '../../../composables/instance/utils';
+    import { parseLocation } from '../../../shared/utils';
+    import { useGalleryStore, useUserStore } from '../../../stores';
 
     const { t } = useI18n();
 
     const instance = getCurrentInstance();
     const $message = instance.proxy.$message;
 
-    const API = inject('API');
-    const clearInviteImageUpload = inject('clearInviteImageUpload');
+    const { uploadImage } = storeToRefs(useGalleryStore());
+    const { clearInviteImageUpload } = useGalleryStore();
+    const { currentUser } = storeToRefs(useUserStore());
 
     const props = defineProps({
         visible: {
@@ -48,9 +51,6 @@
             type: Object,
             required: false,
             default: () => ({})
-        },
-        uploadImage: {
-            type: String
         }
     });
 
@@ -69,7 +69,7 @@
             const inviteLoop = () => {
                 if (J.userIds.length > 0) {
                     const receiverUserId = J.userIds.shift();
-                    if (receiverUserId === API.currentUser.id) {
+                    if (receiverUserId === currentUser.value.id) {
                         // can't invite self!?
                         const L = parseLocation(J.worldId);
                         instanceRequest
@@ -78,7 +78,7 @@
                                 worldId: L.worldId
                             })
                             .finally(inviteLoop);
-                    } else if (props.uploadImage) {
+                    } else if (uploadImage.value) {
                         notificationRequest
                             .sendInvitePhoto(
                                 {
@@ -115,7 +115,7 @@
             inviteLoop();
         } else if (messageType === 'invite') {
             D.params.messageSlot = slot;
-            if (props.uploadImage) {
+            if (uploadImage.value) {
                 notificationRequest
                     .sendInvitePhoto(D.params, D.userId)
                     .catch((err) => {
@@ -144,7 +144,7 @@
             }
         } else if (messageType === 'request') {
             D.params.requestSlot = slot;
-            if (props.uploadImage) {
+            if (uploadImage.value) {
                 notificationRequest
                     .sendRequestInvitePhoto(D.params, D.userId)
                     .catch((err) => {

src/components/dialogs/InviteDialog/SendInviteDialog.vue

@@ -6,7 +6,7 @@
         width="800px"
         append-to-body
         @close="cancelSendInvite">
-        <template v-if="API.currentUser.$isVRCPlus">
+        <template v-if="currentUser.$isVRCPlus">
             <!--            <template v-if="gallerySelectDialog.selectedFileId">-->
             <!--                <div style="display: inline-block; flex: none; margin-right: 5px">-->
             <!--                    <el-popover placement="right" width="500px" trigger="click">-->
@@ -70,7 +70,7 @@
             <el-button type="small" @click="cancelSendInvite">
                 {{ t('dialog.invite_message.cancel') }}
             </el-button>
-            <el-button type="small" @click="API.refreshInviteMessageTableData('message')">
+            <el-button type="small" @click="refreshInviteMessageTableData('message')">
                 {{ t('dialog.invite_message.refresh') }}
             </el-button>
         </template>
@@ -78,37 +78,35 @@
             :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 './EditAndSendInviteDialog.vue';
     import SendInviteConfirmDialog from './SendInviteConfirmDialog.vue';
 
     const { t } = useI18n();
 
-    const API = inject('API');
-    const inviteImageUpload = inject('inviteImageUpload');
+    const { refreshInviteMessageTableData } = useInviteStore();
+    const { inviteMessageTable } = storeToRefs(useInviteStore());
+    const { inviteImageUpload } = useGalleryStore();
+    const { currentUser } = storeToRefs(useUserStore());
 
     const props = defineProps({
         sendInviteDialogVisible: {
             type: Boolean,
             default: false
         },
-        inviteMessageTable: {
-            type: Object,
-            default: () => ({})
-        },
         sendInviteDialog: {
             type: Object,
             required: true
@@ -117,10 +115,6 @@
             type: Object,
             required: false,
             default: () => ({})
-        },
-        uploadImage: {
-            type: String,
-            default: ''
         }
     });