Tabbed side panel

html/src/app.js

@@ -13655,6 +13655,10 @@ speechSynthesis.getVoices();
         false
     );
     $app.data.asideWidth = configRepository.getInt('VRCX_asidewidth', 350);
+    if ($app.data.asideWidth === 236) {
+        $app.data.asideWidth = 350;
+        configRepository.setInt('VRCX_asidewidth', $app.data.asideWidth);
+    }
     $app.data.autoUpdateVRCX = configRepository.getString(
         'VRCX_autoUpdateVRCX',
         'Auto Download'

html/src/app.scss

@@ -705,3 +705,19 @@ i.x-user-status.busy {
     padding: 3px;
     top: 0 !important;
 }
+
+.el-tab-pane {
+    height: 100%;
+}
+
+.el-tabs {
+    // height: calc(100vh - 60px);
+    display: flex;
+    flex-direction: column;
+}
+
+.el-tabs__content {
+    flex: 1;
+    max-height: 100%;
+    overflow: auto;
+}

html/src/index.pug

@@ -106,10 +106,12 @@ html
                         el-button(type="default" @click="directAccessPaste" size="mini" icon="el-icon-discover" circle)
                     el-tooltip(placement="bottom" :content="$t('side_panel.refresh_tooltip')" :disabled="hideTooltips")
                         el-button(type="default" @click="refreshFriendsList" :loading="API.isRefreshFriendsLoading" size="mini" icon="el-icon-refresh" circle style="margin-right:10px")
+                el-tabs(type="card" stretch="true" style="height: calc(100vh - 60px")
+                    el-tab-pane
+                        template(#label)
+                            span {{ $t('side_panel.friends') }}: {{ onlineFriendCount }}/{{ friends.size }}
                         .x-friend-list(style="padding-bottom:10px")
-                    .x-friend-group(style="padding:5px 0 0")
+                            .x-friend-group.x-link(@click="isFriendsGroupMe = !isFriendsGroupMe" style="padding:0px 0px 5px")
-                        span {{ $t('side_panel.friends') }} ― {{ onlineFriendCount }}/{{ friends.size }}
-                    .x-friend-group.x-link(@click="isFriendsGroupMe = !isFriendsGroupMe" style="padding:10px 0 5px")
                                 i.el-icon-arrow-right(:class="{ rotate: isFriendsGroupMe }")
                                 span(style="margin-left:5px") {{ $t('side_panel.me') }}
                             div(v-show="isFriendsGroupMe")
@@ -121,18 +123,6 @@ html
                                         location.extra(v-if="isGameRunning" :location="lastLocation.location" :traveling="lastLocationDestination" :link="false")
                                         location.extra(v-else-if="isRealInstance(API.currentUser.$locationTag) || isRealInstance(API.currentUser.$travelingToLocation)" :location="API.currentUser.$locationTag" :traveling="API.currentUser.$travelingToLocation" :link="false")
                                         span.extra(v-else v-text="API.currentUser.statusDescription")
-                    .x-friend-group.x-link(@click="isGroupInstances = !isGroupInstances")
-                        i.el-icon-arrow-right(:class="{ rotate: isGroupInstances }")
-                        span(style="margin-left:5px") {{ $t('side_panel.groups') }} ― {{ groupInstances.length }}
-                    div(v-show="isGroupInstances")
-                        .x-friend-item(v-for="instance in groupInstances" :key="instance.id" @click="showGroupDialog(instance.ownerId)")
-                            .avatar
-                                img(v-lazy="instance.$group.iconUrl")
-                            .detail
-                                span.name
-                                    span(v-text="instance.$group.name")
-                                    span(style="font-weight:normal;margin-left:5px") ({{ instance.userCount }}/{{ instance.capacity }})
-                                location.extra(:location="instance.location" :link="false")
                             .x-friend-group.x-link(@click="isFriendsGroup0 = !isFriendsGroup0" v-show="friendsGroup0.length")
                                 i.el-icon-arrow-right(:class="{ rotate: isFriendsGroup0 }")
                                 span(style="margin-left:5px") {{ $t('side_panel.favorite') }} ― {{ friendsGroup0.length }}
@@ -196,6 +186,20 @@ html
                                         span(v-text="friend.name || friend.id")
                                         el-button(type="text" icon="el-icon-close" size="mini" @click.stop="confirmDeleteFriend(friend.id)" style="margin-left:5px")
 
+                    el-tab-pane
+                        template(#label)
+                            span {{ $t('side_panel.groups') }}: {{ groupInstances.length }}
+                        .x-friend-list(style="padding-bottom:10px")
+                            .x-friend-item(v-for="instance in groupInstances" :key="instance.id" @click="showGroupDialog(instance.ownerId)")
+                                .avatar
+                                    img(v-lazy="instance.$group.iconUrl")
+                                .detail
+                                    span.name
+                                        span(v-text="instance.$group.name")
+                                        span(style="font-weight:normal;margin-left:5px") ({{ instance.userCount }}/{{ instance.capacity }})
+                                    location.extra(:location="instance.location" :link="false")
+
+
             //- ## Dialogs ## -\\
 
             //- dialog: user

html/src/localization/strings/en.json

@@ -477,8 +477,8 @@
         "search_result_more": "Search More:",
         "direct_access_tooltip": "Direct access ID/URL from clipboard",
         "refresh_tooltip": "Refresh friends",
-        "friends": "FRIENDS",
+        "groups": "Group Instances",
-        "groups": "GROUPS",
+        "friends": "Friends",
         "me": "ME",
         "favorite": "FAVORITES",
         "online": "ONLINE",

html/src/mixins/tabs/settings.pug

@@ -31,7 +31,7 @@ mixin settingsTab()
     .x-container(v-show="$refs.menu && $refs.menu.activeIndex === 'settings'")
         div.options-container(style="margin-top:0")
             span.header {{ $t("view.settings.header") }}
-        el-tabs(type="card" style="margin-top:10px")
+        el-tabs(type="card" style="height: calc(100vh - 51px")
             el-tab-pane(:label="$t('view.settings.category.general')")
                 //- General | General
                 div.options-container(style="margin-top:0")