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

@@ -1,38 +1,38 @@
 <template>
-    <safe-dialog ref="launchDialogRef" :visible.sync="isVisible" :title="t('dialog.launch.header')" width="450px">
+    <el-dialog :z-index="launchDialogIndex" v-model="isVisible" :title="t('dialog.launch.header')" width="450px">
         <el-form :model="launchDialog" label-width="100px">
             <el-form-item :label="t('dialog.launch.url')">
                 <el-input
                     v-model="launchDialog.url"
-                    size="mini"
-                    style="width: 260px"
-                    @click.native="$event.target.tagName === 'INPUT' && $event.target.select()" />
-                <el-tooltip placement="right" :content="t('dialog.launch.copy_tooltip')" :disabled="hideTooltips">
+                    size="small"
+                    style="width: 230px"
+                    @click="$event.target.tagName === 'INPUT' && $event.target.select()" />
+                <el-tooltip placement="right" :content="t('dialog.launch.copy_tooltip')">
                     <el-button
-                        size="mini"
-                        icon="el-icon-s-order"
+                        size="small"
+                        :icon="CopyDocument"
                         style="margin-left: 5px"
                         circle
                         @click="copyInstanceMessage(launchDialog.url)" />
                 </el-tooltip>
             </el-form-item>
             <el-form-item v-if="launchDialog.shortUrl">
-                <template slot="label">
+                <template #label>
                     <span>{{ t('dialog.launch.short_url') }}</span>
-                    <el-tooltip placement="top" style="margin-left: 5px" :content="t('dialog.launch.short_url_notice')">
-                        <i class="el-icon-warning" />
+                    <el-tooltip placement="top" :content="t('dialog.launch.short_url_notice')">
+                        <el-icon style="display: inline-block; margin-left: 5px"><Warning /></el-icon>
                     </el-tooltip>
                 </template>
                 <el-input
                     v-model="launchDialog.shortUrl"
-                    size="mini"
-                    style="width: 260px"
-                    @click.native="$event.target.tagName === 'INPUT' && $event.target.select()" />
-                <el-tooltip placement="right" :content="t('dialog.launch.copy_tooltip')" :disabled="hideTooltips">
+                    size="small"
+                    style="width: 230px"
+                    @click="$event.target.tagName === 'INPUT' && $event.target.select()" />
+                <el-tooltip placement="right" :content="t('dialog.launch.copy_tooltip')">
                     <el-button
-                        size="mini"
-                        icon="el-icon-s-order"
-                        style="margin-left: 5px"
+                        size="small"
+                        :icon="CopyDocument"
+                        style="display: inline-block; margin-left: 5px"
                         circle
                         @click="copyInstanceMessage(launchDialog.shortUrl)" />
                 </el-tooltip>
@@ -40,23 +40,26 @@
             <el-form-item :label="t('dialog.launch.location')">
                 <el-input
                     v-model="launchDialog.location"
-                    size="mini"
-                    style="width: 260px"
-                    @click.native="$event.target.tagName === 'INPUT' && $event.target.select()" />
-                <el-tooltip placement="right" :content="t('dialog.launch.copy_tooltip')" :disabled="hideTooltips">
+                    size="small"
+                    style="width: 230px"
+                    @click="$event.target.tagName === 'INPUT' && $event.target.select()" />
+                <el-tooltip placement="right" :content="t('dialog.launch.copy_tooltip')">
                     <el-button
-                        size="mini"
-                        icon="el-icon-s-order"
-                        style="margin-left: 5px"
+                        size="small"
+                        :icon="CopyDocument"
+                        style="display: inline-block; margin-left: 5px"
                         circle
                         @click="copyInstanceMessage(launchDialog.location)" />
                 </el-tooltip>
             </el-form-item>
         </el-form>
-        <el-checkbox v-model="launchDialog.desktop" style="float: left; margin-top: 5px" @change="saveLaunchDialog">
+        <el-checkbox
+            v-model="launchDialog.desktop"
+            style="display: inline-flex; align-items: center; margin-top: 5px"
+            @change="saveLaunchDialog">
             {{ t('dialog.launch.start_as_desktop') }}
         </el-checkbox>
-        <template slot="footer">
+        <template #footer>
             <el-button size="small" @click="showPreviousInstancesInfoDialog(launchDialog.location)">
                 {{ t('dialog.launch.info') }}
             </el-button>
@@ -68,7 +71,6 @@
             </el-button>
             <template v-if="canOpenInstanceInGame()">
                 <el-button
-                    type="default"
                     size="small"
                     :disabled="!launchDialog.secureOrShortName"
                     @click="handleLaunchGame(launchDialog.location, launchDialog.shortName, launchDialog.desktop)">
@@ -84,7 +86,6 @@
             </template>
             <template v-else>
                 <el-button
-                    type="default"
                     size="small"
                     :disabled="!launchDialog.secureOrShortName"
                     @click="selfInvite(launchDialog.location, launchDialog.shortName)">
@@ -100,18 +101,26 @@
             </template>
         </template>
         <InviteDialog :invite-dialog="inviteDialog" @closeInviteDialog="closeInviteDialog" />
-    </safe-dialog>
+    </el-dialog>
 </template>
 
 <script setup>
-    import { ref, computed, nextTick, watch, getCurrentInstance } from 'vue';
+    import { CopyDocument, Warning } from '@element-plus/icons-vue';
+
+    import { ref, computed, nextTick, watch } from 'vue';
+    import { ElMessage, ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
-    import { useI18n } from 'vue-i18n-bridge';
+    import { useI18n } from 'vue-i18n';
     import { instanceRequest, worldRequest } from '../../api';
     import configRepository from '../../service/config';
-    import { adjustDialogZ, checkCanInvite, getLaunchURL, isRealInstance, parseLocation } from '../../shared/utils';
     import {
-        useAppearanceSettingsStore,
+        getNextDialogIndex,
+        checkCanInvite,
+        getLaunchURL,
+        isRealInstance,
+        parseLocation
+    } from '../../shared/utils';
+    import {
         useFriendStore,
         useInviteStore,
         useInstanceStore,
@@ -121,19 +130,18 @@
     } from '../../stores';
     import InviteDialog from './InviteDialog/InviteDialog.vue';
 
-    const { proxy } = getCurrentInstance();
     const { t } = useI18n();
 
     const { friends } = storeToRefs(useFriendStore());
-    const { hideTooltips } = storeToRefs(useAppearanceSettingsStore());
     const { lastLocation } = storeToRefs(useLocationStore());
     const { launchGame, tryOpenInstanceInVrc } = useLaunchStore();
     const { launchDialogData } = storeToRefs(useLaunchStore());
+
     const { showPreviousInstancesInfoDialog } = useInstanceStore();
     const { canOpenInstanceInGame } = useInviteStore();
     const { isGameRunning } = storeToRefs(useGameStore());
 
-    const launchDialogRef = ref(null);
+    const launchDialogIndex = ref(2000);
 
     const launchDialog = ref({
         loading: false,
@@ -207,17 +215,18 @@
     }
     function handleLaunchGame(location, shortName, desktop) {
         if (isGameRunning.value) {
-            proxy.$confirm(t('dialog.launch.game_running_warning'), t('dialog.launch.header'), {
+            ElMessageBox.confirm(t('dialog.launch.game_running_warning'), t('dialog.launch.header'), {
                 confirmButtonText: t('dialog.launch.confirm_yes'),
                 cancelButtonText: t('dialog.launch.confirm_no'),
-                type: 'warning',
-                callback: (action) => {
+                type: 'warning'
+            })
+                .then((action) => {
                     if (action === 'confirm') {
                         launchGame(location, shortName, desktop);
                         isVisible.value = false;
                     }
-                }
-            });
+                })
+                .catch(() => {});
             return;
         }
         launchGame(location, shortName, desktop);
@@ -239,7 +248,7 @@
                 shortName
             })
             .then((args) => {
-                proxy.$message({
+                ElMessage({
                     message: 'Self invite sent',
                     type: 'success'
                 });
@@ -257,7 +266,9 @@
         if (!isRealInstance(tag)) {
             return;
         }
-        nextTick(() => adjustDialogZ(launchDialogRef.value.$el));
+        nextTick(() => {
+            launchDialogIndex.value = getNextDialogIndex();
+        });
         const D = launchDialog.value;
         D.tag = tag;
         D.secureOrShortName = shortName;
@@ -300,12 +311,12 @@
     async function copyInstanceMessage(input) {
         try {
             await navigator.clipboard.writeText(input);
-            proxy.$message({
+            ElMessage({
                 message: 'Instance copied to clipboard',
                 type: 'success'
             });
         } catch (error) {
-            proxy.$message({
+            ElMessage({
                 message: 'Instance copied failed',
                 type: 'error'
             });