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/app.scss

@@ -10,10 +10,12 @@
 
 @use './assets/scss/flags.scss';
 @use './assets/scss/animated-emoji.scss';
+@use 'element-plus/theme-chalk/src/index.scss' as *;
 
-@import '~animate.css/animate.min.css';
-@import '~noty/lib/noty.css';
-@import '~element-ui/lib/theme-chalk/index.css';
+@import 'element-plus/theme-chalk/src/dark/css-vars.scss';
+@import 'animate.css/animate.min.css';
+@import 'noty/lib/noty.css';
+@import 'remixicon/fonts/remixicon.css';
 
 .color-palettes {
     background: #409eff;
@@ -26,6 +28,10 @@
     background: #c0c4cc;
 }
 
+.el-icon.is-loading {
+    animation: rotating 2s linear infinite;
+}
+
 .noty_layout {
     word-break: break-all;
 }
@@ -78,42 +84,46 @@
     border-bottom: 1px solid #a0b55c;
 }
 
-.el-table + .pagination-bar {
-    margin-top: 15px;
+// .el-table + .pagination-bar {
+//     margin-top: 15px;
+// }
+
+.el-table__expanded-cell[class*='cell'] {
+    padding: 20px 30px;
 }
 
-.el-table--mini .el-table__expanded-cell[class*='cell'] {
-    padding: 20px 50px;
+.el-table--small .cell {
+    // fix expand arrow position
+    padding: 0px;
 }
 
-.el-table--mini .el-table__cell {
-    padding: 5px 0;
-}
+// .el-table--mini .el-table__cell {
+//     padding: 5px 0;
+// }
 
-// expand table cell on hover, TODO: replace with a better solution
-.el-table .cell {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-}
+// .el-table .cell {
+//     display: -webkit-box;
+//     -webkit-box-orient: vertical;
+//     -webkit-line-clamp: 1;
+// }
 
-.el-table__row:hover .el-table__cell .cell {
-    display: revert;
-    -webkit-line-clamp: unset;
-}
+// .el-table__row:hover .el-table__cell .cell {
+//     display: revert;
+//     -webkit-line-clamp: unset;
+// }
 
-.el-table th.is-sortable .cell {
-    display: flex;
-    align-items: center;
-}
+// .el-table th.is-sortable .cell {
+//     display: flex;
+//     align-items: center;
+// }
 
-.el-table .caret-wrapper {
-    margin-top: 4.5px;
-}
+// .el-table .caret-wrapper {
+//     margin-top: 4.5px;
+// }
 
-.notification-table .el-table .cell {
-    -webkit-line-clamp: 2;
-}
+// .notification-table .el-table .cell {
+//     -webkit-line-clamp: 2;
+// }
 
 .el-dialog__body {
     padding: 20px;
@@ -146,6 +156,10 @@
     unicode-range: U+2026;
 }
 
+html {
+    overflow: hidden;
+}
+
 body {
     font-family:
         'ellipsis-font', 'Noto Sans KR', 'Noto Sans JP', 'Noto Sans TC',
@@ -313,11 +327,11 @@ hr.x-vertical-divider {
     order: 99;
 }
 
-.el-popper.x-quick-search {
-    width: 225px;
-    min-width: 0 !important;
-    border: none;
-}
+// .el-popper.x-quick-search {
+//     width: 225px;
+//     min-width: 0 !important;
+//     border: none;
+// }
 
 .el-popper.x-quick-search .el-select-dropdown__item {
     width: 100%;
@@ -383,13 +397,13 @@ hr.x-vertical-divider {
     border-radius: 2px;
 }
 
-.el-select-dropdown__item .x-friend-item:hover {
-    background: none;
-    border-radius: 0;
-}
+// .el-select-dropdown__item .x-friend-item:hover {
+//     background: none;
+//     border-radius: 0;
+// }
 
 .x-dialog .x-friend-item {
-    width: 175px;
+    width: 167px;
 }
 
 .x-friend-item > .avatar {
@@ -438,7 +452,7 @@ img.friends-list-avatar {
 .x-friend-item > .avatar.joinme.mobile > img,
 .x-friend-item > .avatar.askme.mobile > img,
 .x-friend-item > .avatar.busy.mobile > img {
-    mask-image: url(assets/images/masks/usercutoutmobile.svg);
+    mask-image: url(./assets/images/masks/usercutoutmobile.svg);
 }
 
 .x-friend-item > .avatar.online.mobile::after,
@@ -452,7 +466,7 @@ img.friends-list-avatar {
     height: 14px;
     content: '';
     border-radius: 0px;
-    mask-image: url(assets/images/masks/phone.svg);
+    mask-image: url(./assets/images/masks/phone.svg);
 }
 
 .x-friend-item > .avatar.active > img,
@@ -461,7 +475,7 @@ img.friends-list-avatar {
 .x-friend-item > .avatar.askme > img,
 .x-friend-item > .avatar.busy > img,
 .x-friend-item > .avatar.offline > img {
-    mask-image: url(assets/images/masks/usercutout.svg);
+    mask-image: url(./assets/images/masks/usercutout.svg);
 }
 
 .x-friend-item > .avatar.active::after,
@@ -490,17 +504,17 @@ img.friends-list-avatar {
 
 .x-friend-item > .avatar.joinme::after {
     background: #409eff;
-    mask-image: url(assets/images/masks/joinme.svg);
+    mask-image: url(./assets/images/masks/joinme.svg);
 }
 
 .x-friend-item > .avatar.askme::after {
     background: #ff9500;
-    mask-image: url(assets/images/masks/askme.svg);
+    mask-image: url(./assets/images/masks/askme.svg);
 }
 
 .x-friend-item > .avatar.busy::after {
     background: #ff2c2c;
-    mask-image: url(assets/images/masks/busy.svg);
+    mask-image: url(./assets/images/masks/busy.svg);
 }
 
 .x-friend-item > .avatar.offline::after {
@@ -565,16 +579,11 @@ img.friends-list-avatar {
     border-radius: 2px;
 }
 
-.x-change-image-item > img,
-.x-change-image-item > .el-popover__reference-wrapper > img {
-    width: 240px;
-    height: 180px;
-}
-
-.current-image {
-    border: 2px solid #67c23a;
-    padding: 2px 2px 0 2px;
-}
+// .x-change-image-item > img,
+// .x-change-image-item > .el-popover__reference-wrapper > img {
+//     width: 240px;
+//     height: 180px;
+// }
 
 .x-dialog > .el-dialog {
     max-width: 100%;
@@ -595,12 +604,12 @@ img.friends-list-avatar {
     padding: 20px;
 }
 
-.el-popper.hex {
-    min-width: auto;
-    padding: 10px;
-    font-family: monospace;
-    text-align: center;
-}
+// .el-popper.hex {
+//     min-width: auto;
+//     padding: 10px;
+//     font-family: monospace;
+//     text-align: center;
+// }
 
 i.x-user-status,
 i.x-status-icon {
@@ -621,17 +630,17 @@ i.x-user-status.online {
 
 i.x-user-status.joinme {
     background: #409eff;
-    mask-image: url(assets/images/masks/joinme.svg);
+    mask-image: url(./assets/images/masks/joinme.svg);
 }
 
 i.x-user-status.askme {
     background: #ff9500;
-    mask-image: url(assets/images/masks/askme.svg);
+    mask-image: url(./assets/images/masks/askme.svg);
 }
 
 i.x-user-status.busy {
     background: #ff2c2c;
-    mask-image: url(assets/images/masks/busy.svg);
+    mask-image: url(./assets/images/masks/busy.svg);
 }
 
 i.x-status-icon.green {
@@ -651,67 +660,79 @@ i.x-status-icon.red {
 }
 
 .x-tag-friend {
-    color: rgb(255, 208, 0) !important;
+    color: rgb(255, 208, 0);
     border-color: rgb(255, 208, 0) !important;
 }
 
 .x-tag-vrcplus {
-    color: rgb(255, 208, 0) !important;
+    color: rgb(255, 208, 0);
     border-color: rgb(255, 208, 0) !important;
 }
 
 .x-tag-platform-pc {
-    color: #409eff !important;
+    color: #409eff;
     border-color: #409eff !important;
 }
 
 .x-tag-platform-quest {
-    color: #67c23a !important;
+    color: #67c23a;
     border-color: #67c23a !important;
 }
 
 .x-tag-platform-ios {
-    color: #c7c7ce !important;
+    color: #c7c7ce;
     border-color: #c7c7ce !important;
 }
 
 .x-tag-platform-other {
-    color: #ff4177 !important;
+    color: #ff4177;
     border-color: #ff4177 !important;
 }
 
 .x-tag-age-verification {
-    color: #5c70ec !important;
+    color: #5c70ec;
     border-color: #5c70ec !important;
 }
 
+.x-tag-border-left {
+    border-left: 0.8px solid;
+    margin-left: 5px;
+    padding-left: 5px;
+    padding-bottom: 0.5px;
+}
+
 .x-grey {
     color: #909399;
 }
 
-.el-tree-node {
-    white-space: normal;
+.x-popover-image {
+    max-width: 100%;
+    max-height: 100%;
 }
 
-.el-tree-node__content {
-    height: auto;
-}
+// .el-tree-node {
+//     white-space: normal;
+// }
 
-.el-progress-bar {
-    padding-right: 80px;
-    margin-right: -85px;
-}
+// .el-tree-node__content {
+//     height: auto;
+// }
 
-.el-progress__text {
-    color: #c8c8c8;
-}
+// .el-progress-bar {
+//     padding-right: 80px;
+//     margin-right: -85px;
+// }
 
-.x-user-dialog .el-textarea__inner {
-    padding: 0;
-    background: none;
-    border: 0;
-    border-radius: 2px;
-}
+// .el-progress__text {
+//     color: #c8c8c8;
+// }
+
+// .x-user-dialog .el-textarea__inner {
+//     padding: 0;
+//     background: none;
+//     border: 0;
+//     border-radius: 2px;
+// }
 
 .options-container {
     margin-top: 30px;
@@ -767,28 +788,28 @@ i.x-status-icon.red {
     vertical-align: top;
 }
 
-.el-color-picker__trigger {
-    border: unset;
-}
+// .el-color-picker__trigger {
+//     border: unset;
+// }
 
-.el-color-picker__color {
-    border: 0.5px solid #999;
-}
+// .el-color-picker__color {
+//     border: 0.5px solid #999;
+// }
 
-.el-button--success {
-    background-color: #67c23a !important;
-    border-color: #67c23a !important;
-}
+// .el-button--success {
+//     background-color: #67c23a !important;
+//     border-color: #67c23a !important;
+// }
 
-.x-dialog .el-button--danger {
-    background-color: #f56c6c !important;
-    border-color: #f56c6c !important;
-}
+// .x-dialog .el-button--danger {
+//     background-color: #f56c6c !important;
+//     border-color: #f56c6c !important;
+// }
 
-.el-button--warning {
-    background-color: #e6a23c !important;
-    border-color: #e6a23c !important;
-}
+// .el-button--warning {
+//     background-color: #e6a23c !important;
+//     border-color: #e6a23c !important;
+// }
 
 .avatar-info {
     margin-top: 2px;
@@ -812,14 +833,14 @@ i.x-status-icon.red {
     color: #f56c6c;
 }
 
-.el-form-item {
-    margin-bottom: 4px;
-}
+// .el-form-item {
+//     margin-bottom: 4px;
+// }
 
-.photon-event-table .el-table--mini .el-table__cell,
-.current-instance-table .el-table--mini .el-table__cell {
-    padding: 0;
-}
+// .photon-event-table .el-table--mini .el-table__cell,
+// .current-instance-table .el-table--mini .el-table__cell {
+//     padding: 0;
+// }
 
 .photon-event-table {
     margin-top: 20px;
@@ -835,14 +856,14 @@ i.x-status-icon.red {
     margin-bottom: -1px;
 }
 
-.el-pagination .el-select .el-input .el-input__inner,
-.el-input--mini .el-input__icon {
-    height: 22px;
-}
+// .el-pagination .el-select .el-input .el-input__inner,
+// .el-input--mini .el-input__icon {
+//     height: 22px;
+// }
 
-.el-pagination .btn-next {
-    margin-right: 10px;
-}
+// .el-pagination .btn-next {
+//     margin-right: 10px;
+// }
 
 .el-dialog,
 .el-message-box {
@@ -850,35 +871,31 @@ i.x-status-icon.red {
     word-break: break-word;
 }
 
-.el-tabs__nav-wrap::after {
-    background-color: #e4e7ed14;
-}
+// .el-tabs__nav-wrap::after {
+//     background-color: #e4e7ed14;
+// }
 
 .dialog-title {
     font-weight: bold;
 }
 
-.group-banner-image {
-    display: none;
-}
-
 .vrc-instance-queue-message {
     padding: 3px;
     top: 0 !important;
 }
 
-.vrc-instance-queue-message .el-message__content {
-    margin-right: 20px;
-}
+// .vrc-instance-queue-message .el-message__content {
+//     margin-right: 20px;
+// }
 
-.el-tabs {
-    display: flex;
-    flex-direction: column;
-}
+// .el-tabs {
+//     display: flex;
+//     flex-direction: column;
+// }
 
 .el-tabs__content {
-    flex: 1;
-    max-height: 100%;
+    // flex: 1;
+    // max-height: 100%;
     overflow-y: auto;
 }
 
@@ -889,60 +906,56 @@ i.x-status-icon.red {
     font-size: 13px;
 }
 
-.el-tabs__header {
-    padding: 0 1px;
-}
+// .el-tabs__header {
+//     padding: 0 1px;
+// }
 
-.zero-margin-tabs .el-tabs__header {
-    margin-bottom: 0;
-}
+// .zero-margin-tabs .el-tabs__header {
+//     margin-bottom: 0;
+// }
 
-.x-friend-item .el-checkbox__inner,
-.el-table__row .el-checkbox__inner {
-    width: 28px;
-    height: 28px;
-    border-radius: 4px;
-}
+// .x-friend-item .el-checkbox__inner,
+// .el-table__row .el-checkbox__inner {
+//     width: 28px;
+//     height: 28px;
+//     border-radius: 4px;
+// }
 
-.x-friend-item .el-checkbox__inner::after,
-.el-table__row .el-checkbox__inner::after {
-    width: 8px;
-    height: 14px;
-    left: 8px;
-    top: 2px;
-}
+// .x-friend-item .el-checkbox__inner::after,
+// .el-table__row .el-checkbox__inner::after {
+//     width: 8px;
+//     height: 14px;
+//     left: 8px;
+//     top: 2px;
+// }
 
-.max-height-el-select .el-select-dropdown__wrap {
-    max-height: 83vh;
-}
+// .max-height-el-select .el-select-dropdown__wrap {
+//     max-height: 83vh;
+// }
 
-.el-pagination .el-input .el-input__icon {
-    line-height: 22px;
-}
+// .el-pagination .el-input .el-input__icon {
+//     line-height: 22px;
+// }
 
-// User dialog memo: tag line-height
-.el-dialog__body .el-tag--mini {
-    line-height: 17px;
-}
+// .el-dialog__body .el-tag--mini {
+//     line-height: 17px;
+// }
 
-// feed table detail time tag line-height
-.el-table__expanded-cell .el-tag--mini {
-    line-height: 18px;
-}
+// .el-table__expanded-cell .el-tag--mini {
+//     line-height: 18px;
+// }
 
-// User dialog memo: input count background color
-.x-friend-item:hover .el-input__count {
-    background: #f0f0f0;
-}
+// .x-friend-item:hover .el-input__count {
+//     background: #f0f0f0;
+// }
 
-// Align the left page with the right friend bar
 .x-app > .x-container {
     padding-top: 15px;
 }
 
-.el-collapse-item .el-tag--mini {
-    line-height: 17px;
-}
+// .el-collapse-item .el-tag--mini {
+//     line-height: 17px;
+// }
 
 .x-text-removed {
     text-decoration: line-through;
@@ -959,21 +972,38 @@ i.x-status-icon.red {
     border-radius: 4px;
 }
 
-.el-carousel__mask {
-    // looks bad
-    display: none;
+// expand table cell on hover, TODO: replace with a better solution
+.el-table .cell {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
 }
 
+.el-table__row:hover .el-table__cell .cell {
+    display: revert;
+    -webkit-line-clamp: unset;
+}
+
+// .el-carousel__mask {
+//     // looks bad
+//     display: none;
+// }
+
 // FIXME
 // Something changed the CSS of element-ui
 // The other parts are the same
 // It feels like can't fundamentally modify it
 // And can only fix it bit by bit by overriding
-.el-switch__core:after {
-    top: 1.5px;
-}
+// .el-switch__core:after {
+//     top: 1.5px;
+// }
 
-.el-popover {
-    text-align: left;
-    word-break: break-word;
+// .el-popover {
+//     text-align: left;
+//     word-break: break-word;
+// }
+
+.el-dropdown-menu__item:not(.is-disabled):focus {
+    // dropdown item focus blue background looks bad
+    background-color: unset;
 }