Upgrade to Vue3 and Element Plus (#1374)

* Update Vue devtools

* upgrade vue pinia element-plus vue-i18n, add vite

* fix: i18n

* global components

* change v-deep

* upgrade vue-lazyload

* data table

* update enlint and safe-dialog

* package.json and vite.config.js

* el-icon

* el-message

* vue 2 -> vue3 migration changes

* $pinia

* dialog

* el-popover slot

* lint

* chore

* slot

* scss

* remote state access

* misc

* jsconfig

* el-button size mini -> small

* :model-value

* ElMessageBox

* datatable

* remove v-lazyload

* template #dropdown

* mini -> small

* css

* byebye hideTooltips

* use sass-embedded

* Update SQLite, remove unneeded libraries

* Fix shift remove local avatar favorites

* Electron arm64

* arm64 support

* bye pug

* f-word vite hah

* misc

* remove safe dialog component

* Add self invite to launch dialog

* Fix errors

* Icons 1

* improve localfavorite loading performance

* improve favorites world item performance

* dialog visibility changes for Element Plus

* clear element plus error

* import performance

* revert App.vue hah

* hah

* Revert "Add self invite to launch dialog"

This reverts commit 4801cfad58.

* Toggle self invite/open in-game

* Self invite on launch dialog

* el-button icon

* el-icon

* fix user dialog tab switching logic

* fix PlayerList

* Formatting changes

* More icons

* Fix friend log table

* loading margin

* fix markdown

* fix world dialog tab switching issue

* Fixes and formatting

* fix: global i18n.t export

* fix favorites world tab not working

* Create instance, displayName

* Remove group members sort by userId

* Fix loading dialog tabs on swtich

* Star

* charts console.warn

* wip: fix charts

* wip: fix charts

* wip: charts composables

* fix favorite item tooltip warning

* Fixes and formatting

* Clean up image dialogs

* Remove unused method

* Fix platform/size border

* Fix platform/size border

* $vr

* fix friendExportDialogVisible binding

* ElMessageBox and Settings

* Login formatting

* Rename VR overlay query

* Fix image popover and userdialog badges

* Formatting

* Big buttons

* Fixes, update Cef

* Fix gameLog table nav buttons jumping around while using nav buttons

* Fix z-index

* vr overlay

* vite input add theme

* defineAsyncComponent

* ISO 639-1

* fix i18n

* clean t

* Formatting, fix calendar, rotate arrows

* Show user status when user is offline

* Fix VR overlay

* fix theme and clean up

* split InstanceActivity

* tweak

* Fix VR overlay formatting

* fix scss var

* AppDebug hahahaha

* Years

* remove reactive

* improve perf

* state hah…

* fix user rendering poblems when user object is not yet loaded

* improve perf

* Update avatar/world image uploader, licenses, remove previous images dialog (old images are now deleted)

* improve perf 1

* Suppress stray errors

* fix traveling location display issue

* Fix empty instance creator

* improve friend list refresh performance

* fix main charts

* fix chart

* Fix darkmode

* Fix avatar dialog tags

---------

Co-authored-by: pa <maplenagisa@gmail.com>

src/stores/updateLoop.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { computed, reactive, watch } from 'vue';
+import { watch } from 'vue';
 import * as workerTimers from 'worker-timers';
 import { groupRequest } from '../api';
 import { database } from '../service/database';
@@ -10,7 +10,6 @@ import { useGameStore } from './game';
 import { useGameLogStore } from './gameLog';
 import { useModerationStore } from './moderation';
 import { useDiscordPresenceSettingsStore } from './settings/discordPresence';
-import { useUiStore } from './ui';
 import { useUserStore } from './user';
 import { useVrcxStore } from './vrcx';
 import { useVRCXUpdaterStore } from './vrcxUpdater';
@@ -18,7 +17,18 @@ import { useGroupStore } from './group';
 import { useVrStore } from './vr';
 
 export const useUpdateLoopStore = defineStore('UpdateLoop', () => {
-    const state = reactive({
+    const authStore = useAuthStore();
+    const userStore = useUserStore();
+    const friendStore = useFriendStore();
+    const gameStore = useGameStore();
+    const moderationStore = useModerationStore();
+    const vrcxStore = useVrcxStore();
+    const discordPresenceSettingsStore = useDiscordPresenceSettingsStore();
+    const gameLogStore = useGameLogStore();
+    const vrcxUpdaterStore = useVRCXUpdaterStore();
+    const groupStore = useGroupStore();
+    const vrStore = useVrStore();
+    const state = {
         nextCurrentUserRefresh: 300,
         nextFriendsRefresh: 3600,
         nextGroupInstanceRefresh: 0,
@@ -30,7 +40,7 @@ export const useUpdateLoopStore = defineStore('UpdateLoop', () => {
         nextGetLogCheck: 0,
         nextGameRunningCheck: 0,
         nextDatabaseOptimize: 3600
-    });
+    };
 
     watch(
         () => watchState.isLoggedIn,
@@ -42,47 +52,15 @@ export const useUpdateLoopStore = defineStore('UpdateLoop', () => {
         { flush: 'sync' }
     );
 
-    const nextGroupInstanceRefresh = computed({
-        get: () => state.nextGroupInstanceRefresh,
-        set: (value) => {
-            state.nextGroupInstanceRefresh = value;
-        }
-    });
+    const nextGroupInstanceRefresh = state.nextGroupInstanceRefresh;
 
-    const nextCurrentUserRefresh = computed({
-        get: () => state.nextCurrentUserRefresh,
-        set: (value) => {
-            state.nextCurrentUserRefresh = value;
-        }
-    });
+    const nextCurrentUserRefresh = state.nextCurrentUserRefresh;
 
-    const nextDiscordUpdate = computed({
-        get: () => state.nextDiscordUpdate,
-        set: (value) => {
-            state.nextDiscordUpdate = value;
-        }
-    });
+    const nextDiscordUpdate = state.nextDiscordUpdate;
 
-    const ipcTimeout = computed({
-        get: () => state.ipcTimeout,
-        set: (value) => {
-            state.ipcTimeout = value;
-        }
-    });
+    const ipcTimeout = state.ipcTimeout;
 
     async function updateLoop() {
-        const authStore = useAuthStore();
-        const userStore = useUserStore();
-        const friendStore = useFriendStore();
-        const gameStore = useGameStore();
-        const moderationStore = useModerationStore();
-        const vrcxStore = useVrcxStore();
-        const discordPresenceSettingsStore = useDiscordPresenceSettingsStore();
-        const gameLogStore = useGameLogStore();
-        const vrcxUpdaterStore = useVRCXUpdaterStore();
-        const uiStore = useUiStore();
-        const groupStore = useGroupStore();
-        const vrStore = useVrStore();
         try {
             if (watchState.isLoggedIn) {
                 if (--state.nextCurrentUserRefresh <= 0) {
@@ -170,7 +148,8 @@ export const useUpdateLoopStore = defineStore('UpdateLoop', () => {
     }
 
     return {
-        state,
+        // state,
+
         nextGroupInstanceRefresh,
         nextCurrentUserRefresh,
         nextDiscordUpdate,