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/Sidebar/components/FriendsSidebar.vue

@@ -7,13 +7,13 @@
                 isFriendsGroupMe = !isFriendsGroupMe;
                 saveFriendsGroupStates();
             ">
-            <i class="el-icon-arrow-right" :class="{ rotate: isFriendsGroupMe }"></i>
-            <span style="margin-left: 5px">{{ $t('side_panel.me') }}</span>
+            <el-icon class="rotation-transition" :class="{ 'is-rotated': isFriendsGroupMe }"><ArrowRight /></el-icon>
+            <span style="margin-left: 5px">{{ t('side_panel.me') }}</span>
         </div>
         <div v-show="isFriendsGroupMe">
             <div class="x-friend-item" @click="showUserDialog(currentUser.id)">
                 <div class="avatar" :class="userStatusClass(currentUser)">
-                    <img v-lazy="userImage(currentUser)" />
+                    <img :src="userImage(currentUser)" loading="lazy" />
                 </div>
                 <div class="detail">
                     <span class="name" :style="{ color: currentUser.$userColour }">{{ currentUser.displayName }}</span>
@@ -43,9 +43,9 @@
                 isVIPFriends = !isVIPFriends;
                 saveFriendsGroupStates();
             ">
-            <i class="el-icon-arrow-right" :class="{ rotate: isVIPFriends }"></i>
+            <el-icon class="rotation-transition" :class="{ 'is-rotated': isVIPFriends }"><ArrowRight /></el-icon>
             <span style="margin-left: 5px">
-                {{ $t('side_panel.favorite') }} &horbar;
+                {{ t('side_panel.favorite') }} &horbar;
                 {{ vipFriendsDisplayNumber }}
             </span>
         </div>
@@ -81,9 +81,11 @@
 
         <template v-if="isSidebarGroupByInstance && friendsInSameInstance.length">
             <div class="x-friend-group x-link" @click="toggleSwitchGroupByInstanceCollapsed">
-                <i class="el-icon-arrow-right" :class="{ rotate: !isSidebarGroupByInstanceCollapsed }"></i>
+                <el-icon class="rotation-transition" :class="{ 'is-rotated': !isSidebarGroupByInstanceCollapsed }"
+                    ><ArrowRight
+                /></el-icon>
                 <span style="margin-left: 5px"
-                    >{{ $t('side_panel.same_instance') }} &horbar; {{ friendsInSameInstance.length }}</span
+                    >{{ t('side_panel.same_instance') }} &horbar; {{ friendsInSameInstance.length }}</span
                 >
             </div>
 
@@ -114,9 +116,9 @@
                 isOnlineFriends = !isOnlineFriends;
                 saveFriendsGroupStates();
             ">
-            <i class="el-icon-arrow-right" :class="{ rotate: isOnlineFriends }"></i>
+            <el-icon class="rotation-transition" :class="{ 'is-rotated': isOnlineFriends }"><ArrowRight /></el-icon>
             <span style="margin-left: 5px"
-                >{{ $t('side_panel.online') }} &horbar; {{ onlineFriendsByGroupStatus.length }}</span
+                >{{ t('side_panel.online') }} &horbar; {{ onlineFriendsByGroupStatus.length }}</span
             >
         </div>
         <div v-show="isOnlineFriends">
@@ -134,8 +136,8 @@
                 isActiveFriends = !isActiveFriends;
                 saveFriendsGroupStates();
             ">
-            <i class="el-icon-arrow-right" :class="{ rotate: isActiveFriends }"></i>
-            <span style="margin-left: 5px">{{ $t('side_panel.active') }} &horbar; {{ activeFriends.length }}</span>
+            <el-icon class="rotation-transition" :class="{ 'is-rotated': isActiveFriends }"><ArrowRight /></el-icon>
+            <span style="margin-left: 5px">{{ t('side_panel.active') }} &horbar; {{ activeFriends.length }}</span>
         </div>
         <div v-show="isActiveFriends">
             <friend-item
@@ -152,8 +154,8 @@
                 isOfflineFriends = !isOfflineFriends;
                 saveFriendsGroupStates();
             ">
-            <i class="el-icon-arrow-right" :class="{ rotate: isOfflineFriends }"></i>
-            <span style="margin-left: 5px">{{ $t('side_panel.offline') }} &horbar; {{ offlineFriends.length }}</span>
+            <el-icon class="rotation-transition" :class="{ 'is-rotated': isOfflineFriends }"><ArrowRight /></el-icon>
+            <span style="margin-left: 5px">{{ t('side_panel.offline') }} &horbar; {{ offlineFriends.length }}</span>
         </div>
         <div v-show="isOfflineFriends">
             <friend-item
@@ -167,8 +169,10 @@
 </template>
 
 <script setup>
+    import { ArrowRight } from '@element-plus/icons-vue';
     import { computed, ref } from 'vue';
     import { storeToRefs } from 'pinia';
+    import { useI18n } from 'vue-i18n';
     import FriendItem from '../../../components/FriendItem.vue';
     import configRepository from '../../../service/config';
     import { isRealInstance, userImage, userStatusClass } from '../../../shared/utils';
@@ -182,6 +186,7 @@
         useUserStore
     } from '../../../stores';
     const emit = defineEmits(['confirm-delete-friend']);
+    const { t } = useI18n();
 
     const { vipFriends, onlineFriends, activeFriends, offlineFriends } = storeToRefs(useFriendStore());
     const { isSidebarGroupByInstance, isHideFriendsInSameInstance, isSidebarDivideByFriendGroup } =
@@ -359,4 +364,10 @@
     .x-link:hover span {
         text-decoration: underline;
     }
+    .is-rotated {
+        transform: rotate(90deg);
+    }
+    .rotation-transition {
+        transition: transform 0.2s ease-in-out;
+    }
 </style>

src/views/Sidebar/components/GroupsSidebar.vue

@@ -1,17 +1,15 @@
 <template>
     <div class="x-friend-list" style="padding: 10px 5px">
-        <template v-for="(group, index) in groupedGroupInstances">
-            <div
-                :key="getGroupId(group)"
-                class="x-friend-group x-link"
-                :style="{ paddingTop: index === 0 ? '0px' : '10px' }">
+        <template v-for="(group, index) in groupedGroupInstances" :key="getGroupId(group)">
+            <div class="x-friend-group x-link" :style="{ paddingTop: index === 0 ? '0px' : '10px' }">
                 <div @click="toggleGroupSidebarCollapse(getGroupId(group))" style="display: flex; align-items: center">
-                    <i
-                        class="el-icon-arrow-right"
-                        :style="{
-                            transform: groupInstancesCfg[getGroupId(group)].isCollapsed ? '' : 'rotate(90deg)',
-                            transition: 'transform 0.3s'
-                        }"></i>
+                    <el-icon
+                        class="rotation-transition"
+                        :class="{
+                            'is-rotated': !groupInstancesCfg[getGroupId(group)].isCollapsed
+                        }"
+                        ><ArrowRight
+                    /></el-icon>
                     <span style="margin-left: 5px">{{ group[0].group.name }} – {{ group.length }}</span>
                 </div>
             </div>
@@ -24,7 +22,7 @@
                     @click="showGroupDialog(ref.instance.ownerId)">
                     <template v-if="isAgeGatedInstancesVisible || !(ref.ageGate || ref.location?.includes('~ageGate'))">
                         <div class="avatar">
-                            <img v-lazy="getSmallGroupIconUrl(ref.group.iconUrl)" />
+                            <img :src="getSmallGroupIconUrl(ref.group.iconUrl)" loading="lazy" />
                         </div>
                         <div class="detail">
                             <span class="name">
@@ -43,6 +41,7 @@
 </template>
 
 <script setup>
+    import { ArrowRight } from '@element-plus/icons-vue';
     import { storeToRefs } from 'pinia';
     import { computed, ref } from 'vue';
     import { convertFileUrlToImageUrl } from '../../../shared/utils';
@@ -103,4 +102,10 @@
     .x-link:hover span {
         text-decoration: underline;
     }
+    .is-rotated {
+        transform: rotate(90deg);
+    }
+    .rotation-transition {
+        transition: transform 0.2s ease-in-out;
+    }
 </style>