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/views/Tools/Tools.vue

@@ -1,12 +1,14 @@
 <template>
-    <div id="chart" class="x-container" v-show="menuActiveIndex === 'tools'">
+    <div id="chart" class="x-container" v-show="isShowToolsTab">
         <div class="options-container" style="margin-top: 0">
             <span class="header">Tools</span>
 
             <div class="tool-categories">
                 <div class="tool-category">
                     <div class="category-header" @click="toggleCategory('group')">
-                        <i class="el-icon-arrow-right" :class="{ rotate: !categoryCollapsed['group'] }"></i>
+                        <el-icon class="rotation-transition" :class="{ 'is-rotated': !categoryCollapsed['group'] }"
+                            ><ArrowRight
+                        /></el-icon>
                         <span class="category-title">Group</span>
                     </div>
                     <div class="tools-grid" v-show="!categoryCollapsed['group']">
@@ -26,7 +28,9 @@
 
                 <div class="tool-category">
                     <div class="category-header" @click="toggleCategory('image')">
-                        <i class="el-icon-arrow-right" :class="{ rotate: !categoryCollapsed['image'] }"></i>
+                        <el-icon class="rotation-transition" :class="{ 'is-rotated': !categoryCollapsed['image'] }"
+                            ><ArrowRight
+                        /></el-icon>
                         <span class="category-title">Image</span>
                     </div>
                     <div class="tools-grid" v-show="!categoryCollapsed['image']">
@@ -57,7 +61,9 @@
 
                 <div class="tool-category">
                     <div class="category-header" @click="toggleCategory('user')">
-                        <i class="el-icon-arrow-right" :class="{ rotate: !categoryCollapsed['user'] }"></i>
+                        <el-icon class="rotation-transition" :class="{ 'is-rotated': !categoryCollapsed['user'] }"
+                            ><ArrowRight
+                        /></el-icon>
                         <span class="category-title">User</span>
                     </div>
                     <div class="tools-grid" v-show="!categoryCollapsed['user']">
@@ -76,26 +82,31 @@
                 </div>
             </div>
         </div>
-        <GroupCalendarDialog :visible="isGroupCalendarDialogVisible" @close="isGroupCalendarDialogVisible = false" />
-        <ScreenshotMetadataDialog
-            :isScreenshotMetadataDialogVisible="isScreenshotMetadataDialogVisible"
-            @close="isScreenshotMetadataDialogVisible = false" />
-        <NoteExportDialog
-            :isNoteExportDialogVisible="isNoteExportDialogVisible"
-            @close="isNoteExportDialogVisible = false" />
+        <template v-if="isShowToolsTab">
+            <GroupCalendarDialog
+                :visible="isGroupCalendarDialogVisible"
+                @close="isGroupCalendarDialogVisible = false" />
+            <ScreenshotMetadataDialog
+                :isScreenshotMetadataDialogVisible="isScreenshotMetadataDialogVisible"
+                @close="isScreenshotMetadataDialogVisible = false" />
+            <NoteExportDialog
+                :isNoteExportDialogVisible="isNoteExportDialogVisible"
+                @close="isNoteExportDialogVisible = false" />
+            <GalleryDialog />
+        </template>
     </div>
 </template>
 
 <script setup>
-    import { ref } from 'vue';
+    import { ArrowRight } from '@element-plus/icons-vue';
+    import { ref, defineAsyncComponent, computed } from 'vue';
     import { storeToRefs } from 'pinia';
-    import { useI18n } from 'vue-i18n-bridge';
     import { useUiStore, useGalleryStore } from '../../stores';
-    import GroupCalendarDialog from './dialogs/GroupCalendarDialog.vue';
-    import ScreenshotMetadataDialog from './dialogs/ScreenshotMetadataDialog.vue';
-    import NoteExportDialog from './dialogs/NoteExportDialog.vue';
 
-    const { t } = useI18n();
+    const GroupCalendarDialog = defineAsyncComponent(() => import('./dialogs/GroupCalendarDialog.vue'));
+    const ScreenshotMetadataDialog = defineAsyncComponent(() => import('./dialogs/ScreenshotMetadataDialog.vue'));
+    const NoteExportDialog = defineAsyncComponent(() => import('./dialogs/NoteExportDialog.vue'));
+    const GalleryDialog = defineAsyncComponent(() => import('./dialogs/GalleryDialog.vue'));
 
     const uiStore = useUiStore();
     const { showGalleryDialog } = useGalleryStore();
@@ -111,6 +122,8 @@
     const isScreenshotMetadataDialogVisible = ref(false);
     const isNoteExportDialogVisible = ref(false);
 
+    const isShowToolsTab = computed(() => menuActiveIndex.value === 'tools');
+
     const showGroupCalendarDialog = () => {
         isGroupCalendarDialogVisible.value = true;
     };
@@ -159,6 +172,7 @@
             }
 
             .category-title {
+                margin-left: 5px;
                 font-size: 16px;
                 font-weight: 600;
                 color: var(--el-color-primary);
@@ -185,7 +199,7 @@
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
         }
 
-        ::v-deep .el-card__body {
+        :deep(.el-card__body) {
             overflow: visible;
         }
 
@@ -230,13 +244,17 @@
         }
     }
 
-    ::v-deep .el-card {
+    :deep(.el-card) {
         border-radius: 8px;
         width: 100%;
         overflow: visible;
     }
 
-    .rotate {
+    .is-rotated {
         transform: rotate(90deg);
     }
+
+    .rotation-transition {
+        transition: transform 0.2s ease-in-out;
+    }
 </style>