add context menu for groupsidebar

src/components/dialogs/GroupDialog/GroupDialog.vue

@@ -368,7 +368,6 @@
                                     :currentlocation="lastLocation.location"
                                     :instance="room.ref"
                                     :friendcount="room.friendCount"
-                                    :show-launch="false"
                                     refresh-tooltip="Refresh player count"
                                     :on-refresh="() => refreshInstancePlayerCount(room.tag)" />
                             </div>
@@ -1784,9 +1783,7 @@
         groupDialogGalleryCurrentName.value = '0';
         isGroupGalleryLoading.value = true;
         const groupId = groupDialog.value.id;
-        const tasks = (groupDialog.value.ref.galleries || []).map((gallery) =>
+        const tasks = (groupDialog.value.ref.galleries || []).map((gallery) => getGroupGallery(groupId, gallery.id));
-            getGroupGallery(groupId, gallery.id)
-        );
         await Promise.allSettled(tasks);
         isGroupGalleryLoading.value = false;
     }

src/views/Sidebar/components/GroupsSidebar.vue

@@ -30,22 +30,41 @@
                             </template>
 
                             <template v-else-if="item.row.type === 'group-item'">
-                                <div class="x-friend-item" @click="showGroupDialog(item.row.ownerId)">
+                                <ContextMenu>
-                                    <template v-if="item.row.isVisible">
+                                    <ContextMenuTrigger as-child>
-                                        <div class="avatar">
+                                        <div class="x-friend-item" @click="showGroupDialog(item.row.ownerId)">
-                                            <img :src="getSmallGroupIconUrl(item.row.iconUrl)" loading="lazy" />
+                                            <template v-if="item.row.isVisible">
+                                                <div class="avatar">
+                                                    <img :src="getSmallGroupIconUrl(item.row.iconUrl)" loading="lazy" />
+                                                </div>
+                                                <div class="detail">
+                                                    <span class="name">
+                                                        <span v-text="item.row.name"></span>
+                                                        <span class="ml-1.5 font-normal">
+                                                            ({{ item.row.userCount }}/{{ item.row.capacity }})
+                                                        </span>
+                                                    </span>
+                                                    <Location
+                                                        class="text-xs"
+                                                        :location="item.row.location"
+                                                        :link="false" />
+                                                </div>
+                                            </template>
                                         </div>
-                                        <div class="detail">
+                                    </ContextMenuTrigger>
-                                            <span class="name">
+                                    <ContextMenuContent>
-                                                <span v-text="item.row.name"></span>
+                                        <ContextMenuItem
-                                                <span class="ml-1.5 font-normal">
+                                            :disabled="!checkCanInviteSelf(item.row.location)"
-                                                    ({{ item.row.userCount }}/{{ item.row.capacity }})
+                                            @click="groupInstanceLaunch(item.row.location)">
-                                                </span>
+                                            {{ t('dialog.user.info.launch_invite_tooltip') }}
-                                            </span>
+                                        </ContextMenuItem>
-                                            <Location class="text-xs" :location="item.row.location" :link="false" />
+                                        <ContextMenuItem
-                                        </div>
+                                            :disabled="!checkCanInviteSelf(item.row.location)"
-                                    </template>
+                                            @click="groupInstanceSelfInvite(item.row.location)">
-                                </div>
+                                            {{ t('dialog.user.info.self_invite_tooltip') }}
+                                        </ContextMenuItem>
+                                    </ContextMenuContent>
+                                </ContextMenu>
                             </template>
                         </div>
                     </template>
@@ -60,15 +79,27 @@
     import { computed, nextTick, onMounted, ref, watch } from 'vue';
     import { ChevronDown } from 'lucide-vue-next';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
+    import { useI18n } from 'vue-i18n';
     import { useVirtualizer } from '@tanstack/vue-virtual';
 
+    import {
+        ContextMenu,
+        ContextMenuContent,
+        ContextMenuItem,
+        ContextMenuTrigger
+    } from '../../../components/ui/context-menu';
     import { buildGroupHeaderRow, buildGroupItemRow, estimateGroupRowSize, getGroupId } from '../groupsSidebarUtils';
-    import { useAppearanceSettingsStore, useGroupStore } from '../../../stores';
+    import { checkCanInviteSelf, convertFileUrlToImageUrl, parseLocation } from '../../../shared/utils';
-    import { convertFileUrlToImageUrl } from '../../../shared/utils';
+    import { useAppearanceSettingsStore, useGroupStore, useLaunchStore } from '../../../stores';
+    import { instanceRequest } from '../../../api';
 
     import BackToTop from '../../../components/BackToTop.vue';
     import Location from '../../../components/Location.vue';
 
+    const { t } = useI18n();
+
+    const launchStore = useLaunchStore();
     const { isAgeGatedInstancesVisible } = storeToRefs(useAppearanceSettingsStore());
     const { showGroupDialog, sortGroupInstancesByInGame } = useGroupStore();
     const { groupInstances } = storeToRefs(useGroupStore());
@@ -164,6 +195,31 @@
         groupInstancesCfg.value[groupId].isCollapsed = !groupInstancesCfg.value[groupId].isCollapsed;
     }
 
+    /**
+     * @param {string} location - Instance location tag
+     */
+    function groupInstanceLaunch(location) {
+        if (!location) return;
+        launchStore.showLaunchDialog(location);
+    }
+
+    /**
+     * @param {string} location - Instance location tag
+     */
+    function groupInstanceSelfInvite(location) {
+        if (!location) return;
+        const L = parseLocation(location);
+        if (!L.isRealInstance) return;
+        instanceRequest
+            .selfInvite({
+                instanceId: L.instanceId,
+                worldId: L.worldId
+            })
+            .then(() => {
+                toast.success(t('message.invite.self_sent'));
+            });
+    }
+
     onMounted(() => {
         nextTick(() => {
             virtualizer.value?.measure?.();