feat: groups sidebar collapsible (#1094)

* wip

* wip

* add prettier formatter config for pug files

* feat: groups sidebar collapsible (#1079)

* rm old code

src/components/sidebar/GroupsSidebar.vue

@@ -0,0 +1,94 @@
+<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 sidebar-group-title"
+                :style="{ paddingTop: index === 0 ? '0px' : '10px' }"
+            >
+                <div @click="toggleGroupSidebarCollapse(getGroupId(group))" style="display: flex; align-items: center">
+                    <i
+                        class="el-icon-arrow-right"
+                        :class="{ rotate: !groupInstancesCfg[getGroupId(group)].isCollapsed }"
+                    ></i>
+                    <span style="margin-left: 5px">{{ group[0].group.name }} – {{ group.length }}</span>
+                </div>
+            </div>
+
+            <div
+                v-if="!groupInstancesCfg[getGroupId(group)].isCollapsed"
+                v-for="ref in group"
+                :key="ref.instance.id"
+                class="x-friend-item"
+                @click="showGroupDialog(ref.instance.ownerId)"
+            >
+                <div class="avatar">
+                    <img v-lazy="ref.group.iconUrl" />
+                </div>
+                <div class="detail">
+                    <span class="name">
+                        <span v-text="ref.group.name"></span>
+                        <span style="font-weight: normal; margin-left: 5px"
+                            >({{ ref.instance.userCount }}/{{ ref.instance.capacity }})</span
+                        >
+                    </span>
+                    <location class="extra" :location="ref.instance.location" :link="false" />
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'GroupsSidebar',
+        props: {
+            groupInstances: {
+                type: Array,
+                default: () => []
+            }
+        },
+        data() {
+            return {
+                // temporary, sort feat not yet done
+                // may be the data structure to be changed
+                groupInstancesCfg: []
+            };
+        },
+        computed: {
+            groupedGroupInstances() {
+                const groupMap = new Map();
+
+                this.groupInstances.forEach((ref) => {
+                    const groupId = ref.group.groupId;
+                    if (!groupMap.has(groupId)) {
+                        groupMap.set(groupId, []);
+                    }
+                    groupMap.get(groupId).push(ref);
+
+                    if (!this.groupInstancesCfg[ref.group?.groupId]) {
+                        this.groupInstancesCfg = {
+                            [ref.group.groupId]: {
+                                isCollapsed: false
+                            },
+                            ...this.groupInstancesCfg
+                        };
+                    }
+                });
+
+                return Array.from(groupMap.values());
+            }
+        },
+        methods: {
+            toggleGroupSidebarCollapse(groupId) {
+                this.groupInstancesCfg[groupId].isCollapsed = !this.groupInstancesCfg[groupId].isCollapsed;
+            },
+            showGroupDialog(ownerId) {
+                this.$emit('show-group-dialog', ownerId);
+            },
+            getGroupId(group) {
+                return group[0]?.group?.groupId || '';
+            }
+        }
+    };
+</script>