From b2bd7693bbc2692532b2665a5148d1f165bc912f Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Tue, 20 Jan 2026 17:30:23 +0900
Subject: [PATCH] feat: add breadcrumb components and main dialog layout
 functionality

---
 .../dialogs/AvatarDialog/AvatarDialog.vue     | 1008 ++++---
 .../dialogs/GroupDialog/GroupDialog.vue       | 2041 +++++++-------
 .../dialogs/MainDialogContainer.vue           |  210 ++
 .../dialogs/UserDialog/UserDialog.vue         | 2345 ++++++++---------
 .../dialogs/WorldDialog/WorldDialog.vue       | 1302 +++++----
 src/components/ui/breadcrumb/Breadcrumb.vue   |   11 +
 .../ui/breadcrumb/BreadcrumbEllipsis.vue      |   21 +
 .../ui/breadcrumb/BreadcrumbItem.vue          |   13 +
 .../ui/breadcrumb/BreadcrumbLink.vue          |   20 +
 .../ui/breadcrumb/BreadcrumbList.vue          |   17 +
 .../ui/breadcrumb/BreadcrumbPage.vue          |   18 +
 .../ui/breadcrumb/BreadcrumbSeparator.vue     |   20 +
 src/components/ui/breadcrumb/index.js         |    7 +
 ...Resizable.js => useMainLayoutResizable.js} |   10 +-
 src/plugin/router.js                          |    4 +-
 src/stores/avatar.js                          |   28 +-
 src/stores/group.js                           |   27 +-
 src/stores/ui.js                              |   56 +-
 src/stores/user.js                            |   24 +-
 src/stores/world.js                           |   27 +-
 ...AuthenticatedLayout.vue => MainLayout.vue} |   30 +-
 21 files changed, 3768 insertions(+), 3471 deletions(-)
 create mode 100644 src/components/dialogs/MainDialogContainer.vue
 create mode 100644 src/components/ui/breadcrumb/Breadcrumb.vue
 create mode 100644 src/components/ui/breadcrumb/BreadcrumbEllipsis.vue
 create mode 100644 src/components/ui/breadcrumb/BreadcrumbItem.vue
 create mode 100644 src/components/ui/breadcrumb/BreadcrumbLink.vue
 create mode 100644 src/components/ui/breadcrumb/BreadcrumbList.vue
 create mode 100644 src/components/ui/breadcrumb/BreadcrumbPage.vue
 create mode 100644 src/components/ui/breadcrumb/BreadcrumbSeparator.vue
 create mode 100644 src/components/ui/breadcrumb/index.js
 rename src/composables/{useAuthenticatedLayoutResizable.js => useMainLayoutResizable.js} (95%)
 rename src/views/Layout/{AuthenticatedLayout.vue => MainLayout.vue} (87%)

diff --git a/src/components/dialogs/AvatarDialog/AvatarDialog.vue b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
index 886bfb3d..a501e09c 100644
--- a/src/components/dialogs/AvatarDialog/AvatarDialog.vue
+++ b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
@@ -1,544 +1,515 @@
 <template>
-    <Dialog v-model:open="avatarDialog.visible">
-        <DialogContent
-            class="x-dialog x-avatar-dialog sm:max-w-235 translate-y-0"
-            style="top: 10vh"
-            :show-close-button="false">
-            <div>
-                <div style="display: flex">
-                    <img
-                        :src="avatarDialog.ref.thumbnailImageUrl"
-                        class="cursor-pointer"
-                        @click="showFullscreenImageDialog(avatarDialog.ref.imageUrl)"
-                        style="flex: none; width: 160px; height: 120px; border-radius: 12px"
-                        loading="lazy" />
-                    <div style="flex: 1; display: flex; align-items: center; margin-left: 15px">
-                        <div style="flex: 1">
-                            <div>
+    <div>
+        <div style="display: flex">
+            <img
+                :src="avatarDialog.ref.thumbnailImageUrl"
+                class="cursor-pointer"
+                @click="showFullscreenImageDialog(avatarDialog.ref.imageUrl)"
+                style="flex: none; width: 160px; height: 120px; border-radius: 12px"
+                loading="lazy" />
+            <div style="flex: 1; display: flex; align-items: center; margin-left: 15px">
+                <div style="flex: 1">
+                    <div>
+                        <span
+                            class="font-bold"
+                            style="margin-right: 5px; cursor: pointer"
+                            v-text="avatarDialog.ref.name"
+                            @click="copyToClipboard(avatarDialog.ref.name)"></span>
+                    </div>
+                    <div style="margin-top: 5px">
+                        <span
+                            class="cursor-pointer x-grey"
+                            style="font-family: monospace"
+                            @click="showUserDialog(avatarDialog.ref.authorId)"
+                            v-text="avatarDialog.ref.authorName"></span>
+                    </div>
+                    <div>
+                        <Badge
+                            v-if="avatarDialog.ref.releaseStatus === 'public'"
+                            variant="outline"
+                            style="margin-right: 5px; margin-top: 5px">
+                            {{ t('dialog.avatar.tags.public') }}
+                        </Badge>
+                        <Badge v-else variant="outline" style="margin-right: 5px; margin-top: 5px">
+                            {{ t('dialog.avatar.tags.private') }}
+                        </Badge>
+                        <TooltipWrapper v-if="avatarDialog.isPC" side="top" content="PC">
+                            <Badge
+                                class="x-tag-platform-pc"
+                                variant="outline"
+                                style="margin-right: 5px; margin-top: 5px"
+                                ><Monitor class="h-4 w-4 x-tag-platform-pc" />
                                 <span
-                                    class="font-bold"
-                                    style="margin-right: 5px; cursor: pointer"
-                                    v-text="avatarDialog.ref.name"
-                                    @click="copyToClipboard(avatarDialog.ref.name)"></span>
-                            </div>
-                            <div style="margin-top: 5px">
+                                    v-if="avatarDialog.platformInfo.pc"
+                                    :class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']"
+                                    >{{ avatarDialog.platformInfo.pc.performanceRating }}</span
+                                >
                                 <span
-                                    class="cursor-pointer x-grey"
-                                    style="font-family: monospace"
-                                    @click="showUserDialog(avatarDialog.ref.authorId)"
-                                    v-text="avatarDialog.ref.authorName"></span>
-                            </div>
-                            <div>
+                                    v-if="avatarDialog.bundleSizes['standalonewindows']"
+                                    :class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']"
+                                    >{{ avatarDialog.bundleSizes['standalonewindows'].fileSize }}</span
+                                >
+                            </Badge>
+                        </TooltipWrapper>
+                        <TooltipWrapper v-if="avatarDialog.isQuest" side="top" content="Android">
+                            <Badge
+                                class="x-tag-platform-quest"
+                                variant="outline"
+                                style="margin-right: 5px; margin-top: 5px"
+                                ><Smartphone class="h-4 w-4 x-tag-platform-quest" />
+                                <span
+                                    v-if="avatarDialog.platformInfo.android"
+                                    :class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']"
+                                    >{{ avatarDialog.platformInfo.android.performanceRating }}</span
+                                >
+                                <span
+                                    v-if="avatarDialog.bundleSizes['android']"
+                                    :class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']"
+                                    >{{ avatarDialog.bundleSizes['android'].fileSize }}</span
+                                >
+                            </Badge>
+                        </TooltipWrapper>
+                        <TooltipWrapper v-if="avatarDialog.isIos" side="top" content="iOS">
+                            <Badge
+                                class="text-[#8e8e93] border-[#8e8e93]"
+                                variant="outline"
+                                style="margin-right: 5px; margin-top: 5px"
+                                ><Apple class="h-4 w-4 text-[#8e8e93]" />
+                                <span
+                                    v-if="avatarDialog.platformInfo.ios"
+                                    :class="['x-grey', 'x-tag-border-left', 'text-[#8e8e93]', 'border-[#8e8e93]']"
+                                    >{{ avatarDialog.platformInfo.ios.performanceRating }}</span
+                                >
+                                <span
+                                    v-if="avatarDialog.bundleSizes['ios']"
+                                    :class="['x-grey', 'x-tag-border-left', 'text-[#8e8e93]', 'border-[#8e8e93]']"
+                                    >{{ avatarDialog.bundleSizes['ios'].fileSize }}</span
+                                >
+                            </Badge>
+                        </TooltipWrapper>
+                        <Badge
+                            v-if="avatarDialog.inCache"
+                            variant="outline"
+                            class="cursor-pointer"
+                            style="margin-right: 5px; margin-top: 5px"
+                            @click="openFolderGeneric(avatarDialog.cachePath)">
+                            <span v-text="avatarDialog.cacheSize"></span>
+                            &nbsp;{{ t('dialog.avatar.tags.cache') }}
+                        </Badge>
+                        <Badge
+                            v-if="avatarDialog.ref.styles?.primary || avatarDialog.ref.styles?.secondary"
+                            variant="outline"
+                            style="margin-right: 5px; margin-top: 5px"
+                            >Styles
+                            <span v-if="avatarDialog.ref.styles.primary" :class="['x-grey', 'x-tag-border-left']">{{
+                                avatarDialog.ref.styles.primary
+                            }}</span>
+                            <span v-if="avatarDialog.ref.styles.secondary" :class="['x-grey', 'x-tag-border-left']">{{
+                                avatarDialog.ref.styles.secondary
+                            }}</span>
+                        </Badge>
+                        <Badge
+                            v-if="avatarDialog.isQuestFallback"
+                            variant="outline"
+                            style="margin-right: 5px; margin-top: 5px">
+                            {{ t('dialog.avatar.tags.fallback') }}
+                        </Badge>
+                        <Badge
+                            v-if="avatarDialog.hasImposter"
+                            variant="outline"
+                            style="margin-right: 5px; margin-top: 5px"
+                            >{{ t('dialog.avatar.tags.impostor') }}
+                            <span v-if="avatarDialog.imposterVersion" :class="['x-grey', 'x-tag-border-left']"
+                                >v{{ avatarDialog.imposterVersion }}</span
+                            >
+                        </Badge>
+                        <Badge
+                            v-if="avatarDialog.ref.unityPackageUrl"
+                            variant="outline"
+                            style="margin-right: 5px; margin-top: 5px">
+                            {{ t('dialog.avatar.tags.future_proofing') }}
+                        </Badge>
+                        <div>
+                            <template v-for="tag in avatarDialog.ref.tags" :key="tag">
                                 <Badge
-                                    v-if="avatarDialog.ref.releaseStatus === 'public'"
+                                    v-if="tag.startsWith('content_')"
                                     variant="outline"
                                     style="margin-right: 5px; margin-top: 5px">
-                                    {{ t('dialog.avatar.tags.public') }}
-                                </Badge>
-                                <Badge v-else variant="outline" style="margin-right: 5px; margin-top: 5px">
-                                    {{ t('dialog.avatar.tags.private') }}
-                                </Badge>
-                                <TooltipWrapper v-if="avatarDialog.isPC" side="top" content="PC">
-                                    <Badge
-                                        class="x-tag-platform-pc"
-                                        variant="outline"
-                                        style="margin-right: 5px; margin-top: 5px"
-                                        ><Monitor class="h-4 w-4 x-tag-platform-pc" />
-                                        <span
-                                            v-if="avatarDialog.platformInfo.pc"
-                                            :class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']"
-                                            >{{ avatarDialog.platformInfo.pc.performanceRating }}</span
-                                        >
-                                        <span
-                                            v-if="avatarDialog.bundleSizes['standalonewindows']"
-                                            :class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']"
-                                            >{{ avatarDialog.bundleSizes['standalonewindows'].fileSize }}</span
-                                        >
-                                    </Badge>
-                                </TooltipWrapper>
-                                <TooltipWrapper v-if="avatarDialog.isQuest" side="top" content="Android">
-                                    <Badge
-                                        class="x-tag-platform-quest"
-                                        variant="outline"
-                                        style="margin-right: 5px; margin-top: 5px"
-                                        ><Smartphone class="h-4 w-4 x-tag-platform-quest" />
-                                        <span
-                                            v-if="avatarDialog.platformInfo.android"
-                                            :class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']"
-                                            >{{ avatarDialog.platformInfo.android.performanceRating }}</span
-                                        >
-                                        <span
-                                            v-if="avatarDialog.bundleSizes['android']"
-                                            :class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']"
-                                            >{{ avatarDialog.bundleSizes['android'].fileSize }}</span
-                                        >
-                                    </Badge>
-                                </TooltipWrapper>
-                                <TooltipWrapper v-if="avatarDialog.isIos" side="top" content="iOS">
-                                    <Badge
-                                        class="text-[#8e8e93] border-[#8e8e93]"
-                                        variant="outline"
-                                        style="margin-right: 5px; margin-top: 5px"
-                                        ><Apple class="h-4 w-4 text-[#8e8e93]" />
-                                        <span
-                                            v-if="avatarDialog.platformInfo.ios"
-                                            :class="[
-                                                'x-grey',
-                                                'x-tag-border-left',
-                                                'text-[#8e8e93]',
-                                                'border-[#8e8e93]'
-                                            ]"
-                                            >{{ avatarDialog.platformInfo.ios.performanceRating }}</span
-                                        >
-                                        <span
-                                            v-if="avatarDialog.bundleSizes['ios']"
-                                            :class="[
-                                                'x-grey',
-                                                'x-tag-border-left',
-                                                'text-[#8e8e93]',
-                                                'border-[#8e8e93]'
-                                            ]"
-                                            >{{ avatarDialog.bundleSizes['ios'].fileSize }}</span
-                                        >
-                                    </Badge>
-                                </TooltipWrapper>
-                                <Badge
-                                    v-if="avatarDialog.inCache"
-                                    variant="outline"
-                                    class="cursor-pointer"
-                                    style="margin-right: 5px; margin-top: 5px"
-                                    @click="openFolderGeneric(avatarDialog.cachePath)">
-                                    <span v-text="avatarDialog.cacheSize"></span>
-                                    &nbsp;{{ t('dialog.avatar.tags.cache') }}
+                                    <span v-if="tag === 'content_horror'">{{
+                                        t('dialog.avatar.tags.content_horror')
+                                    }}</span>
+                                    <span v-else-if="tag === 'content_gore'">{{
+                                        t('dialog.avatar.tags.content_gore')
+                                    }}</span>
+                                    <span v-else-if="tag === 'content_violence'">{{
+                                        t('dialog.avatar.tags.content_violence')
+                                    }}</span>
+                                    <span v-else-if="tag === 'content_adult'">{{
+                                        t('dialog.avatar.tags.content_adult')
+                                    }}</span>
+                                    <span v-else-if="tag === 'content_sex'">{{
+                                        t('dialog.avatar.tags.content_sex')
+                                    }}</span>
+                                    <span v-else>{{ tag.replace('content_', '') }}</span>
                                 </Badge>
                                 <Badge
-                                    v-if="avatarDialog.ref.styles?.primary || avatarDialog.ref.styles?.secondary"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px"
-                                    >Styles
-                                    <span
-                                        v-if="avatarDialog.ref.styles.primary"
-                                        :class="['x-grey', 'x-tag-border-left']"
-                                        >{{ avatarDialog.ref.styles.primary }}</span
-                                    >
-                                    <span
-                                        v-if="avatarDialog.ref.styles.secondary"
-                                        :class="['x-grey', 'x-tag-border-left']"
-                                        >{{ avatarDialog.ref.styles.secondary }}</span
-                                    >
-                                </Badge>
-                                <Badge
-                                    v-if="avatarDialog.isQuestFallback"
+                                    v-if="tag.startsWith('author_tag_')"
                                     variant="outline"
                                     style="margin-right: 5px; margin-top: 5px">
-                                    {{ t('dialog.avatar.tags.fallback') }}
+                                    <span>
+                                        {{ tag.replace('author_tag_', '') }}
+                                    </span>
                                 </Badge>
-                                <Badge
-                                    v-if="avatarDialog.hasImposter"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px"
-                                    >{{ t('dialog.avatar.tags.impostor') }}
-                                    <span v-if="avatarDialog.imposterVersion" :class="['x-grey', 'x-tag-border-left']"
-                                        >v{{ avatarDialog.imposterVersion }}</span
-                                    >
-                                </Badge>
-                                <Badge
-                                    v-if="avatarDialog.ref.unityPackageUrl"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px">
-                                    {{ t('dialog.avatar.tags.future_proofing') }}
-                                </Badge>
-                                <div>
-                                    <template v-for="tag in avatarDialog.ref.tags" :key="tag">
-                                        <Badge
-                                            v-if="tag.startsWith('content_')"
-                                            variant="outline"
-                                            style="margin-right: 5px; margin-top: 5px">
-                                            <span v-if="tag === 'content_horror'">{{
-                                                t('dialog.avatar.tags.content_horror')
-                                            }}</span>
-                                            <span v-else-if="tag === 'content_gore'">{{
-                                                t('dialog.avatar.tags.content_gore')
-                                            }}</span>
-                                            <span v-else-if="tag === 'content_violence'">{{
-                                                t('dialog.avatar.tags.content_violence')
-                                            }}</span>
-                                            <span v-else-if="tag === 'content_adult'">{{
-                                                t('dialog.avatar.tags.content_adult')
-                                            }}</span>
-                                            <span v-else-if="tag === 'content_sex'">{{
-                                                t('dialog.avatar.tags.content_sex')
-                                            }}</span>
-                                            <span v-else>{{ tag.replace('content_', '') }}</span>
-                                        </Badge>
-                                        <Badge
-                                            v-if="tag.startsWith('author_tag_')"
-                                            variant="outline"
-                                            style="margin-right: 5px; margin-top: 5px">
-                                            <span>
-                                                {{ tag.replace('author_tag_', '') }}
-                                            </span>
-                                        </Badge>
-                                    </template>
-                                </div>
-                            </div>
-                            <div style="margin-top: 5px">
-                                <span
-                                    v-show="avatarDialog.ref.name !== avatarDialog.ref.description"
-                                    style="font-size: 12px"
-                                    v-text="avatarDialog.ref.description"></span>
-                            </div>
-                        </div>
-                        <div class="flex items-center">
-                            <TooltipWrapper
-                                v-if="avatarDialog.inCache"
-                                side="top"
-                                :content="t('dialog.avatar.actions.delete_cache_tooltip')">
-                                <Button
-                                    class="rounded-full mr-2"
-                                    size="icon-lg"
-                                    variant="outline"
-                                    :disabled="isGameRunning && avatarDialog.cacheLocked"
-                                    @click="deleteVRChatCache(avatarDialog.ref)"
-                                    ><Trash2
-                                /></Button>
-                            </TooltipWrapper>
-
-                            <TooltipWrapper
-                                v-if="avatarDialog.isFavorite"
-                                side="top"
-                                :ignore-non-keyboard-focus="true"
-                                :content="t('dialog.avatar.actions.favorite_tooltip')">
-                                <Button class="rounded-full" size="icon-lg" @click="avatarDialogCommand('Add Favorite')"
-                                    ><Star
-                                /></Button>
-                            </TooltipWrapper>
-                            <TooltipWrapper
-                                v-else
-                                side="top"
-                                :ignore-non-keyboard-focus="true"
-                                :content="t('dialog.avatar.actions.favorite_tooltip')">
-                                <Button
-                                    class="rounded-full"
-                                    size="icon-lg"
-                                    variant="outline"
-                                    @click="avatarDialogCommand('Add Favorite')"
-                                    ><Star
-                                /></Button>
-                            </TooltipWrapper>
-
-                            <TooltipWrapper side="top" :content="t('dialog.avatar.actions.select')">
-                                <Button
-                                    class="rounded-full ml-2"
-                                    size="icon-lg"
-                                    variant="outline"
-                                    :disabled="currentUser.currentAvatar === avatarDialog.id"
-                                    @click="selectAvatarWithoutConfirmation(avatarDialog.id)">
-                                    <CheckCircle
-                                /></Button>
-                            </TooltipWrapper>
-                            <DropdownMenu>
-                                <DropdownMenuTrigger as-child>
-                                    <Button
-                                        class="rounded-full ml-2"
-                                        :variant="avatarDialog.isBlocked ? 'destructive' : 'outline'"
-                                        size="icon-lg">
-                                        <Ellipsis />
-                                    </Button>
-                                </DropdownMenuTrigger>
-                                <DropdownMenuContent>
-                                    <DropdownMenuItem @click="avatarDialogCommand('RefreshCw')">
-                                        <RefreshCw class="size-4" />
-                                        {{ t('dialog.avatar.actions.refresh') }}
-                                    </DropdownMenuItem>
-                                    <DropdownMenuItem @click="avatarDialogCommand('Share2')">
-                                        <Share2 class="size-4" />
-                                        {{ t('dialog.avatar.actions.share') }}
-                                    </DropdownMenuItem>
-                                    <DropdownMenuSeparator />
-                                    <DropdownMenuItem
-                                        v-if="avatarDialog.isBlocked"
-                                        variant="destructive"
-                                        @click="avatarDialogCommand('Unblock Avatar')">
-                                        <CheckCircle class="size-4" />
-                                        {{ t('dialog.avatar.actions.unblock') }}
-                                    </DropdownMenuItem>
-                                    <DropdownMenuItem v-else @click="avatarDialogCommand('Block Avatar')">
-                                        <XCircle class="size-4" />
-                                        {{ t('dialog.avatar.actions.block') }}
-                                    </DropdownMenuItem>
-                                    <DropdownMenuItem
-                                        v-if="/quest/.test(avatarDialog.ref.tags)"
-                                        @click="avatarDialogCommand('Select Fallback Avatar')">
-                                        <Check class="size-4" />
-                                        {{ t('dialog.avatar.actions.select_fallback') }}
-                                    </DropdownMenuItem>
-                                    <template v-if="avatarDialog.ref.authorId === currentUser.id">
-                                        <DropdownMenuSeparator />
-                                        <DropdownMenuItem
-                                            v-if="avatarDialog.ref.releaseStatus === 'public'"
-                                            @click="avatarDialogCommand('Make Private')">
-                                            <User class="size-4" />
-                                            {{ t('dialog.avatar.actions.make_private') }}
-                                        </DropdownMenuItem>
-                                        <DropdownMenuItem v-else @click="avatarDialogCommand('Make Public')">
-                                            <User class="size-4" />
-                                            {{ t('dialog.avatar.actions.make_public') }}
-                                        </DropdownMenuItem>
-                                        <DropdownMenuItem @click="avatarDialogCommand('Rename')">
-                                            <Pencil class="size-4" />
-                                            {{ t('dialog.avatar.actions.rename') }}
-                                        </DropdownMenuItem>
-                                        <DropdownMenuItem @click="avatarDialogCommand('Change Description')">
-                                            <Pencil class="size-4" />
-                                            {{ t('dialog.avatar.actions.change_description') }}
-                                        </DropdownMenuItem>
-                                        <DropdownMenuItem @click="avatarDialogCommand('Change Content Tags')">
-                                            <Pencil class="size-4" />
-                                            {{ t('dialog.avatar.actions.change_content_tags') }}
-                                        </DropdownMenuItem>
-                                        <DropdownMenuItem @click="avatarDialogCommand('Change Styles and Author Tags')">
-                                            <Pencil class="size-4" />
-                                            {{ t('dialog.avatar.actions.change_styles_author_tags') }}
-                                        </DropdownMenuItem>
-                                        <DropdownMenuItem @click="avatarDialogCommand('Change Image')">
-                                            <Image class="size-4" />
-                                            {{ t('dialog.avatar.actions.change_image') }}
-                                        </DropdownMenuItem>
-                                        <DropdownMenuItem
-                                            v-if="avatarDialog.ref.unityPackageUrl"
-                                            @click="avatarDialogCommand('Download Unity Package')">
-                                            <Download class="size-4" />
-                                            {{ t('dialog.avatar.actions.download_package') }}
-                                        </DropdownMenuItem>
-                                        <DropdownMenuSeparator />
-                                        <DropdownMenuItem
-                                            v-if="avatarDialog.hasImposter"
-                                            variant="destructive"
-                                            @click="avatarDialogCommand('Regenerate Imposter')">
-                                            <RefreshCw class="size-4" />
-                                            {{ t('dialog.avatar.actions.regenerate_impostor') }}
-                                        </DropdownMenuItem>
-                                        <DropdownMenuItem
-                                            v-if="avatarDialog.hasImposter"
-                                            variant="destructive"
-                                            @click="avatarDialogCommand('Trash2 Imposter')">
-                                            <Trash2 class="size-4" />
-                                            {{ t('dialog.avatar.actions.delete_impostor') }}
-                                        </DropdownMenuItem>
-                                        <DropdownMenuItem v-else @click="avatarDialogCommand('Create Imposter')">
-                                            <User class="size-4" />
-                                            {{ t('dialog.avatar.actions.create_impostor') }}
-                                        </DropdownMenuItem>
-                                        <DropdownMenuItem variant="destructive" @click="avatarDialogCommand('Trash2')">
-                                            <Trash2 class="size-4" />
-                                            {{ t('dialog.avatar.actions.delete') }}
-                                        </DropdownMenuItem>
-                                    </template>
-                                </DropdownMenuContent>
-                            </DropdownMenu>
+                            </template>
                         </div>
                     </div>
+                    <div style="margin-top: 5px">
+                        <span
+                            v-show="avatarDialog.ref.name !== avatarDialog.ref.description"
+                            style="font-size: 12px"
+                            v-text="avatarDialog.ref.description"></span>
+                    </div>
                 </div>
-                <TabsUnderline
-                    v-model="avatarDialogActiveTab"
-                    :items="avatarDialogTabs"
-                    :unmount-on-hide="false"
-                    @update:modelValue="avatarDialogTabClick">
-                    <template #Info>
-                        <div class="x-friend-list" style="max-height: unset">
-                            <div
-                                v-if="avatarDialog.galleryImages.length || avatarDialog.ref.authorId === currentUser.id"
-                                style="width: 100%">
-                                <span class="name">{{ t('dialog.avatar.info.gallery') }}</span>
-                                <input
-                                    id="AvatarGalleryUploadButton"
-                                    type="file"
-                                    accept="image/*"
-                                    style="display: none"
-                                    @change="onFileChangeAvatarGallery" />
-                                <Button
-                                    v-if="avatarDialog.ref.authorId === currentUser.id"
-                                    variant="outline"
-                                    size="sm"
-                                    :disabled="avatarDialog.galleryLoading"
-                                    class="ml-1"
-                                    @click="displayAvatarGalleryUpload">
-                                    <Upload />
-                                    {{ t('dialog.screenshot_metadata.upload') }}
-                                </Button>
-                                <div class="mt-2 w-[80%] ml-20">
-                                    <Carousel v-if="avatarDialog.galleryImages.length" class="w-full">
-                                        <CarouselContent class="h-50">
-                                            <CarouselItem
-                                                v-for="imageUrl in avatarDialog.galleryImages"
-                                                :key="imageUrl">
-                                                <div class="relative h-50 w-full">
-                                                    <img
-                                                        :src="imageUrl"
-                                                        style="width: 100%; height: 100%; object-fit: contain"
-                                                        @click="showFullscreenImageDialog(imageUrl)"
-                                                        loading="lazy" />
-                                                </div>
-                                            </CarouselItem>
-                                        </CarouselContent>
-                                        <CarouselPrevious />
-                                        <CarouselNext />
-                                    </Carousel>
-                                </div>
-                            </div>
-                            <div v-if="avatarDialog.ref.publishedListings?.length">
-                                <span class="name">{{ t('dialog.avatar.info.listings') }}</span>
-                                <div
-                                    v-for="listing in avatarDialog.ref.publishedListings"
-                                    :key="listing.id"
-                                    class="x-friend-item"
-                                    style="width: 100%; cursor: default">
-                                    <div class="avatar">
-                                        <img
-                                            :src="getImageUrlFromImageId(listing.imageId)"
-                                            @click="showFullscreenImageDialog(getImageUrlFromImageId(listing.imageId))"
-                                            loading="lazy" />
-                                    </div>
-                                    <div class="detail">
-                                        <span class="name">{{ listing.displayName }}</span>
-                                        <span class="extra" style="text-decoration: underline; font-style: italic"
-                                            >${{ commaNumber(listing.priceTokens) }}V</span
-                                        >
-                                        <span
-                                            class="extra"
-                                            style="text-overflow: ellipsis; text-wrap: auto"
-                                            v-text="listing.description"></span>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="x-friend-item" style="width: 100%; cursor: default">
-                                <div class="detail">
-                                    <span class="name" style="margin-bottom: 5px">{{
-                                        t('dialog.avatar.info.memo')
-                                    }}</span>
-                                    <InputGroupTextareaField
-                                        v-model="memo"
-                                        class="extra"
-                                        :rows="2"
-                                        :placeholder="t('dialog.avatar.info.memo_placeholder')"
-                                        input-class="resize-none min-h-0"
-                                        @change="onAvatarMemoChange" />
-                                </div>
-                            </div>
-                            <div class="x-friend-item" style="width: 100%; cursor: default">
-                                <div class="detail">
-                                    <span class="name">{{ t('dialog.avatar.info.id') }}</span>
-                                    <span class="extra"
-                                        >{{ avatarDialog.id
-                                        }}<TooltipWrapper side="top" :content="t('dialog.avatar.info.id_tooltip')">
-                                            <DropdownMenu>
-                                                <DropdownMenuTrigger as-child>
-                                                    <Button
-                                                        class="rounded-full text-xs"
-                                                        size="icon-sm"
-                                                        variant="outline"
-                                                        @click.stop
-                                                        ><Copy class="h-4 w-4" />
-                                                    </Button>
-                                                </DropdownMenuTrigger>
-                                                <DropdownMenuContent>
-                                                    <DropdownMenuItem @click="copyAvatarId(avatarDialog.id)">
-                                                        {{ t('dialog.avatar.info.copy_id') }}
-                                                    </DropdownMenuItem>
-                                                    <DropdownMenuItem @click="copyAvatarUrl(avatarDialog.id)">
-                                                        {{ t('dialog.avatar.info.copy_url') }}
-                                                    </DropdownMenuItem>
-                                                </DropdownMenuContent>
-                                            </DropdownMenu>
-                                        </TooltipWrapper></span
-                                    >
-                                </div>
-                            </div>
-                            <div class="x-friend-item" style="cursor: default">
-                                <div class="detail">
-                                    <span class="name">{{ t('dialog.avatar.info.created_at') }}</span>
-                                    <span class="extra">{{
-                                        formatDateFilter(avatarDialog.ref.created_at, 'long')
-                                    }}</span>
-                                </div>
-                            </div>
-                            <div class="x-friend-item" style="cursor: default">
-                                <div class="detail">
-                                    <span class="name">{{ t('dialog.avatar.info.last_updated') }}</span>
-                                    <span v-if="avatarDialog.lastUpdated" class="extra">{{
-                                        formatDateFilter(avatarDialog.lastUpdated, 'long')
-                                    }}</span>
-                                    <span v-else class="extra">{{
-                                        formatDateFilter(avatarDialog.ref.updated_at, 'long')
-                                    }}</span>
-                                </div>
-                            </div>
-                            <div class="x-friend-item" style="cursor: default">
-                                <div class="detail">
-                                    <span class="name">{{ t('dialog.avatar.info.version') }}</span>
-                                    <span
-                                        v-if="avatarDialog.ref.version !== 0"
-                                        class="extra"
-                                        v-text="avatarDialog.ref.version"></span>
-                                    <span v-else class="extra">-</span>
-                                </div>
-                            </div>
-                            <div class="x-friend-item" style="cursor: default">
-                                <div class="detail">
-                                    <span class="name">{{ t('dialog.avatar.info.time_spent') }}</span>
+                <div class="flex items-center">
+                    <TooltipWrapper
+                        v-if="avatarDialog.inCache"
+                        side="top"
+                        :content="t('dialog.avatar.actions.delete_cache_tooltip')">
+                        <Button
+                            class="rounded-full mr-2"
+                            size="icon-lg"
+                            variant="outline"
+                            :disabled="isGameRunning && avatarDialog.cacheLocked"
+                            @click="deleteVRChatCache(avatarDialog.ref)"
+                            ><Trash2
+                        /></Button>
+                    </TooltipWrapper>
 
-                                    <span v-if="timeSpent === 0" class="extra">-</span>
-                                    <span v-else class="extra">{{ timeToText(timeSpent) }}</span>
-                                </div>
+                    <TooltipWrapper
+                        v-if="avatarDialog.isFavorite"
+                        side="top"
+                        :ignore-non-keyboard-focus="true"
+                        :content="t('dialog.avatar.actions.favorite_tooltip')">
+                        <Button class="rounded-full" size="icon-lg" @click="avatarDialogCommand('Add Favorite')"
+                            ><Star
+                        /></Button>
+                    </TooltipWrapper>
+                    <TooltipWrapper
+                        v-else
+                        side="top"
+                        :ignore-non-keyboard-focus="true"
+                        :content="t('dialog.avatar.actions.favorite_tooltip')">
+                        <Button
+                            class="rounded-full"
+                            size="icon-lg"
+                            variant="outline"
+                            @click="avatarDialogCommand('Add Favorite')"
+                            ><Star
+                        /></Button>
+                    </TooltipWrapper>
+
+                    <TooltipWrapper side="top" :content="t('dialog.avatar.actions.select')">
+                        <Button
+                            class="rounded-full ml-2"
+                            size="icon-lg"
+                            variant="outline"
+                            :disabled="currentUser.currentAvatar === avatarDialog.id"
+                            @click="selectAvatarWithoutConfirmation(avatarDialog.id)">
+                            <CheckCircle
+                        /></Button>
+                    </TooltipWrapper>
+                    <DropdownMenu>
+                        <DropdownMenuTrigger as-child>
+                            <Button
+                                class="rounded-full ml-2"
+                                :variant="avatarDialog.isBlocked ? 'destructive' : 'outline'"
+                                size="icon-lg">
+                                <Ellipsis />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent>
+                            <DropdownMenuItem @click="avatarDialogCommand('RefreshCw')">
+                                <RefreshCw class="size-4" />
+                                {{ t('dialog.avatar.actions.refresh') }}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem @click="avatarDialogCommand('Share2')">
+                                <Share2 class="size-4" />
+                                {{ t('dialog.avatar.actions.share') }}
+                            </DropdownMenuItem>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuItem
+                                v-if="avatarDialog.isBlocked"
+                                variant="destructive"
+                                @click="avatarDialogCommand('Unblock Avatar')">
+                                <CheckCircle class="size-4" />
+                                {{ t('dialog.avatar.actions.unblock') }}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem v-else @click="avatarDialogCommand('Block Avatar')">
+                                <XCircle class="size-4" />
+                                {{ t('dialog.avatar.actions.block') }}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem
+                                v-if="/quest/.test(avatarDialog.ref.tags)"
+                                @click="avatarDialogCommand('Select Fallback Avatar')">
+                                <Check class="size-4" />
+                                {{ t('dialog.avatar.actions.select_fallback') }}
+                            </DropdownMenuItem>
+                            <template v-if="avatarDialog.ref.authorId === currentUser.id">
+                                <DropdownMenuSeparator />
+                                <DropdownMenuItem
+                                    v-if="avatarDialog.ref.releaseStatus === 'public'"
+                                    @click="avatarDialogCommand('Make Private')">
+                                    <User class="size-4" />
+                                    {{ t('dialog.avatar.actions.make_private') }}
+                                </DropdownMenuItem>
+                                <DropdownMenuItem v-else @click="avatarDialogCommand('Make Public')">
+                                    <User class="size-4" />
+                                    {{ t('dialog.avatar.actions.make_public') }}
+                                </DropdownMenuItem>
+                                <DropdownMenuItem @click="avatarDialogCommand('Rename')">
+                                    <Pencil class="size-4" />
+                                    {{ t('dialog.avatar.actions.rename') }}
+                                </DropdownMenuItem>
+                                <DropdownMenuItem @click="avatarDialogCommand('Change Description')">
+                                    <Pencil class="size-4" />
+                                    {{ t('dialog.avatar.actions.change_description') }}
+                                </DropdownMenuItem>
+                                <DropdownMenuItem @click="avatarDialogCommand('Change Content Tags')">
+                                    <Pencil class="size-4" />
+                                    {{ t('dialog.avatar.actions.change_content_tags') }}
+                                </DropdownMenuItem>
+                                <DropdownMenuItem @click="avatarDialogCommand('Change Styles and Author Tags')">
+                                    <Pencil class="size-4" />
+                                    {{ t('dialog.avatar.actions.change_styles_author_tags') }}
+                                </DropdownMenuItem>
+                                <DropdownMenuItem @click="avatarDialogCommand('Change Image')">
+                                    <Image class="size-4" />
+                                    {{ t('dialog.avatar.actions.change_image') }}
+                                </DropdownMenuItem>
+                                <DropdownMenuItem
+                                    v-if="avatarDialog.ref.unityPackageUrl"
+                                    @click="avatarDialogCommand('Download Unity Package')">
+                                    <Download class="size-4" />
+                                    {{ t('dialog.avatar.actions.download_package') }}
+                                </DropdownMenuItem>
+                                <DropdownMenuSeparator />
+                                <DropdownMenuItem
+                                    v-if="avatarDialog.hasImposter"
+                                    variant="destructive"
+                                    @click="avatarDialogCommand('Regenerate Imposter')">
+                                    <RefreshCw class="size-4" />
+                                    {{ t('dialog.avatar.actions.regenerate_impostor') }}
+                                </DropdownMenuItem>
+                                <DropdownMenuItem
+                                    v-if="avatarDialog.hasImposter"
+                                    variant="destructive"
+                                    @click="avatarDialogCommand('Trash2 Imposter')">
+                                    <Trash2 class="size-4" />
+                                    {{ t('dialog.avatar.actions.delete_impostor') }}
+                                </DropdownMenuItem>
+                                <DropdownMenuItem v-else @click="avatarDialogCommand('Create Imposter')">
+                                    <User class="size-4" />
+                                    {{ t('dialog.avatar.actions.create_impostor') }}
+                                </DropdownMenuItem>
+                                <DropdownMenuItem variant="destructive" @click="avatarDialogCommand('Trash2')">
+                                    <Trash2 class="size-4" />
+                                    {{ t('dialog.avatar.actions.delete') }}
+                                </DropdownMenuItem>
+                            </template>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                </div>
+            </div>
+
+            <TabsUnderline
+                v-model="avatarDialogActiveTab"
+                :items="avatarDialogTabs"
+                :unmount-on-hide="false"
+                @update:modelValue="avatarDialogTabClick">
+                <template #Info>
+                    <div class="x-friend-list" style="max-height: unset">
+                        <div
+                            v-if="avatarDialog.galleryImages.length || avatarDialog.ref.authorId === currentUser.id"
+                            style="width: 100%">
+                            <span class="name">{{ t('dialog.avatar.info.gallery') }}</span>
+                            <input
+                                id="AvatarGalleryUploadButton"
+                                type="file"
+                                accept="image/*"
+                                style="display: none"
+                                @change="onFileChangeAvatarGallery" />
+                            <Button
+                                v-if="avatarDialog.ref.authorId === currentUser.id"
+                                variant="outline"
+                                size="sm"
+                                :disabled="avatarDialog.galleryLoading"
+                                class="ml-1"
+                                @click="displayAvatarGalleryUpload">
+                                <Upload />
+                                {{ t('dialog.screenshot_metadata.upload') }}
+                            </Button>
+                            <div class="mt-2 w-[80%] ml-20">
+                                <Carousel v-if="avatarDialog.galleryImages.length" class="w-full">
+                                    <CarouselContent class="h-50">
+                                        <CarouselItem v-for="imageUrl in avatarDialog.galleryImages" :key="imageUrl">
+                                            <div class="relative h-50 w-full">
+                                                <img
+                                                    :src="imageUrl"
+                                                    style="width: 100%; height: 100%; object-fit: contain"
+                                                    @click="showFullscreenImageDialog(imageUrl)"
+                                                    loading="lazy" />
+                                            </div>
+                                        </CarouselItem>
+                                    </CarouselContent>
+                                    <CarouselPrevious />
+                                    <CarouselNext />
+                                </Carousel>
                             </div>
-                            <div class="x-friend-item" style="width: 100%; cursor: default">
+                        </div>
+                        <div v-if="avatarDialog.ref.publishedListings?.length">
+                            <span class="name">{{ t('dialog.avatar.info.listings') }}</span>
+                            <div
+                                v-for="listing in avatarDialog.ref.publishedListings"
+                                :key="listing.id"
+                                class="x-friend-item"
+                                style="width: 100%; cursor: default">
+                                <div class="avatar">
+                                    <img
+                                        :src="getImageUrlFromImageId(listing.imageId)"
+                                        @click="showFullscreenImageDialog(getImageUrlFromImageId(listing.imageId))"
+                                        loading="lazy" />
+                                </div>
                                 <div class="detail">
-                                    <span class="name">{{ t('dialog.avatar.info.platform') }}</span>
+                                    <span class="name">{{ listing.displayName }}</span>
+                                    <span class="extra" style="text-decoration: underline; font-style: italic"
+                                        >${{ commaNumber(listing.priceTokens) }}V</span
+                                    >
                                     <span
-                                        v-if="avatarDialogPlatform"
                                         class="extra"
-                                        v-text="avatarDialogPlatform"></span>
-                                    <span v-else class="extra">-</span>
+                                        style="text-overflow: ellipsis; text-wrap: auto"
+                                        v-text="listing.description"></span>
                                 </div>
                             </div>
                         </div>
-                    </template>
-                    <template #JSON>
-                        <Button
-                            class="rounded-full mr-2"
-                            size="icon-sm"
-                            variant="outline"
-                            @click="refreshAvatarDialogTreeData()">
-                            <RefreshCw />
-                        </Button>
-                        <Button
-                            class="rounded-full"
-                            size="icon-sm"
-                            variant="outline"
-                            @click="downloadAndSaveJson(avatarDialog.id, avatarDialog.ref)">
-                            <Download />
-                        </Button>
-                        <vue-json-pretty :data="treeData" :deep="2" :theme="isDarkMode ? 'dark' : 'light'" show-icon />
-                        <br />
-                        <vue-json-pretty
-                            v-if="avatarDialog.fileAnalysis.length > 0"
-                            :data="avatarDialog.fileAnalysis"
-                            :deep="2"
-                            :theme="isDarkMode ? 'dark' : 'light'"
-                            show-icon />
-                    </template>
-                </TabsUnderline>
-                <template v-if="avatarDialog.visible">
-                    <SetAvatarTagsDialog v-model:setAvatarTagsDialog="setAvatarTagsDialog" />
-                    <SetAvatarStylesDialog v-model:setAvatarStylesDialog="setAvatarStylesDialog" />
-                    <ChangeAvatarImageDialog
-                        v-model:changeAvatarImageDialogVisible="changeAvatarImageDialogVisible"
-                        v-model:previousImageUrl="previousImageUrl" />
+                        <div class="x-friend-item" style="width: 100%; cursor: default">
+                            <div class="detail">
+                                <span class="name" style="margin-bottom: 5px">{{ t('dialog.avatar.info.memo') }}</span>
+                                <InputGroupTextareaField
+                                    v-model="memo"
+                                    class="extra"
+                                    :rows="2"
+                                    :placeholder="t('dialog.avatar.info.memo_placeholder')"
+                                    input-class="resize-none min-h-0"
+                                    @change="onAvatarMemoChange" />
+                            </div>
+                        </div>
+                        <div class="x-friend-item" style="width: 100%; cursor: default">
+                            <div class="detail">
+                                <span class="name">{{ t('dialog.avatar.info.id') }}</span>
+                                <span class="extra"
+                                    >{{ avatarDialog.id
+                                    }}<TooltipWrapper side="top" :content="t('dialog.avatar.info.id_tooltip')">
+                                        <DropdownMenu>
+                                            <DropdownMenuTrigger as-child>
+                                                <Button
+                                                    class="rounded-full text-xs"
+                                                    size="icon-sm"
+                                                    variant="outline"
+                                                    @click.stop
+                                                    ><Copy class="h-4 w-4" />
+                                                </Button>
+                                            </DropdownMenuTrigger>
+                                            <DropdownMenuContent>
+                                                <DropdownMenuItem @click="copyAvatarId(avatarDialog.id)">
+                                                    {{ t('dialog.avatar.info.copy_id') }}
+                                                </DropdownMenuItem>
+                                                <DropdownMenuItem @click="copyAvatarUrl(avatarDialog.id)">
+                                                    {{ t('dialog.avatar.info.copy_url') }}
+                                                </DropdownMenuItem>
+                                            </DropdownMenuContent>
+                                        </DropdownMenu>
+                                    </TooltipWrapper></span
+                                >
+                            </div>
+                        </div>
+                        <div class="x-friend-item" style="cursor: default">
+                            <div class="detail">
+                                <span class="name">{{ t('dialog.avatar.info.created_at') }}</span>
+                                <span class="extra">{{ formatDateFilter(avatarDialog.ref.created_at, 'long') }}</span>
+                            </div>
+                        </div>
+                        <div class="x-friend-item" style="cursor: default">
+                            <div class="detail">
+                                <span class="name">{{ t('dialog.avatar.info.last_updated') }}</span>
+                                <span v-if="avatarDialog.lastUpdated" class="extra">{{
+                                    formatDateFilter(avatarDialog.lastUpdated, 'long')
+                                }}</span>
+                                <span v-else class="extra">{{
+                                    formatDateFilter(avatarDialog.ref.updated_at, 'long')
+                                }}</span>
+                            </div>
+                        </div>
+                        <div class="x-friend-item" style="cursor: default">
+                            <div class="detail">
+                                <span class="name">{{ t('dialog.avatar.info.version') }}</span>
+                                <span
+                                    v-if="avatarDialog.ref.version !== 0"
+                                    class="extra"
+                                    v-text="avatarDialog.ref.version"></span>
+                                <span v-else class="extra">-</span>
+                            </div>
+                        </div>
+                        <div class="x-friend-item" style="cursor: default">
+                            <div class="detail">
+                                <span class="name">{{ t('dialog.avatar.info.time_spent') }}</span>
+
+                                <span v-if="timeSpent === 0" class="extra">-</span>
+                                <span v-else class="extra">{{ timeToText(timeSpent) }}</span>
+                            </div>
+                        </div>
+                        <div class="x-friend-item" style="width: 100%; cursor: default">
+                            <div class="detail">
+                                <span class="name">{{ t('dialog.avatar.info.platform') }}</span>
+                                <span v-if="avatarDialogPlatform" class="extra" v-text="avatarDialogPlatform"></span>
+                                <span v-else class="extra">-</span>
+                            </div>
+                        </div>
+                    </div>
                 </template>
-            </div>
-        </DialogContent>
-    </Dialog>
+                <template #JSON>
+                    <Button
+                        class="rounded-full mr-2"
+                        size="icon-sm"
+                        variant="outline"
+                        @click="refreshAvatarDialogTreeData()">
+                        <RefreshCw />
+                    </Button>
+                    <Button
+                        class="rounded-full"
+                        size="icon-sm"
+                        variant="outline"
+                        @click="downloadAndSaveJson(avatarDialog.id, avatarDialog.ref)">
+                        <Download />
+                    </Button>
+                    <vue-json-pretty :data="treeData" :deep="2" :theme="isDarkMode ? 'dark' : 'light'" show-icon />
+                    <br />
+                    <vue-json-pretty
+                        v-if="avatarDialog.fileAnalysis.length > 0"
+                        :data="avatarDialog.fileAnalysis"
+                        :deep="2"
+                        :theme="isDarkMode ? 'dark' : 'light'"
+                        show-icon />
+                </template>
+            </TabsUnderline>
+            <template v-if="avatarDialog.visible">
+                <SetAvatarTagsDialog v-model:setAvatarTagsDialog="setAvatarTagsDialog" />
+                <SetAvatarStylesDialog v-model:setAvatarStylesDialog="setAvatarStylesDialog" />
+                <ChangeAvatarImageDialog
+                    v-model:changeAvatarImageDialogVisible="changeAvatarImageDialogVisible"
+                    v-model:previousImageUrl="previousImageUrl" />
+            </template>
+        </div>
+    </div>
 </template>
 
 <script setup>
@@ -563,7 +534,6 @@
     } from 'lucide-vue-next';
     import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/components/ui/carousel';
     import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue';
-    import { Dialog, DialogContent } from '@/components/ui/dialog';
     import { Button } from '@/components/ui/button';
     import { InputGroupTextareaField } from '@/components/ui/input-group';
     import { TabsUnderline } from '@/components/ui/tabs';
diff --git a/src/components/dialogs/GroupDialog/GroupDialog.vue b/src/components/dialogs/GroupDialog/GroupDialog.vue
index 37038e2f..ec370ce6 100644
--- a/src/components/dialogs/GroupDialog/GroupDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialog.vue
@@ -1,233 +1,187 @@
 <template>
-    <Dialog v-model:open="groupDialog.visible">
-        <DialogContent
-            class="x-dialog x-group-dialog group-body translate-y-0 sm:max-w-235"
-            :show-close-button="false"
-            style="top: 10vh">
-            <DialogHeader class="sr-only">
-                <DialogTitle>{{ groupDialog.ref?.name || t('dialog.group.info.header') }}</DialogTitle>
-                <DialogDescription>
-                    {{ groupDialog.ref?.description || groupDialog.ref?.name || t('dialog.group.info.header') }}
-                </DialogDescription>
-            </DialogHeader>
-            <div>
-                <div style="display: flex">
-                    <img
-                        :src="groupDialog.ref.iconUrl"
-                        style="flex: none; width: 120px; height: 120px; border-radius: 12px"
-                        class="cursor-pointer"
-                        @click="showFullscreenImageDialog(groupDialog.ref.iconUrl)"
-                        loading="lazy" />
-                    <div style="flex: 1; display: flex; align-items: center; margin-left: 15px">
-                        <div class="group-header" style="flex: 1">
-                            <span v-if="groupDialog.ref.ownerId === currentUser.id" style="margin-right: 5px">👑</span>
+    <div>
+        <DialogHeader class="sr-only">
+            <DialogTitle>{{ groupDialog.ref?.name || t('dialog.group.info.header') }}</DialogTitle>
+            <DialogDescription>
+                {{ groupDialog.ref?.description || groupDialog.ref?.name || t('dialog.group.info.header') }}
+            </DialogDescription>
+        </DialogHeader>
+        <div>
+            <div style="display: flex">
+                <img
+                    :src="groupDialog.ref.iconUrl"
+                    style="flex: none; width: 120px; height: 120px; border-radius: 12px"
+                    class="cursor-pointer"
+                    @click="showFullscreenImageDialog(groupDialog.ref.iconUrl)"
+                    loading="lazy" />
+                <div style="flex: 1; display: flex; align-items: center; margin-left: 15px">
+                    <div class="group-header" style="flex: 1">
+                        <span v-if="groupDialog.ref.ownerId === currentUser.id" style="margin-right: 5px">👑</span>
+                        <span
+                            class="font-bold"
+                            style="margin-right: 5px; cursor: pointer"
+                            v-text="groupDialog.ref.name"
+                            @click="copyToClipboard(groupDialog.ref.name)"></span>
+                        <span
+                            class="group-discriminator x-grey"
+                            style="font-family: monospace; font-size: 12px; margin-right: 5px">
+                            {{ groupDialog.ref.shortCode }}.{{ groupDialog.ref.discriminator }}
+                        </span>
+                        <TooltipWrapper v-for="item in groupDialog.ref.$languages" :key="item.key" side="top">
+                            <template #content>
+                                <span>{{ item.value }} ({{ item.key }})</span>
+                            </template>
                             <span
-                                class="font-bold"
-                                style="margin-right: 5px; cursor: pointer"
-                                v-text="groupDialog.ref.name"
-                                @click="copyToClipboard(groupDialog.ref.name)"></span>
+                                class="flags"
+                                :class="languageClass(item.key)"
+                                style="display: inline-block; margin-right: 5px"></span>
+                        </TooltipWrapper>
+                        <div style="margin-top: 5px">
                             <span
-                                class="group-discriminator x-grey"
-                                style="font-family: monospace; font-size: 12px; margin-right: 5px">
-                                {{ groupDialog.ref.shortCode }}.{{ groupDialog.ref.discriminator }}
-                            </span>
-                            <TooltipWrapper v-for="item in groupDialog.ref.$languages" :key="item.key" side="top">
-                                <template #content>
-                                    <span>{{ item.value }} ({{ item.key }})</span>
-                                </template>
-                                <span
-                                    class="flags"
-                                    :class="languageClass(item.key)"
-                                    style="display: inline-block; margin-right: 5px"></span>
-                            </TooltipWrapper>
-                            <div style="margin-top: 5px">
-                                <span
-                                    class="cursor-pointer x-grey"
-                                    style="font-family: monospace"
-                                    @click="showUserDialog(groupDialog.ref.ownerId)"
-                                    v-text="groupDialog.ownerDisplayName"></span>
-                            </div>
-                            <div class="group-tags">
-                                <Badge
-                                    v-if="groupDialog.ref.isVerified"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px">
-                                    {{ t('dialog.group.tags.verified') }}
-                                </Badge>
-                                <Badge
-                                    v-if="groupDialog.ref.privacy === 'private'"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px">
-                                    {{ t('dialog.group.tags.private') }}
-                                </Badge>
-                                <Badge
-                                    v-if="groupDialog.ref.privacy === 'default'"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px">
-                                    {{ t('dialog.group.tags.public') }}
-                                </Badge>
-                                <Badge
-                                    v-if="groupDialog.ref.joinState === 'open'"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px">
-                                    {{ t('dialog.group.tags.open') }}
-                                </Badge>
-                                <Badge
-                                    v-else-if="groupDialog.ref.joinState === 'request'"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px">
-                                    {{ t('dialog.group.tags.request') }}
-                                </Badge>
-                                <Badge
-                                    v-else-if="groupDialog.ref.joinState === 'invite'"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px">
-                                    {{ t('dialog.group.tags.invite') }}
-                                </Badge>
-                                <Badge
-                                    v-else-if="groupDialog.ref.joinState === 'closed'"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px">
-                                    {{ t('dialog.group.tags.closed') }}
-                                </Badge>
-                                <Badge
-                                    v-if="groupDialog.inGroup"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px">
-                                    {{ t('dialog.group.tags.joined') }}
-                                </Badge>
-                                <Badge
-                                    v-if="groupDialog.ref.myMember && groupDialog.ref.myMember.bannedAt"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px">
-                                    {{ t('dialog.group.tags.banned') }}
-                                </Badge>
-                                <template v-if="groupDialog.inGroup && groupDialog.ref.myMember">
-                                    <Badge
-                                        v-if="groupDialog.ref.myMember.visibility === 'visible'"
-                                        variant="outline"
-                                        style="margin-right: 5px; margin-top: 5px">
-                                        {{ t('dialog.group.tags.visible') }}
-                                    </Badge>
-                                    <Badge
-                                        v-else-if="groupDialog.ref.myMember.visibility === 'friends'"
-                                        variant="outline"
-                                        style="margin-right: 5px; margin-top: 5px">
-                                        {{ t('dialog.group.tags.friends') }}
-                                    </Badge>
-                                    <Badge
-                                        v-else-if="groupDialog.ref.myMember.visibility === 'hidden'"
-                                        variant="outline"
-                                        style="margin-right: 5px; margin-top: 5px">
-                                        {{ t('dialog.group.tags.hidden') }}
-                                    </Badge>
-                                    <Badge
-                                        v-if="groupDialog.ref.myMember.isSubscribedToAnnouncements"
-                                        variant="outline"
-                                        style="margin-right: 5px; margin-top: 5px">
-                                        {{ t('dialog.group.tags.subscribed') }}
-                                    </Badge>
-                                </template>
-                            </div>
-                            <div style="margin-top: 5px">
-                                <pre
-                                    v-show="groupDialog.ref.name !== groupDialog.ref.description"
-                                    style="
-                                        font-family: inherit;
-                                        font-size: 12px;
-                                        white-space: pre-wrap;
-                                        max-height: 40vh;
-                                        overflow-y: auto;
-                                    "
-                                    v-text="groupDialog.ref.description"></pre>
-                            </div>
+                                class="cursor-pointer x-grey"
+                                style="font-family: monospace"
+                                @click="showUserDialog(groupDialog.ref.ownerId)"
+                                v-text="groupDialog.ownerDisplayName"></span>
                         </div>
-                        <div style="flex: none; margin-left: 10px">
-                            <template v-if="groupDialog.inGroup && groupDialog.ref?.myMember">
-                                <TooltipWrapper
-                                    v-if="groupDialog.ref.myMember?.isRepresenting"
-                                    side="top"
-                                    :content="t('dialog.group.actions.unrepresent_tooltip')">
+                        <div class="group-tags">
+                            <Badge
+                                v-if="groupDialog.ref.isVerified"
+                                variant="outline"
+                                style="margin-right: 5px; margin-top: 5px">
+                                {{ t('dialog.group.tags.verified') }}
+                            </Badge>
+                            <Badge
+                                v-if="groupDialog.ref.privacy === 'private'"
+                                variant="outline"
+                                style="margin-right: 5px; margin-top: 5px">
+                                {{ t('dialog.group.tags.private') }}
+                            </Badge>
+                            <Badge
+                                v-if="groupDialog.ref.privacy === 'default'"
+                                variant="outline"
+                                style="margin-right: 5px; margin-top: 5px">
+                                {{ t('dialog.group.tags.public') }}
+                            </Badge>
+                            <Badge
+                                v-if="groupDialog.ref.joinState === 'open'"
+                                variant="outline"
+                                style="margin-right: 5px; margin-top: 5px">
+                                {{ t('dialog.group.tags.open') }}
+                            </Badge>
+                            <Badge
+                                v-else-if="groupDialog.ref.joinState === 'request'"
+                                variant="outline"
+                                style="margin-right: 5px; margin-top: 5px">
+                                {{ t('dialog.group.tags.request') }}
+                            </Badge>
+                            <Badge
+                                v-else-if="groupDialog.ref.joinState === 'invite'"
+                                variant="outline"
+                                style="margin-right: 5px; margin-top: 5px">
+                                {{ t('dialog.group.tags.invite') }}
+                            </Badge>
+                            <Badge
+                                v-else-if="groupDialog.ref.joinState === 'closed'"
+                                variant="outline"
+                                style="margin-right: 5px; margin-top: 5px">
+                                {{ t('dialog.group.tags.closed') }}
+                            </Badge>
+                            <Badge
+                                v-if="groupDialog.inGroup"
+                                variant="outline"
+                                style="margin-right: 5px; margin-top: 5px">
+                                {{ t('dialog.group.tags.joined') }}
+                            </Badge>
+                            <Badge
+                                v-if="groupDialog.ref.myMember && groupDialog.ref.myMember.bannedAt"
+                                variant="outline"
+                                style="margin-right: 5px; margin-top: 5px">
+                                {{ t('dialog.group.tags.banned') }}
+                            </Badge>
+                            <template v-if="groupDialog.inGroup && groupDialog.ref.myMember">
+                                <Badge
+                                    v-if="groupDialog.ref.myMember.visibility === 'visible'"
+                                    variant="outline"
+                                    style="margin-right: 5px; margin-top: 5px">
+                                    {{ t('dialog.group.tags.visible') }}
+                                </Badge>
+                                <Badge
+                                    v-else-if="groupDialog.ref.myMember.visibility === 'friends'"
+                                    variant="outline"
+                                    style="margin-right: 5px; margin-top: 5px">
+                                    {{ t('dialog.group.tags.friends') }}
+                                </Badge>
+                                <Badge
+                                    v-else-if="groupDialog.ref.myMember.visibility === 'hidden'"
+                                    variant="outline"
+                                    style="margin-right: 5px; margin-top: 5px">
+                                    {{ t('dialog.group.tags.hidden') }}
+                                </Badge>
+                                <Badge
+                                    v-if="groupDialog.ref.myMember.isSubscribedToAnnouncements"
+                                    variant="outline"
+                                    style="margin-right: 5px; margin-top: 5px">
+                                    {{ t('dialog.group.tags.subscribed') }}
+                                </Badge>
+                            </template>
+                        </div>
+                        <div style="margin-top: 5px">
+                            <pre
+                                v-show="groupDialog.ref.name !== groupDialog.ref.description"
+                                style="
+                                    font-family: inherit;
+                                    font-size: 12px;
+                                    white-space: pre-wrap;
+                                    max-height: 40vh;
+                                    overflow-y: auto;
+                                "
+                                v-text="groupDialog.ref.description"></pre>
+                        </div>
+                    </div>
+                    <div style="flex: none; margin-left: 10px">
+                        <template v-if="groupDialog.inGroup && groupDialog.ref?.myMember">
+                            <TooltipWrapper
+                                v-if="groupDialog.ref.myMember?.isRepresenting"
+                                side="top"
+                                :content="t('dialog.group.actions.unrepresent_tooltip')">
+                                <Button
+                                    class="rounded-full mr-2"
+                                    variant="secondary"
+                                    size="icon-lg"
+                                    style="margin-left: 5px"
+                                    @click="clearGroupRepresentation(groupDialog.id)">
+                                    <Star />
+                                </Button>
+                            </TooltipWrapper>
+                            <TooltipWrapper v-else side="top" :content="t('dialog.group.actions.represent_tooltip')">
+                                <span>
                                     <Button
                                         class="rounded-full mr-2"
-                                        variant="secondary"
+                                        variant="outline"
                                         size="icon-lg"
-                                        style="margin-left: 5px"
-                                        @click="clearGroupRepresentation(groupDialog.id)">
+                                        :disabled="groupDialog.ref.privacy === 'private'"
+                                        @click="setGroupRepresentation(groupDialog.id)">
                                         <Star />
                                     </Button>
-                                </TooltipWrapper>
-                                <TooltipWrapper
-                                    v-else
-                                    side="top"
-                                    :content="t('dialog.group.actions.represent_tooltip')">
-                                    <span>
-                                        <Button
-                                            class="rounded-full mr-2"
-                                            variant="outline"
-                                            size="icon-lg"
-                                            :disabled="groupDialog.ref.privacy === 'private'"
-                                            @click="setGroupRepresentation(groupDialog.id)">
-                                            <Star />
-                                        </Button>
-                                    </span>
-                                </TooltipWrapper>
-                            </template>
-                            <template v-else-if="groupDialog.ref.myMember?.membershipStatus === 'requested'">
-                                <TooltipWrapper
-                                    side="top"
-                                    :content="t('dialog.group.actions.cancel_join_request_tooltip')">
-                                    <span>
-                                        <Button
-                                            class="rounded-full mr-2"
-                                            variant="outline"
-                                            size="icon-lg"
-                                            @click="cancelGroupRequest(groupDialog.id)">
-                                            <X />
-                                        </Button>
-                                    </span>
-                                </TooltipWrapper>
-                            </template>
-                            <template v-else-if="groupDialog.ref.myMember?.membershipStatus === 'invited'">
-                                <TooltipWrapper side="top" :content="t('dialog.group.actions.pending_request_tooltip')">
-                                    <span>
-                                        <Button
-                                            class="rounded-full mr-2"
-                                            variant="outline"
-                                            size="icon-lg"
-                                            @click="joinGroup(groupDialog.id)">
-                                            <Check />
-                                        </Button>
-                                    </span>
-                                </TooltipWrapper>
-                            </template>
-                            <template v-else>
-                                <TooltipWrapper
-                                    v-if="groupDialog.ref.joinState === 'request'"
-                                    side="top"
-                                    :content="t('dialog.group.actions.request_join_tooltip')">
+                                </span>
+                            </TooltipWrapper>
+                        </template>
+                        <template v-else-if="groupDialog.ref.myMember?.membershipStatus === 'requested'">
+                            <TooltipWrapper side="top" :content="t('dialog.group.actions.cancel_join_request_tooltip')">
+                                <span>
                                     <Button
                                         class="rounded-full mr-2"
                                         variant="outline"
                                         size="icon-lg"
-                                        @click="joinGroup(groupDialog.id)">
-                                        <MessageSquare />
+                                        @click="cancelGroupRequest(groupDialog.id)">
+                                        <X />
                                     </Button>
-                                </TooltipWrapper>
-                                <TooltipWrapper
-                                    v-if="groupDialog.ref.joinState === 'invite'"
-                                    side="top"
-                                    :content="t('dialog.group.actions.invite_required_tooltip')">
-                                    <span>
-                                        <Button class="rounded-full mr-2" variant="outline" size="icon-lg" disabled>
-                                            <MessageSquare />
-                                        </Button>
-                                    </span>
-                                </TooltipWrapper>
-                                <TooltipWrapper
-                                    v-if="groupDialog.ref.joinState === 'open'"
-                                    side="top"
-                                    :content="t('dialog.group.actions.join_group_tooltip')">
+                                </span>
+                            </TooltipWrapper>
+                        </template>
+                        <template v-else-if="groupDialog.ref.myMember?.membershipStatus === 'invited'">
+                            <TooltipWrapper side="top" :content="t('dialog.group.actions.pending_request_tooltip')">
+                                <span>
                                     <Button
                                         class="rounded-full mr-2"
                                         variant="outline"
@@ -235,195 +189,542 @@
                                         @click="joinGroup(groupDialog.id)">
                                         <Check />
                                     </Button>
-                                </TooltipWrapper>
-                            </template>
-                            <DropdownMenu>
-                                <DropdownMenuTrigger as-child>
-                                    <Button
-                                        class="rounded-full"
-                                        :variant="
-                                            groupDialog.ref.membershipStatus === 'userblocked'
-                                                ? 'destructive'
-                                                : 'outline'
-                                        "
-                                        size="icon-lg">
-                                        <MoreHorizontal />
+                                </span>
+                            </TooltipWrapper>
+                        </template>
+                        <template v-else>
+                            <TooltipWrapper
+                                v-if="groupDialog.ref.joinState === 'request'"
+                                side="top"
+                                :content="t('dialog.group.actions.request_join_tooltip')">
+                                <Button
+                                    class="rounded-full mr-2"
+                                    variant="outline"
+                                    size="icon-lg"
+                                    @click="joinGroup(groupDialog.id)">
+                                    <MessageSquare />
+                                </Button>
+                            </TooltipWrapper>
+                            <TooltipWrapper
+                                v-if="groupDialog.ref.joinState === 'invite'"
+                                side="top"
+                                :content="t('dialog.group.actions.invite_required_tooltip')">
+                                <span>
+                                    <Button class="rounded-full mr-2" variant="outline" size="icon-lg" disabled>
+                                        <MessageSquare />
                                     </Button>
-                                </DropdownMenuTrigger>
-                                <DropdownMenuContent>
-                                    <DropdownMenuItem @click="groupDialogCommand('RefreshCw')">
-                                        <RefreshCw class="size-4" />
-                                        {{ t('dialog.group.actions.refresh') }}
-                                    </DropdownMenuItem>
-                                    <DropdownMenuItem @click="groupDialogCommand('Share2')">
-                                        <Share2 class="size-4" />
-                                        {{ t('dialog.group.actions.share') }}
-                                    </DropdownMenuItem>
-                                    <template v-if="groupDialog.inGroup">
-                                        <template v-if="groupDialog.ref.myMember">
-                                            <DropdownMenuSeparator />
-                                            <DropdownMenuItem
-                                                v-if="groupDialog.ref.myMember.isSubscribedToAnnouncements"
-                                                @click="groupDialogCommand('Unsubscribe To Announcements')">
-                                                <BellOff class="size-4" />
-                                                {{ t('dialog.group.actions.unsubscribe') }}
-                                            </DropdownMenuItem>
-                                            <DropdownMenuItem
-                                                v-else
-                                                @click="groupDialogCommand('Subscribe To Announcements')">
-                                                <Bell class="size-4" />
-                                                {{ t('dialog.group.actions.subscribe') }}
-                                            </DropdownMenuItem>
-                                            <DropdownMenuItem
-                                                v-if="hasGroupPermission(groupDialog.ref, 'group-invites-manage')"
-                                                @click="groupDialogCommand('Invite To Group')">
-                                                <MessageSquare class="size-4" />
-                                                {{ t('dialog.group.actions.invite_to_group') }}
-                                            </DropdownMenuItem>
-                                            <template
-                                                v-if="hasGroupPermission(groupDialog.ref, 'group-announcement-manage')">
-                                                <DropdownMenuItem @click="groupDialogCommand('Create Post')">
-                                                    <Ticket class="size-4" />
-                                                    {{ t('dialog.group.actions.create_post') }}
-                                                </DropdownMenuItem>
-                                            </template>
-                                            <DropdownMenuItem
-                                                :disabled="!hasGroupModerationPermission(groupDialog.ref)"
-                                                @click="groupDialogCommand('Moderation Tools')">
-                                                <Settings class="size-4" />
-                                                {{ t('dialog.group.actions.moderation_tools') }}
-                                            </DropdownMenuItem>
-                                            <template
-                                                v-if="
-                                                    groupDialog.ref.myMember && groupDialog.ref.privacy === 'default'
-                                                ">
-                                                <DropdownMenuSeparator />
-                                                <DropdownMenuItem @click="groupDialogCommand('Visibility Everyone')">
-                                                    <Eye class="size-4" />
-                                                    <Check
-                                                        v-if="groupDialog.ref.myMember.visibility === 'visible'"
-                                                        class="size-4" />
-                                                    {{ t('dialog.group.actions.visibility_everyone') }}
-                                                </DropdownMenuItem>
-                                                <DropdownMenuItem @click="groupDialogCommand('Visibility Friends')">
-                                                    <Eye class="size-4" />
-                                                    <Check
-                                                        v-if="groupDialog.ref.myMember.visibility === 'friends'"
-                                                        class="size-4" />
-                                                    {{ t('dialog.group.actions.visibility_friends') }}
-                                                </DropdownMenuItem>
-                                                <DropdownMenuItem @click="groupDialogCommand('Visibility Hidden')">
-                                                    <Eye class="size-4" />
-                                                    <Check
-                                                        v-if="groupDialog.ref.myMember.visibility === 'hidden'"
-                                                        class="size-4" />
-                                                    {{ t('dialog.group.actions.visibility_hidden') }}
-                                                </DropdownMenuItem>
-                                            </template>
-                                            <DropdownMenuSeparator />
-                                            <DropdownMenuItem
-                                                variant="destructive"
-                                                @click="groupDialogCommand('Leave Group')">
-                                                <Trash2 class="size-4" />
-                                                {{ t('dialog.group.actions.leave') }}
-                                            </DropdownMenuItem>
-                                        </template>
-                                    </template>
-                                    <template v-else>
+                                </span>
+                            </TooltipWrapper>
+                            <TooltipWrapper
+                                v-if="groupDialog.ref.joinState === 'open'"
+                                side="top"
+                                :content="t('dialog.group.actions.join_group_tooltip')">
+                                <Button
+                                    class="rounded-full mr-2"
+                                    variant="outline"
+                                    size="icon-lg"
+                                    @click="joinGroup(groupDialog.id)">
+                                    <Check />
+                                </Button>
+                            </TooltipWrapper>
+                        </template>
+                        <DropdownMenu>
+                            <DropdownMenuTrigger as-child>
+                                <Button
+                                    class="rounded-full"
+                                    :variant="
+                                        groupDialog.ref.membershipStatus === 'userblocked' ? 'destructive' : 'outline'
+                                    "
+                                    size="icon-lg">
+                                    <MoreHorizontal />
+                                </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent>
+                                <DropdownMenuItem @click="groupDialogCommand('RefreshCw')">
+                                    <RefreshCw class="size-4" />
+                                    {{ t('dialog.group.actions.refresh') }}
+                                </DropdownMenuItem>
+                                <DropdownMenuItem @click="groupDialogCommand('Share2')">
+                                    <Share2 class="size-4" />
+                                    {{ t('dialog.group.actions.share') }}
+                                </DropdownMenuItem>
+                                <template v-if="groupDialog.inGroup">
+                                    <template v-if="groupDialog.ref.myMember">
                                         <DropdownMenuSeparator />
                                         <DropdownMenuItem
-                                            v-if="groupDialog.ref.membershipStatus === 'userblocked'"
-                                            variant="destructive"
-                                            @click="groupDialogCommand('Unblock Group')">
-                                            <CheckCircle class="size-4" />
-                                            {{ t('dialog.group.actions.unblock') }}
+                                            v-if="groupDialog.ref.myMember.isSubscribedToAnnouncements"
+                                            @click="groupDialogCommand('Unsubscribe To Announcements')">
+                                            <BellOff class="size-4" />
+                                            {{ t('dialog.group.actions.unsubscribe') }}
                                         </DropdownMenuItem>
-                                        <DropdownMenuItem v-else @click="groupDialogCommand('Block Group')">
-                                            <XCircle class="size-4" />
-                                            {{ t('dialog.group.actions.block') }}
+                                        <DropdownMenuItem
+                                            v-else
+                                            @click="groupDialogCommand('Subscribe To Announcements')">
+                                            <Bell class="size-4" />
+                                            {{ t('dialog.group.actions.subscribe') }}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem
+                                            v-if="hasGroupPermission(groupDialog.ref, 'group-invites-manage')"
+                                            @click="groupDialogCommand('Invite To Group')">
+                                            <MessageSquare class="size-4" />
+                                            {{ t('dialog.group.actions.invite_to_group') }}
+                                        </DropdownMenuItem>
+                                        <template
+                                            v-if="hasGroupPermission(groupDialog.ref, 'group-announcement-manage')">
+                                            <DropdownMenuItem @click="groupDialogCommand('Create Post')">
+                                                <Ticket class="size-4" />
+                                                {{ t('dialog.group.actions.create_post') }}
+                                            </DropdownMenuItem>
+                                        </template>
+                                        <DropdownMenuItem
+                                            :disabled="!hasGroupModerationPermission(groupDialog.ref)"
+                                            @click="groupDialogCommand('Moderation Tools')">
+                                            <Settings class="size-4" />
+                                            {{ t('dialog.group.actions.moderation_tools') }}
+                                        </DropdownMenuItem>
+                                        <template
+                                            v-if="groupDialog.ref.myMember && groupDialog.ref.privacy === 'default'">
+                                            <DropdownMenuSeparator />
+                                            <DropdownMenuItem @click="groupDialogCommand('Visibility Everyone')">
+                                                <Eye class="size-4" />
+                                                <Check
+                                                    v-if="groupDialog.ref.myMember.visibility === 'visible'"
+                                                    class="size-4" />
+                                                {{ t('dialog.group.actions.visibility_everyone') }}
+                                            </DropdownMenuItem>
+                                            <DropdownMenuItem @click="groupDialogCommand('Visibility Friends')">
+                                                <Eye class="size-4" />
+                                                <Check
+                                                    v-if="groupDialog.ref.myMember.visibility === 'friends'"
+                                                    class="size-4" />
+                                                {{ t('dialog.group.actions.visibility_friends') }}
+                                            </DropdownMenuItem>
+                                            <DropdownMenuItem @click="groupDialogCommand('Visibility Hidden')">
+                                                <Eye class="size-4" />
+                                                <Check
+                                                    v-if="groupDialog.ref.myMember.visibility === 'hidden'"
+                                                    class="size-4" />
+                                                {{ t('dialog.group.actions.visibility_hidden') }}
+                                            </DropdownMenuItem>
+                                        </template>
+                                        <DropdownMenuSeparator />
+                                        <DropdownMenuItem
+                                            variant="destructive"
+                                            @click="groupDialogCommand('Leave Group')">
+                                            <Trash2 class="size-4" />
+                                            {{ t('dialog.group.actions.leave') }}
                                         </DropdownMenuItem>
                                     </template>
-                                </DropdownMenuContent>
-                            </DropdownMenu>
-                        </div>
+                                </template>
+                                <template v-else>
+                                    <DropdownMenuSeparator />
+                                    <DropdownMenuItem
+                                        v-if="groupDialog.ref.membershipStatus === 'userblocked'"
+                                        variant="destructive"
+                                        @click="groupDialogCommand('Unblock Group')">
+                                        <CheckCircle class="size-4" />
+                                        {{ t('dialog.group.actions.unblock') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem v-else @click="groupDialogCommand('Block Group')">
+                                        <XCircle class="size-4" />
+                                        {{ t('dialog.group.actions.block') }}
+                                    </DropdownMenuItem>
+                                </template>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
                     </div>
                 </div>
-                <TabsUnderline
-                    v-model="groupDialogActiveTab"
-                    :items="groupDialogTabs"
-                    :unmount-on-hide="false"
-                    @update:modelValue="groupDialogTabClick">
-                    <template #Info>
-                        <div class="group-banner-image-info">
-                            <img
-                                :src="groupDialog.ref.bannerUrl"
-                                class="cursor-pointer"
-                                style="
-                                    flex: none;
-                                    width: 100%;
-                                    aspect-ratio: 6/1;
-                                    object-fit: cover;
-                                    border-radius: 4px;
-                                "
-                                @click="showFullscreenImageDialog(groupDialog.ref.bannerUrl)"
-                                loading="lazy" />
-                        </div>
-                        <div class="x-friend-list" style="max-height: none">
-                            <span
-                                v-if="groupDialog.instances.length"
-                                style="font-size: 12px; font-weight: bold; margin: 5px">
-                                {{ t('dialog.group.info.instances') }}
-                            </span>
-                            <div v-for="room in groupDialog.instances" :key="room.tag" style="width: 100%">
-                                <div style="margin: 5px 0" class="flex items-center">
-                                    <Location :location="room.tag" />
-                                    <InstanceActionBar
-                                        class="ml-1"
-                                        :location="room.tag"
-                                        :currentlocation="lastLocation.location"
-                                        :instance="room.ref"
-                                        :friendcount="room.friendCount"
-                                        :show-launch="false"
-                                        refresh-tooltip="RefreshCw player count"
-                                        :on-refresh="() => refreshInstancePlayerCount(room.tag)" />
-                                </div>
+            </div>
+            <TabsUnderline
+                v-model="groupDialogActiveTab"
+                :items="groupDialogTabs"
+                :unmount-on-hide="false"
+                @update:modelValue="groupDialogTabClick">
+                <template #Info>
+                    <div class="group-banner-image-info">
+                        <img
+                            :src="groupDialog.ref.bannerUrl"
+                            class="cursor-pointer"
+                            style="flex: none; width: 100%; aspect-ratio: 6/1; object-fit: cover; border-radius: 4px"
+                            @click="showFullscreenImageDialog(groupDialog.ref.bannerUrl)"
+                            loading="lazy" />
+                    </div>
+                    <div class="x-friend-list" style="max-height: none">
+                        <span
+                            v-if="groupDialog.instances.length"
+                            style="font-size: 12px; font-weight: bold; margin: 5px">
+                            {{ t('dialog.group.info.instances') }}
+                        </span>
+                        <div v-for="room in groupDialog.instances" :key="room.tag" style="width: 100%">
+                            <div style="margin: 5px 0" class="flex items-center">
+                                <Location :location="room.tag" />
+                                <InstanceActionBar
+                                    class="ml-1"
+                                    :location="room.tag"
+                                    :currentlocation="lastLocation.location"
+                                    :instance="room.ref"
+                                    :friendcount="room.friendCount"
+                                    :show-launch="false"
+                                    refresh-tooltip="RefreshCw player count"
+                                    :on-refresh="() => refreshInstancePlayerCount(room.tag)" />
+                            </div>
+                            <div
+                                v-if="room.users.length"
+                                class="x-friend-list"
+                                style="margin: 10px 0; padding: 0; max-height: unset">
                                 <div
-                                    v-if="room.users.length"
-                                    class="x-friend-list"
-                                    style="margin: 10px 0; padding: 0; max-height: unset">
-                                    <div
-                                        v-for="user in room.users"
-                                        :key="user.id"
-                                        class="x-friend-item x-friend-item-border"
-                                        @click="showUserDialog(user.id)">
-                                        <div class="avatar" :class="userStatusClass(user)">
-                                            <img :src="userImage(user)" loading="lazy" />
-                                        </div>
-                                        <div class="detail">
-                                            <span
-                                                class="name"
-                                                :style="{ color: user.$userColour }"
-                                                v-text="user.displayName" />
-                                            <span v-if="user.location === 'traveling'" class="extra">
-                                                <Spinner class="inline-block mr-1" />
-                                                <Timer :epoch="user.$travelingToTime" />
-                                            </span>
-                                            <span v-else class="extra">
-                                                <Timer :epoch="user.$location_at" />
-                                            </span>
-                                        </div>
+                                    v-for="user in room.users"
+                                    :key="user.id"
+                                    class="x-friend-item x-friend-item-border"
+                                    @click="showUserDialog(user.id)">
+                                    <div class="avatar" :class="userStatusClass(user)">
+                                        <img :src="userImage(user)" loading="lazy" />
+                                    </div>
+                                    <div class="detail">
+                                        <span
+                                            class="name"
+                                            :style="{ color: user.$userColour }"
+                                            v-text="user.displayName" />
+                                        <span v-if="user.location === 'traveling'" class="extra">
+                                            <Spinner class="inline-block mr-1" />
+                                            <Timer :epoch="user.$travelingToTime" />
+                                        </span>
+                                        <span v-else class="extra">
+                                            <Timer :epoch="user.$location_at" />
+                                        </span>
                                     </div>
                                 </div>
                             </div>
-                            <div class="x-friend-item" style="width: 100%; cursor: default">
+                        </div>
+                        <div class="x-friend-item" style="width: 100%; cursor: default">
+                            <div class="detail">
+                                <span class="name">{{ t('dialog.group.info.announcement') }}</span>
+                                <span style="display: block" v-text="groupDialog.announcement.title" />
+                                <div
+                                    v-if="groupDialog.announcement.imageUrl"
+                                    style="display: inline-block; margin-right: 5px">
+                                    <img
+                                        :src="groupDialog.announcement.imageUrl"
+                                        class="cursor-pointer"
+                                        style="
+                                            flex: none;
+                                            width: 60px;
+                                            height: 60px;
+                                            border-radius: 4px;
+                                            object-fit: cover;
+                                        "
+                                        @click="showFullscreenImageDialog(groupDialog.announcement.imageUrl)"
+                                        loading="lazy" />
+                                </div>
+                                <pre
+                                    class="extra"
+                                    style="
+                                        display: inline-block;
+                                        vertical-align: top;
+                                        font-family: inherit;
+                                        font-size: 12px;
+                                        white-space: pre-wrap;
+                                        margin: 0;
+                                    "
+                                    >{{ groupDialog.announcement.text || '-' }}</pre
+                                >
+                                <br />
+                                <div
+                                    v-if="groupDialog.announcement.id"
+                                    class="extra"
+                                    style="float: right; margin-left: 5px">
+                                    <TooltipWrapper v-if="groupDialog.announcement.roleIds.length" side="top">
+                                        <template #content>
+                                            <span>{{ t('dialog.group.posts.visibility') }}</span>
+                                            <br />
+                                            <template v-for="roleId in groupDialog.announcement.roleIds" :key="roleId">
+                                                <template v-for="role in groupDialog.ref.roles" :key="roleId + role.id"
+                                                    ><span v-if="role.id === roleId" v-text="role.name"
+                                                /></template>
+                                                <span
+                                                    v-if="
+                                                        groupDialog.announcement.roleIds.indexOf(roleId) <
+                                                        groupDialog.announcement.roleIds.length - 1
+                                                    ">
+                                                    ,&nbsp;
+                                                </span>
+                                            </template>
+                                        </template>
+                                        <Eye style="margin-right: 5px" />
+                                    </TooltipWrapper>
+                                    <DisplayName
+                                        :userid="groupDialog.announcement.authorId"
+                                        style="margin-right: 5px" />
+                                    <span v-if="groupDialog.announcement.editorId" style="margin-right: 5px">
+                                        ({{ t('dialog.group.posts.edited_by') }}
+                                        <DisplayName :userid="groupDialog.announcement.editorId" />)
+                                    </span>
+                                    <TooltipWrapper side="bottom">
+                                        <template #content>
+                                            <span
+                                                >{{ t('dialog.group.posts.created_at') }}
+                                                {{ formatDateFilter(groupDialog.announcement.createdAt, 'long') }}</span
+                                            >
+                                            <template
+                                                v-if="
+                                                    groupDialog.announcement.updatedAt !==
+                                                    groupDialog.announcement.createdAt
+                                                ">
+                                                <br />
+                                                <span
+                                                    >{{ t('dialog.group.posts.edited_at') }}
+                                                    {{
+                                                        formatDateFilter(groupDialog.announcement.updatedAt, 'long')
+                                                    }}</span
+                                                >
+                                            </template>
+                                        </template>
+                                        <Timer :epoch="Date.parse(groupDialog.announcement.updatedAt)" />
+                                    </TooltipWrapper>
+                                    <template v-if="hasGroupPermission(groupDialog.ref, 'group-announcement-manage')">
+                                        <TooltipWrapper side="top" :content="t('dialog.group.posts.edit_tooltip')">
+                                            <Button
+                                                size="sm"
+                                                variant="ghost"
+                                                style="margin-left: 5px; padding: 0"
+                                                @click="
+                                                    showGroupPostEditDialog(groupDialog.id, groupDialog.announcement)
+                                                "></Button>
+                                        </TooltipWrapper>
+                                        <TooltipWrapper side="top" :content="t('dialog.group.posts.delete_tooltip')">
+                                            <Button
+                                                size="sm"
+                                                variant="ghost"
+                                                style="margin-left: 5px; padding: 0"
+                                                @click="confirmDeleteGroupPost(groupDialog.announcement)"></Button>
+                                        </TooltipWrapper>
+                                    </template>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="x-friend-item" style="width: 100%; cursor: default">
+                            <div class="detail">
+                                <span class="name">{{ t('dialog.group.info.rules') }}</span>
+                                <pre
+                                    class="extra"
+                                    style="
+                                        font-family: inherit;
+                                        font-size: 12px;
+                                        white-space: pre-wrap;
+                                        margin: 0 0.5em 0 0;
+                                    "
+                                    >{{ groupDialog.ref.rules || '-' }}</pre
+                                >
+                            </div>
+                        </div>
+                        <div class="x-friend-item x-friend-item-no-hover" style="width: 100%; cursor: default">
+                            <div class="detail" style="overflow: visible">
+                                <span class="name">{{ t('dialog.group.info.upcoming_events') }}</span>
+                                <template v-if="upcomingCalenderEvents.length > 0">
+                                    <br />
+                                    <div class="grid-view events-row">
+                                        <GroupCalendarEventCard
+                                            v-for="value in upcomingCalenderEvents"
+                                            :key="value.id"
+                                            :event="value"
+                                            :is-following="value.userInterest?.isFollowing"
+                                            @update-following-calendar-data="updateFollowingCalendarData"
+                                            mode="grid"
+                                            card-class="group-dialog-grid-card" />
+                                    </div>
+                                </template>
+                                <span v-else class="extra">-</span>
+                            </div>
+                        </div>
+                        <div class="x-friend-item x-friend-item-no-hover" style="width: 100%; cursor: default">
+                            <div class="detail" style="overflow: visible">
+                                <span class="name">{{ t('dialog.group.info.past_events') }}</span>
+                                <template v-if="pastCalenderEvents.length > 0">
+                                    <br />
+                                    <div class="grid-view events-row">
+                                        <GroupCalendarEventCard
+                                            v-for="value in pastCalenderEvents"
+                                            :key="value.id"
+                                            :event="value"
+                                            :is-following="value.userInterest?.isFollowing"
+                                            @update-following-calendar-data="updateFollowingCalendarData"
+                                            mode="grid"
+                                            card-class="group-dialog-grid-card" />
+                                    </div>
+                                </template>
+                                <span v-else class="extra">-</span>
+                            </div>
+                        </div>
+                        <div class="x-friend-item" style="cursor: default">
+                            <div class="detail">
+                                <span class="name">{{ t('dialog.group.info.members') }}</span>
+                                <div class="extra">
+                                    {{ groupDialog.ref.memberCount }} ({{ groupDialog.ref.onlineMemberCount }})
+                                </div>
+                            </div>
+                        </div>
+                        <div class="x-friend-item" style="cursor: default">
+                            <div class="detail">
+                                <span class="name">{{ t('dialog.group.info.created_at') }}</span>
+                                <span class="extra">{{ formatDateFilter(groupDialog.ref.createdAt, 'long') }}</span>
+                            </div>
+                        </div>
+                        <TooltipWrapper side="top" :content="t('dialog.user.info.open_previous_instance')">
+                            <div class="x-friend-item" @click="showPreviousInstancesGroupDialog(groupDialog.ref)">
                                 <div class="detail">
-                                    <span class="name">{{ t('dialog.group.info.announcement') }}</span>
-                                    <span style="display: block" v-text="groupDialog.announcement.title" />
-                                    <div
-                                        v-if="groupDialog.announcement.imageUrl"
-                                        style="display: inline-block; margin-right: 5px">
+                                    <span class="name">
+                                        {{ t('dialog.group.info.last_visited') }}
+                                    </span>
+                                    <span class="extra">{{ formatDateFilter(groupDialog.lastVisit, 'long') }}</span>
+                                </div>
+                            </div>
+                        </TooltipWrapper>
+                        <div class="x-friend-item" style="cursor: default">
+                            <div class="detail">
+                                <span class="name">{{ t('dialog.group.info.links') }}</span>
+                                <div
+                                    v-if="groupDialog.ref.links && groupDialog.ref.links.length > 0"
+                                    style="margin-top: 5px"
+                                    class="flex">
+                                    <template v-for="(link, index) in groupDialog.ref.links" :key="index">
+                                        <TooltipWrapper v-if="link">
+                                            <template #content>
+                                                <span v-text="link" />
+                                            </template>
+                                            <img
+                                                :src="getFaviconUrl(link)"
+                                                style="
+                                                    width: 16px;
+                                                    height: 16px;
+                                                    vertical-align: middle;
+                                                    margin-right: 5px;
+                                                    cursor: pointer;
+                                                "
+                                                @click.stop="openExternalLink(link)"
+                                                loading="lazy" />
+                                        </TooltipWrapper>
+                                    </template>
+                                </div>
+                                <div v-else class="extra">-</div>
+                            </div>
+                        </div>
+                        <div class="inline-flex justify-between w-full">
+                            <div class="x-friend-item" style="cursor: default; width: 50%">
+                                <div class="detail">
+                                    <span class="name">{{ t('dialog.group.info.url') }}</span>
+                                    <span class="extra"
+                                        >{{ groupDialog.ref.$url }}
+                                        <TooltipWrapper side="top" :content="t('dialog.group.info.url_tooltip')">
+                                            <Button
+                                                class="rounded-full ml-1 text-xs"
+                                                size="icon-sm"
+                                                variant="outline"
+                                                @click="copyToClipboard(groupDialog.ref.$url)"
+                                                ><Copy class="h-4 w-4" />
+                                            </Button> </TooltipWrapper
+                                    ></span>
+                                </div>
+                            </div>
+                            <div class="x-friend-item w-1/2" style="cursor: default; width: 50%">
+                                <div class="detail">
+                                    <span class="name">{{ t('dialog.group.info.id') }}</span>
+                                    <span class="extra"
+                                        >{{ groupDialog.id }}
+                                        <TooltipWrapper side="top" :content="t('dialog.group.info.id_tooltip')">
+                                            <Button
+                                                class="rounded-full ml-1 text-xs"
+                                                size="icon-sm"
+                                                variant="outline"
+                                                @click="copyToClipboard(groupDialog.id)"
+                                                ><Copy class="h-4 w-4" />
+                                            </Button> </TooltipWrapper
+                                    ></span>
+                                </div>
+                            </div>
+                        </div>
+                        <div
+                            v-if="groupDialog.ref.membershipStatus === 'member'"
+                            style="width: 100%; margin-top: 10px; border-top: 1px solid #e4e7ed14">
+                            <div style="width: 100%; display: flex; margin-top: 10px">
+                                <div class="x-friend-item" style="cursor: default">
+                                    <div class="detail">
+                                        <span class="name">{{ t('dialog.group.info.joined_at') }}</span>
+                                        <span class="extra">{{
+                                            formatDateFilter(groupDialog.ref.myMember.joinedAt, 'long')
+                                        }}</span>
+                                    </div>
+                                </div>
+                                <div class="x-friend-item" style="cursor: default">
+                                    <div class="detail">
+                                        <span class="name">{{ t('dialog.group.info.roles') }}</span>
+                                        <span v-if="groupDialog.memberRoles.length === 0" class="extra"> - </span>
+                                        <span v-else class="extra">
+                                            <template v-for="(role, rIndex) in groupDialog.memberRoles" :key="rIndex">
+                                                <TooltipWrapper side="top">
+                                                    <template #content>
+                                                        <span>{{ t('dialog.group.info.role') }} {{ role.name }}</span>
+                                                        <br />
+                                                        <span
+                                                            >{{ t('dialog.group.info.role_description') }}
+                                                            {{ role.description }}</span
+                                                        >
+                                                        <br />
+                                                        <span v-if="role.updatedAt"
+                                                            >{{ t('dialog.group.info.role_updated_at') }}
+                                                            {{ formatDateFilter(role.updatedAt, 'long') }}</span
+                                                        >
+                                                        <span v-else
+                                                            >{{ t('dialog.group.info.role_created_at') }}
+                                                            {{ formatDateFilter(role.createdAt, 'long') }}</span
+                                                        >
+                                                        <br />
+                                                        <span>{{ t('dialog.group.info.role_permissions') }}</span>
+                                                        <br />
+                                                        <template
+                                                            v-for="(permission, pIndex) in role.permissions"
+                                                            :key="pIndex">
+                                                            <span>{{ permission }}</span>
+                                                            <br />
+                                                        </template>
+                                                    </template>
+                                                    <span
+                                                        >{{ role.name
+                                                        }}{{
+                                                            rIndex < groupDialog.memberRoles.length - 1 ? ', ' : ''
+                                                        }}</span
+                                                    >
+                                                </TooltipWrapper>
+                                            </template>
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+                <template #Posts>
+                    <template v-if="groupDialog.visible">
+                        <span style="margin-right: 10px; vertical-align: top"
+                            >{{ t('dialog.group.posts.posts_count') }} {{ groupDialog.posts.length }}</span
+                        >
+                        <InputGroupField
+                            v-model="groupDialog.postsSearch"
+                            clearable
+                            size="sm"
+                            :placeholder="t('dialog.group.posts.search_placeholder')"
+                            style="width: 89%; margin-bottom: 10px"
+                            @input="updateGroupPostSearch" />
+                        <div class="x-friend-list">
+                            <div
+                                v-for="post in groupDialog.postsFiltered"
+                                :key="post.id"
+                                class="x-friend-item"
+                                style="width: 100%; cursor: default">
+                                <div class="detail">
+                                    <span style="display: block" v-text="post.title" />
+                                    <div v-if="post.imageUrl" style="display: inline-block; margin-right: 5px">
                                         <img
-                                            :src="groupDialog.announcement.imageUrl"
+                                            :src="post.imageUrl"
                                             class="cursor-pointer"
                                             style="
                                                 flex: none;
@@ -432,7 +733,7 @@
                                                 border-radius: 4px;
                                                 object-fit: cover;
                                             "
-                                            @click="showFullscreenImageDialog(groupDialog.announcement.imageUrl)"
+                                            @click="showFullscreenImageDialog(post.imageUrl)"
                                             loading="lazy" />
                                     </div>
                                     <pre
@@ -445,719 +746,371 @@
                                             white-space: pre-wrap;
                                             margin: 0;
                                         "
-                                        >{{ groupDialog.announcement.text || '-' }}</pre
+                                        >{{ post.text || '-' }}</pre
                                     >
                                     <br />
-                                    <div
-                                        v-if="groupDialog.announcement.id"
-                                        class="extra"
-                                        style="float: right; margin-left: 5px">
-                                        <TooltipWrapper v-if="groupDialog.announcement.roleIds.length" side="top">
+                                    <div v-if="post.authorId" class="extra" style="float: right; margin-left: 5px">
+                                        <TooltipWrapper v-if="post.roleIds.length" side="top">
                                             <template #content>
                                                 <span>{{ t('dialog.group.posts.visibility') }}</span>
                                                 <br />
-                                                <template
-                                                    v-for="roleId in groupDialog.announcement.roleIds"
-                                                    :key="roleId">
+                                                <template v-for="roleId in post.roleIds" :key="roleId">
                                                     <template
                                                         v-for="role in groupDialog.ref.roles"
-                                                        :key="roleId + role.id"
-                                                        ><span v-if="role.id === roleId" v-text="role.name"
-                                                    /></template>
-                                                    <span
-                                                        v-if="
-                                                            groupDialog.announcement.roleIds.indexOf(roleId) <
-                                                            groupDialog.announcement.roleIds.length - 1
-                                                        ">
-                                                        ,&nbsp;
-                                                    </span>
+                                                        :key="role.id + roleId"
+                                                        ><span v-if="role.id === roleId" v-text="role.name" />
+                                                    </template>
+                                                    <template
+                                                        v-if="post.roleIds.indexOf(roleId) < post.roleIds.length - 1"
+                                                        ><span>,&nbsp;</span></template
+                                                    >
                                                 </template>
                                             </template>
                                             <Eye style="margin-right: 5px" />
                                         </TooltipWrapper>
-                                        <DisplayName
-                                            :userid="groupDialog.announcement.authorId"
-                                            style="margin-right: 5px" />
-                                        <span v-if="groupDialog.announcement.editorId" style="margin-right: 5px">
-                                            ({{ t('dialog.group.posts.edited_by') }}
-                                            <DisplayName :userid="groupDialog.announcement.editorId" />)
-                                        </span>
+                                        <DisplayName :userid="post.authorId" style="margin-right: 5px" />
+                                        <span v-if="post.editorId" style="margin-right: 5px"
+                                            >({{ t('dialog.group.posts.edited_by') }}
+                                            <DisplayName :userid="post.editorId" />)</span
+                                        >
                                         <TooltipWrapper side="bottom">
                                             <template #content>
                                                 <span
                                                     >{{ t('dialog.group.posts.created_at') }}
-                                                    {{
-                                                        formatDateFilter(groupDialog.announcement.createdAt, 'long')
-                                                    }}</span
+                                                    {{ formatDateFilter(post.createdAt, 'long') }}</span
                                                 >
-                                                <template
-                                                    v-if="
-                                                        groupDialog.announcement.updatedAt !==
-                                                        groupDialog.announcement.createdAt
-                                                    ">
+                                                <template v-if="post.updatedAt !== post.createdAt">
                                                     <br />
                                                     <span
                                                         >{{ t('dialog.group.posts.edited_at') }}
-                                                        {{
-                                                            formatDateFilter(groupDialog.announcement.updatedAt, 'long')
-                                                        }}</span
+                                                        {{ formatDateFilter(post.updatedAt, 'long') }}</span
                                                     >
                                                 </template>
                                             </template>
-                                            <Timer :epoch="Date.parse(groupDialog.announcement.updatedAt)" />
+                                            <Timer :epoch="Date.parse(post.updatedAt)" />
                                         </TooltipWrapper>
                                         <template
                                             v-if="hasGroupPermission(groupDialog.ref, 'group-announcement-manage')">
                                             <TooltipWrapper side="top" :content="t('dialog.group.posts.edit_tooltip')">
                                                 <Button
-                                                    size="sm"
+                                                    size="icon-sm"
+                                                    class="h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
                                                     variant="ghost"
-                                                    style="margin-left: 5px; padding: 0"
-                                                    @click="
-                                                        showGroupPostEditDialog(
-                                                            groupDialog.id,
-                                                            groupDialog.announcement
-                                                        )
-                                                    "></Button>
+                                                    @click="showGroupPostEditDialog(groupDialog.id, post)"
+                                                    ><Pencil class="h-4 w-4" />
+                                                </Button>
                                             </TooltipWrapper>
                                             <TooltipWrapper
                                                 side="top"
                                                 :content="t('dialog.group.posts.delete_tooltip')">
                                                 <Button
-                                                    size="sm"
+                                                    size="icon-sm"
+                                                    class="h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
                                                     variant="ghost"
-                                                    style="margin-left: 5px; padding: 0"
-                                                    @click="confirmDeleteGroupPost(groupDialog.announcement)"></Button>
+                                                    @click="confirmDeleteGroupPost(post)"
+                                                    ><Trash2 class="h-4 w-4" />
+                                                </Button>
                                             </TooltipWrapper>
                                         </template>
                                     </div>
                                 </div>
                             </div>
-                            <div class="x-friend-item" style="width: 100%; cursor: default">
-                                <div class="detail">
-                                    <span class="name">{{ t('dialog.group.info.rules') }}</span>
-                                    <pre
-                                        class="extra"
-                                        style="
-                                            font-family: inherit;
-                                            font-size: 12px;
-                                            white-space: pre-wrap;
-                                            margin: 0 0.5em 0 0;
-                                        "
-                                        >{{ groupDialog.ref.rules || '-' }}</pre
-                                    >
-                                </div>
-                            </div>
-                            <div class="x-friend-item x-friend-item-no-hover" style="width: 100%; cursor: default">
-                                <div class="detail" style="overflow: visible">
-                                    <span class="name">{{ t('dialog.group.info.upcoming_events') }}</span>
-                                    <template v-if="upcomingCalenderEvents.length > 0">
-                                        <br />
-                                        <div class="grid-view events-row">
-                                            <GroupCalendarEventCard
-                                                v-for="value in upcomingCalenderEvents"
-                                                :key="value.id"
-                                                :event="value"
-                                                :is-following="value.userInterest?.isFollowing"
-                                                @update-following-calendar-data="updateFollowingCalendarData"
-                                                mode="grid"
-                                                card-class="group-dialog-grid-card" />
-                                        </div>
-                                    </template>
-                                    <span v-else class="extra">-</span>
-                                </div>
-                            </div>
-                            <div class="x-friend-item x-friend-item-no-hover" style="width: 100%; cursor: default">
-                                <div class="detail" style="overflow: visible">
-                                    <span class="name">{{ t('dialog.group.info.past_events') }}</span>
-                                    <template v-if="pastCalenderEvents.length > 0">
-                                        <br />
-                                        <div class="grid-view events-row">
-                                            <GroupCalendarEventCard
-                                                v-for="value in pastCalenderEvents"
-                                                :key="value.id"
-                                                :event="value"
-                                                :is-following="value.userInterest?.isFollowing"
-                                                @update-following-calendar-data="updateFollowingCalendarData"
-                                                mode="grid"
-                                                card-class="group-dialog-grid-card" />
-                                        </div>
-                                    </template>
-                                    <span v-else class="extra">-</span>
-                                </div>
-                            </div>
-                            <div class="x-friend-item" style="cursor: default">
-                                <div class="detail">
-                                    <span class="name">{{ t('dialog.group.info.members') }}</span>
-                                    <div class="extra">
-                                        {{ groupDialog.ref.memberCount }} ({{ groupDialog.ref.onlineMemberCount }})
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="x-friend-item" style="cursor: default">
-                                <div class="detail">
-                                    <span class="name">{{ t('dialog.group.info.created_at') }}</span>
-                                    <span class="extra">{{ formatDateFilter(groupDialog.ref.createdAt, 'long') }}</span>
-                                </div>
-                            </div>
-                            <TooltipWrapper side="top" :content="t('dialog.user.info.open_previous_instance')">
-                                <div class="x-friend-item" @click="showPreviousInstancesGroupDialog(groupDialog.ref)">
-                                    <div class="detail">
-                                        <span class="name">
-                                            {{ t('dialog.group.info.last_visited') }}
-                                        </span>
-                                        <span class="extra">{{ formatDateFilter(groupDialog.lastVisit, 'long') }}</span>
-                                    </div>
-                                </div>
-                            </TooltipWrapper>
-                            <div class="x-friend-item" style="cursor: default">
-                                <div class="detail">
-                                    <span class="name">{{ t('dialog.group.info.links') }}</span>
-                                    <div
-                                        v-if="groupDialog.ref.links && groupDialog.ref.links.length > 0"
-                                        style="margin-top: 5px"
-                                        class="flex">
-                                        <template v-for="(link, index) in groupDialog.ref.links" :key="index">
-                                            <TooltipWrapper v-if="link">
-                                                <template #content>
-                                                    <span v-text="link" />
-                                                </template>
-                                                <img
-                                                    :src="getFaviconUrl(link)"
-                                                    style="
-                                                        width: 16px;
-                                                        height: 16px;
-                                                        vertical-align: middle;
-                                                        margin-right: 5px;
-                                                        cursor: pointer;
-                                                    "
-                                                    @click.stop="openExternalLink(link)"
-                                                    loading="lazy" />
-                                            </TooltipWrapper>
-                                        </template>
-                                    </div>
-                                    <div v-else class="extra">-</div>
-                                </div>
-                            </div>
-                            <div class="inline-flex justify-between w-full">
-                                <div class="x-friend-item" style="cursor: default; width: 50%">
-                                    <div class="detail">
-                                        <span class="name">{{ t('dialog.group.info.url') }}</span>
-                                        <span class="extra"
-                                            >{{ groupDialog.ref.$url }}
-                                            <TooltipWrapper side="top" :content="t('dialog.group.info.url_tooltip')">
-                                                <Button
-                                                    class="rounded-full ml-1 text-xs"
-                                                    size="icon-sm"
-                                                    variant="outline"
-                                                    @click="copyToClipboard(groupDialog.ref.$url)"
-                                                    ><Copy class="h-4 w-4" />
-                                                </Button> </TooltipWrapper
-                                        ></span>
-                                    </div>
-                                </div>
-                                <div class="x-friend-item w-1/2" style="cursor: default; width: 50%">
-                                    <div class="detail">
-                                        <span class="name">{{ t('dialog.group.info.id') }}</span>
-                                        <span class="extra"
-                                            >{{ groupDialog.id }}
-                                            <TooltipWrapper side="top" :content="t('dialog.group.info.id_tooltip')">
-                                                <Button
-                                                    class="rounded-full ml-1 text-xs"
-                                                    size="icon-sm"
-                                                    variant="outline"
-                                                    @click="copyToClipboard(groupDialog.id)"
-                                                    ><Copy class="h-4 w-4" />
-                                                </Button> </TooltipWrapper
-                                        ></span>
-                                    </div>
-                                </div>
-                            </div>
-                            <div
-                                v-if="groupDialog.ref.membershipStatus === 'member'"
-                                style="width: 100%; margin-top: 10px; border-top: 1px solid #e4e7ed14">
-                                <div style="width: 100%; display: flex; margin-top: 10px">
-                                    <div class="x-friend-item" style="cursor: default">
-                                        <div class="detail">
-                                            <span class="name">{{ t('dialog.group.info.joined_at') }}</span>
-                                            <span class="extra">{{
-                                                formatDateFilter(groupDialog.ref.myMember.joinedAt, 'long')
-                                            }}</span>
-                                        </div>
-                                    </div>
-                                    <div class="x-friend-item" style="cursor: default">
-                                        <div class="detail">
-                                            <span class="name">{{ t('dialog.group.info.roles') }}</span>
-                                            <span v-if="groupDialog.memberRoles.length === 0" class="extra"> - </span>
-                                            <span v-else class="extra">
-                                                <template
-                                                    v-for="(role, rIndex) in groupDialog.memberRoles"
-                                                    :key="rIndex">
-                                                    <TooltipWrapper side="top">
-                                                        <template #content>
-                                                            <span
-                                                                >{{ t('dialog.group.info.role') }} {{ role.name }}</span
-                                                            >
-                                                            <br />
-                                                            <span
-                                                                >{{ t('dialog.group.info.role_description') }}
-                                                                {{ role.description }}</span
-                                                            >
-                                                            <br />
-                                                            <span v-if="role.updatedAt"
-                                                                >{{ t('dialog.group.info.role_updated_at') }}
-                                                                {{ formatDateFilter(role.updatedAt, 'long') }}</span
-                                                            >
-                                                            <span v-else
-                                                                >{{ t('dialog.group.info.role_created_at') }}
-                                                                {{ formatDateFilter(role.createdAt, 'long') }}</span
-                                                            >
-                                                            <br />
-                                                            <span>{{ t('dialog.group.info.role_permissions') }}</span>
-                                                            <br />
-                                                            <template
-                                                                v-for="(permission, pIndex) in role.permissions"
-                                                                :key="pIndex">
-                                                                <span>{{ permission }}</span>
-                                                                <br />
-                                                            </template>
-                                                        </template>
-                                                        <span
-                                                            >{{ role.name
-                                                            }}{{
-                                                                rIndex < groupDialog.memberRoles.length - 1 ? ', ' : ''
-                                                            }}</span
-                                                        >
-                                                    </TooltipWrapper>
-                                                </template>
-                                            </span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
                         </div>
                     </template>
-                    <template #Posts>
-                        <template v-if="groupDialog.visible">
-                            <span style="margin-right: 10px; vertical-align: top"
-                                >{{ t('dialog.group.posts.posts_count') }} {{ groupDialog.posts.length }}</span
+                </template>
+                <template #Members>
+                    <template v-if="groupDialog.visible">
+                        <span
+                            v-if="hasGroupPermission(groupDialog.ref, 'group-members-viewall')"
+                            style="font-weight: bold; font-size: 16px"
+                            >{{ t('dialog.group.members.all_members') }}</span
+                        >
+                        <span v-else style="font-weight: bold; font-size: 16px">{{
+                            t('dialog.group.members.friends_only')
+                        }}</span>
+                        <div style="margin-top: 10px">
+                            <Button
+                                class="rounded-full h-6 w-6"
+                                variant="outline"
+                                size="icon-sm"
+                                :loading="isGroupMembersLoading"
+                                circle
+                                @click="loadAllGroupMembers">
+                                <Spinner v-if="isGroupMembersLoading" /><RefreshCcw v-else
+                            /></Button>
+                            <Button
+                                class="rounded-full h-6 w-6 ml-2"
+                                size="icon-sm"
+                                variant="outline"
+                                style="margin-left: 5px"
+                                @click="downloadAndSaveJson(`${groupDialog.id}_members`, groupDialog.members)">
+                                <Download class="h-4 w-4" />
+                            </Button>
+                            <span
+                                v-if="groupDialog.memberSearch.length"
+                                style="font-size: 14px; margin-left: 5px; margin-right: 5px"
+                                >{{ groupDialog.memberSearchResults.length }}/{{ groupDialog.ref.memberCount }}</span
                             >
+                            <span v-else style="font-size: 14px; margin-left: 5px; margin-right: 5px"
+                                >{{ groupDialog.members.length }}/{{ groupDialog.ref.memberCount }}</span
+                            >
+                            <div
+                                v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')"
+                                style="float: right"
+                                class="flex items-center">
+                                <span style="margin-right: 5px">{{ t('dialog.group.members.sort_by') }}</span>
+                                <Select
+                                    v-model="groupDialogMemberSortValue"
+                                    :disabled="isGroupMembersLoading || groupDialog.memberSearch.length > 0">
+                                    <SelectTrigger class="h-8 w-45 mr-1">
+                                        <SelectValue :placeholder="t('dialog.group.members.sort_by')" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem
+                                            v-for="item in groupDialogSortingOptions"
+                                            :key="item.value"
+                                            :value="item.value">
+                                            {{ t(item.name) }}
+                                        </SelectItem>
+                                    </SelectContent>
+                                </Select>
+                                <span class="ml-2 mr-1">{{ t('dialog.group.members.filter') }}</span>
+                                <div style="display: inline-block; width: 220px">
+                                    <VirtualCombobox
+                                        v-model="groupDialogMemberFilterKey"
+                                        :groups="groupDialogMemberFilterGroups"
+                                        :disabled="isGroupMembersLoading || groupDialog.memberSearch.length > 0"
+                                        :placeholder="t('dialog.group.members.filter')"
+                                        :search-placeholder="t('dialog.group.members.search')"
+                                        :clearable="false"
+                                        :close-on-select="true">
+                                        <template #trigger="{ text }">
+                                            <span class="truncate">
+                                                {{ text || t('dialog.group.members.filter') }}
+                                            </span>
+                                        </template>
+                                    </VirtualCombobox>
+                                </div>
+                            </div>
                             <InputGroupField
-                                v-model="groupDialog.postsSearch"
+                                v-model="groupDialog.memberSearch"
+                                :disabled="!hasGroupPermission(groupDialog.ref, 'group-members-manage')"
                                 clearable
                                 size="sm"
-                                :placeholder="t('dialog.group.posts.search_placeholder')"
-                                style="width: 89%; margin-bottom: 10px"
-                                @input="updateGroupPostSearch" />
-                            <div class="x-friend-list">
-                                <div
-                                    v-for="post in groupDialog.postsFiltered"
-                                    :key="post.id"
-                                    class="x-friend-item"
-                                    style="width: 100%; cursor: default">
-                                    <div class="detail">
-                                        <span style="display: block" v-text="post.title" />
-                                        <div v-if="post.imageUrl" style="display: inline-block; margin-right: 5px">
-                                            <img
-                                                :src="post.imageUrl"
-                                                class="cursor-pointer"
-                                                style="
-                                                    flex: none;
-                                                    width: 60px;
-                                                    height: 60px;
-                                                    border-radius: 4px;
-                                                    object-fit: cover;
-                                                "
-                                                @click="showFullscreenImageDialog(post.imageUrl)"
-                                                loading="lazy" />
-                                        </div>
-                                        <pre
-                                            class="extra"
-                                            style="
-                                                display: inline-block;
-                                                vertical-align: top;
-                                                font-family: inherit;
-                                                font-size: 12px;
-                                                white-space: pre-wrap;
-                                                margin: 0;
-                                            "
-                                            >{{ post.text || '-' }}</pre
-                                        >
-                                        <br />
-                                        <div v-if="post.authorId" class="extra" style="float: right; margin-left: 5px">
-                                            <TooltipWrapper v-if="post.roleIds.length" side="top">
+                                :placeholder="t('dialog.group.members.search')"
+                                style="margin-top: 10px; margin-bottom: 10px"
+                                @input="groupMembersSearch" />
+                        </div>
+                        <div
+                            v-if="groupDialog.memberSearch.length"
+                            class="x-friend-list"
+                            style="margin-top: 10px; overflow: auto; max-height: 250px; min-width: 130px">
+                            <div
+                                v-for="user in groupDialog.memberSearchResults"
+                                :key="user.id"
+                                class="x-friend-item x-friend-item-border"
+                                @click="showUserDialog(user.userId)">
+                                <div class="avatar">
+                                    <img :src="userImage(user.user)" loading="lazy" />
+                                </div>
+                                <div class="detail">
+                                    <span
+                                        class="name"
+                                        :style="{ color: user.user?.$userColour }"
+                                        v-text="user.user?.displayName" />
+                                    <span class="extra">
+                                        <template v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')">
+                                            <TooltipWrapper
+                                                v-if="user.isRepresenting"
+                                                side="top"
+                                                :content="t('dialog.group.members.representing')">
+                                                <Tag style="margin-right: 5px" />
+                                            </TooltipWrapper>
+                                            <TooltipWrapper v-if="user.visibility !== 'visible'" side="top">
                                                 <template #content>
-                                                    <span>{{ t('dialog.group.posts.visibility') }}</span>
-                                                    <br />
-                                                    <template v-for="roleId in post.roleIds" :key="roleId">
-                                                        <template
-                                                            v-for="role in groupDialog.ref.roles"
-                                                            :key="role.id + roleId"
-                                                            ><span v-if="role.id === roleId" v-text="role.name" />
-                                                        </template>
-                                                        <template
-                                                            v-if="
-                                                                post.roleIds.indexOf(roleId) < post.roleIds.length - 1
-                                                            "
-                                                            ><span>,&nbsp;</span></template
-                                                        >
-                                                    </template>
+                                                    <span
+                                                        >{{ t('dialog.group.members.visibility') }}
+                                                        {{ user.visibility }}</span
+                                                    >
                                                 </template>
                                                 <Eye style="margin-right: 5px" />
                                             </TooltipWrapper>
-                                            <DisplayName :userid="post.authorId" style="margin-right: 5px" />
-                                            <span v-if="post.editorId" style="margin-right: 5px"
-                                                >({{ t('dialog.group.posts.edited_by') }}
-                                                <DisplayName :userid="post.editorId" />)</span
+                                            <TooltipWrapper
+                                                v-if="!user.isSubscribedToAnnouncements"
+                                                side="top"
+                                                :content="t('dialog.group.members.unsubscribed_announcements')">
+                                                <MessageSquare style="margin-right: 5px" />
+                                            </TooltipWrapper>
+                                            <TooltipWrapper v-if="user.managerNotes" side="top">
+                                                <template #content>
+                                                    <span>{{ t('dialog.group.members.manager_notes') }}</span>
+                                                    <br />
+                                                    <span>{{ user.managerNotes }}</span>
+                                                </template>
+                                                <Pencil style="margin-right: 5px" />
+                                            </TooltipWrapper>
+                                        </template>
+                                        <template v-for="roleId in user.roleIds" :key="roleId">
+                                            <template v-for="role in groupDialog.ref.roles" :key="role.id + roleId"
+                                                ><span v-if="role.id === roleId" v-text="role.name" /></template
+                                            ><template v-if="user.roleIds.indexOf(roleId) < user.roleIds.length - 1"
+                                                ><span>,&nbsp;</span></template
                                             >
-                                            <TooltipWrapper side="bottom">
+                                        </template>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                        <ul
+                            v-else-if="groupDialog.members.length > 0"
+                            class="infinite-list x-friend-list"
+                            style="margin-top: 10px; overflow: auto; max-height: 250px; min-width: 130px">
+                            <li
+                                v-for="user in groupDialog.members"
+                                :key="user.id"
+                                class="infinite-list-item x-friend-item x-friend-item-border"
+                                @click="showUserDialog(user.userId)">
+                                <div class="avatar">
+                                    <img :src="userImage(user.user)" loading="lazy" />
+                                </div>
+                                <div class="detail">
+                                    <span
+                                        class="name"
+                                        :style="{ color: user.user?.$userColour }"
+                                        v-text="user.user?.displayName" />
+                                    <span class="extra">
+                                        <template v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')">
+                                            <TooltipWrapper
+                                                v-if="user.isRepresenting"
+                                                side="top"
+                                                :content="t('dialog.group.members.representing')">
+                                                <Tag style="margin-right: 5px" />
+                                            </TooltipWrapper>
+                                            <TooltipWrapper v-if="user.visibility !== 'visible'" side="top">
                                                 <template #content>
                                                     <span
-                                                        >{{ t('dialog.group.posts.created_at') }}
-                                                        {{ formatDateFilter(post.createdAt, 'long') }}</span
+                                                        >{{ t('dialog.group.members.visibility') }}
+                                                        {{ user.visibility }}</span
                                                     >
-                                                    <template v-if="post.updatedAt !== post.createdAt">
-                                                        <br />
-                                                        <span
-                                                            >{{ t('dialog.group.posts.edited_at') }}
-                                                            {{ formatDateFilter(post.updatedAt, 'long') }}</span
-                                                        >
-                                                    </template>
                                                 </template>
-                                                <Timer :epoch="Date.parse(post.updatedAt)" />
+                                                <Eye style="margin-right: 5px" />
                                             </TooltipWrapper>
-                                            <template
-                                                v-if="hasGroupPermission(groupDialog.ref, 'group-announcement-manage')">
-                                                <TooltipWrapper
-                                                    side="top"
-                                                    :content="t('dialog.group.posts.edit_tooltip')">
-                                                    <Button
-                                                        size="icon-sm"
-                                                        class="h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
-                                                        variant="ghost"
-                                                        @click="showGroupPostEditDialog(groupDialog.id, post)"
-                                                        ><Pencil class="h-4 w-4" />
-                                                    </Button>
-                                                </TooltipWrapper>
-                                                <TooltipWrapper
-                                                    side="top"
-                                                    :content="t('dialog.group.posts.delete_tooltip')">
-                                                    <Button
-                                                        size="icon-sm"
-                                                        class="h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
-                                                        variant="ghost"
-                                                        @click="confirmDeleteGroupPost(post)"
-                                                        ><Trash2 class="h-4 w-4" />
-                                                    </Button>
-                                                </TooltipWrapper>
-                                            </template>
-                                        </div>
-                                    </div>
+                                            <TooltipWrapper
+                                                v-if="!user.isSubscribedToAnnouncements"
+                                                side="top"
+                                                :content="t('dialog.group.members.unsubscribed_announcements')">
+                                                <MessageSquare style="margin-right: 5px" />
+                                            </TooltipWrapper>
+                                            <TooltipWrapper v-if="user.managerNotes" side="top">
+                                                <template #content>
+                                                    <span>{{ t('dialog.group.members.manager_notes') }}</span>
+                                                    <br />
+                                                    <span>{{ user.managerNotes }}</span>
+                                                </template>
+                                                <Pencil style="margin-right: 5px" />
+                                            </TooltipWrapper>
+                                        </template>
+                                        <template v-for="roleId in user.roleIds" :key="roleId">
+                                            <template v-for="role in groupDialog.ref.roles" :key="roleId + role.id"
+                                                ><span v-if="role.id === roleId" v-text="role.name" /></template
+                                            ><template v-if="user.roleIds.indexOf(roleId) < user.roleIds.length - 1"
+                                                ><span>&nbsp;</span></template
+                                            >
+                                        </template>
+                                    </span>
                                 </div>
-                            </div>
-                        </template>
-                    </template>
-                    <template #Members>
-                        <template v-if="groupDialog.visible">
-                            <span
-                                v-if="hasGroupPermission(groupDialog.ref, 'group-members-viewall')"
-                                style="font-weight: bold; font-size: 16px"
-                                >{{ t('dialog.group.members.all_members') }}</span
-                            >
-                            <span v-else style="font-weight: bold; font-size: 16px">{{
-                                t('dialog.group.members.friends_only')
-                            }}</span>
-                            <div style="margin-top: 10px">
-                                <Button
-                                    class="rounded-full h-6 w-6"
-                                    variant="outline"
-                                    size="icon-sm"
-                                    :loading="isGroupMembersLoading"
-                                    circle
-                                    @click="loadAllGroupMembers">
-                                    <Spinner v-if="isGroupMembersLoading" /><RefreshCcw v-else
-                                /></Button>
-                                <Button
-                                    class="rounded-full h-6 w-6 ml-2"
-                                    size="icon-sm"
-                                    variant="outline"
-                                    style="margin-left: 5px"
-                                    @click="downloadAndSaveJson(`${groupDialog.id}_members`, groupDialog.members)">
-                                    <Download class="h-4 w-4" />
-                                </Button>
-                                <span
-                                    v-if="groupDialog.memberSearch.length"
-                                    style="font-size: 14px; margin-left: 5px; margin-right: 5px"
-                                    >{{ groupDialog.memberSearchResults.length }}/{{
-                                        groupDialog.ref.memberCount
-                                    }}</span
-                                >
-                                <span v-else style="font-size: 14px; margin-left: 5px; margin-right: 5px"
-                                    >{{ groupDialog.members.length }}/{{ groupDialog.ref.memberCount }}</span
-                                >
-                                <div
-                                    v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')"
-                                    style="float: right"
-                                    class="flex items-center">
-                                    <span style="margin-right: 5px">{{ t('dialog.group.members.sort_by') }}</span>
-                                    <Select
-                                        v-model="groupDialogMemberSortValue"
-                                        :disabled="isGroupMembersLoading || groupDialog.memberSearch.length > 0">
-                                        <SelectTrigger class="h-8 w-45 mr-1">
-                                            <SelectValue :placeholder="t('dialog.group.members.sort_by')" />
-                                        </SelectTrigger>
-                                        <SelectContent>
-                                            <SelectItem
-                                                v-for="item in groupDialogSortingOptions"
-                                                :key="item.value"
-                                                :value="item.value">
-                                                {{ t(item.name) }}
-                                            </SelectItem>
-                                        </SelectContent>
-                                    </Select>
-                                    <span class="ml-2 mr-1">{{ t('dialog.group.members.filter') }}</span>
-                                    <div style="display: inline-block; width: 220px">
-                                        <VirtualCombobox
-                                            v-model="groupDialogMemberFilterKey"
-                                            :groups="groupDialogMemberFilterGroups"
-                                            :disabled="isGroupMembersLoading || groupDialog.memberSearch.length > 0"
-                                            :placeholder="t('dialog.group.members.filter')"
-                                            :search-placeholder="t('dialog.group.members.search')"
-                                            :clearable="false"
-                                            :close-on-select="true">
-                                            <template #trigger="{ text }">
-                                                <span class="truncate">
-                                                    {{ text || t('dialog.group.members.filter') }}
-                                                </span>
-                                            </template>
-                                        </VirtualCombobox>
-                                    </div>
-                                </div>
-                                <InputGroupField
-                                    v-model="groupDialog.memberSearch"
-                                    :disabled="!hasGroupPermission(groupDialog.ref, 'group-members-manage')"
-                                    clearable
-                                    size="sm"
-                                    :placeholder="t('dialog.group.members.search')"
-                                    style="margin-top: 10px; margin-bottom: 10px"
-                                    @input="groupMembersSearch" />
-                            </div>
+                            </li>
                             <div
-                                v-if="groupDialog.memberSearch.length"
-                                class="x-friend-list"
-                                style="margin-top: 10px; overflow: auto; max-height: 250px; min-width: 130px">
-                                <div
-                                    v-for="user in groupDialog.memberSearchResults"
-                                    :key="user.id"
-                                    class="x-friend-item x-friend-item-border"
-                                    @click="showUserDialog(user.userId)">
-                                    <div class="avatar">
-                                        <img :src="userImage(user.user)" loading="lazy" />
-                                    </div>
-                                    <div class="detail">
-                                        <span
-                                            class="name"
-                                            :style="{ color: user.user?.$userColour }"
-                                            v-text="user.user?.displayName" />
-                                        <span class="extra">
-                                            <template
-                                                v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')">
-                                                <TooltipWrapper
-                                                    v-if="user.isRepresenting"
-                                                    side="top"
-                                                    :content="t('dialog.group.members.representing')">
-                                                    <Tag style="margin-right: 5px" />
-                                                </TooltipWrapper>
-                                                <TooltipWrapper v-if="user.visibility !== 'visible'" side="top">
-                                                    <template #content>
-                                                        <span
-                                                            >{{ t('dialog.group.members.visibility') }}
-                                                            {{ user.visibility }}</span
-                                                        >
-                                                    </template>
-                                                    <Eye style="margin-right: 5px" />
-                                                </TooltipWrapper>
-                                                <TooltipWrapper
-                                                    v-if="!user.isSubscribedToAnnouncements"
-                                                    side="top"
-                                                    :content="t('dialog.group.members.unsubscribed_announcements')">
-                                                    <MessageSquare style="margin-right: 5px" />
-                                                </TooltipWrapper>
-                                                <TooltipWrapper v-if="user.managerNotes" side="top">
-                                                    <template #content>
-                                                        <span>{{ t('dialog.group.members.manager_notes') }}</span>
-                                                        <br />
-                                                        <span>{{ user.managerNotes }}</span>
-                                                    </template>
-                                                    <Pencil style="margin-right: 5px" />
-                                                </TooltipWrapper>
-                                            </template>
-                                            <template v-for="roleId in user.roleIds" :key="roleId">
-                                                <template v-for="role in groupDialog.ref.roles" :key="role.id + roleId"
-                                                    ><span v-if="role.id === roleId" v-text="role.name" /></template
-                                                ><template v-if="user.roleIds.indexOf(roleId) < user.roleIds.length - 1"
-                                                    ><span>,&nbsp;</span></template
-                                                >
-                                            </template>
-                                        </span>
-                                    </div>
+                                v-if="!isGroupMembersDone"
+                                class="x-friend-item"
+                                style="width: 100%; height: 45px; text-align: center"
+                                @click="loadMoreGroupMembers">
+                                <div v-if="!isGroupMembersLoading" class="detail">
+                                    <span class="name">{{ t('dialog.group.members.load_more') }}</span>
                                 </div>
                             </div>
-                            <ul
-                                v-else-if="groupDialog.members.length > 0"
-                                class="infinite-list x-friend-list"
-                                style="margin-top: 10px; overflow: auto; max-height: 250px; min-width: 130px">
-                                <li
-                                    v-for="user in groupDialog.members"
-                                    :key="user.id"
-                                    class="infinite-list-item x-friend-item x-friend-item-border"
-                                    @click="showUserDialog(user.userId)">
-                                    <div class="avatar">
-                                        <img :src="userImage(user.user)" loading="lazy" />
-                                    </div>
-                                    <div class="detail">
-                                        <span
-                                            class="name"
-                                            :style="{ color: user.user?.$userColour }"
-                                            v-text="user.user?.displayName" />
-                                        <span class="extra">
-                                            <template
-                                                v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')">
-                                                <TooltipWrapper
-                                                    v-if="user.isRepresenting"
-                                                    side="top"
-                                                    :content="t('dialog.group.members.representing')">
-                                                    <Tag style="margin-right: 5px" />
-                                                </TooltipWrapper>
-                                                <TooltipWrapper v-if="user.visibility !== 'visible'" side="top">
-                                                    <template #content>
-                                                        <span
-                                                            >{{ t('dialog.group.members.visibility') }}
-                                                            {{ user.visibility }}</span
-                                                        >
-                                                    </template>
-                                                    <Eye style="margin-right: 5px" />
-                                                </TooltipWrapper>
-                                                <TooltipWrapper
-                                                    v-if="!user.isSubscribedToAnnouncements"
-                                                    side="top"
-                                                    :content="t('dialog.group.members.unsubscribed_announcements')">
-                                                    <MessageSquare style="margin-right: 5px" />
-                                                </TooltipWrapper>
-                                                <TooltipWrapper v-if="user.managerNotes" side="top">
-                                                    <template #content>
-                                                        <span>{{ t('dialog.group.members.manager_notes') }}</span>
-                                                        <br />
-                                                        <span>{{ user.managerNotes }}</span>
-                                                    </template>
-                                                    <Pencil style="margin-right: 5px" />
-                                                </TooltipWrapper>
-                                            </template>
-                                            <template v-for="roleId in user.roleIds" :key="roleId">
-                                                <template v-for="role in groupDialog.ref.roles" :key="roleId + role.id"
-                                                    ><span v-if="role.id === roleId" v-text="role.name" /></template
-                                                ><template v-if="user.roleIds.indexOf(roleId) < user.roleIds.length - 1"
-                                                    ><span>&nbsp;</span></template
-                                                >
-                                            </template>
-                                        </span>
-                                    </div>
-                                </li>
-                                <div
-                                    v-if="!isGroupMembersDone"
-                                    class="x-friend-item"
-                                    style="width: 100%; height: 45px; text-align: center"
-                                    @click="loadMoreGroupMembers">
-                                    <div v-if="!isGroupMembersLoading" class="detail">
-                                        <span class="name">{{ t('dialog.group.members.load_more') }}</span>
-                                    </div>
-                                </div>
-                            </ul>
+                        </ul>
+                    </template>
+                </template>
+                <template #Photos>
+                    <Button
+                        class="rounded-full"
+                        variant="outline"
+                        size="icon-sm"
+                        :disabled="isGroupGalleryLoading"
+                        @click="getGroupGalleries">
+                        <Spinner v-if="isGroupGalleryLoading" />
+                        <RefreshCw v-else />
+                    </Button>
+                    <TabsUnderline
+                        v-model="groupDialogGalleryCurrentName"
+                        :items="groupGalleryTabs"
+                        :unmount-on-hide="false"
+                        class="mt-2.5">
+                        <template
+                            v-for="(gallery, index) in groupDialog.ref.galleries"
+                            :key="`label-${index}`"
+                            v-slot:[`label-${index}`]>
+                            <span style="font-weight: bold; font-size: 16px" v-text="gallery.name" />
+                            <i class="x-status-icon" style="margin-left: 5px" :class="groupGalleryStatus(gallery)" />
+                            <span style="color: #909399; font-size: 12px; margin-left: 5px">{{
+                                groupDialog.galleries[gallery.id] ? groupDialog.galleries[gallery.id].length : 0
+                            }}</span>
                         </template>
-                    </template>
-                    <template #Photos>
-                        <Button
-                            class="rounded-full"
-                            variant="outline"
-                            size="icon-sm"
-                            :disabled="isGroupGalleryLoading"
-                            @click="getGroupGalleries">
-                            <Spinner v-if="isGroupGalleryLoading" />
-                            <RefreshCw v-else />
-                        </Button>
-                        <TabsUnderline
-                            v-model="groupDialogGalleryCurrentName"
-                            :items="groupGalleryTabs"
-                            :unmount-on-hide="false"
-                            class="mt-2.5">
-                            <template
-                                v-for="(gallery, index) in groupDialog.ref.galleries"
-                                :key="`label-${index}`"
-                                v-slot:[`label-${index}`]>
-                                <span style="font-weight: bold; font-size: 16px" v-text="gallery.name" />
-                                <i
-                                    class="x-status-icon"
-                                    style="margin-left: 5px"
-                                    :class="groupGalleryStatus(gallery)" />
-                                <span style="color: #909399; font-size: 12px; margin-left: 5px">{{
-                                    groupDialog.galleries[gallery.id] ? groupDialog.galleries[gallery.id].length : 0
-                                }}</span>
-                            </template>
-                            <template
-                                v-for="(gallery, index) in groupDialog.ref.galleries"
-                                :key="`content-${index}`"
-                                v-slot:[String(index)]>
-                                <span style="color: #c7c7c7; padding: 10px" v-text="gallery.description" />
-                                <div
-                                    style="
-                                        display: grid;
-                                        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-                                        gap: 15px;
-                                        margin-top: 10px;
-                                        max-height: 600px;
-                                        overflow-y: auto;
-                                    ">
-                                    <Card
-                                        v-for="image in groupDialog.galleries[gallery.id]"
-                                        :key="image.id"
-                                        class="p-0 overflow-hidden transition-shadow hover:shadow-md">
-                                        <img
-                                            :src="image.imageUrl"
-                                            :class="[' cursor-pointer', 'max-w-full', 'max-h-full']"
-                                            @click="showFullscreenImageDialog(image.imageUrl)"
-                                            loading="lazy" />
-                                    </Card>
-                                </div>
-                            </template>
-                        </TabsUnderline>
-                    </template>
-                    <template #JSON>
-                        <Button
-                            class="rounded-full mr-2"
-                            size="icon-sm"
-                            variant="outline"
-                            @click="refreshGroupDialogTreeData()">
-                            <RefreshCw />
-                        </Button>
-                        <Button
-                            class="rounded-full"
-                            size="icon-sm"
-                            variant="outline"
-                            @click="downloadAndSaveJson(groupDialog.id, groupDialog.ref)">
-                            <Download />
-                        </Button>
-                        <vue-json-pretty
-                            :data="groupDialog.treeData"
-                            :deep="2"
-                            :theme="isDarkMode ? 'dark' : 'light'"
-                            show-icon />
-                    </template>
-                </TabsUnderline>
-            </div>
-        </DialogContent>
+                        <template
+                            v-for="(gallery, index) in groupDialog.ref.galleries"
+                            :key="`content-${index}`"
+                            v-slot:[String(index)]>
+                            <span style="color: #c7c7c7; padding: 10px" v-text="gallery.description" />
+                            <div
+                                style="
+                                    display: grid;
+                                    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+                                    gap: 15px;
+                                    margin-top: 10px;
+                                    max-height: 600px;
+                                    overflow-y: auto;
+                                ">
+                                <Card
+                                    v-for="image in groupDialog.galleries[gallery.id]"
+                                    :key="image.id"
+                                    class="p-0 overflow-hidden transition-shadow hover:shadow-md">
+                                    <img
+                                        :src="image.imageUrl"
+                                        :class="[' cursor-pointer', 'max-w-full', 'max-h-full']"
+                                        @click="showFullscreenImageDialog(image.imageUrl)"
+                                        loading="lazy" />
+                                </Card>
+                            </div>
+                        </template>
+                    </TabsUnderline>
+                </template>
+                <template #JSON>
+                    <Button
+                        class="rounded-full mr-2"
+                        size="icon-sm"
+                        variant="outline"
+                        @click="refreshGroupDialogTreeData()">
+                        <RefreshCw />
+                    </Button>
+                    <Button
+                        class="rounded-full"
+                        size="icon-sm"
+                        variant="outline"
+                        @click="downloadAndSaveJson(groupDialog.id, groupDialog.ref)">
+                        <Download />
+                    </Button>
+                    <vue-json-pretty
+                        :data="groupDialog.treeData"
+                        :deep="2"
+                        :theme="isDarkMode ? 'dark' : 'light'"
+                        show-icon />
+                </template>
+            </TabsUnderline>
+        </div>
         <GroupPostEditDialog :dialog-data="groupPostEditDialog" :selected-gallery-file="selectedGalleryFile" />
         <PreviousInstancesGroupDialog v-model:previous-instances-group-dialog="previousInstancesGroupDialog" />
-    </Dialog>
+    </div>
 </template>
 
 <script setup>
@@ -1182,9 +1135,9 @@
         X,
         XCircle
     } from 'lucide-vue-next';
-    import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
     import { computed, nextTick, reactive, ref, watch } from 'vue';
+    import { DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { Button } from '@/components/ui/button';
     import { Card } from '@/components/ui/card';
     import { InputGroupField } from '@/components/ui/input-group';
diff --git a/src/components/dialogs/MainDialogContainer.vue b/src/components/dialogs/MainDialogContainer.vue
new file mode 100644
index 00000000..01fd2ec6
--- /dev/null
+++ b/src/components/dialogs/MainDialogContainer.vue
@@ -0,0 +1,210 @@
+<script setup>
+    import {
+        Breadcrumb,
+        BreadcrumbEllipsis,
+        BreadcrumbItem,
+        BreadcrumbLink,
+        BreadcrumbList,
+        BreadcrumbPage,
+        BreadcrumbSeparator
+    } from '@/components/ui/breadcrumb';
+    import { useAvatarStore, useGroupStore, useUiStore, useUserStore, useWorldStore } from '@/stores';
+    import {
+        DropdownMenu,
+        DropdownMenuContent,
+        DropdownMenuItem,
+        DropdownMenuTrigger
+    } from '@/components/ui/dropdown-menu';
+    import { Dialog, DialogContent } from '@/components/ui/dialog';
+    import { computed } from 'vue';
+
+    import AvatarDialog from './AvatarDialog/AvatarDialog.vue';
+    import GroupDialog from './GroupDialog/GroupDialog.vue';
+    import UserDialog from './UserDialog/UserDialog.vue';
+    import WorldDialog from './WorldDialog/WorldDialog.vue';
+
+    const avatarStore = useAvatarStore();
+    const groupStore = useGroupStore();
+    const uiStore = useUiStore();
+    const userStore = useUserStore();
+    const worldStore = useWorldStore();
+
+    const isOpen = computed({
+        get: () =>
+            userStore.userDialog.visible ||
+            worldStore.worldDialog.visible ||
+            avatarStore.avatarDialog.visible ||
+            groupStore.groupDialog.visible,
+        set: (value) => {
+            if (!value) {
+                userStore.userDialog.visible = false;
+                worldStore.worldDialog.visible = false;
+                avatarStore.avatarDialog.visible = false;
+                groupStore.groupDialog.visible = false;
+                uiStore.clearDialogCrumbs();
+            }
+        }
+    });
+
+    const dialogCrumbs = computed(() => uiStore.dialogCrumbs);
+    const activeCrumb = computed(() => dialogCrumbs.value[dialogCrumbs.value.length - 1] || null);
+    const activeType = computed(() => {
+        if (activeCrumb.value?.type) {
+            return activeCrumb.value.type;
+        }
+        if (userStore.userDialog.visible) {
+            return 'user';
+        }
+        if (worldStore.worldDialog.visible) {
+            return 'world';
+        }
+        if (avatarStore.avatarDialog.visible) {
+            return 'avatar';
+        }
+        if (groupStore.groupDialog.visible) {
+            return 'group';
+        }
+        return null;
+    });
+    const activeComponent = computed(() => {
+        switch (activeType.value) {
+            case 'user':
+                return UserDialog;
+            case 'world':
+                return WorldDialog;
+            case 'avatar':
+                return AvatarDialog;
+            case 'group':
+                return GroupDialog;
+            default:
+                return null;
+        }
+    });
+    const dialogClass = computed(() => {
+        switch (activeType.value) {
+            case 'world':
+                return 'x-dialog x-world-dialog translate-y-0 sm:max-w-235';
+            case 'avatar':
+                return 'x-dialog x-avatar-dialog sm:max-w-235 translate-y-0';
+            case 'group':
+                return 'x-dialog x-group-dialog group-body translate-y-0 sm:max-w-235';
+            case 'user':
+            default:
+                return 'x-dialog x-user-dialog sm:max-w-235 translate-y-0';
+        }
+    });
+
+    const shouldShowBreadcrumbs = computed(() => dialogCrumbs.value.length > 1);
+    const shouldCollapseBreadcrumbs = computed(() => dialogCrumbs.value.length > 4);
+    const middleBreadcrumbs = computed(() => {
+        if (!shouldCollapseBreadcrumbs.value) {
+            return [];
+        }
+        return dialogCrumbs.value.slice(1, -2);
+    });
+
+    const handleBreadcrumbClick = (index) => {
+        const item = dialogCrumbs.value[index];
+        if (!item) {
+            return;
+        }
+        uiStore.jumpDialogCrumb(index);
+        if (item.type === 'user') {
+            userStore.showUserDialog(item.id, { skipBreadcrumb: true });
+            return;
+        }
+        if (item.type === 'world') {
+            worldStore.showWorldDialog(item.id, null, { skipBreadcrumb: true });
+            return;
+        }
+        if (item.type === 'avatar') {
+            avatarStore.showAvatarDialog(item.id, { skipBreadcrumb: true });
+            return;
+        }
+        if (item.type === 'group') {
+            groupStore.showGroupDialog(item.id, { skipBreadcrumb: true });
+        }
+    };
+</script>
+
+<template>
+    <Dialog v-model:open="isOpen">
+        <DialogContent :class="dialogClass" style="top: 10vh" :show-close-button="false">
+            <Breadcrumb v-if="shouldShowBreadcrumbs" class="mb-2">
+                <BreadcrumbList>
+                    <template v-if="shouldCollapseBreadcrumbs">
+                        <BreadcrumbItem>
+                            <BreadcrumbLink as-child>
+                                <button
+                                    type="button"
+                                    class="max-w-40 truncate text-left"
+                                    @click="handleBreadcrumbClick(0)">
+                                    {{ dialogCrumbs[0]?.label || dialogCrumbs[0]?.id }}
+                                </button>
+                            </BreadcrumbLink>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator />
+                        <BreadcrumbItem>
+                            <DropdownMenu>
+                                <DropdownMenuTrigger class="flex items-center gap-1">
+                                    <BreadcrumbEllipsis class="h-4 w-4" />
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent align="start">
+                                    <DropdownMenuItem
+                                        v-for="(crumb, index) in middleBreadcrumbs"
+                                        :key="`${crumb.type}-${crumb.id}`"
+                                        @click="handleBreadcrumbClick(index + 1)">
+                                        {{ crumb.label || crumb.id }}
+                                    </DropdownMenuItem>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator />
+                        <BreadcrumbItem>
+                            <BreadcrumbLink as-child>
+                                <button
+                                    type="button"
+                                    class="max-w-40 truncate text-left"
+                                    @click="handleBreadcrumbClick(dialogCrumbs.length - 2)">
+                                    {{
+                                        dialogCrumbs[dialogCrumbs.length - 2]?.label ||
+                                        dialogCrumbs[dialogCrumbs.length - 2]?.id
+                                    }}
+                                </button>
+                            </BreadcrumbLink>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator />
+                        <BreadcrumbItem>
+                            <BreadcrumbPage class="max-w-40 truncate">
+                                {{
+                                    dialogCrumbs[dialogCrumbs.length - 1]?.label ||
+                                    dialogCrumbs[dialogCrumbs.length - 1]?.id
+                                }}
+                            </BreadcrumbPage>
+                        </BreadcrumbItem>
+                    </template>
+                    <template v-else>
+                        <template v-for="(crumb, index) in dialogCrumbs" :key="`${crumb.type}-${crumb.id}`">
+                            <BreadcrumbItem>
+                                <BreadcrumbLink v-if="index < dialogCrumbs.length - 1" as-child>
+                                    <button
+                                        type="button"
+                                        class="max-w-40 truncate text-left"
+                                        @click="handleBreadcrumbClick(index)">
+                                        {{ crumb.label || crumb.id }}
+                                    </button>
+                                </BreadcrumbLink>
+                                <BreadcrumbPage v-else class="max-w-40 truncate">
+                                    {{ crumb.label || crumb.id }}
+                                </BreadcrumbPage>
+                            </BreadcrumbItem>
+                            <BreadcrumbSeparator v-if="index < dialogCrumbs.length - 1" />
+                        </template>
+                    </template>
+                </BreadcrumbList>
+            </Breadcrumb>
+
+            <component :is="activeComponent" v-if="activeComponent" />
+        </DialogContent>
+    </Dialog>
+</template>
diff --git a/src/components/dialogs/UserDialog/UserDialog.vue b/src/components/dialogs/UserDialog/UserDialog.vue
index 573ce68c..c9b8abf9 100644
--- a/src/components/dialogs/UserDialog/UserDialog.vue
+++ b/src/components/dialogs/UserDialog/UserDialog.vue
@@ -1,804 +1,762 @@
 <template>
-    <Dialog v-model:open="userDialog.visible">
-        <DialogContent
-            class="x-dialog x-user-dialog sm:max-w-235 translate-y-0"
-            style="top: 10vh"
-            :show-close-button="false">
-            <div>
-                <DialogHeader class="sr-only">
-                    <DialogTitle>{{
-                        userDialog.ref?.displayName || userDialog.id || t('dialog.user.info.header')
-                    }}</DialogTitle>
-                    <DialogDescription>{{ getUserStateText(userDialog.ref || {}) }}</DialogDescription>
-                </DialogHeader>
-                <UserSummaryHeader
-                    :get-user-state-text="getUserStateText"
-                    :copy-user-display-name="copyUserDisplayName"
-                    :toggle-badge-visibility="toggleBadgeVisibility"
-                    :toggle-badge-showcased="toggleBadgeShowcased"
-                    :user-dialog-command="userDialogCommand" />
+    <div>
+        <DialogHeader class="sr-only">
+            <DialogTitle>{{
+                userDialog.ref?.displayName || userDialog.id || t('dialog.user.info.header')
+            }}</DialogTitle>
+            <DialogDescription>{{ getUserStateText(userDialog.ref || {}) }}</DialogDescription>
+        </DialogHeader>
+        <UserSummaryHeader
+            :get-user-state-text="getUserStateText"
+            :copy-user-display-name="copyUserDisplayName"
+            :toggle-badge-visibility="toggleBadgeVisibility"
+            :toggle-badge-showcased="toggleBadgeShowcased"
+            :user-dialog-command="userDialogCommand" />
 
-                <TabsUnderline
-                    v-model="userDialogActiveTab"
-                    :items="userDialogTabs"
-                    :unmount-on-hide="false"
-                    @update:modelValue="userDialogTabClick">
-                    <template #Info>
-                        <template v-if="isFriendOnline(userDialog.friend) || currentUser.id === userDialog.id">
+        <TabsUnderline
+            v-model="userDialogActiveTab"
+            :items="userDialogTabs"
+            :unmount-on-hide="false"
+            @update:modelValue="userDialogTabClick">
+            <template #Info>
+                <template v-if="isFriendOnline(userDialog.friend) || currentUser.id === userDialog.id">
+                    <div
+                        v-if="userDialog.ref.location"
+                        style="
+                            display: flex;
+                            flex-direction: column;
+                            margin-bottom: 10px;
+                            padding-bottom: 10px;
+                            border-bottom: 1px solid #e4e7ed14;
+                        ">
+                        <div style="flex: none">
+                            <template v-if="isRealInstance(userDialog.$location.tag)">
+                                <InstanceActionBar
+                                    class="mb-1"
+                                    :location="userDialog.$location.tag"
+                                    :shortname="userDialog.$location.shortName"
+                                    :currentlocation="lastLocation.location"
+                                    :instance="userDialog.instance.ref"
+                                    :friendcount="userDialog.instance.friendCount"
+                                    :refresh-tooltip="t('dialog.user.info.refresh_instance_info')"
+                                    :on-refresh="() => refreshInstancePlayerCount(userDialog.$location.tag)" />
+                            </template>
+                            <Location
+                                class="text-sm"
+                                :location="userDialog.ref.location"
+                                :traveling="userDialog.ref.travelingToLocation" />
+                        </div>
+                        <div class="x-friend-list" style="flex: 1; margin-top: 10px; max-height: 150px">
                             <div
-                                v-if="userDialog.ref.location"
-                                style="
-                                    display: flex;
-                                    flex-direction: column;
-                                    margin-bottom: 10px;
-                                    padding-bottom: 10px;
-                                    border-bottom: 1px solid #e4e7ed14;
-                                ">
-                                <div style="flex: none">
-                                    <template v-if="isRealInstance(userDialog.$location.tag)">
-                                        <InstanceActionBar
-                                            class="mb-1"
-                                            :location="userDialog.$location.tag"
-                                            :shortname="userDialog.$location.shortName"
-                                            :currentlocation="lastLocation.location"
-                                            :instance="userDialog.instance.ref"
-                                            :friendcount="userDialog.instance.friendCount"
-                                            :refresh-tooltip="t('dialog.user.info.refresh_instance_info')"
-                                            :on-refresh="() => refreshInstancePlayerCount(userDialog.$location.tag)" />
-                                    </template>
-                                    <Location
-                                        class="text-sm"
-                                        :location="userDialog.ref.location"
-                                        :traveling="userDialog.ref.travelingToLocation" />
-                                </div>
-                                <div class="x-friend-list" style="flex: 1; margin-top: 10px; max-height: 150px">
-                                    <div
-                                        v-if="userDialog.$location.userId"
-                                        class="x-friend-item x-friend-item-border"
-                                        @click="showUserDialog(userDialog.$location.userId)">
-                                        <template v-if="userDialog.$location.user">
-                                            <div class="avatar" :class="userStatusClass(userDialog.$location.user)">
-                                                <img :src="userImage(userDialog.$location.user, true)" loading="lazy" />
-                                            </div>
-                                            <div class="detail">
-                                                <span
-                                                    class="name"
-                                                    :style="{ color: userDialog.$location.user.$userColour }"
-                                                    v-text="userDialog.$location.user.displayName"></span>
-                                                <span class="extra">{{ t('dialog.user.info.instance_creator') }}</span>
-                                            </div>
-                                        </template>
-                                        <span v-else v-text="userDialog.$location.userId"></span>
+                                v-if="userDialog.$location.userId"
+                                class="x-friend-item x-friend-item-border"
+                                @click="showUserDialog(userDialog.$location.userId)">
+                                <template v-if="userDialog.$location.user">
+                                    <div class="avatar" :class="userStatusClass(userDialog.$location.user)">
+                                        <img :src="userImage(userDialog.$location.user, true)" loading="lazy" />
                                     </div>
-                                    <div
-                                        v-for="user in userDialog.users"
-                                        :key="user.id"
-                                        class="x-friend-item x-friend-item-border"
-                                        @click="showUserDialog(user.id)">
-                                        <div class="avatar" :class="userStatusClass(user)">
-                                            <img :src="userImage(user, true)" loading="lazy" />
-                                        </div>
-                                        <div class="detail">
-                                            <span
-                                                class="name"
-                                                :style="{ color: user.$userColour }"
-                                                v-text="user.displayName"></span>
-                                            <span v-if="user.location === 'traveling'" class="extra">
-                                                <Spinner class="inline-block mr-1" />
-                                                <Timer :epoch="user.$travelingToTime" />
-                                            </span>
-                                            <span v-else class="extra">
-                                                <Timer :epoch="user.$location_at" />
-                                            </span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </template>
-
-                        <div class="x-friend-list" style="max-height: none">
-                            <div
-                                v-if="userDialog.note && !hideUserNotes"
-                                class="x-friend-item"
-                                style="width: 100%; cursor: pointer">
-                                <div class="detail" @click="isEditNoteAndMemoDialogVisible = true">
-                                    <span class="name">{{ t('dialog.user.info.note') }}</span>
-                                    <pre
-                                        class="extra"
-                                        style="
-                                            font-family: inherit;
-                                            font-size: 12px;
-                                            white-space: pre-wrap;
-                                            margin: 0 0.5em 0 0;
-                                            max-height: 210px;
-                                            overflow-y: auto;
-                                        "
-                                        >{{ userDialog.note }}</pre
-                                    >
-                                </div>
-                            </div>
-                            <div
-                                v-if="userDialog.memo && !hideUserMemos"
-                                class="x-friend-item"
-                                style="width: 100%; cursor: pointer">
-                                <div class="detail" @click="isEditNoteAndMemoDialogVisible = true">
-                                    <span class="name">{{ t('dialog.user.info.memo') }}</span>
-                                    <pre
-                                        class="extra"
-                                        style="
-                                            font-family: inherit;
-                                            font-size: 12px;
-                                            white-space: pre-wrap;
-                                            margin: 0 0.5em 0 0;
-                                            max-height: 210px;
-                                            overflow-y: auto;
-                                        "
-                                        >{{ userDialog.memo }}</pre
-                                    >
-                                </div>
-                            </div>
-                            <div class="x-friend-item" style="width: 100%; cursor: default">
-                                <div class="detail">
-                                    <span class="name">
-                                        {{
-                                            userDialog.id !== currentUser.id &&
-                                            userDialog.ref.profilePicOverride &&
-                                            userDialog.ref.currentAvatarImageUrl
-                                                ? t('dialog.user.info.avatar_info_last_seen')
-                                                : t('dialog.user.info.avatar_info')
-                                        }}
-                                        <TooltipWrapper
-                                            v-if="
-                                                userDialog.ref.profilePicOverride &&
-                                                !userDialog.ref.currentAvatarImageUrl
-                                            "
-                                            side="top"
-                                            :content="t('dialog.user.info.vrcplus_hides_avatar')">
-                                            <Info />
-                                        </TooltipWrapper>
-                                    </span>
-                                    <div class="extra">
-                                        <AvatarInfo
-                                            :imageurl="userDialog.ref.currentAvatarImageUrl"
-                                            :userid="userDialog.id"
-                                            :avatartags="userDialog.ref.currentAvatarTags"
-                                            style="display: inline-block" />
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="x-friend-item" style="width: 100%; cursor: default">
-                                <div class="detail">
-                                    <span class="name" style="margin-bottom: 5px">{{
-                                        t('dialog.user.info.represented_group')
-                                    }}</span>
-                                    <div
-                                        v-if="
-                                            userDialog.isRepresentedGroupLoading ||
-                                            (userDialog.representedGroup && userDialog.representedGroup.isRepresenting)
-                                        "
-                                        class="extra">
-                                        <div style="display: inline-block; flex: none; margin-right: 5px">
-                                            <Avatar
-                                                class="cursor-pointer size-15! rounded-lg!"
-                                                :style="{
-                                                    background: userDialog.isRepresentedGroupLoading ? '#f5f7fa' : ''
-                                                }"
-                                                @click="showFullscreenImageDialog(userDialog.representedGroup.iconUrl)">
-                                                <AvatarImage
-                                                    :src="userDialog.representedGroup.$thumbnailUrl"
-                                                    @load="userDialog.isRepresentedGroupLoading = false"
-                                                    @error="userDialog.isRepresentedGroupLoading = false" />
-                                                <AvatarFallback class="rounded-lg!" />
-                                            </Avatar>
-                                        </div>
+                                    <div class="detail">
                                         <span
-                                            v-if="userDialog.representedGroup.isRepresenting"
-                                            style="vertical-align: top; cursor: pointer"
-                                            @click="showGroupDialog(userDialog.representedGroup.groupId)">
-                                            <span
-                                                v-if="userDialog.representedGroup.ownerId === userDialog.id"
-                                                style="margin-right: 5px"
-                                                >👑</span
-                                            >
-                                            <span
-                                                style="margin-right: 5px"
-                                                v-text="userDialog.representedGroup.name"></span>
-                                            <span>({{ userDialog.representedGroup.memberCount }})</span>
-                                        </span>
-                                    </div>
-                                    <div v-else class="extra">-</div>
-                                </div>
-                            </div>
-                            <div class="x-friend-item" style="width: 100%; cursor: default">
-                                <div class="detail">
-                                    <span class="name">{{ t('dialog.user.info.bio') }}</span>
-                                    <pre
-                                        class="extra truncate"
-                                        style="
-                                            font-family: inherit;
-                                            font-size: 12px;
-                                            white-space: pre-wrap;
-                                            margin: 0 0.5em 0 0;
-                                            max-height: 210px;
-                                            overflow-y: auto;
-                                        "
-                                        >{{ bioCache.translated || userDialog.ref.bio || '-' }}</pre
-                                    >
-                                    <div style="float: right">
-                                        <Button
-                                            v-if="translationApi && userDialog.ref.bio"
-                                            class="w-3 h-6 text-xs mr-0.5"
-                                            size="icon-sm"
-                                            variant="ghost"
-                                            @click="translateBio">
-                                            <Spinner v-if="translateLoading" class="size-1" />
-                                            <Languages v-else class="h-3 w-3" />
-                                        </Button>
-                                        <Button
-                                            class="w-3 h-6 text-xs"
-                                            size="icon-sm"
-                                            variant="ghost"
-                                            v-if="userDialog.id === currentUser.id"
-                                            style="margin-left: 5px; padding: 0"
-                                            @click="showBioDialog"
-                                            ><Pencil class="h-3 w-3" />
-                                        </Button>
-                                    </div>
-                                    <div style="margin-top: 5px" class="flex items-center">
-                                        <TooltipWrapper v-for="(link, index) in userDialog.ref.bioLinks" :key="index">
-                                            <template #content>
-                                                <span v-text="link"></span>
-                                            </template>
-                                            <!-- onerror="this.onerror=null;this.class='icon-error'" -->
-                                            <img
-                                                :src="getFaviconUrl(link)"
-                                                style="
-                                                    width: 16px;
-                                                    height: 16px;
-                                                    vertical-align: middle;
-                                                    margin-right: 5px;
-                                                    cursor: pointer;
-                                                "
-                                                @click.stop="openExternalLink(link)"
-                                                loading="lazy" />
-                                        </TooltipWrapper>
-                                    </div>
-                                </div>
-                            </div>
-                            <template v-if="currentUser.id !== userDialog.id">
-                                <div class="x-friend-item" style="cursor: default">
-                                    <div class="detail">
-                                        <span class="name">
-                                            {{ t('dialog.user.info.last_seen') }}
-                                        </span>
-                                        <span class="extra">{{ formatDateFilter(userDialog.lastSeen, 'long') }}</span>
-                                    </div>
-                                </div>
-
-                                <div class="x-friend-item" @click="showPreviousInstancesUserDialog(userDialog.ref)">
-                                    <div class="detail">
-                                        <div
                                             class="name"
-                                            style="display: flex; justify-content: space-between; align-items: center">
-                                            <div>
-                                                {{ t('dialog.user.info.join_count') }}
-                                            </div>
-
-                                            <TooltipWrapper
-                                                side="top"
-                                                :content="t('dialog.user.info.open_previous_instance')">
-                                                <MoreHorizontal style="margin-right: 16px" />
-                                            </TooltipWrapper>
-                                        </div>
-                                        <span v-if="userDialog.joinCount === 0" class="extra">-</span>
-                                        <span v-else class="extra" v-text="userDialog.joinCount"></span>
+                                            :style="{ color: userDialog.$location.user.$userColour }"
+                                            v-text="userDialog.$location.user.displayName"></span>
+                                        <span class="extra">{{ t('dialog.user.info.instance_creator') }}</span>
                                     </div>
-                                </div>
-
-                                <div class="x-friend-item" style="cursor: default">
-                                    <div class="detail">
-                                        <span class="name">
-                                            {{ t('dialog.user.info.time_together') }}
-                                        </span>
-                                        <span v-if="userDialog.timeSpent === 0" class="extra">-</span>
-                                        <span v-else class="extra">{{ timeToText(userDialog.timeSpent) }}</span>
-                                    </div>
-                                </div>
-                            </template>
-                            <template v-else>
-                                <TooltipWrapper
-                                    :disabled="currentUser.id !== userDialog.id"
-                                    side="top"
-                                    :content="t('dialog.user.info.open_previous_instance')">
-                                    <div class="x-friend-item" @click="showPreviousInstancesUserDialog(userDialog.ref)">
-                                        <div class="detail">
-                                            <span class="name">
-                                                {{ t('dialog.user.info.play_time') }}
-                                            </span>
-                                            <span v-if="userDialog.timeSpent === 0" class="extra">-</span>
-                                            <span v-else class="extra">{{ timeToText(userDialog.timeSpent) }}</span>
-                                        </div>
-                                    </div>
-                                </TooltipWrapper>
-                            </template>
-                            <div class="x-friend-item" style="cursor: default">
-                                <TooltipWrapper :side="currentUser.id !== userDialog.id ? 'bottom' : 'top'">
-                                    <template #content>
-                                        <span>{{ formatDateFilter(userOnlineForTimestamp(userDialog), 'short') }}</span>
-                                    </template>
-                                    <div class="detail">
-                                        <span
-                                            v-if="userDialog.ref.state === 'online' && userDialog.ref.$online_for"
-                                            class="name">
-                                            {{ t('dialog.user.info.online_for') }}
-                                        </span>
-                                        <span v-else class="name">
-                                            {{ t('dialog.user.info.offline_for') }}
-                                        </span>
-                                        <span class="extra">{{ userOnlineFor(userDialog.ref) }}</span>
-                                    </div>
-                                </TooltipWrapper>
-                            </div>
-                            <div class="x-friend-item" style="cursor: default">
-                                <TooltipWrapper :side="currentUser.id !== userDialog.id ? 'bottom' : 'top'">
-                                    <template #content>
-                                        <span
-                                            >{{ t('dialog.user.info.last_login') }}
-                                            {{ formatDateFilter(userDialog.ref.last_login, 'long') }}</span
-                                        >
-                                        <br />
-                                        <span
-                                            >{{ t('dialog.user.info.last_activity') }}
-                                            {{ formatDateFilter(userDialog.ref.last_activity, 'long') }}</span
-                                        >
-                                    </template>
-                                    <div class="detail">
-                                        <span class="name">{{ t('dialog.user.info.last_activity') }}</span>
-                                        <span v-if="userDialog.ref.last_activity" class="extra">{{
-                                            timeToText(Date.now() - Date.parse(userDialog.ref.last_activity))
-                                        }}</span>
-                                        <span v-else class="extra">-</span>
-                                    </div>
-                                </TooltipWrapper>
-                            </div>
-                            <div class="x-friend-item" style="cursor: default">
-                                <div class="detail">
-                                    <span class="name">{{ t('dialog.user.info.date_joined') }}</span>
-                                    <span class="extra" v-text="userDialog.ref.date_joined"></span>
-                                </div>
-                            </div>
-                            <div v-if="currentUser.id !== userDialog.id" class="x-friend-item" style="cursor: default">
-                                <TooltipWrapper side="top" :disabled="!userDialog.dateFriendedInfo.length">
-                                    <template v-if="userDialog.dateFriendedInfo.length" #content>
-                                        <template v-for="ref in userDialog.dateFriendedInfo" :key="ref.type">
-                                            <span>{{ ref.type }}: {{ formatDateFilter(ref.created_at, 'long') }}</span
-                                            ><br />
-                                        </template>
-                                    </template>
-                                    <div class="detail">
-                                        <span v-if="userDialog.unFriended" class="name">
-                                            {{ t('dialog.user.info.unfriended') }}
-                                        </span>
-                                        <span v-else class="name">
-                                            {{ t('dialog.user.info.friended') }}
-                                        </span>
-                                        <span class="extra">{{
-                                            formatDateFilter(userDialog.dateFriended, 'long')
-                                        }}</span>
-                                    </div>
-                                </TooltipWrapper>
-                            </div>
-                            <template v-if="currentUser.id === userDialog.id">
-                                <div class="x-friend-item" @click="toggleAvatarCopying">
-                                    <div class="detail">
-                                        <span class="name">{{ t('dialog.user.info.avatar_cloning') }}</span>
-                                        <span v-if="currentUser.allowAvatarCopying" class="extra">{{
-                                            t('dialog.user.info.avatar_cloning_allow')
-                                        }}</span>
-                                        <span v-else class="extra">{{
-                                            t('dialog.user.info.avatar_cloning_deny')
-                                        }}</span>
-                                    </div>
-                                </div>
-                                <div class="x-friend-item" @click="toggleAllowBooping">
-                                    <div class="detail">
-                                        <span class="name">{{ t('dialog.user.info.booping') }}</span>
-                                        <span v-if="currentUser.isBoopingEnabled" class="extra">{{
-                                            t('dialog.user.info.avatar_cloning_allow')
-                                        }}</span>
-                                        <span v-else class="extra">{{
-                                            t('dialog.user.info.avatar_cloning_deny')
-                                        }}</span>
-                                    </div>
-                                </div>
-                                <div class="x-friend-item" @click="toggleSharedConnectionsOptOut">
-                                    <div class="detail">
-                                        <span class="name">{{ t('dialog.user.info.show_mutual_friends') }}</span>
-                                        <span v-if="!currentUser.hasSharedConnectionsOptOut" class="extra">{{
-                                            t('dialog.user.info.avatar_cloning_allow')
-                                        }}</span>
-                                        <span v-else class="extra">{{
-                                            t('dialog.user.info.avatar_cloning_deny')
-                                        }}</span>
-                                    </div>
-                                </div>
-                            </template>
-                            <template v-else>
-                                <div class="x-friend-item" style="cursor: default">
-                                    <div class="detail">
-                                        <span class="name">{{ t('dialog.user.info.avatar_cloning') }}</span>
-                                        <span v-if="userDialog.ref.allowAvatarCopying" class="extra">{{
-                                            t('dialog.user.info.avatar_cloning_allow')
-                                        }}</span>
-                                        <span v-else class="extra">{{
-                                            t('dialog.user.info.avatar_cloning_deny')
-                                        }}</span>
-                                    </div>
-                                </div>
-                            </template>
-                            <div
-                                v-if="userDialog.ref.id === currentUser.id"
-                                class="x-friend-item"
-                                @click="getVRChatCredits()">
-                                <div class="detail">
-                                    <span class="name">{{ t('view.profile.profile.vrchat_credits') }}</span>
-                                    <span class="extra">{{ vrchatCredit ?? t('view.profile.profile.refresh') }}</span>
-                                </div>
+                                </template>
+                                <span v-else v-text="userDialog.$location.userId"></span>
                             </div>
                             <div
-                                v-if="userDialog.ref.id === currentUser.id && currentUser.homeLocation"
-                                class="x-friend-item"
-                                style="width: 100%"
-                                @click="showWorldDialog(currentUser.homeLocation)">
-                                <div class="detail">
-                                    <span class="name">{{ t('dialog.user.info.home_location') }}</span>
-                                    <span class="extra">
-                                        <span v-text="userDialog.$homeLocationName"></span>
-                                        <Button
-                                            class="rounded-full ml-1 text-xs"
-                                            size="icon-sm"
-                                            variant="outline"
-                                            @click.stop="resetHome()"
-                                            ><Trash2 class="h-4 w-4" />
-                                        </Button>
-                                    </span>
-                                </div>
-                            </div>
-                            <div class="x-friend-item" style="width: 100%; cursor: default">
-                                <div class="detail">
-                                    <span class="name">{{ t('dialog.user.info.id') }}</span>
-                                    <span class="extra">
-                                        {{ userDialog.id }}
-                                        <TooltipWrapper side="top" :content="t('dialog.user.info.id_tooltip')">
-                                            <DropdownMenu>
-                                                <DropdownMenuTrigger as-child>
-                                                    <Button
-                                                        class="rounded-full ml-1 text-xs"
-                                                        size="icon-sm"
-                                                        variant="outline"
-                                                        @click.stop
-                                                        ><Copy class="h-4 w-4" />
-                                                    </Button>
-                                                </DropdownMenuTrigger>
-                                                <DropdownMenuContent>
-                                                    <DropdownMenuItem @click="copyUserId(userDialog.id)">
-                                                        {{ t('dialog.user.info.copy_id') }}
-                                                    </DropdownMenuItem>
-                                                    <DropdownMenuItem @click="copyUserURL(userDialog.id)">
-                                                        {{ t('dialog.user.info.copy_url') }}
-                                                    </DropdownMenuItem>
-                                                    <DropdownMenuItem
-                                                        @click="copyUserDisplayName(userDialog.ref.displayName)">
-                                                        {{ t('dialog.user.info.copy_display_name') }}
-                                                    </DropdownMenuItem>
-                                                </DropdownMenuContent>
-                                            </DropdownMenu>
-                                        </TooltipWrapper>
-                                    </span>
-                                </div>
-                            </div>
-                        </div>
-                    </template>
-
-                    <template
-                        v-if="userDialog.id !== currentUser.id && !currentUser.hasSharedConnectionsOptOut"
-                        #mutual>
-                        <div style="display: flex; align-items: center; justify-content: space-between">
-                            <div style="display: flex; align-items: center">
-                                <Button
-                                    class="rounded-full"
-                                    variant="outline"
-                                    size="icon-sm"
-                                    :disabled="userDialog.isMutualFriendsLoading"
-                                    @click="getUserMutualFriends(userDialog.id)">
-                                    <Spinner v-if="userDialog.isMutualFriendsLoading" />
-                                    <RefreshCw v-else />
-                                </Button>
-                                <span style="margin-left: 5px">{{
-                                    t('dialog.user.groups.total_count', { count: userDialog.mutualFriends.length })
-                                }}</span>
-                            </div>
-                            <div style="display: flex; align-items: center">
-                                <span style="margin-right: 5px">{{ t('dialog.user.groups.sort_by') }}</span>
-                                <Select
-                                    :model-value="userDialogMutualFriendSortingKey"
-                                    :disabled="userDialog.isMutualFriendsLoading"
-                                    @update:modelValue="setUserDialogMutualFriendSortingByKey">
-                                    <SelectTrigger size="sm" @click.stop>
-                                        <SelectValue />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                        <SelectItem
-                                            v-for="(item, key) in userDialogMutualFriendSortingOptions"
-                                            :key="String(key)"
-                                            :value="String(key)">
-                                            {{ t(item.name) }}
-                                        </SelectItem>
-                                    </SelectContent>
-                                </Select>
-                            </div>
-                        </div>
-                        <div
-                            v-if="mutualFriendsError"
-                            @click="openExternalLink('https://docs.vrchat.com/docs/vrchat-202542#mutuals')"
-                            style="
-                                margin-top: 20px;
-                                display: flex;
-                                justify-content: center;
-                                align-items: center;
-                                color: #f56c6c;
-                                cursor: pointer;
-                            ">
-                            <AlertTriangle style="margin-right: 5px" />
-                            <span>Mutual Friends unavailable due to VRChat staged rollout, click for more info</span>
-                        </div>
-                        <ul
-                            class="x-friend-list"
-                            style="margin-top: 10px; overflow: auto; max-height: 250px; min-width: 130px">
-                            <li
-                                v-for="user in userDialog.mutualFriends"
+                                v-for="user in userDialog.users"
                                 :key="user.id"
                                 class="x-friend-item x-friend-item-border"
                                 @click="showUserDialog(user.id)">
-                                <div class="avatar">
-                                    <img :src="userImage(user)" loading="lazy" />
+                                <div class="avatar" :class="userStatusClass(user)">
+                                    <img :src="userImage(user, true)" loading="lazy" />
                                 </div>
                                 <div class="detail">
                                     <span
                                         class="name"
                                         :style="{ color: user.$userColour }"
                                         v-text="user.displayName"></span>
+                                    <span v-if="user.location === 'traveling'" class="extra">
+                                        <Spinner class="inline-block mr-1" />
+                                        <Timer :epoch="user.$travelingToTime" />
+                                    </span>
+                                    <span v-else class="extra">
+                                        <Timer :epoch="user.$location_at" />
+                                    </span>
                                 </div>
-                            </li>
-                        </ul>
-                    </template>
-
-                    <template #Groups>
-                        <div style="display: flex; align-items: center; justify-content: space-between">
-                            <div style="display: flex; align-items: center">
-                                <Button
-                                    class="rounded-full"
-                                    variant="outline"
-                                    size="icon-sm"
-                                    :disabled="userDialog.isGroupsLoading"
-                                    @click="getUserGroups(userDialog.id)">
-                                    <Spinner v-if="userDialog.isGroupsLoading" />
-                                    <RefreshCw v-else />
-                                </Button>
-                                <span style="margin-left: 5px">{{
-                                    t('dialog.user.groups.total_count', { count: userGroups.groups.length })
-                                }}</span>
-                                <template v-if="userDialogGroupEditMode">
-                                    <span
-                                        style="
-                                            margin-left: 10px;
-
-                                            font-size: 10px;
-                                        "
-                                        >{{ t('dialog.user.groups.hold_shift') }}</span
-                                    >
-                                </template>
-                            </div>
-                            <div style="display: flex; align-items: center">
-                                <template v-if="!userDialogGroupEditMode">
-                                    <span style="margin-right: 5px">{{ t('dialog.user.groups.sort_by') }}</span>
-                                    <Select
-                                        :model-value="userDialogGroupSortingKey"
-                                        :disabled="userDialog.isGroupsLoading"
-                                        @update:modelValue="setUserDialogGroupSortingByKey">
-                                        <SelectTrigger size="sm" @click.stop>
-                                            <SelectValue />
-                                        </SelectTrigger>
-                                        <SelectContent>
-                                            <SelectItem
-                                                v-for="(item, key) in userDialogGroupSortingOptions"
-                                                :key="String(key)"
-                                                :value="String(key)"
-                                                :disabled="
-                                                    item === userDialogGroupSortingOptions.inGame &&
-                                                    userDialog.id !== currentUser.id
-                                                ">
-                                                {{ t(item.name) }}
-                                            </SelectItem>
-                                        </SelectContent>
-                                    </Select>
-                                </template>
-                                <Button
-                                    variant="outline"
-                                    size="sm"
-                                    v-if="userDialogGroupEditMode"
-                                    @click="exitEditModeCurrentUserGroups">
-                                    {{ t('dialog.user.groups.exit_edit_mode') }}
-                                </Button>
-                                <Button
-                                    size="sm"
-                                    variant="outline"
-                                    v-else-if="currentUser.id === userDialog.id"
-                                    class="ml-2"
-                                    @click="editModeCurrentUserGroups">
-                                    {{ t('dialog.user.groups.edit_mode') }}
-                                </Button>
                             </div>
                         </div>
-                        <div style="margin-top: 10px">
-                            <template v-if="userDialogGroupEditMode">
+                    </div>
+                </template>
+
+                <div class="x-friend-list" style="max-height: none">
+                    <div
+                        v-if="userDialog.note && !hideUserNotes"
+                        class="x-friend-item"
+                        style="width: 100%; cursor: pointer">
+                        <div class="detail" @click="isEditNoteAndMemoDialogVisible = true">
+                            <span class="name">{{ t('dialog.user.info.note') }}</span>
+                            <pre
+                                class="extra"
+                                style="
+                                    font-family: inherit;
+                                    font-size: 12px;
+                                    white-space: pre-wrap;
+                                    margin: 0 0.5em 0 0;
+                                    max-height: 210px;
+                                    overflow-y: auto;
+                                "
+                                >{{ userDialog.note }}</pre
+                            >
+                        </div>
+                    </div>
+                    <div
+                        v-if="userDialog.memo && !hideUserMemos"
+                        class="x-friend-item"
+                        style="width: 100%; cursor: pointer">
+                        <div class="detail" @click="isEditNoteAndMemoDialogVisible = true">
+                            <span class="name">{{ t('dialog.user.info.memo') }}</span>
+                            <pre
+                                class="extra"
+                                style="
+                                    font-family: inherit;
+                                    font-size: 12px;
+                                    white-space: pre-wrap;
+                                    margin: 0 0.5em 0 0;
+                                    max-height: 210px;
+                                    overflow-y: auto;
+                                "
+                                >{{ userDialog.memo }}</pre
+                            >
+                        </div>
+                    </div>
+                    <div class="x-friend-item" style="width: 100%; cursor: default">
+                        <div class="detail">
+                            <span class="name">
+                                {{
+                                    userDialog.id !== currentUser.id &&
+                                    userDialog.ref.profilePicOverride &&
+                                    userDialog.ref.currentAvatarImageUrl
+                                        ? t('dialog.user.info.avatar_info_last_seen')
+                                        : t('dialog.user.info.avatar_info')
+                                }}
+                                <TooltipWrapper
+                                    v-if="userDialog.ref.profilePicOverride && !userDialog.ref.currentAvatarImageUrl"
+                                    side="top"
+                                    :content="t('dialog.user.info.vrcplus_hides_avatar')">
+                                    <Info />
+                                </TooltipWrapper>
+                            </span>
+                            <div class="extra">
+                                <AvatarInfo
+                                    :imageurl="userDialog.ref.currentAvatarImageUrl"
+                                    :userid="userDialog.id"
+                                    :avatartags="userDialog.ref.currentAvatarTags"
+                                    style="display: inline-block" />
+                            </div>
+                        </div>
+                    </div>
+                    <div class="x-friend-item" style="width: 100%; cursor: default">
+                        <div class="detail">
+                            <span class="name" style="margin-bottom: 5px">{{
+                                t('dialog.user.info.represented_group')
+                            }}</span>
+                            <div
+                                v-if="
+                                    userDialog.isRepresentedGroupLoading ||
+                                    (userDialog.representedGroup && userDialog.representedGroup.isRepresenting)
+                                "
+                                class="extra">
+                                <div style="display: inline-block; flex: none; margin-right: 5px">
+                                    <Avatar
+                                        class="cursor-pointer size-15! rounded-lg!"
+                                        :style="{
+                                            background: userDialog.isRepresentedGroupLoading ? '#f5f7fa' : ''
+                                        }"
+                                        @click="showFullscreenImageDialog(userDialog.representedGroup.iconUrl)">
+                                        <AvatarImage
+                                            :src="userDialog.representedGroup.$thumbnailUrl"
+                                            @load="userDialog.isRepresentedGroupLoading = false"
+                                            @error="userDialog.isRepresentedGroupLoading = false" />
+                                        <AvatarFallback class="rounded-lg!" />
+                                    </Avatar>
+                                </div>
+                                <span
+                                    v-if="userDialog.representedGroup.isRepresenting"
+                                    style="vertical-align: top; cursor: pointer"
+                                    @click="showGroupDialog(userDialog.representedGroup.groupId)">
+                                    <span
+                                        v-if="userDialog.representedGroup.ownerId === userDialog.id"
+                                        style="margin-right: 5px"
+                                        >👑</span
+                                    >
+                                    <span style="margin-right: 5px" v-text="userDialog.representedGroup.name"></span>
+                                    <span>({{ userDialog.representedGroup.memberCount }})</span>
+                                </span>
+                            </div>
+                            <div v-else class="extra">-</div>
+                        </div>
+                    </div>
+                    <div class="x-friend-item" style="width: 100%; cursor: default">
+                        <div class="detail">
+                            <span class="name">{{ t('dialog.user.info.bio') }}</span>
+                            <pre
+                                class="extra truncate"
+                                style="
+                                    font-family: inherit;
+                                    font-size: 12px;
+                                    white-space: pre-wrap;
+                                    margin: 0 0.5em 0 0;
+                                    max-height: 210px;
+                                    overflow-y: auto;
+                                "
+                                >{{ bioCache.translated || userDialog.ref.bio || '-' }}</pre
+                            >
+                            <div style="float: right">
+                                <Button
+                                    v-if="translationApi && userDialog.ref.bio"
+                                    class="w-3 h-6 text-xs mr-0.5"
+                                    size="icon-sm"
+                                    variant="ghost"
+                                    @click="translateBio">
+                                    <Spinner v-if="translateLoading" class="size-1" />
+                                    <Languages v-else class="h-3 w-3" />
+                                </Button>
+                                <Button
+                                    class="w-3 h-6 text-xs"
+                                    size="icon-sm"
+                                    variant="ghost"
+                                    v-if="userDialog.id === currentUser.id"
+                                    style="margin-left: 5px; padding: 0"
+                                    @click="showBioDialog"
+                                    ><Pencil class="h-3 w-3" />
+                                </Button>
+                            </div>
+                            <div style="margin-top: 5px" class="flex items-center">
+                                <TooltipWrapper v-for="(link, index) in userDialog.ref.bioLinks" :key="index">
+                                    <template #content>
+                                        <span v-text="link"></span>
+                                    </template>
+                                    <!-- onerror="this.onerror=null;this.class='icon-error'" -->
+                                    <img
+                                        :src="getFaviconUrl(link)"
+                                        style="
+                                            width: 16px;
+                                            height: 16px;
+                                            vertical-align: middle;
+                                            margin-right: 5px;
+                                            cursor: pointer;
+                                        "
+                                        @click.stop="openExternalLink(link)"
+                                        loading="lazy" />
+                                </TooltipWrapper>
+                            </div>
+                        </div>
+                    </div>
+                    <template v-if="currentUser.id !== userDialog.id">
+                        <div class="x-friend-item" style="cursor: default">
+                            <div class="detail">
+                                <span class="name">
+                                    {{ t('dialog.user.info.last_seen') }}
+                                </span>
+                                <span class="extra">{{ formatDateFilter(userDialog.lastSeen, 'long') }}</span>
+                            </div>
+                        </div>
+
+                        <div class="x-friend-item" @click="showPreviousInstancesUserDialog(userDialog.ref)">
+                            <div class="detail">
                                 <div
-                                    class="x-friend-list"
-                                    style="margin-top: 10px; margin-bottom: 15px; max-height: unset">
-                                    <!-- Bulk actions dropdown (shown only in edit mode) -->
-                                    <Select
-                                        :model-value="bulkGroupActionValue"
-                                        @update:modelValue="handleBulkGroupAction">
-                                        <SelectTrigger
-                                            size="sm"
-                                            style="margin-right: 5px; margin-bottom: 5px"
-                                            @click.stop>
-                                            <SelectValue :placeholder="t('dialog.group.actions.manage_selected')" />
-                                        </SelectTrigger>
-                                        <SelectContent>
-                                            <SelectItem value="visibility:visible">
-                                                {{ t('dialog.group.actions.visibility_everyone') }}
-                                            </SelectItem>
-                                            <SelectItem value="visibility:friends">
-                                                {{ t('dialog.group.actions.visibility_friends') }}
-                                            </SelectItem>
-                                            <SelectItem value="visibility:hidden">
-                                                {{ t('dialog.group.actions.visibility_hidden') }}
-                                            </SelectItem>
-                                            <SelectItem value="leave">
-                                                {{ t('dialog.user.groups.leave_group_tooltip') }}
-                                            </SelectItem>
-                                        </SelectContent>
-                                    </Select>
+                                    class="name"
+                                    style="display: flex; justify-content: space-between; align-items: center">
+                                    <div>
+                                        {{ t('dialog.user.info.join_count') }}
+                                    </div>
 
-                                    <!-- Select All button -->
+                                    <TooltipWrapper side="top" :content="t('dialog.user.info.open_previous_instance')">
+                                        <MoreHorizontal style="margin-right: 16px" />
+                                    </TooltipWrapper>
+                                </div>
+                                <span v-if="userDialog.joinCount === 0" class="extra">-</span>
+                                <span v-else class="extra" v-text="userDialog.joinCount"></span>
+                            </div>
+                        </div>
+
+                        <div class="x-friend-item" style="cursor: default">
+                            <div class="detail">
+                                <span class="name">
+                                    {{ t('dialog.user.info.time_together') }}
+                                </span>
+                                <span v-if="userDialog.timeSpent === 0" class="extra">-</span>
+                                <span v-else class="extra">{{ timeToText(userDialog.timeSpent) }}</span>
+                            </div>
+                        </div>
+                    </template>
+                    <template v-else>
+                        <TooltipWrapper
+                            :disabled="currentUser.id !== userDialog.id"
+                            side="top"
+                            :content="t('dialog.user.info.open_previous_instance')">
+                            <div class="x-friend-item" @click="showPreviousInstancesUserDialog(userDialog.ref)">
+                                <div class="detail">
+                                    <span class="name">
+                                        {{ t('dialog.user.info.play_time') }}
+                                    </span>
+                                    <span v-if="userDialog.timeSpent === 0" class="extra">-</span>
+                                    <span v-else class="extra">{{ timeToText(userDialog.timeSpent) }}</span>
+                                </div>
+                            </div>
+                        </TooltipWrapper>
+                    </template>
+                    <div class="x-friend-item" style="cursor: default">
+                        <TooltipWrapper :side="currentUser.id !== userDialog.id ? 'bottom' : 'top'">
+                            <template #content>
+                                <span>{{ formatDateFilter(userOnlineForTimestamp(userDialog), 'short') }}</span>
+                            </template>
+                            <div class="detail">
+                                <span
+                                    v-if="userDialog.ref.state === 'online' && userDialog.ref.$online_for"
+                                    class="name">
+                                    {{ t('dialog.user.info.online_for') }}
+                                </span>
+                                <span v-else class="name">
+                                    {{ t('dialog.user.info.offline_for') }}
+                                </span>
+                                <span class="extra">{{ userOnlineFor(userDialog.ref) }}</span>
+                            </div>
+                        </TooltipWrapper>
+                    </div>
+                    <div class="x-friend-item" style="cursor: default">
+                        <TooltipWrapper :side="currentUser.id !== userDialog.id ? 'bottom' : 'top'">
+                            <template #content>
+                                <span
+                                    >{{ t('dialog.user.info.last_login') }}
+                                    {{ formatDateFilter(userDialog.ref.last_login, 'long') }}</span
+                                >
+                                <br />
+                                <span
+                                    >{{ t('dialog.user.info.last_activity') }}
+                                    {{ formatDateFilter(userDialog.ref.last_activity, 'long') }}</span
+                                >
+                            </template>
+                            <div class="detail">
+                                <span class="name">{{ t('dialog.user.info.last_activity') }}</span>
+                                <span v-if="userDialog.ref.last_activity" class="extra">{{
+                                    timeToText(Date.now() - Date.parse(userDialog.ref.last_activity))
+                                }}</span>
+                                <span v-else class="extra">-</span>
+                            </div>
+                        </TooltipWrapper>
+                    </div>
+                    <div class="x-friend-item" style="cursor: default">
+                        <div class="detail">
+                            <span class="name">{{ t('dialog.user.info.date_joined') }}</span>
+                            <span class="extra" v-text="userDialog.ref.date_joined"></span>
+                        </div>
+                    </div>
+                    <div v-if="currentUser.id !== userDialog.id" class="x-friend-item" style="cursor: default">
+                        <TooltipWrapper side="top" :disabled="!userDialog.dateFriendedInfo.length">
+                            <template v-if="userDialog.dateFriendedInfo.length" #content>
+                                <template v-for="ref in userDialog.dateFriendedInfo" :key="ref.type">
+                                    <span>{{ ref.type }}: {{ formatDateFilter(ref.created_at, 'long') }}</span
+                                    ><br />
+                                </template>
+                            </template>
+                            <div class="detail">
+                                <span v-if="userDialog.unFriended" class="name">
+                                    {{ t('dialog.user.info.unfriended') }}
+                                </span>
+                                <span v-else class="name">
+                                    {{ t('dialog.user.info.friended') }}
+                                </span>
+                                <span class="extra">{{ formatDateFilter(userDialog.dateFriended, 'long') }}</span>
+                            </div>
+                        </TooltipWrapper>
+                    </div>
+                    <template v-if="currentUser.id === userDialog.id">
+                        <div class="x-friend-item" @click="toggleAvatarCopying">
+                            <div class="detail">
+                                <span class="name">{{ t('dialog.user.info.avatar_cloning') }}</span>
+                                <span v-if="currentUser.allowAvatarCopying" class="extra">{{
+                                    t('dialog.user.info.avatar_cloning_allow')
+                                }}</span>
+                                <span v-else class="extra">{{ t('dialog.user.info.avatar_cloning_deny') }}</span>
+                            </div>
+                        </div>
+                        <div class="x-friend-item" @click="toggleAllowBooping">
+                            <div class="detail">
+                                <span class="name">{{ t('dialog.user.info.booping') }}</span>
+                                <span v-if="currentUser.isBoopingEnabled" class="extra">{{
+                                    t('dialog.user.info.avatar_cloning_allow')
+                                }}</span>
+                                <span v-else class="extra">{{ t('dialog.user.info.avatar_cloning_deny') }}</span>
+                            </div>
+                        </div>
+                        <div class="x-friend-item" @click="toggleSharedConnectionsOptOut">
+                            <div class="detail">
+                                <span class="name">{{ t('dialog.user.info.show_mutual_friends') }}</span>
+                                <span v-if="!currentUser.hasSharedConnectionsOptOut" class="extra">{{
+                                    t('dialog.user.info.avatar_cloning_allow')
+                                }}</span>
+                                <span v-else class="extra">{{ t('dialog.user.info.avatar_cloning_deny') }}</span>
+                            </div>
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div class="x-friend-item" style="cursor: default">
+                            <div class="detail">
+                                <span class="name">{{ t('dialog.user.info.avatar_cloning') }}</span>
+                                <span v-if="userDialog.ref.allowAvatarCopying" class="extra">{{
+                                    t('dialog.user.info.avatar_cloning_allow')
+                                }}</span>
+                                <span v-else class="extra">{{ t('dialog.user.info.avatar_cloning_deny') }}</span>
+                            </div>
+                        </div>
+                    </template>
+                    <div v-if="userDialog.ref.id === currentUser.id" class="x-friend-item" @click="getVRChatCredits()">
+                        <div class="detail">
+                            <span class="name">{{ t('view.profile.profile.vrchat_credits') }}</span>
+                            <span class="extra">{{ vrchatCredit ?? t('view.profile.profile.refresh') }}</span>
+                        </div>
+                    </div>
+                    <div
+                        v-if="userDialog.ref.id === currentUser.id && currentUser.homeLocation"
+                        class="x-friend-item"
+                        style="width: 100%"
+                        @click="showWorldDialog(currentUser.homeLocation)">
+                        <div class="detail">
+                            <span class="name">{{ t('dialog.user.info.home_location') }}</span>
+                            <span class="extra">
+                                <span v-text="userDialog.$homeLocationName"></span>
+                                <Button
+                                    class="rounded-full ml-1 text-xs"
+                                    size="icon-sm"
+                                    variant="outline"
+                                    @click.stop="resetHome()"
+                                    ><Trash2 class="h-4 w-4" />
+                                </Button>
+                            </span>
+                        </div>
+                    </div>
+                    <div class="x-friend-item" style="width: 100%; cursor: default">
+                        <div class="detail">
+                            <span class="name">{{ t('dialog.user.info.id') }}</span>
+                            <span class="extra">
+                                {{ userDialog.id }}
+                                <TooltipWrapper side="top" :content="t('dialog.user.info.id_tooltip')">
+                                    <DropdownMenu>
+                                        <DropdownMenuTrigger as-child>
+                                            <Button
+                                                class="rounded-full ml-1 text-xs"
+                                                size="icon-sm"
+                                                variant="outline"
+                                                @click.stop
+                                                ><Copy class="h-4 w-4" />
+                                            </Button>
+                                        </DropdownMenuTrigger>
+                                        <DropdownMenuContent>
+                                            <DropdownMenuItem @click="copyUserId(userDialog.id)">
+                                                {{ t('dialog.user.info.copy_id') }}
+                                            </DropdownMenuItem>
+                                            <DropdownMenuItem @click="copyUserURL(userDialog.id)">
+                                                {{ t('dialog.user.info.copy_url') }}
+                                            </DropdownMenuItem>
+                                            <DropdownMenuItem @click="copyUserDisplayName(userDialog.ref.displayName)">
+                                                {{ t('dialog.user.info.copy_display_name') }}
+                                            </DropdownMenuItem>
+                                        </DropdownMenuContent>
+                                    </DropdownMenu>
+                                </TooltipWrapper>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <template v-if="userDialog.id !== currentUser.id && !currentUser.hasSharedConnectionsOptOut" #mutual>
+                <div style="display: flex; align-items: center; justify-content: space-between">
+                    <div style="display: flex; align-items: center">
+                        <Button
+                            class="rounded-full"
+                            variant="outline"
+                            size="icon-sm"
+                            :disabled="userDialog.isMutualFriendsLoading"
+                            @click="getUserMutualFriends(userDialog.id)">
+                            <Spinner v-if="userDialog.isMutualFriendsLoading" />
+                            <RefreshCw v-else />
+                        </Button>
+                        <span style="margin-left: 5px">{{
+                            t('dialog.user.groups.total_count', { count: userDialog.mutualFriends.length })
+                        }}</span>
+                    </div>
+                    <div style="display: flex; align-items: center">
+                        <span style="margin-right: 5px">{{ t('dialog.user.groups.sort_by') }}</span>
+                        <Select
+                            :model-value="userDialogMutualFriendSortingKey"
+                            :disabled="userDialog.isMutualFriendsLoading"
+                            @update:modelValue="setUserDialogMutualFriendSortingByKey">
+                            <SelectTrigger size="sm" @click.stop>
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem
+                                    v-for="(item, key) in userDialogMutualFriendSortingOptions"
+                                    :key="String(key)"
+                                    :value="String(key)">
+                                    {{ t(item.name) }}
+                                </SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </div>
+                </div>
+                <div
+                    v-if="mutualFriendsError"
+                    @click="openExternalLink('https://docs.vrchat.com/docs/vrchat-202542#mutuals')"
+                    style="
+                        margin-top: 20px;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        color: #f56c6c;
+                        cursor: pointer;
+                    ">
+                    <AlertTriangle style="margin-right: 5px" />
+                    <span>Mutual Friends unavailable due to VRChat staged rollout, click for more info</span>
+                </div>
+                <ul class="x-friend-list" style="margin-top: 10px; overflow: auto; max-height: 250px; min-width: 130px">
+                    <li
+                        v-for="user in userDialog.mutualFriends"
+                        :key="user.id"
+                        class="x-friend-item x-friend-item-border"
+                        @click="showUserDialog(user.id)">
+                        <div class="avatar">
+                            <img :src="userImage(user)" loading="lazy" />
+                        </div>
+                        <div class="detail">
+                            <span class="name" :style="{ color: user.$userColour }" v-text="user.displayName"></span>
+                        </div>
+                    </li>
+                </ul>
+            </template>
+
+            <template #Groups>
+                <div style="display: flex; align-items: center; justify-content: space-between">
+                    <div style="display: flex; align-items: center">
+                        <Button
+                            class="rounded-full"
+                            variant="outline"
+                            size="icon-sm"
+                            :disabled="userDialog.isGroupsLoading"
+                            @click="getUserGroups(userDialog.id)">
+                            <Spinner v-if="userDialog.isGroupsLoading" />
+                            <RefreshCw v-else />
+                        </Button>
+                        <span style="margin-left: 5px">{{
+                            t('dialog.user.groups.total_count', { count: userGroups.groups.length })
+                        }}</span>
+                        <template v-if="userDialogGroupEditMode">
+                            <span
+                                style="
+                                    margin-left: 10px;
+
+                                    font-size: 10px;
+                                "
+                                >{{ t('dialog.user.groups.hold_shift') }}</span
+                            >
+                        </template>
+                    </div>
+                    <div style="display: flex; align-items: center">
+                        <template v-if="!userDialogGroupEditMode">
+                            <span style="margin-right: 5px">{{ t('dialog.user.groups.sort_by') }}</span>
+                            <Select
+                                :model-value="userDialogGroupSortingKey"
+                                :disabled="userDialog.isGroupsLoading"
+                                @update:modelValue="setUserDialogGroupSortingByKey">
+                                <SelectTrigger size="sm" @click.stop>
+                                    <SelectValue />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem
+                                        v-for="(item, key) in userDialogGroupSortingOptions"
+                                        :key="String(key)"
+                                        :value="String(key)"
+                                        :disabled="
+                                            item === userDialogGroupSortingOptions.inGame &&
+                                            userDialog.id !== currentUser.id
+                                        ">
+                                        {{ t(item.name) }}
+                                    </SelectItem>
+                                </SelectContent>
+                            </Select>
+                        </template>
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            v-if="userDialogGroupEditMode"
+                            @click="exitEditModeCurrentUserGroups">
+                            {{ t('dialog.user.groups.exit_edit_mode') }}
+                        </Button>
+                        <Button
+                            size="sm"
+                            variant="outline"
+                            v-else-if="currentUser.id === userDialog.id"
+                            class="ml-2"
+                            @click="editModeCurrentUserGroups">
+                            {{ t('dialog.user.groups.edit_mode') }}
+                        </Button>
+                    </div>
+                </div>
+                <div style="margin-top: 10px">
+                    <template v-if="userDialogGroupEditMode">
+                        <div class="x-friend-list" style="margin-top: 10px; margin-bottom: 15px; max-height: unset">
+                            <!-- Bulk actions dropdown (shown only in edit mode) -->
+                            <Select :model-value="bulkGroupActionValue" @update:modelValue="handleBulkGroupAction">
+                                <SelectTrigger size="sm" style="margin-right: 5px; margin-bottom: 5px" @click.stop>
+                                    <SelectValue :placeholder="t('dialog.group.actions.manage_selected')" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="visibility:visible">
+                                        {{ t('dialog.group.actions.visibility_everyone') }}
+                                    </SelectItem>
+                                    <SelectItem value="visibility:friends">
+                                        {{ t('dialog.group.actions.visibility_friends') }}
+                                    </SelectItem>
+                                    <SelectItem value="visibility:hidden">
+                                        {{ t('dialog.group.actions.visibility_hidden') }}
+                                    </SelectItem>
+                                    <SelectItem value="leave">
+                                        {{ t('dialog.user.groups.leave_group_tooltip') }}
+                                    </SelectItem>
+                                </SelectContent>
+                            </Select>
+
+                            <!-- Select All button -->
+                            <Button
+                                size="sm"
+                                variant="outline"
+                                style="padding: 7px 15px; margin-bottom: 5px"
+                                @click="selectAllGroups">
+                                {{
+                                    userDialogGroupAllSelected
+                                        ? t('dialog.group.actions.deselect_all')
+                                        : t('dialog.group.actions.select_all')
+                                }}
+                            </Button>
+
+                            <div
+                                v-for="group in userDialogGroupEditGroups"
+                                :key="group.id"
+                                class="x-friend-item x-friend-item-border"
+                                style="width: 100%"
+                                @click="showGroupDialog(group.id)">
+                                <!-- Manual checkbox -->
+                                <div
+                                    style="
+                                        margin-left: 5px;
+                                        margin-right: 5px;
+                                        transform: scale(0.8);
+                                        transform-origin: left center;
+                                    "
+                                    @click.stop>
+                                    <Checkbox
+                                        :model-value="userDialogGroupEditSelectedGroupIds.includes(group.id)"
+                                        @update:modelValue="() => toggleGroupSelection(group.id)" />
+                                </div>
+
+                                <div style="margin-right: 3px; margin-left: 5px" @click.stop>
                                     <Button
-                                        size="sm"
+                                        size="icon-sm"
                                         variant="outline"
-                                        style="padding: 7px 15px; margin-bottom: 5px"
-                                        @click="selectAllGroups">
-                                        {{
-                                            userDialogGroupAllSelected
-                                                ? t('dialog.group.actions.deselect_all')
-                                                : t('dialog.group.actions.select_all')
-                                        }}
+                                        style="
+                                            display: block;
+                                            padding: 7px;
+                                            font-size: 9px;
+                                            margin-left: 0;
+                                            rotate: 180deg;
+                                        "
+                                        @click="moveGroupTop(group.id)">
+                                        <DownloadIcon />
                                     </Button>
-
-                                    <div
-                                        v-for="group in userDialogGroupEditGroups"
-                                        :key="group.id"
-                                        class="x-friend-item x-friend-item-border"
-                                        style="width: 100%"
-                                        @click="showGroupDialog(group.id)">
-                                        <!-- Manual checkbox -->
-                                        <div
-                                            style="
-                                                margin-left: 5px;
-                                                margin-right: 5px;
-                                                transform: scale(0.8);
-                                                transform-origin: left center;
-                                            "
-                                            @click.stop>
-                                            <Checkbox
-                                                :model-value="userDialogGroupEditSelectedGroupIds.includes(group.id)"
-                                                @update:modelValue="() => toggleGroupSelection(group.id)" />
-                                        </div>
-
-                                        <div style="margin-right: 3px; margin-left: 5px" @click.stop>
-                                            <Button
-                                                size="icon-sm"
-                                                variant="outline"
-                                                style="
-                                                    display: block;
-                                                    padding: 7px;
-                                                    font-size: 9px;
-                                                    margin-left: 0;
-                                                    rotate: 180deg;
-                                                "
-                                                @click="moveGroupTop(group.id)">
-                                                <DownloadIcon />
-                                            </Button>
-                                            <Button
-                                                size="icon-sm"
-                                                variant="outline"
-                                                style="display: block; padding: 7px; font-size: 9px; margin-left: 0"
-                                                @click="moveGroupBottom(group.id)">
-                                                <DownloadIcon />
-                                            </Button>
-                                        </div>
-                                        <div style="margin-right: 10px" @click.stop>
-                                            <Button
-                                                size="icon-sm"
-                                                variant="outline"
-                                                style="display: block; padding: 7px; font-size: 9px; margin-left: 0"
-                                                @click="moveGroupUp(group.id)">
-                                                <ArrowUp />
-                                            </Button>
-                                            <Button
-                                                size="icon-sm"
-                                                variant="outline"
-                                                style="display: block; padding: 7px; font-size: 9px; margin-left: 0"
-                                                @click="moveGroupDown(group.id)">
-                                                <ArrowDown />
-                                            </Button>
-                                        </div>
-                                        <div class="avatar">
-                                            <img :src="group.iconUrl" loading="lazy" />
-                                        </div>
-                                        <div class="detail">
-                                            <span class="name" v-text="group.name"></span>
-                                            <span class="extra">
-                                                <TooltipWrapper
-                                                    v-if="group.isRepresenting"
-                                                    side="top"
-                                                    :content="t('dialog.group.members.representing')">
-                                                    <Tag style="margin-right: 5px" />
-                                                </TooltipWrapper>
-                                                <TooltipWrapper
-                                                    v-if="group.myMember?.visibility !== 'visible'"
-                                                    side="top">
-                                                    <template #content>
-                                                        <span
-                                                            >{{ t('dialog.group.members.visibility') }}
-                                                            {{ group.myMember.visibility }}</span
-                                                        >
-                                                    </template>
-                                                    <Eye style="margin-right: 5px" />
-                                                </TooltipWrapper>
-                                                <span>({{ group.memberCount }})</span>
-                                            </span>
-                                        </div>
-                                        <Select
-                                            v-if="group.myMember?.visibility"
-                                            :model-value="group.myMember.visibility"
-                                            :disabled="group.privacy !== 'default'"
-                                            @update:modelValue="(value) => setGroupVisibility(group.id, value)">
-                                            <SelectTrigger size="sm" @click.stop>
-                                                <SelectValue
-                                                    :placeholder="
-                                                        group.myMember.visibility === 'visible'
-                                                            ? t('dialog.group.tags.visible')
-                                                            : group.myMember.visibility === 'friends'
-                                                              ? t('dialog.group.tags.friends')
-                                                              : group.myMember.visibility === 'hidden'
-                                                                ? t('dialog.group.tags.hidden')
-                                                                : group.myMember.visibility
-                                                    " />
-                                            </SelectTrigger>
-                                            <SelectContent>
-                                                <SelectItem value="visible">
-                                                    {{ t('dialog.group.actions.visibility_everyone') }}
-                                                </SelectItem>
-                                                <SelectItem value="friends">
-                                                    {{ t('dialog.group.actions.visibility_friends') }}
-                                                </SelectItem>
-                                                <SelectItem value="hidden">
-                                                    {{ t('dialog.group.actions.visibility_hidden') }}
-                                                </SelectItem>
-                                            </SelectContent>
-                                        </Select>
-                                        <!--//- JSON is missing isSubscribedToAnnouncements, can't be implemented-->
-                                        <!-- <Button size="sm" variant="outline"
+                                    <Button
+                                        size="icon-sm"
+                                        variant="outline"
+                                        style="display: block; padding: 7px; font-size: 9px; margin-left: 0"
+                                        @click="moveGroupBottom(group.id)">
+                                        <DownloadIcon />
+                                    </Button>
+                                </div>
+                                <div style="margin-right: 10px" @click.stop>
+                                    <Button
+                                        size="icon-sm"
+                                        variant="outline"
+                                        style="display: block; padding: 7px; font-size: 9px; margin-left: 0"
+                                        @click="moveGroupUp(group.id)">
+                                        <ArrowUp />
+                                    </Button>
+                                    <Button
+                                        size="icon-sm"
+                                        variant="outline"
+                                        style="display: block; padding: 7px; font-size: 9px; margin-left: 0"
+                                        @click="moveGroupDown(group.id)">
+                                        <ArrowDown />
+                                    </Button>
+                                </div>
+                                <div class="avatar">
+                                    <img :src="group.iconUrl" loading="lazy" />
+                                </div>
+                                <div class="detail">
+                                    <span class="name" v-text="group.name"></span>
+                                    <span class="extra">
+                                        <TooltipWrapper
+                                            v-if="group.isRepresenting"
+                                            side="top"
+                                            :content="t('dialog.group.members.representing')">
+                                            <Tag style="margin-right: 5px" />
+                                        </TooltipWrapper>
+                                        <TooltipWrapper v-if="group.myMember?.visibility !== 'visible'" side="top">
+                                            <template #content>
+                                                <span
+                                                    >{{ t('dialog.group.members.visibility') }}
+                                                    {{ group.myMember.visibility }}</span
+                                                >
+                                            </template>
+                                            <Eye style="margin-right: 5px" />
+                                        </TooltipWrapper>
+                                        <span>({{ group.memberCount }})</span>
+                                    </span>
+                                </div>
+                                <Select
+                                    v-if="group.myMember?.visibility"
+                                    :model-value="group.myMember.visibility"
+                                    :disabled="group.privacy !== 'default'"
+                                    @update:modelValue="(value) => setGroupVisibility(group.id, value)">
+                                    <SelectTrigger size="sm" @click.stop>
+                                        <SelectValue
+                                            :placeholder="
+                                                group.myMember.visibility === 'visible'
+                                                    ? t('dialog.group.tags.visible')
+                                                    : group.myMember.visibility === 'friends'
+                                                      ? t('dialog.group.tags.friends')
+                                                      : group.myMember.visibility === 'hidden'
+                                                        ? t('dialog.group.tags.hidden')
+                                                        : group.myMember.visibility
+                                            " />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="visible">
+                                            {{ t('dialog.group.actions.visibility_everyone') }}
+                                        </SelectItem>
+                                        <SelectItem value="friends">
+                                            {{ t('dialog.group.actions.visibility_friends') }}
+                                        </SelectItem>
+                                        <SelectItem value="hidden">
+                                            {{ t('dialog.group.actions.visibility_hidden') }}
+                                        </SelectItem>
+                                    </SelectContent>
+                                </Select>
+                                <!--//- JSON is missing isSubscribedToAnnouncements, can't be implemented-->
+                                <!-- <Button size="sm" variant="outline"
                                         @click.stop="
                                             setGroupSubscription(group.id, !group.myMember.isSubscribedToAnnouncements)
                                         ">
@@ -811,251 +769,233 @@
                                             {{ t('dialog.group.tags.unsubscribed') }}</span
                                         >
                                     </Button> -->
-                                        <TooltipWrapper
-                                            side="right"
-                                            :content="t('dialog.user.groups.leave_group_tooltip')">
-                                            <Button
-                                                class="rounded-full h-6 w-6"
-                                                size="icon-sm"
-                                                variant="outline"
-                                                v-if="shiftHeld"
-                                                style="margin-left: 5px"
-                                                @click.stop="leaveGroup(group.id)">
-                                                <LogOut />
-                                            </Button>
-                                            <Button
-                                                class="rounded-full h-6 w-6 text-red-600"
-                                                size="icon-sm"
-                                                variant="outline"
-                                                v-else
-                                                style="margin-left: 5px"
-                                                @click.stop="leaveGroupPrompt(group.id)">
-                                                <LogOut />
-                                            </Button>
-                                        </TooltipWrapper>
-                                    </div>
-                                </div>
-                            </template>
-                            <template v-else>
-                                <template v-if="userGroups.ownGroups.length > 0">
-                                    <span style="font-weight: bold; font-size: 16px">{{
-                                        t('dialog.user.groups.own_groups')
-                                    }}</span>
-                                    <span style="font-size: 12px; margin-left: 5px"
-                                        >{{ userGroups.ownGroups.length }}/{{
-                                            cachedConfig?.constants?.GROUPS?.MAX_OWNED
-                                        }}</span
-                                    >
-                                    <div
-                                        class="x-friend-list"
-                                        style="margin-top: 10px; margin-bottom: 15px; min-height: 60px">
-                                        <div
-                                            v-for="group in userGroups.ownGroups"
-                                            :key="group.id"
-                                            class="x-friend-item x-friend-item-border"
-                                            @click="showGroupDialog(group.id)">
-                                            <div class="avatar">
-                                                <img :src="group.iconUrl" loading="lazy" />
-                                            </div>
-                                            <div class="detail">
-                                                <span class="name" v-text="group.name"></span>
-                                                <span class="extra">
-                                                    <TooltipWrapper
-                                                        v-if="group.isRepresenting"
-                                                        side="top"
-                                                        :content="t('dialog.group.members.representing')">
-                                                        <Tag style="margin-right: 5px" />
-                                                    </TooltipWrapper>
-                                                    <TooltipWrapper
-                                                        v-if="group.memberVisibility !== 'visible'"
-                                                        side="top">
-                                                        <template #content>
-                                                            <span
-                                                                >{{ t('dialog.group.members.visibility') }}
-                                                                {{ group.memberVisibility }}</span
-                                                            >
-                                                        </template>
-                                                        <Eye style="margin-right: 5px" />
-                                                    </TooltipWrapper>
-                                                    <span>({{ group.memberCount }})</span>
-                                                </span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </template>
-                                <template v-if="userGroups.mutualGroups.length > 0">
-                                    <span style="font-weight: bold; font-size: 16px">{{
-                                        t('dialog.user.groups.mutual_groups')
-                                    }}</span>
-                                    <span style="font-size: 12px; margin-left: 5px">{{
-                                        userGroups.mutualGroups.length
-                                    }}</span>
-                                    <div
-                                        class="x-friend-list"
-                                        style="margin-top: 10px; margin-bottom: 15px; min-height: 60px">
-                                        <div
-                                            v-for="group in userGroups.mutualGroups"
-                                            :key="group.id"
-                                            class="x-friend-item x-friend-item-border"
-                                            @click="showGroupDialog(group.id)">
-                                            <div class="avatar">
-                                                <img :src="group.iconUrl" loading="lazy" />
-                                            </div>
-                                            <div class="detail">
-                                                <span class="name" v-text="group.name"></span>
-                                                <span class="extra">
-                                                    <TooltipWrapper
-                                                        v-if="group.isRepresenting"
-                                                        side="top"
-                                                        :content="t('dialog.group.members.representing')">
-                                                        <Tag style="margin-right: 5px" />
-                                                    </TooltipWrapper>
-                                                    <TooltipWrapper
-                                                        v-if="group.memberVisibility !== 'visible'"
-                                                        side="top">
-                                                        <template #content>
-                                                            <span
-                                                                >{{ t('dialog.group.members.visibility') }}
-                                                                {{ group.memberVisibility }}</span
-                                                            >
-                                                        </template>
-                                                        <Eye style="margin-right: 5px" />
-                                                    </TooltipWrapper>
-                                                    <span>({{ group.memberCount }})</span>
-                                                </span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </template>
-                                <template v-if="userGroups.remainingGroups.length > 0">
-                                    <span style="font-weight: bold; font-size: 16px">{{
-                                        t('dialog.user.groups.groups')
-                                    }}</span>
-                                    <span style="font-size: 12px; margin-left: 5px">
-                                        {{ userGroups.remainingGroups.length }}
-                                        <template v-if="currentUser.id === userDialog.id">
-                                            /
-                                            <template v-if="isLocalUserVrcPlusSupporter">
-                                                {{ cachedConfig?.constants?.GROUPS?.MAX_JOINED_PLUS }}
-                                            </template>
-                                            <template v-else>
-                                                {{ cachedConfig?.constants?.GROUPS?.MAX_JOINED }}
-                                            </template>
-                                        </template>
-                                    </span>
-                                    <div
-                                        class="x-friend-list"
-                                        style="margin-top: 10px; margin-bottom: 15px; min-height: 60px">
-                                        <div
-                                            v-for="group in userGroups.remainingGroups"
-                                            :key="group.id"
-                                            class="x-friend-item x-friend-item-border"
-                                            @click="showGroupDialog(group.id)">
-                                            <div class="avatar">
-                                                <img :src="group.iconUrl" loading="lazy" />
-                                            </div>
-                                            <div class="detail">
-                                                <span class="name" v-text="group.name"></span>
-                                                <span class="extra">
-                                                    <TooltipWrapper
-                                                        v-if="group.isRepresenting"
-                                                        side="top"
-                                                        :content="t('dialog.group.members.representing')">
-                                                        <Tag style="margin-right: 5px" />
-                                                    </TooltipWrapper>
-                                                    <TooltipWrapper
-                                                        v-if="group.memberVisibility !== 'visible'"
-                                                        side="top">
-                                                        <template #content>
-                                                            <span
-                                                                >{{ t('dialog.group.members.visibility') }}
-                                                                {{ group.memberVisibility }}</span
-                                                            >
-                                                        </template>
-                                                        <Eye style="margin-right: 5px" />
-                                                    </TooltipWrapper>
-                                                    <span>({{ group.memberCount }})</span>
-                                                </span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </template>
-                            </template>
-                        </div>
-                    </template>
-
-                    <template #Worlds>
-                        <div style="display: flex; align-items: center; justify-content: space-between">
-                            <div style="display: flex; align-items: center">
-                                <Button
-                                    class="rounded-full"
-                                    variant="outline"
-                                    size="icon-sm"
-                                    :disabled="userDialog.isWorldsLoading"
-                                    @click="refreshUserDialogWorlds()">
-                                    <Spinner v-if="userDialog.isWorldsLoading" />
-                                    <RefreshCw v-else />
-                                </Button>
-                                <span style="margin-left: 5px">{{
-                                    t('dialog.user.worlds.total_count', { count: userDialog.worlds.length })
-                                }}</span>
-                            </div>
-                            <div style="display: flex; align-items: center">
-                                <span class="mr-1">{{ t('dialog.user.worlds.sort_by') }}</span>
-                                <Select
-                                    :model-value="userDialogWorldSortingKey"
-                                    :disabled="userDialog.isWorldsLoading"
-                                    @update:modelValue="setUserDialogWorldSortingByKey">
-                                    <SelectTrigger size="sm" @click.stop>
-                                        <SelectValue />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                        <SelectItem
-                                            v-for="(item, key) in userDialogWorldSortingOptions"
-                                            :key="String(key)"
-                                            :value="String(key)">
-                                            {{ t(item.name) }}
-                                        </SelectItem>
-                                    </SelectContent>
-                                </Select>
-                                <span class="ml-2 mr-1">{{ t('dialog.user.worlds.order_by') }}</span>
-                                <Select
-                                    :model-value="userDialogWorldOrderKey"
-                                    :disabled="userDialog.isWorldsLoading"
-                                    @update:modelValue="setUserDialogWorldOrderByKey">
-                                    <SelectTrigger size="sm" @click.stop>
-                                        <SelectValue />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                        <SelectItem
-                                            v-for="(item, key) in userDialogWorldOrderOptions"
-                                            :key="String(key)"
-                                            :value="String(key)">
-                                            {{ t(item.name) }}
-                                        </SelectItem>
-                                    </SelectContent>
-                                </Select>
-                            </div>
-                        </div>
-                        <div class="x-friend-list" style="margin-top: 10px; min-height: 60px">
-                            <div
-                                v-for="world in userDialog.worlds"
-                                :key="world.id"
-                                class="x-friend-item x-friend-item-border"
-                                @click="showWorldDialog(world.id)">
-                                <div class="avatar">
-                                    <img :src="world.thumbnailImageUrl" loading="lazy" />
-                                </div>
-                                <div class="detail">
-                                    <span class="name" v-text="world.name"></span>
-                                    <span v-if="world.occupants" class="extra">({{ world.occupants }})</span>
-                                </div>
+                                <TooltipWrapper side="right" :content="t('dialog.user.groups.leave_group_tooltip')">
+                                    <Button
+                                        class="rounded-full h-6 w-6"
+                                        size="icon-sm"
+                                        variant="outline"
+                                        v-if="shiftHeld"
+                                        style="margin-left: 5px"
+                                        @click.stop="leaveGroup(group.id)">
+                                        <LogOut />
+                                    </Button>
+                                    <Button
+                                        class="rounded-full h-6 w-6 text-red-600"
+                                        size="icon-sm"
+                                        variant="outline"
+                                        v-else
+                                        style="margin-left: 5px"
+                                        @click.stop="leaveGroupPrompt(group.id)">
+                                        <LogOut />
+                                    </Button>
+                                </TooltipWrapper>
                             </div>
                         </div>
                     </template>
+                    <template v-else>
+                        <template v-if="userGroups.ownGroups.length > 0">
+                            <span style="font-weight: bold; font-size: 16px">{{
+                                t('dialog.user.groups.own_groups')
+                            }}</span>
+                            <span style="font-size: 12px; margin-left: 5px"
+                                >{{ userGroups.ownGroups.length }}/{{
+                                    cachedConfig?.constants?.GROUPS?.MAX_OWNED
+                                }}</span
+                            >
+                            <div class="x-friend-list" style="margin-top: 10px; margin-bottom: 15px; min-height: 60px">
+                                <div
+                                    v-for="group in userGroups.ownGroups"
+                                    :key="group.id"
+                                    class="x-friend-item x-friend-item-border"
+                                    @click="showGroupDialog(group.id)">
+                                    <div class="avatar">
+                                        <img :src="group.iconUrl" loading="lazy" />
+                                    </div>
+                                    <div class="detail">
+                                        <span class="name" v-text="group.name"></span>
+                                        <span class="extra">
+                                            <TooltipWrapper
+                                                v-if="group.isRepresenting"
+                                                side="top"
+                                                :content="t('dialog.group.members.representing')">
+                                                <Tag style="margin-right: 5px" />
+                                            </TooltipWrapper>
+                                            <TooltipWrapper v-if="group.memberVisibility !== 'visible'" side="top">
+                                                <template #content>
+                                                    <span
+                                                        >{{ t('dialog.group.members.visibility') }}
+                                                        {{ group.memberVisibility }}</span
+                                                    >
+                                                </template>
+                                                <Eye style="margin-right: 5px" />
+                                            </TooltipWrapper>
+                                            <span>({{ group.memberCount }})</span>
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
+                        <template v-if="userGroups.mutualGroups.length > 0">
+                            <span style="font-weight: bold; font-size: 16px">{{
+                                t('dialog.user.groups.mutual_groups')
+                            }}</span>
+                            <span style="font-size: 12px; margin-left: 5px">{{ userGroups.mutualGroups.length }}</span>
+                            <div class="x-friend-list" style="margin-top: 10px; margin-bottom: 15px; min-height: 60px">
+                                <div
+                                    v-for="group in userGroups.mutualGroups"
+                                    :key="group.id"
+                                    class="x-friend-item x-friend-item-border"
+                                    @click="showGroupDialog(group.id)">
+                                    <div class="avatar">
+                                        <img :src="group.iconUrl" loading="lazy" />
+                                    </div>
+                                    <div class="detail">
+                                        <span class="name" v-text="group.name"></span>
+                                        <span class="extra">
+                                            <TooltipWrapper
+                                                v-if="group.isRepresenting"
+                                                side="top"
+                                                :content="t('dialog.group.members.representing')">
+                                                <Tag style="margin-right: 5px" />
+                                            </TooltipWrapper>
+                                            <TooltipWrapper v-if="group.memberVisibility !== 'visible'" side="top">
+                                                <template #content>
+                                                    <span
+                                                        >{{ t('dialog.group.members.visibility') }}
+                                                        {{ group.memberVisibility }}</span
+                                                    >
+                                                </template>
+                                                <Eye style="margin-right: 5px" />
+                                            </TooltipWrapper>
+                                            <span>({{ group.memberCount }})</span>
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
+                        <template v-if="userGroups.remainingGroups.length > 0">
+                            <span style="font-weight: bold; font-size: 16px">{{ t('dialog.user.groups.groups') }}</span>
+                            <span style="font-size: 12px; margin-left: 5px">
+                                {{ userGroups.remainingGroups.length }}
+                                <template v-if="currentUser.id === userDialog.id">
+                                    /
+                                    <template v-if="isLocalUserVrcPlusSupporter">
+                                        {{ cachedConfig?.constants?.GROUPS?.MAX_JOINED_PLUS }}
+                                    </template>
+                                    <template v-else>
+                                        {{ cachedConfig?.constants?.GROUPS?.MAX_JOINED }}
+                                    </template>
+                                </template>
+                            </span>
+                            <div class="x-friend-list" style="margin-top: 10px; margin-bottom: 15px; min-height: 60px">
+                                <div
+                                    v-for="group in userGroups.remainingGroups"
+                                    :key="group.id"
+                                    class="x-friend-item x-friend-item-border"
+                                    @click="showGroupDialog(group.id)">
+                                    <div class="avatar">
+                                        <img :src="group.iconUrl" loading="lazy" />
+                                    </div>
+                                    <div class="detail">
+                                        <span class="name" v-text="group.name"></span>
+                                        <span class="extra">
+                                            <TooltipWrapper
+                                                v-if="group.isRepresenting"
+                                                side="top"
+                                                :content="t('dialog.group.members.representing')">
+                                                <Tag style="margin-right: 5px" />
+                                            </TooltipWrapper>
+                                            <TooltipWrapper v-if="group.memberVisibility !== 'visible'" side="top">
+                                                <template #content>
+                                                    <span
+                                                        >{{ t('dialog.group.members.visibility') }}
+                                                        {{ group.memberVisibility }}</span
+                                                    >
+                                                </template>
+                                                <Eye style="margin-right: 5px" />
+                                            </TooltipWrapper>
+                                            <span>({{ group.memberCount }})</span>
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
+                    </template>
+                </div>
+            </template>
 
-                    <template #favorite-worlds>
-                        <!-- <Button
+            <template #Worlds>
+                <div style="display: flex; align-items: center; justify-content: space-between">
+                    <div style="display: flex; align-items: center">
+                        <Button
+                            class="rounded-full"
+                            variant="outline"
+                            size="icon-sm"
+                            :disabled="userDialog.isWorldsLoading"
+                            @click="refreshUserDialogWorlds()">
+                            <Spinner v-if="userDialog.isWorldsLoading" />
+                            <RefreshCw v-else />
+                        </Button>
+                        <span style="margin-left: 5px">{{
+                            t('dialog.user.worlds.total_count', { count: userDialog.worlds.length })
+                        }}</span>
+                    </div>
+                    <div style="display: flex; align-items: center">
+                        <span class="mr-1">{{ t('dialog.user.worlds.sort_by') }}</span>
+                        <Select
+                            :model-value="userDialogWorldSortingKey"
+                            :disabled="userDialog.isWorldsLoading"
+                            @update:modelValue="setUserDialogWorldSortingByKey">
+                            <SelectTrigger size="sm" @click.stop>
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem
+                                    v-for="(item, key) in userDialogWorldSortingOptions"
+                                    :key="String(key)"
+                                    :value="String(key)">
+                                    {{ t(item.name) }}
+                                </SelectItem>
+                            </SelectContent>
+                        </Select>
+                        <span class="ml-2 mr-1">{{ t('dialog.user.worlds.order_by') }}</span>
+                        <Select
+                            :model-value="userDialogWorldOrderKey"
+                            :disabled="userDialog.isWorldsLoading"
+                            @update:modelValue="setUserDialogWorldOrderByKey">
+                            <SelectTrigger size="sm" @click.stop>
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem
+                                    v-for="(item, key) in userDialogWorldOrderOptions"
+                                    :key="String(key)"
+                                    :value="String(key)">
+                                    {{ t(item.name) }}
+                                </SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </div>
+                </div>
+                <div class="x-friend-list" style="margin-top: 10px; min-height: 60px">
+                    <div
+                        v-for="world in userDialog.worlds"
+                        :key="world.id"
+                        class="x-friend-item x-friend-item-border"
+                        @click="showWorldDialog(world.id)">
+                        <div class="avatar">
+                            <img :src="world.thumbnailImageUrl" loading="lazy" />
+                        </div>
+                        <div class="detail">
+                            <span class="name" v-text="world.name"></span>
+                            <span v-if="world.occupants" class="extra">({{ world.occupants }})</span>
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <template #favorite-worlds>
+                <!-- <Button
                         variant="outline"
                         v-if="userFavoriteWorlds && userFavoriteWorlds.length > 0"
                         type="default"
@@ -1066,215 +1006,186 @@
                         style="position: absolute; right: 15px; bottom: 15px; z-index: 99"
                         @click="getUserFavoriteWorlds(userDialog.id)">
                     </Button> -->
-                        <template v-if="userFavoriteWorlds && userFavoriteWorlds.length > 0">
-                            <TabsUnderline
-                                v-model="favoriteWorldsTab"
-                                :items="favoriteWorldTabs"
-                                :unmount-on-hide="false"
-                                class="zero-margin-tabs"
-                                style="margin-top: 10px; height: 50vh">
-                                <template
-                                    v-for="(list, index) in userFavoriteWorlds"
-                                    :key="`favorite-worlds-label-${index}`"
-                                    v-slot:[`label-${index}`]>
-                                    <span>
-                                        <i
-                                            class="x-status-icon"
-                                            style="margin-right: 6px"
-                                            :class="userFavoriteWorldsStatus(list[1])">
-                                        </i>
-                                        <span style="font-weight: bold; font-size: 14px" v-text="list[0]"></span>
-                                        <span style="font-size: 10px; margin-left: 5px"
-                                            >{{ list[2].length }}/{{ favoriteLimits.maxFavoritesPerGroup.world }}</span
-                                        >
-                                    </span>
-                                </template>
-                                <template
-                                    v-for="(list, index) in userFavoriteWorlds"
-                                    :key="`favorite-worlds-content-${index}`"
-                                    v-slot:[String(index)]>
-                                    <div
-                                        class="x-friend-list"
-                                        style="
-                                            margin-top: 10px;
-                                            margin-bottom: 15px;
-                                            min-height: 60px;
-                                            max-height: none;
-                                        ">
-                                        <div
-                                            v-for="world in list[2]"
-                                            :key="world.favoriteId"
-                                            class="x-friend-item x-friend-item-border"
-                                            @click="showWorldDialog(world.id)">
-                                            <div class="avatar">
-                                                <img :src="world.thumbnailImageUrl" loading="lazy" />
-                                            </div>
-                                            <div class="detail">
-                                                <span class="name" v-text="world.name"></span>
-                                                <span v-if="world.occupants" class="extra"
-                                                    >({{ world.occupants }})</span
-                                                >
-                                            </div>
-                                        </div>
-                                    </div>
-                                </template>
-                            </TabsUnderline>
+                <template v-if="userFavoriteWorlds && userFavoriteWorlds.length > 0">
+                    <TabsUnderline
+                        v-model="favoriteWorldsTab"
+                        :items="favoriteWorldTabs"
+                        :unmount-on-hide="false"
+                        class="zero-margin-tabs"
+                        style="margin-top: 10px; height: 50vh">
+                        <template
+                            v-for="(list, index) in userFavoriteWorlds"
+                            :key="`favorite-worlds-label-${index}`"
+                            v-slot:[`label-${index}`]>
+                            <span>
+                                <i
+                                    class="x-status-icon"
+                                    style="margin-right: 6px"
+                                    :class="userFavoriteWorldsStatus(list[1])">
+                                </i>
+                                <span style="font-weight: bold; font-size: 14px" v-text="list[0]"></span>
+                                <span style="font-size: 10px; margin-left: 5px"
+                                    >{{ list[2].length }}/{{ favoriteLimits.maxFavoritesPerGroup.world }}</span
+                                >
+                            </span>
                         </template>
-                        <template v-else-if="!userDialog.isFavoriteWorldsLoading">
-                            <div style="display: flex; justify-content: center; align-items: center; height: 100%">
-                                <span style="font-size: 16px">No favorite worlds found.</span>
-                            </div>
-                        </template>
-                    </template>
-
-                    <template #Avatars>
-                        <div style="display: flex; align-items: center; justify-content: space-between">
-                            <div style="display: flex; align-items: center">
-                                <Button
-                                    v-if="userDialog.ref.id === currentUser.id"
-                                    class="rounded-full"
-                                    variant="outline"
-                                    size="icon-sm"
-                                    :disabled="userDialog.isAvatarsLoading"
-                                    @click="refreshUserDialogAvatars()">
-                                    <Spinner v-if="userDialog.isAvatarsLoading" />
-                                    <RefreshCw v-else />
-                                </Button>
-                                <Button
-                                    v-else
-                                    class="rounded-full"
-                                    variant="outline"
-                                    size="icon-sm"
-                                    :disabled="userDialog.isAvatarsLoading"
-                                    @click="setUserDialogAvatarsRemote(userDialog.id)">
-                                    <Spinner v-if="userDialog.isAvatarsLoading" />
-                                    <RefreshCw v-else />
-                                </Button>
-                                <span style="margin-left: 5px">{{
-                                    t('dialog.user.avatars.total_count', { count: userDialogAvatars.length })
-                                }}</span>
-                            </div>
-                            <div class="flex items-center">
-                                <template v-if="userDialog.ref.id === currentUser.id">
-                                    <span class="mr-1">{{ t('dialog.user.avatars.sort_by') }}</span>
-                                    <Select
-                                        :model-value="userDialog.avatarSorting"
-                                        :disabled="userDialog.isWorldsLoading"
-                                        @update:modelValue="changeUserDialogAvatarSorting">
-                                        <SelectTrigger size="sm" @click.stop>
-                                            <SelectValue
-                                                :placeholder="
-                                                    t(`dialog.user.avatars.sort_by_${userDialog.avatarSorting}`)
-                                                " />
-                                        </SelectTrigger>
-                                        <SelectContent>
-                                            <SelectItem value="name">{{
-                                                t('dialog.user.avatars.sort_by_name')
-                                            }}</SelectItem>
-                                            <SelectItem value="update">{{
-                                                t('dialog.user.avatars.sort_by_update')
-                                            }}</SelectItem>
-                                            <SelectItem value="createdAt">{{
-                                                t('dialog.user.avatars.sort_by_uploaded')
-                                            }}</SelectItem>
-                                        </SelectContent>
-                                    </Select>
-                                    <span class="ml-2 mr-1">{{ t('dialog.user.avatars.group_by') }}</span>
-                                    <Select
-                                        :model-value="userDialog.avatarReleaseStatus"
-                                        :disabled="userDialog.isWorldsLoading"
-                                        @update:modelValue="(value) => (userDialog.avatarReleaseStatus = value)">
-                                        <SelectTrigger size="sm" @click.stop>
-                                            <SelectValue
-                                                :placeholder="
-                                                    t(`dialog.user.avatars.${userDialog.avatarReleaseStatus}`)
-                                                " />
-                                        </SelectTrigger>
-                                        <SelectContent>
-                                            <SelectItem value="all">{{ t('dialog.user.avatars.all') }}</SelectItem>
-                                            <SelectItem value="public">{{
-                                                t('dialog.user.avatars.public')
-                                            }}</SelectItem>
-                                            <SelectItem value="private">{{
-                                                t('dialog.user.avatars.private')
-                                            }}</SelectItem>
-                                        </SelectContent>
-                                    </Select>
-                                </template>
-                            </div>
-                        </div>
-                        <div class="x-friend-list" style="margin-top: 10px; min-height: 60px; max-height: 50vh">
+                        <template
+                            v-for="(list, index) in userFavoriteWorlds"
+                            :key="`favorite-worlds-content-${index}`"
+                            v-slot:[String(index)]>
                             <div
-                                v-for="avatar in userDialogAvatars"
-                                :key="avatar.id"
-                                class="x-friend-item x-friend-item-border"
-                                @click="showAvatarDialog(avatar.id)">
-                                <div class="avatar">
-                                    <img
-                                        v-if="avatar.thumbnailImageUrl"
-                                        :src="avatar.thumbnailImageUrl"
-                                        loading="lazy" />
-                                </div>
-                                <div class="detail">
-                                    <span class="name" v-text="avatar.name"></span>
-                                    <span
-                                        v-if="avatar.releaseStatus === 'public'"
-                                        class="extra"
-                                        v-text="avatar.releaseStatus">
-                                    </span>
-                                    <span
-                                        v-else-if="avatar.releaseStatus === 'private'"
-                                        class="extra"
-                                        v-text="avatar.releaseStatus">
-                                    </span>
-                                    <span v-else class="extra" v-text="avatar.releaseStatus"></span>
+                                class="x-friend-list"
+                                style="margin-top: 10px; margin-bottom: 15px; min-height: 60px; max-height: none">
+                                <div
+                                    v-for="world in list[2]"
+                                    :key="world.favoriteId"
+                                    class="x-friend-item x-friend-item-border"
+                                    @click="showWorldDialog(world.id)">
+                                    <div class="avatar">
+                                        <img :src="world.thumbnailImageUrl" loading="lazy" />
+                                    </div>
+                                    <div class="detail">
+                                        <span class="name" v-text="world.name"></span>
+                                        <span v-if="world.occupants" class="extra">({{ world.occupants }})</span>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                    </template>
+                        </template>
+                    </TabsUnderline>
+                </template>
+                <template v-else-if="!userDialog.isFavoriteWorldsLoading">
+                    <div style="display: flex; justify-content: center; align-items: center; height: 100%">
+                        <span style="font-size: 16px">No favorite worlds found.</span>
+                    </div>
+                </template>
+            </template>
 
-                    <template #JSON>
-                        <Button
-                            class="rounded-full mr-2"
-                            size="icon-sm"
-                            variant="outline"
-                            @click="refreshUserDialogTreeData()">
-                            <RefreshCw />
-                        </Button>
+            <template #Avatars>
+                <div style="display: flex; align-items: center; justify-content: space-between">
+                    <div style="display: flex; align-items: center">
                         <Button
+                            v-if="userDialog.ref.id === currentUser.id"
                             class="rounded-full"
-                            size="icon-sm"
                             variant="outline"
-                            @click="downloadAndSaveJson(userDialog.id, userDialog.ref)">
-                            <Download />
+                            size="icon-sm"
+                            :disabled="userDialog.isAvatarsLoading"
+                            @click="refreshUserDialogAvatars()">
+                            <Spinner v-if="userDialog.isAvatarsLoading" />
+                            <RefreshCw v-else />
                         </Button>
-                        <vue-json-pretty
-                            :data="userDialog.treeData"
-                            :deep="2"
-                            :theme="isDarkMode ? 'dark' : 'light'"
-                            show-icon />
-                    </template>
-                </TabsUnderline>
-                <SendInviteDialog
-                    v-model:sendInviteDialogVisible="sendInviteDialogVisible"
-                    v-model:sendInviteDialog="sendInviteDialog"
-                    @closeInviteDialog="closeInviteDialog" />
-                <SendInviteRequestDialog
-                    v-model:sendInviteRequestDialogVisible="sendInviteRequestDialogVisible"
-                    v-model:sendInviteDialog="sendInviteDialog"
-                    @closeInviteDialog="closeInviteDialog" />
-                <PreviousInstancesUserDialog v-model:previous-instances-user-dialog="previousInstancesUserDialog" />
-                <SocialStatusDialog
-                    :social-status-dialog="socialStatusDialog"
-                    :social-status-history-table="socialStatusHistoryTable" />
-                <LanguageDialog />
-                <BioDialog :bio-dialog="bioDialog" />
-                <PronounsDialog :pronouns-dialog="pronounsDialog" />
-                <ModerateGroupDialog />
-                <EditNoteAndMemoDialog v-model:visible="isEditNoteAndMemoDialogVisible" />
-            </div>
-        </DialogContent>
-    </Dialog>
+                        <Button
+                            v-else
+                            class="rounded-full"
+                            variant="outline"
+                            size="icon-sm"
+                            :disabled="userDialog.isAvatarsLoading"
+                            @click="setUserDialogAvatarsRemote(userDialog.id)">
+                            <Spinner v-if="userDialog.isAvatarsLoading" />
+                            <RefreshCw v-else />
+                        </Button>
+                        <span style="margin-left: 5px">{{
+                            t('dialog.user.avatars.total_count', { count: userDialogAvatars.length })
+                        }}</span>
+                    </div>
+                    <div class="flex items-center">
+                        <template v-if="userDialog.ref.id === currentUser.id">
+                            <span class="mr-1">{{ t('dialog.user.avatars.sort_by') }}</span>
+                            <Select
+                                :model-value="userDialog.avatarSorting"
+                                :disabled="userDialog.isWorldsLoading"
+                                @update:modelValue="changeUserDialogAvatarSorting">
+                                <SelectTrigger size="sm" @click.stop>
+                                    <SelectValue
+                                        :placeholder="t(`dialog.user.avatars.sort_by_${userDialog.avatarSorting}`)" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="name">{{ t('dialog.user.avatars.sort_by_name') }}</SelectItem>
+                                    <SelectItem value="update">{{
+                                        t('dialog.user.avatars.sort_by_update')
+                                    }}</SelectItem>
+                                    <SelectItem value="createdAt">{{
+                                        t('dialog.user.avatars.sort_by_uploaded')
+                                    }}</SelectItem>
+                                </SelectContent>
+                            </Select>
+                            <span class="ml-2 mr-1">{{ t('dialog.user.avatars.group_by') }}</span>
+                            <Select
+                                :model-value="userDialog.avatarReleaseStatus"
+                                :disabled="userDialog.isWorldsLoading"
+                                @update:modelValue="(value) => (userDialog.avatarReleaseStatus = value)">
+                                <SelectTrigger size="sm" @click.stop>
+                                    <SelectValue
+                                        :placeholder="t(`dialog.user.avatars.${userDialog.avatarReleaseStatus}`)" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="all">{{ t('dialog.user.avatars.all') }}</SelectItem>
+                                    <SelectItem value="public">{{ t('dialog.user.avatars.public') }}</SelectItem>
+                                    <SelectItem value="private">{{ t('dialog.user.avatars.private') }}</SelectItem>
+                                </SelectContent>
+                            </Select>
+                        </template>
+                    </div>
+                </div>
+                <div class="x-friend-list" style="margin-top: 10px; min-height: 60px; max-height: 50vh">
+                    <div
+                        v-for="avatar in userDialogAvatars"
+                        :key="avatar.id"
+                        class="x-friend-item x-friend-item-border"
+                        @click="showAvatarDialog(avatar.id)">
+                        <div class="avatar">
+                            <img v-if="avatar.thumbnailImageUrl" :src="avatar.thumbnailImageUrl" loading="lazy" />
+                        </div>
+                        <div class="detail">
+                            <span class="name" v-text="avatar.name"></span>
+                            <span v-if="avatar.releaseStatus === 'public'" class="extra" v-text="avatar.releaseStatus">
+                            </span>
+                            <span
+                                v-else-if="avatar.releaseStatus === 'private'"
+                                class="extra"
+                                v-text="avatar.releaseStatus">
+                            </span>
+                            <span v-else class="extra" v-text="avatar.releaseStatus"></span>
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <template #JSON>
+                <Button class="rounded-full mr-2" size="icon-sm" variant="outline" @click="refreshUserDialogTreeData()">
+                    <RefreshCw />
+                </Button>
+                <Button
+                    class="rounded-full"
+                    size="icon-sm"
+                    variant="outline"
+                    @click="downloadAndSaveJson(userDialog.id, userDialog.ref)">
+                    <Download />
+                </Button>
+                <vue-json-pretty
+                    :data="userDialog.treeData"
+                    :deep="2"
+                    :theme="isDarkMode ? 'dark' : 'light'"
+                    show-icon />
+            </template>
+        </TabsUnderline>
+        <SendInviteDialog
+            v-model:sendInviteDialogVisible="sendInviteDialogVisible"
+            v-model:sendInviteDialog="sendInviteDialog"
+            @closeInviteDialog="closeInviteDialog" />
+        <SendInviteRequestDialog
+            v-model:sendInviteRequestDialogVisible="sendInviteRequestDialogVisible"
+            v-model:sendInviteDialog="sendInviteDialog"
+            @closeInviteDialog="closeInviteDialog" />
+        <PreviousInstancesUserDialog v-model:previous-instances-user-dialog="previousInstancesUserDialog" />
+        <SocialStatusDialog
+            :social-status-dialog="socialStatusDialog"
+            :social-status-history-table="socialStatusHistoryTable" />
+        <LanguageDialog />
+        <BioDialog :bio-dialog="bioDialog" />
+        <PronounsDialog :pronouns-dialog="pronounsDialog" />
+        <ModerateGroupDialog />
+        <EditNoteAndMemoDialog v-model:visible="isEditNoteAndMemoDialogVisible" />
+    </div>
 </template>
 
 <script setup>
@@ -1295,7 +1206,6 @@
         Tag,
         Trash2
     } from 'lucide-vue-next';
-    import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
     import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue';
     import {
@@ -1305,6 +1215,7 @@
         DropdownMenuTrigger
     } from '@/components/ui/dropdown-menu';
     import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+    import { DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { Button } from '@/components/ui/button';
     import { Checkbox } from '@/components/ui/checkbox';
     import { Spinner } from '@/components/ui/spinner';
diff --git a/src/components/dialogs/WorldDialog/WorldDialog.vue b/src/components/dialogs/WorldDialog/WorldDialog.vue
index 2e659857..90c835f1 100644
--- a/src/components/dialogs/WorldDialog/WorldDialog.vue
+++ b/src/components/dialogs/WorldDialog/WorldDialog.vue
@@ -1,698 +1,680 @@
 <template>
-    <Dialog v-model:open="isDialogVisible">
-        <DialogContent
-            class="x-dialog x-world-dialog translate-y-0 sm:max-w-235"
-            :show-close-button="false"
-            style="top: 10vh">
-            <DialogHeader class="sr-only">
-                <DialogTitle>{{ worldDialog.ref?.name || t('dialog.world.info.header') }}</DialogTitle>
-                <DialogDescription>
-                    {{ worldDialog.ref?.description || worldDialog.ref?.name || t('dialog.world.info.header') }}
-                </DialogDescription>
-            </DialogHeader>
-            <div>
-                <div style="display: flex">
-                    <img
-                        :src="worldDialog.ref.thumbnailImageUrl"
-                        class="cursor-pointer"
-                        style="flex: none; width: 160px; height: 120px; border-radius: 12px"
-                        @click="showFullscreenImageDialog(worldDialog.ref.imageUrl)"
-                        loading="lazy" />
-                    <div style="flex: 1; display: flex; align-items: center; margin-left: 15px">
-                        <div style="flex: 1">
-                            <div>
-                                <span
-                                    class="font-bold"
-                                    style="margin-right: 5px; cursor: pointer"
-                                    @click="copyWorldName">
-                                    <Home
-                                        v-if="
-                                            currentUser.$homeLocation &&
-                                            currentUser.$homeLocation.worldId === worldDialog.id
-                                        "
-                                        style="margin-right: 5px" />
-                                    {{ worldDialog.ref.name }}
-                                </span>
-                            </div>
-                            <div style="margin-top: 5px">
-                                <span
-                                    class="cursor-pointer x-grey"
-                                    style="font-family: monospace"
-                                    @click="showUserDialog(worldDialog.ref.authorId)"
-                                    v-text="worldDialog.ref.authorName" />
-                            </div>
-                            <div>
-                                <Badge
-                                    v-if="worldDialog.ref.$isLabs"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px">
-                                    {{ t('dialog.world.tags.labs') }}
-                                </Badge>
-                                <Badge
-                                    v-else-if="worldDialog.ref.releaseStatus === 'public'"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px">
-                                    {{ t('dialog.world.tags.public') }}
-                                </Badge>
-                                <Badge v-else variant="outline" style="margin-right: 5px; margin-top: 5px">
-                                    {{ t('dialog.world.tags.private') }}
-                                </Badge>
-                                <TooltipWrapper v-if="worldDialog.isPC" side="top" content="PC">
-                                    <Badge
-                                        class="x-tag-platform-pc"
-                                        variant="outline"
-                                        style="margin-right: 5px; margin-top: 5px">
-                                        <Monitor class="h-4 w-4 x-tag-platform-pc" />
-                                        <span
-                                            v-if="worldDialog.bundleSizes['standalonewindows']"
-                                            :class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']">
-                                            {{ worldDialog.bundleSizes['standalonewindows'].fileSize }}
-                                        </span>
-                                    </Badge>
-                                </TooltipWrapper>
-
-                                <TooltipWrapper v-if="worldDialog.isQuest" side="top" content="Quest">
-                                    <Badge
-                                        class="x-tag-platform-quest"
-                                        variant="outline"
-                                        style="margin-right: 5px; margin-top: 5px">
-                                        <Smartphone class="h-4 w-4 x-tag-platform-quest" />
-                                        <span
-                                            v-if="worldDialog.bundleSizes['android']"
-                                            :class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']">
-                                            {{ worldDialog.bundleSizes['android'].fileSize }}
-                                        </span>
-                                    </Badge>
-                                </TooltipWrapper>
-
-                                <TooltipWrapper v-if="worldDialog.isIos" side="top" content="iOS">
-                                    <Badge
-                                        class="text-[#8e8e93] border-[#8e8e93]"
-                                        variant="outline"
-                                        style="margin-right: 5px; margin-top: 5px">
-                                        <Apple class="h-4 w-4 text-[#8e8e93]" />
-                                        <span
-                                            v-if="worldDialog.bundleSizes['ios']"
-                                            :class="[
-                                                'x-grey',
-                                                'x-tag-border-left',
-                                                'text-[#8e8e93]',
-                                                'border-[#8e8e93]'
-                                            ]">
-                                            {{ worldDialog.bundleSizes['ios'].fileSize }}
-                                        </span>
-                                    </Badge>
-                                </TooltipWrapper>
-
-                                <Badge
-                                    v-if="worldDialog.avatarScalingDisabled"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px">
-                                    {{ t('dialog.world.tags.avatar_scaling_disabled') }}
-                                </Badge>
-                                <Badge
-                                    v-if="worldDialog.focusViewDisabled"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px">
-                                    {{ t('dialog.world.tags.focus_view_disabled') }}
-                                </Badge>
-                                <Badge
-                                    v-if="worldDialog.ref.unityPackageUrl"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px">
-                                    {{ t('dialog.world.tags.future_proofing') }}
-                                </Badge>
-                                <Badge
-                                    v-if="worldDialog.inCache"
-                                    variant="outline"
-                                    class="cursor-pointer"
-                                    style="margin-right: 5px; margin-top: 5px"
-                                    @click="openFolderGeneric(worldDialog.cachePath)">
-                                    <span v-text="worldDialog.cacheSize" />
-                                    | {{ t('dialog.world.tags.cache') }}
-                                </Badge>
-                            </div>
-                            <div>
-                                <template v-for="tag in worldDialog.ref.tags" :key="tag">
-                                    <Badge
-                                        v-if="tag.startsWith('content_')"
-                                        variant="outline"
-                                        style="margin-right: 5px; margin-top: 5px">
-                                        <span v-if="tag === 'content_horror'">
-                                            {{ t('dialog.world.tags.content_horror') }}
-                                        </span>
-                                        <span v-else-if="tag === 'content_gore'">
-                                            {{ t('dialog.world.tags.content_gore') }}
-                                        </span>
-                                        <span v-else-if="tag === 'content_violence'">
-                                            {{ t('dialog.world.tags.content_violence') }}
-                                        </span>
-                                        <span v-else-if="tag === 'content_adult'">
-                                            {{ t('dialog.world.tags.content_adult') }}
-                                        </span>
-                                        <span v-else-if="tag === 'content_sex'">
-                                            {{ t('dialog.world.tags.content_sex') }}
-                                        </span>
-                                        <span v-else>
-                                            {{ tag.replace('content_', '') }}
-                                        </span>
-                                    </Badge>
-                                </template>
-                            </div>
-                            <div style="margin-top: 5px">
-                                <span
-                                    v-show="worldDialog.ref.name !== worldDialog.ref.description"
-                                    style="font-size: 12px"
-                                    >{{ worldDialog.ref.description }}</span
-                                >
-                            </div>
+    <div>
+        <DialogHeader class="sr-only">
+            <DialogTitle>{{ worldDialog.ref?.name || t('dialog.world.info.header') }}</DialogTitle>
+            <DialogDescription>
+                {{ worldDialog.ref?.description || worldDialog.ref?.name || t('dialog.world.info.header') }}
+            </DialogDescription>
+        </DialogHeader>
+        <div>
+            <div style="display: flex">
+                <img
+                    :src="worldDialog.ref.thumbnailImageUrl"
+                    class="cursor-pointer"
+                    style="flex: none; width: 160px; height: 120px; border-radius: 12px"
+                    @click="showFullscreenImageDialog(worldDialog.ref.imageUrl)"
+                    loading="lazy" />
+                <div style="flex: 1; display: flex; align-items: center; margin-left: 15px">
+                    <div style="flex: 1">
+                        <div>
+                            <span class="font-bold" style="margin-right: 5px; cursor: pointer" @click="copyWorldName">
+                                <Home
+                                    v-if="
+                                        currentUser.$homeLocation &&
+                                        currentUser.$homeLocation.worldId === worldDialog.id
+                                    "
+                                    style="margin-right: 5px" />
+                                {{ worldDialog.ref.name }}
+                            </span>
                         </div>
-                        <div style="flex: none; margin-left: 10px">
-                            <TooltipWrapper
+                        <div style="margin-top: 5px">
+                            <span
+                                class="cursor-pointer x-grey"
+                                style="font-family: monospace"
+                                @click="showUserDialog(worldDialog.ref.authorId)"
+                                v-text="worldDialog.ref.authorName" />
+                        </div>
+                        <div>
+                            <Badge
+                                v-if="worldDialog.ref.$isLabs"
+                                variant="outline"
+                                style="margin-right: 5px; margin-top: 5px">
+                                {{ t('dialog.world.tags.labs') }}
+                            </Badge>
+                            <Badge
+                                v-else-if="worldDialog.ref.releaseStatus === 'public'"
+                                variant="outline"
+                                style="margin-right: 5px; margin-top: 5px">
+                                {{ t('dialog.world.tags.public') }}
+                            </Badge>
+                            <Badge v-else variant="outline" style="margin-right: 5px; margin-top: 5px">
+                                {{ t('dialog.world.tags.private') }}
+                            </Badge>
+                            <TooltipWrapper v-if="worldDialog.isPC" side="top" content="PC">
+                                <Badge
+                                    class="x-tag-platform-pc"
+                                    variant="outline"
+                                    style="margin-right: 5px; margin-top: 5px">
+                                    <Monitor class="h-4 w-4 x-tag-platform-pc" />
+                                    <span
+                                        v-if="worldDialog.bundleSizes['standalonewindows']"
+                                        :class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']">
+                                        {{ worldDialog.bundleSizes['standalonewindows'].fileSize }}
+                                    </span>
+                                </Badge>
+                            </TooltipWrapper>
+
+                            <TooltipWrapper v-if="worldDialog.isQuest" side="top" content="Quest">
+                                <Badge
+                                    class="x-tag-platform-quest"
+                                    variant="outline"
+                                    style="margin-right: 5px; margin-top: 5px">
+                                    <Smartphone class="h-4 w-4 x-tag-platform-quest" />
+                                    <span
+                                        v-if="worldDialog.bundleSizes['android']"
+                                        :class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']">
+                                        {{ worldDialog.bundleSizes['android'].fileSize }}
+                                    </span>
+                                </Badge>
+                            </TooltipWrapper>
+
+                            <TooltipWrapper v-if="worldDialog.isIos" side="top" content="iOS">
+                                <Badge
+                                    class="text-[#8e8e93] border-[#8e8e93]"
+                                    variant="outline"
+                                    style="margin-right: 5px; margin-top: 5px">
+                                    <Apple class="h-4 w-4 text-[#8e8e93]" />
+                                    <span
+                                        v-if="worldDialog.bundleSizes['ios']"
+                                        :class="['x-grey', 'x-tag-border-left', 'text-[#8e8e93]', 'border-[#8e8e93]']">
+                                        {{ worldDialog.bundleSizes['ios'].fileSize }}
+                                    </span>
+                                </Badge>
+                            </TooltipWrapper>
+
+                            <Badge
+                                v-if="worldDialog.avatarScalingDisabled"
+                                variant="outline"
+                                style="margin-right: 5px; margin-top: 5px">
+                                {{ t('dialog.world.tags.avatar_scaling_disabled') }}
+                            </Badge>
+                            <Badge
+                                v-if="worldDialog.focusViewDisabled"
+                                variant="outline"
+                                style="margin-right: 5px; margin-top: 5px">
+                                {{ t('dialog.world.tags.focus_view_disabled') }}
+                            </Badge>
+                            <Badge
+                                v-if="worldDialog.ref.unityPackageUrl"
+                                variant="outline"
+                                style="margin-right: 5px; margin-top: 5px">
+                                {{ t('dialog.world.tags.future_proofing') }}
+                            </Badge>
+                            <Badge
                                 v-if="worldDialog.inCache"
-                                side="top"
-                                :content="t('dialog.world.actions.delete_cache_tooltip')">
-                                <Button
-                                    class="rounded-full mr-2"
-                                    size="icon-lg"
+                                variant="outline"
+                                class="cursor-pointer"
+                                style="margin-right: 5px; margin-top: 5px"
+                                @click="openFolderGeneric(worldDialog.cachePath)">
+                                <span v-text="worldDialog.cacheSize" />
+                                | {{ t('dialog.world.tags.cache') }}
+                            </Badge>
+                        </div>
+                        <div>
+                            <template v-for="tag in worldDialog.ref.tags" :key="tag">
+                                <Badge
+                                    v-if="tag.startsWith('content_')"
                                     variant="outline"
-                                    :disabled="isGameRunning && worldDialog.cacheLocked"
-                                    @click="deleteVRChatCache(worldDialog.ref)"
-                                    ><Trash2
-                                /></Button>
-                            </TooltipWrapper>
-                            <TooltipWrapper
-                                v-if="worldDialog.isFavorite"
-                                side="top"
-                                :ignore-non-keyboard-focus="true"
-                                :content="t('dialog.world.actions.favorites_tooltip')">
-                                <Button class="rounded-full" size="icon-lg" @click="worldDialogCommand('Add Favorite')"
-                                    ><Star
-                                /></Button>
-                            </TooltipWrapper>
-                            <TooltipWrapper
-                                v-else
-                                side="top"
-                                :ignore-non-keyboard-focus="true"
-                                :content="t('dialog.world.actions.favorites_tooltip')">
-                                <Button
-                                    class="rounded-full"
-                                    size="icon-lg"
-                                    variant="outline"
-                                    @click="worldDialogCommand('Add Favorite')"
-                                    ><Star
-                                /></Button>
-                            </TooltipWrapper>
-                            <DropdownMenu>
-                                <DropdownMenuTrigger as-child>
-                                    <Button variant="outline" size="icon-lg" class="rounded-full ml-2">
-                                        <Ellipsis />
-                                    </Button>
-                                </DropdownMenuTrigger>
-                                <DropdownMenuContent>
-                                    <DropdownMenuItem @click="worldDialogCommand('RefreshCw')">
-                                        <RefreshCw class="size-4" />
-                                        {{ t('dialog.world.actions.refresh') }}
+                                    style="margin-right: 5px; margin-top: 5px">
+                                    <span v-if="tag === 'content_horror'">
+                                        {{ t('dialog.world.tags.content_horror') }}
+                                    </span>
+                                    <span v-else-if="tag === 'content_gore'">
+                                        {{ t('dialog.world.tags.content_gore') }}
+                                    </span>
+                                    <span v-else-if="tag === 'content_violence'">
+                                        {{ t('dialog.world.tags.content_violence') }}
+                                    </span>
+                                    <span v-else-if="tag === 'content_adult'">
+                                        {{ t('dialog.world.tags.content_adult') }}
+                                    </span>
+                                    <span v-else-if="tag === 'content_sex'">
+                                        {{ t('dialog.world.tags.content_sex') }}
+                                    </span>
+                                    <span v-else>
+                                        {{ tag.replace('content_', '') }}
+                                    </span>
+                                </Badge>
+                            </template>
+                        </div>
+                        <div style="margin-top: 5px">
+                            <span
+                                v-show="worldDialog.ref.name !== worldDialog.ref.description"
+                                style="font-size: 12px"
+                                >{{ worldDialog.ref.description }}</span
+                            >
+                        </div>
+                    </div>
+                    <div style="flex: none; margin-left: 10px">
+                        <TooltipWrapper
+                            v-if="worldDialog.inCache"
+                            side="top"
+                            :content="t('dialog.world.actions.delete_cache_tooltip')">
+                            <Button
+                                class="rounded-full mr-2"
+                                size="icon-lg"
+                                variant="outline"
+                                :disabled="isGameRunning && worldDialog.cacheLocked"
+                                @click="deleteVRChatCache(worldDialog.ref)"
+                                ><Trash2
+                            /></Button>
+                        </TooltipWrapper>
+                        <TooltipWrapper
+                            v-if="worldDialog.isFavorite"
+                            side="top"
+                            :ignore-non-keyboard-focus="true"
+                            :content="t('dialog.world.actions.favorites_tooltip')">
+                            <Button class="rounded-full" size="icon-lg" @click="worldDialogCommand('Add Favorite')"
+                                ><Star
+                            /></Button>
+                        </TooltipWrapper>
+                        <TooltipWrapper
+                            v-else
+                            side="top"
+                            :ignore-non-keyboard-focus="true"
+                            :content="t('dialog.world.actions.favorites_tooltip')">
+                            <Button
+                                class="rounded-full"
+                                size="icon-lg"
+                                variant="outline"
+                                @click="worldDialogCommand('Add Favorite')"
+                                ><Star
+                            /></Button>
+                        </TooltipWrapper>
+                        <DropdownMenu>
+                            <DropdownMenuTrigger as-child>
+                                <Button variant="outline" size="icon-lg" class="rounded-full ml-2">
+                                    <Ellipsis />
+                                </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent>
+                                <DropdownMenuItem @click="worldDialogCommand('RefreshCw')">
+                                    <RefreshCw class="size-4" />
+                                    {{ t('dialog.world.actions.refresh') }}
+                                </DropdownMenuItem>
+                                <DropdownMenuItem @click="worldDialogCommand('Share2')">
+                                    <Share2 class="size-4" />
+                                    {{ t('dialog.world.actions.share') }}
+                                </DropdownMenuItem>
+                                <DropdownMenuSeparator />
+                                <DropdownMenuItem @click="worldDialogCommand('New Instance')">
+                                    <Flag class="size-4" />
+                                    {{ t('dialog.world.actions.new_instance') }}
+                                </DropdownMenuItem>
+                                <DropdownMenuItem @click="worldDialogCommand('New Instance and Self Invite')">
+                                    <MessageSquare class="size-4" />
+                                    {{
+                                        canOpenInstanceInGame
+                                            ? t('dialog.world.actions.new_instance_and_open_ingame')
+                                            : t('dialog.world.actions.new_instance_and_self_invite')
+                                    }}
+                                </DropdownMenuItem>
+                                <DropdownMenuSeparator />
+                                <DropdownMenuItem
+                                    v-if="
+                                        currentUser.$homeLocation &&
+                                        currentUser.$homeLocation.worldId === worldDialog.id
+                                    "
+                                    @click="worldDialogCommand('Reset Home')">
+                                    <Wand2 class="size-4" />
+                                    {{ t('dialog.world.actions.reset_home') }}
+                                </DropdownMenuItem>
+                                <DropdownMenuItem v-else @click="worldDialogCommand('Make Home')">
+                                    <Home class="size-4" />
+                                    {{ t('dialog.world.actions.make_home') }}
+                                </DropdownMenuItem>
+                                <DropdownMenuItem @click="worldDialogCommand('Previous Instances')">
+                                    <LineChart class="size-4" />
+                                    {{ t('dialog.world.actions.show_previous_instances') }}
+                                </DropdownMenuItem>
+                                <template v-if="currentUser.id !== worldDialog.ref.authorId">
+                                    <DropdownMenuItem
+                                        :disabled="!worldDialog.hasPersistData"
+                                        @click="worldDialogCommand('Trash2 Persistent Data')">
+                                        <Upload class="size-4" />
+                                        {{ t('dialog.world.actions.delete_persistent_data') }}
                                     </DropdownMenuItem>
-                                    <DropdownMenuItem @click="worldDialogCommand('Share2')">
-                                        <Share2 class="size-4" />
-                                        {{ t('dialog.world.actions.share') }}
+                                </template>
+                                <template v-else>
+                                    <DropdownMenuItem @click="worldDialogCommand('Rename')">
+                                        <Pencil class="size-4" />
+                                        {{ t('dialog.world.actions.rename') }}
                                     </DropdownMenuItem>
-                                    <DropdownMenuSeparator />
-                                    <DropdownMenuItem @click="worldDialogCommand('New Instance')">
-                                        <Flag class="size-4" />
-                                        {{ t('dialog.world.actions.new_instance') }}
+                                    <DropdownMenuItem @click="worldDialogCommand('Change Description')">
+                                        <Pencil class="size-4" />
+                                        {{ t('dialog.world.actions.change_description') }}
                                     </DropdownMenuItem>
-                                    <DropdownMenuItem @click="worldDialogCommand('New Instance and Self Invite')">
-                                        <MessageSquare class="size-4" />
-                                        {{
-                                            canOpenInstanceInGame
-                                                ? t('dialog.world.actions.new_instance_and_open_ingame')
-                                                : t('dialog.world.actions.new_instance_and_self_invite')
-                                        }}
+                                    <DropdownMenuItem @click="worldDialogCommand('Change Capacity')">
+                                        <Pencil class="size-4" />
+                                        {{ t('dialog.world.actions.change_capacity') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem @click="worldDialogCommand('Change Recommended Capacity')">
+                                        <Pencil class="size-4" />
+                                        {{ t('dialog.world.actions.change_recommended_capacity') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem @click="worldDialogCommand('Change YouTube Preview')">
+                                        <Pencil class="size-4" />
+                                        {{ t('dialog.world.actions.change_preview') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem @click="worldDialogCommand('Change Tags')">
+                                        <Pencil class="size-4" />
+                                        {{ t('dialog.world.actions.change_warnings_settings_tags') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem @click="worldDialogCommand('Change Allowed Domains')">
+                                        <Pencil class="size-4" />
+                                        {{ t('dialog.world.actions.change_allowed_video_player_domains') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem v-if="isWindows" @click="worldDialogCommand('Change Image')">
+                                        <Image class="size-4" />
+                                        {{ t('dialog.world.actions.change_image') }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem
+                                        v-if="worldDialog.ref.unityPackageUrl"
+                                        @click="worldDialogCommand('Download Unity Package')">
+                                        <Download class="size-4" />
+                                        {{ t('dialog.world.actions.download_package') }}
                                     </DropdownMenuItem>
                                     <DropdownMenuSeparator />
                                     <DropdownMenuItem
                                         v-if="
-                                            currentUser.$homeLocation &&
-                                            currentUser.$homeLocation.worldId === worldDialog.id
+                                            worldDialog.ref?.tags?.includes('system_approved') ||
+                                            worldDialog.ref?.tags?.includes('system_labs')
                                         "
-                                        @click="worldDialogCommand('Reset Home')">
-                                        <Wand2 class="size-4" />
-                                        {{ t('dialog.world.actions.reset_home') }}
+                                        @click="worldDialogCommand('Unpublish')">
+                                        <Eye class="size-4" />
+                                        {{ t('dialog.world.actions.unpublish') }}
                                     </DropdownMenuItem>
-                                    <DropdownMenuItem v-else @click="worldDialogCommand('Make Home')">
-                                        <Home class="size-4" />
-                                        {{ t('dialog.world.actions.make_home') }}
+                                    <DropdownMenuItem v-else @click="worldDialogCommand('Publish')">
+                                        <Eye class="size-4" />
+                                        {{ t('dialog.world.actions.publish_to_labs') }}
                                     </DropdownMenuItem>
-                                    <DropdownMenuItem @click="worldDialogCommand('Previous Instances')">
-                                        <LineChart class="size-4" />
-                                        {{ t('dialog.world.actions.show_previous_instances') }}
+                                    <DropdownMenuItem
+                                        :disabled="!worldDialog.hasPersistData"
+                                        @click="worldDialogCommand('Trash2 Persistent Data')">
+                                        <Upload class="size-4" />
+                                        {{ t('dialog.world.actions.delete_persistent_data') }}
                                     </DropdownMenuItem>
-                                    <template v-if="currentUser.id !== worldDialog.ref.authorId">
-                                        <DropdownMenuItem
-                                            :disabled="!worldDialog.hasPersistData"
-                                            @click="worldDialogCommand('Trash2 Persistent Data')">
-                                            <Upload class="size-4" />
-                                            {{ t('dialog.world.actions.delete_persistent_data') }}
-                                        </DropdownMenuItem>
-                                    </template>
-                                    <template v-else>
-                                        <DropdownMenuItem @click="worldDialogCommand('Rename')">
-                                            <Pencil class="size-4" />
-                                            {{ t('dialog.world.actions.rename') }}
-                                        </DropdownMenuItem>
-                                        <DropdownMenuItem @click="worldDialogCommand('Change Description')">
-                                            <Pencil class="size-4" />
-                                            {{ t('dialog.world.actions.change_description') }}
-                                        </DropdownMenuItem>
-                                        <DropdownMenuItem @click="worldDialogCommand('Change Capacity')">
-                                            <Pencil class="size-4" />
-                                            {{ t('dialog.world.actions.change_capacity') }}
-                                        </DropdownMenuItem>
-                                        <DropdownMenuItem @click="worldDialogCommand('Change Recommended Capacity')">
-                                            <Pencil class="size-4" />
-                                            {{ t('dialog.world.actions.change_recommended_capacity') }}
-                                        </DropdownMenuItem>
-                                        <DropdownMenuItem @click="worldDialogCommand('Change YouTube Preview')">
-                                            <Pencil class="size-4" />
-                                            {{ t('dialog.world.actions.change_preview') }}
-                                        </DropdownMenuItem>
-                                        <DropdownMenuItem @click="worldDialogCommand('Change Tags')">
-                                            <Pencil class="size-4" />
-                                            {{ t('dialog.world.actions.change_warnings_settings_tags') }}
-                                        </DropdownMenuItem>
-                                        <DropdownMenuItem @click="worldDialogCommand('Change Allowed Domains')">
-                                            <Pencil class="size-4" />
-                                            {{ t('dialog.world.actions.change_allowed_video_player_domains') }}
-                                        </DropdownMenuItem>
-                                        <DropdownMenuItem v-if="isWindows" @click="worldDialogCommand('Change Image')">
-                                            <Image class="size-4" />
-                                            {{ t('dialog.world.actions.change_image') }}
-                                        </DropdownMenuItem>
-                                        <DropdownMenuItem
-                                            v-if="worldDialog.ref.unityPackageUrl"
-                                            @click="worldDialogCommand('Download Unity Package')">
-                                            <Download class="size-4" />
-                                            {{ t('dialog.world.actions.download_package') }}
-                                        </DropdownMenuItem>
-                                        <DropdownMenuSeparator />
-                                        <DropdownMenuItem
-                                            v-if="
-                                                worldDialog.ref?.tags?.includes('system_approved') ||
-                                                worldDialog.ref?.tags?.includes('system_labs')
-                                            "
-                                            @click="worldDialogCommand('Unpublish')">
-                                            <Eye class="size-4" />
-                                            {{ t('dialog.world.actions.unpublish') }}
-                                        </DropdownMenuItem>
-                                        <DropdownMenuItem v-else @click="worldDialogCommand('Publish')">
-                                            <Eye class="size-4" />
-                                            {{ t('dialog.world.actions.publish_to_labs') }}
-                                        </DropdownMenuItem>
-                                        <DropdownMenuItem
-                                            :disabled="!worldDialog.hasPersistData"
-                                            @click="worldDialogCommand('Trash2 Persistent Data')">
-                                            <Upload class="size-4" />
-                                            {{ t('dialog.world.actions.delete_persistent_data') }}
-                                        </DropdownMenuItem>
-                                        <DropdownMenuItem variant="destructive" @click="worldDialogCommand('Trash2')">
-                                            <Trash2 class="size-4" />
-                                            {{ t('dialog.world.actions.delete') }}
-                                        </DropdownMenuItem>
-                                    </template>
-                                </DropdownMenuContent>
-                            </DropdownMenu>
-                        </div>
+                                    <DropdownMenuItem variant="destructive" @click="worldDialogCommand('Trash2')">
+                                        <Trash2 class="size-4" />
+                                        {{ t('dialog.world.actions.delete') }}
+                                    </DropdownMenuItem>
+                                </template>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
                     </div>
                 </div>
-                <TabsUnderline
-                    v-model="worldDialogActiveTab"
-                    :items="worldDialogTabs"
-                    :unmount-on-hide="false"
-                    @update:modelValue="worldDialogTabClick">
-                    <template #Instances>
-                        <div class="flex items-center">
-                            <User />
-                            {{ t('dialog.world.instances.public_count', { count: worldDialog.ref.publicOccupants }) }}
-                            <User style="margin-left: 10px" />
-                            {{
-                                t('dialog.world.instances.private_count', {
-                                    count: worldDialog.ref.privateOccupants
-                                })
-                            }}
-                            <Check style="margin-left: 10px" />
-                            {{
-                                t('dialog.world.instances.capacity_count', {
-                                    count: worldDialog.ref.recommendedCapacity,
-                                    max: worldDialog.ref.capacity
-                                })
-                            }}
-                        </div>
-                        <div v-for="room in worldDialog.rooms" :key="room.id">
-                            <template
-                                v-if="
-                                    isAgeGatedInstancesVisible || !(room.ageGate || room.location?.includes('~ageGate'))
-                                ">
-                                <div style="margin: 5px 0">
-                                    <div class="flex-align-center">
-                                        <LocationWorld
-                                            :locationobject="room.$location"
-                                            :currentuserid="currentUser.id"
-                                            :worlddialogshortname="worldDialog.$location.shortName" />
-                                        <InstanceActionBar
-                                            class="ml-1"
-                                            :location="room.$location.tag"
-                                            :launch-location="room.tag"
-                                            :instance-location="room.tag"
-                                            :shortname="room.$location.shortName"
-                                            :currentlocation="lastLocation.location"
-                                            :instance="room.ref"
-                                            :friendcount="room.friendCount"
-                                            :refresh-tooltip="t('dialog.world.instances.refresh_instance_info')"
-                                            :show-history="!!instanceJoinHistory.get(room.$location.tag)"
-                                            :history-tooltip="t('dialog.previous_instances.info')"
-                                            :on-refresh="() => refreshInstancePlayerCount(room.tag)"
-                                            :on-history="() => showPreviousInstancesInfoDialog(room.location)" />
-                                    </div>
+            </div>
+            <TabsUnderline
+                v-model="worldDialogActiveTab"
+                :items="worldDialogTabs"
+                :unmount-on-hide="false"
+                @update:modelValue="worldDialogTabClick">
+                <template #Instances>
+                    <div class="flex items-center">
+                        <User />
+                        {{ t('dialog.world.instances.public_count', { count: worldDialog.ref.publicOccupants }) }}
+                        <User style="margin-left: 10px" />
+                        {{
+                            t('dialog.world.instances.private_count', {
+                                count: worldDialog.ref.privateOccupants
+                            })
+                        }}
+                        <Check style="margin-left: 10px" />
+                        {{
+                            t('dialog.world.instances.capacity_count', {
+                                count: worldDialog.ref.recommendedCapacity,
+                                max: worldDialog.ref.capacity
+                            })
+                        }}
+                    </div>
+                    <div v-for="room in worldDialog.rooms" :key="room.id">
+                        <template
+                            v-if="isAgeGatedInstancesVisible || !(room.ageGate || room.location?.includes('~ageGate'))">
+                            <div style="margin: 5px 0">
+                                <div class="flex-align-center">
+                                    <LocationWorld
+                                        :locationobject="room.$location"
+                                        :currentuserid="currentUser.id"
+                                        :worlddialogshortname="worldDialog.$location.shortName" />
+                                    <InstanceActionBar
+                                        class="ml-1"
+                                        :location="room.$location.tag"
+                                        :launch-location="room.tag"
+                                        :instance-location="room.tag"
+                                        :shortname="room.$location.shortName"
+                                        :currentlocation="lastLocation.location"
+                                        :instance="room.ref"
+                                        :friendcount="room.friendCount"
+                                        :refresh-tooltip="t('dialog.world.instances.refresh_instance_info')"
+                                        :show-history="!!instanceJoinHistory.get(room.$location.tag)"
+                                        :history-tooltip="t('dialog.previous_instances.info')"
+                                        :on-refresh="() => refreshInstancePlayerCount(room.tag)"
+                                        :on-history="() => showPreviousInstancesInfoDialog(room.location)" />
+                                </div>
+                                <div
+                                    v-if="room.$location.userId || room.users.length"
+                                    class="x-friend-list"
+                                    style="margin: 10px 0; max-height: unset">
                                     <div
-                                        v-if="room.$location.userId || room.users.length"
-                                        class="x-friend-list"
-                                        style="margin: 10px 0; max-height: unset">
-                                        <div
-                                            v-if="room.$location.userId"
-                                            class="x-friend-item x-friend-item-border"
-                                            @click="showUserDialog(room.$location.userId)">
-                                            <template v-if="room.$location.user">
-                                                <div class="avatar" :class="userStatusClass(room.$location.user)">
-                                                    <img :src="userImage(room.$location.user, true)" loading="lazy" />
-                                                </div>
-                                                <div class="detail">
-                                                    <span
-                                                        class="name"
-                                                        :style="{ color: room.$location.user.$userColour }"
-                                                        v-text="room.$location.user.displayName" />
-                                                    <span class="extra">
-                                                        {{ t('dialog.world.instances.instance_creator') }}
-                                                    </span>
-                                                </div>
-                                            </template>
-                                            <span v-else v-text="room.$location.userId" />
-                                        </div>
-                                        <div
-                                            v-for="user in room.users"
-                                            :key="user.id"
-                                            class="x-friend-item x-friend-item-border"
-                                            @click="showUserDialog(user.id)">
-                                            <div class="avatar" :class="userStatusClass(user)">
-                                                <img :src="userImage(user, true)" loading="lazy" />
+                                        v-if="room.$location.userId"
+                                        class="x-friend-item x-friend-item-border"
+                                        @click="showUserDialog(room.$location.userId)">
+                                        <template v-if="room.$location.user">
+                                            <div class="avatar" :class="userStatusClass(room.$location.user)">
+                                                <img :src="userImage(room.$location.user, true)" loading="lazy" />
                                             </div>
                                             <div class="detail">
                                                 <span
                                                     class="name"
-                                                    :style="{ color: user.$userColour }"
-                                                    v-text="user.displayName" />
-                                                <span v-if="user.location === 'traveling'" class="extra">
-                                                    <Spinner class="inline-block mr-1" />
-                                                    <Timer :epoch="user.$travelingToTime" />
-                                                </span>
-                                                <span v-else class="extra">
-                                                    <Timer :epoch="user.$location_at" />
+                                                    :style="{ color: room.$location.user.$userColour }"
+                                                    v-text="room.$location.user.displayName" />
+                                                <span class="extra">
+                                                    {{ t('dialog.world.instances.instance_creator') }}
                                                 </span>
                                             </div>
+                                        </template>
+                                        <span v-else v-text="room.$location.userId" />
+                                    </div>
+                                    <div
+                                        v-for="user in room.users"
+                                        :key="user.id"
+                                        class="x-friend-item x-friend-item-border"
+                                        @click="showUserDialog(user.id)">
+                                        <div class="avatar" :class="userStatusClass(user)">
+                                            <img :src="userImage(user, true)" loading="lazy" />
+                                        </div>
+                                        <div class="detail">
+                                            <span
+                                                class="name"
+                                                :style="{ color: user.$userColour }"
+                                                v-text="user.displayName" />
+                                            <span v-if="user.location === 'traveling'" class="extra">
+                                                <Spinner class="inline-block mr-1" />
+                                                <Timer :epoch="user.$travelingToTime" />
+                                            </span>
+                                            <span v-else class="extra">
+                                                <Timer :epoch="user.$location_at" />
+                                            </span>
                                         </div>
                                     </div>
                                 </div>
-                            </template>
+                            </div>
+                        </template>
+                    </div>
+                </template>
+                <template #Info>
+                    <div class="x-friend-list" style="max-height: none">
+                        <div class="x-friend-item" style="width: 100%; cursor: default">
+                            <div class="detail">
+                                <span class="name">
+                                    {{ t('dialog.world.info.memo') }}
+                                </span>
+                                <InputGroupTextareaField
+                                    v-model="memo"
+                                    class="extra"
+                                    :rows="2"
+                                    :placeholder="t('dialog.world.info.memo_placeholder')"
+                                    input-class="resize-none min-h-0"
+                                    @change="onWorldMemoChange" />
+                            </div>
                         </div>
-                    </template>
-                    <template #Info>
-                        <div class="x-friend-list" style="max-height: none">
+                        <div style="width: 100%; display: flex">
                             <div class="x-friend-item" style="width: 100%; cursor: default">
                                 <div class="detail">
                                     <span class="name">
-                                        {{ t('dialog.world.info.memo') }}
+                                        {{ t('dialog.world.info.id') }}
                                     </span>
-                                    <InputGroupTextareaField
-                                        v-model="memo"
-                                        class="extra"
-                                        :rows="2"
-                                        :placeholder="t('dialog.world.info.memo_placeholder')"
-                                        input-class="resize-none min-h-0"
-                                        @change="onWorldMemoChange" />
-                                </div>
-                            </div>
-                            <div style="width: 100%; display: flex">
-                                <div class="x-friend-item" style="width: 100%; cursor: default">
-                                    <div class="detail">
-                                        <span class="name">
-                                            {{ t('dialog.world.info.id') }}
-                                        </span>
-                                        <span class="extra" style="display: inline">
-                                            {{ worldDialog.id }}
-                                        </span>
-                                        <TooltipWrapper side="top" :content="t('dialog.world.info.id_tooltip')">
-                                            <DropdownMenu>
-                                                <DropdownMenuTrigger as-child>
-                                                    <Button
-                                                        class="rounded-full text-xs"
-                                                        size="icon-sm"
-                                                        variant="outline"
-                                                        @click.stop
-                                                        ><Copy class="h-4 w-4" />
-                                                    </Button>
-                                                </DropdownMenuTrigger>
-                                                <DropdownMenuContent>
-                                                    <DropdownMenuItem @click="copyWorldId()">
-                                                        {{ t('dialog.world.info.copy_id') }}
-                                                    </DropdownMenuItem>
-                                                    <DropdownMenuItem @click="copyWorldUrl()">
-                                                        {{ t('dialog.world.info.copy_url') }}
-                                                    </DropdownMenuItem>
-                                                    <DropdownMenuItem @click="copyWorldName()">
-                                                        {{ t('dialog.world.info.copy_name') }}
-                                                    </DropdownMenuItem>
-                                                </DropdownMenuContent>
-                                            </DropdownMenu>
-                                        </TooltipWrapper>
-                                    </div>
-                                </div>
-                            </div>
-                            <div
-                                v-if="worldDialog.ref.previewYoutubeId"
-                                class="x-friend-item"
-                                style="width: 350px"
-                                @click="
-                                    openExternalLink(
-                                        `https://www.youtube.com/watch?v=${worldDialog.ref.previewYoutubeId}`
-                                    )
-                                ">
-                                <div class="detail">
-                                    <span class="name">
-                                        {{ t('dialog.world.info.youtube_preview') }}
+                                    <span class="extra" style="display: inline">
+                                        {{ worldDialog.id }}
                                     </span>
-                                    <span class="extra">
-                                        https://www.youtube.com/watch?v={{ worldDialog.ref.previewYoutubeId }}
-                                    </span>
-                                </div>
-                            </div>
-                            <div class="x-friend-item" style="width: 100%; cursor: default">
-                                <div class="detail">
-                                    <span class="name">
-                                        {{ t('dialog.world.info.author_tags') }}
-                                    </span>
-                                    <span
-                                        v-if="
-                                            worldDialog.ref.tags?.filter((tag) => tag.startsWith('author_tag')).length >
-                                            0
-                                        "
-                                        class="extra">
-                                        {{ worldTags }}
-                                    </span>
-                                    <span v-else class="extra"> - </span>
-                                </div>
-                            </div>
-                            <div class="x-friend-item" style="cursor: default">
-                                <div class="detail">
-                                    <span class="name">
-                                        {{ t('dialog.world.info.players') }}
-                                    </span>
-                                    <span class="extra">
-                                        {{ commaNumber(worldDialog.ref.occupants) }}
-                                    </span>
-                                </div>
-                            </div>
-                            <div class="x-friend-item" style="cursor: default">
-                                <div class="detail">
-                                    <span class="name">
-                                        {{ t('dialog.world.info.favorites') }}
-                                    </span>
-                                    <span class="extra">
-                                        {{ commaNumber(worldDialog.ref.favorites)
-                                        }}<span
-                                            v-if="worldDialog.ref?.favorites > 0 && worldDialog.ref?.visits > 0"
-                                            class="extra">
-                                            ({{ favoriteRate }}%)
-                                        </span>
-                                    </span>
-                                </div>
-                            </div>
-                            <div class="x-friend-item" style="cursor: default">
-                                <div class="detail">
-                                    <span class="name">
-                                        {{ t('dialog.world.info.visits') }}
-                                    </span>
-                                    <span class="extra">
-                                        {{ commaNumber(worldDialog.ref.visits) }}
-                                    </span>
-                                </div>
-                            </div>
-                            <div class="x-friend-item" style="cursor: default">
-                                <div class="detail">
-                                    <span class="name">
-                                        {{ t('dialog.world.info.capacity') }}
-                                    </span>
-                                    <span class="extra">
-                                        {{ commaNumber(worldDialog.ref.recommendedCapacity) }} ({{
-                                            commaNumber(worldDialog.ref.capacity)
-                                        }})
-                                    </span>
-                                </div>
-                            </div>
-                            <div class="x-friend-item" style="cursor: default">
-                                <div class="detail">
-                                    <span class="name">
-                                        {{ t('dialog.world.info.created_at') }}
-                                    </span>
-                                    <span class="extra">
-                                        {{ formatDateFilter(worldDialog.ref.created_at, 'long') }}
-                                    </span>
-                                </div>
-                            </div>
-                            <div class="x-friend-item" style="cursor: default">
-                                <div class="detail">
-                                    <span class="name">
-                                        {{ t('dialog.world.info.last_updated') }}
-                                    </span>
-                                    <span v-if="worldDialog.lastUpdated" class="extra">
-                                        {{ formatDateFilter(worldDialog.lastUpdated, 'long') }}
-                                    </span>
-                                    <span v-else class="extra">
-                                        {{ formatDateFilter(worldDialog.ref.updated_at, 'long') }}
-                                    </span>
-                                </div>
-                            </div>
-                            <div
-                                v-if="worldDialog.ref.labsPublicationDate !== 'none'"
-                                class="x-friend-item"
-                                style="cursor: default">
-                                <div class="detail">
-                                    <span class="name">
-                                        {{ t('dialog.world.info.labs_publication_date') }}
-                                    </span>
-                                    <span class="extra">
-                                        {{ formatDateFilter(worldDialog.ref.labsPublicationDate, 'long') }}
-                                    </span>
-                                </div>
-                            </div>
-                            <div
-                                v-if="worldDialog.ref.publicationDate !== 'none'"
-                                class="x-friend-item"
-                                style="cursor: default">
-                                <div class="detail">
-                                    <span class="name" style="display: inline">
-                                        {{ t('dialog.world.info.publication_date') }}
-                                    </span>
-                                    <TooltipWrapper v-if="isTimeInLabVisible" side="top" style="margin-left: 5px">
-                                        <template #content>
-                                            <span>
-                                                {{ t('dialog.world.info.time_in_labs') }}
-                                                {{ timeInLab }}
-                                            </span>
-                                        </template>
-                                        <ArrowDown />
+                                    <TooltipWrapper side="top" :content="t('dialog.world.info.id_tooltip')">
+                                        <DropdownMenu>
+                                            <DropdownMenuTrigger as-child>
+                                                <Button
+                                                    class="rounded-full text-xs"
+                                                    size="icon-sm"
+                                                    variant="outline"
+                                                    @click.stop
+                                                    ><Copy class="h-4 w-4" />
+                                                </Button>
+                                            </DropdownMenuTrigger>
+                                            <DropdownMenuContent>
+                                                <DropdownMenuItem @click="copyWorldId()">
+                                                    {{ t('dialog.world.info.copy_id') }}
+                                                </DropdownMenuItem>
+                                                <DropdownMenuItem @click="copyWorldUrl()">
+                                                    {{ t('dialog.world.info.copy_url') }}
+                                                </DropdownMenuItem>
+                                                <DropdownMenuItem @click="copyWorldName()">
+                                                    {{ t('dialog.world.info.copy_name') }}
+                                                </DropdownMenuItem>
+                                            </DropdownMenuContent>
+                                        </DropdownMenu>
                                     </TooltipWrapper>
-                                    <span class="extra">
-                                        {{ formatDateFilter(worldDialog.ref.publicationDate, 'long') }}
-                                    </span>
-                                </div>
-                            </div>
-                            <div class="x-friend-item" style="cursor: default">
-                                <div class="detail">
-                                    <span class="name">
-                                        {{ t('dialog.world.info.version') }}
-                                    </span>
-                                    <span class="extra" v-text="worldDialog.ref.version" />
-                                </div>
-                            </div>
-                            <div class="x-friend-item" style="cursor: default">
-                                <div class="detail">
-                                    <span class="name">
-                                        {{ t('dialog.world.info.heat') }}
-                                    </span>
-                                    <span class="extra">
-                                        {{ commaNumber(worldDialog.ref.heat) }} {{ '🔥'.repeat(worldDialog.ref.heat) }}
-                                    </span>
-                                </div>
-                            </div>
-                            <div class="x-friend-item" style="cursor: default">
-                                <div class="detail">
-                                    <span class="name">
-                                        {{ t('dialog.world.info.popularity') }}
-                                    </span>
-                                    <span class="extra">
-                                        {{ commaNumber(worldDialog.ref.popularity) }}
-                                        {{ '💖'.repeat(worldDialog.ref.popularity) }}
-                                    </span>
-                                </div>
-                            </div>
-                            <div class="x-friend-item" style="width: 100%; cursor: default">
-                                <div class="detail">
-                                    <span class="name">
-                                        {{ t('dialog.world.info.platform') }}
-                                    </span>
-                                    <span class="extra" style="white-space: normal">{{ worldDialogPlatform }}</span>
-                                </div>
-                            </div>
-                            <div class="x-friend-item" style="cursor: default">
-                                <div class="detail">
-                                    <span class="name">
-                                        {{ t('dialog.world.info.last_visited') }}
-                                    </span>
-                                    <span class="extra">
-                                        {{ worldDialog.timeSpent === 0 ? ' - ' : timeSpent }}
-                                    </span>
                                 </div>
                             </div>
                         </div>
-                    </template>
-                    <template #JSON>
-                        <Button
-                            class="rounded-full mr-2"
-                            size="icon-sm"
-                            variant="outline"
-                            @click="refreshWorldDialogTreeData()">
-                            <RefreshCw />
-                        </Button>
-                        <Button
-                            class="rounded-full"
-                            size="icon-sm"
-                            variant="outline"
-                            @click="downloadAndSaveJson(worldDialog.id, worldDialog.ref)">
-                            <Download />
-                        </Button>
-                        <vue-json-pretty :data="treeData" :deep="2" :theme="isDarkMode ? 'dark' : 'light'" show-icon />
-                        <br />
-                        <vue-json-pretty
-                            v-if="worldDialog.fileAnalysis.length > 0"
-                            :data="worldDialog.fileAnalysis"
-                            :deep="2"
-                            :theme="isDarkMode ? 'dark' : 'light'"
-                            show-icon />
-                    </template>
-                </TabsUnderline>
-            </div>
-        </DialogContent>
+                        <div
+                            v-if="worldDialog.ref.previewYoutubeId"
+                            class="x-friend-item"
+                            style="width: 350px"
+                            @click="
+                                openExternalLink(`https://www.youtube.com/watch?v=${worldDialog.ref.previewYoutubeId}`)
+                            ">
+                            <div class="detail">
+                                <span class="name">
+                                    {{ t('dialog.world.info.youtube_preview') }}
+                                </span>
+                                <span class="extra">
+                                    https://www.youtube.com/watch?v={{ worldDialog.ref.previewYoutubeId }}
+                                </span>
+                            </div>
+                        </div>
+                        <div class="x-friend-item" style="width: 100%; cursor: default">
+                            <div class="detail">
+                                <span class="name">
+                                    {{ t('dialog.world.info.author_tags') }}
+                                </span>
+                                <span
+                                    v-if="
+                                        worldDialog.ref.tags?.filter((tag) => tag.startsWith('author_tag')).length > 0
+                                    "
+                                    class="extra">
+                                    {{ worldTags }}
+                                </span>
+                                <span v-else class="extra"> - </span>
+                            </div>
+                        </div>
+                        <div class="x-friend-item" style="cursor: default">
+                            <div class="detail">
+                                <span class="name">
+                                    {{ t('dialog.world.info.players') }}
+                                </span>
+                                <span class="extra">
+                                    {{ commaNumber(worldDialog.ref.occupants) }}
+                                </span>
+                            </div>
+                        </div>
+                        <div class="x-friend-item" style="cursor: default">
+                            <div class="detail">
+                                <span class="name">
+                                    {{ t('dialog.world.info.favorites') }}
+                                </span>
+                                <span class="extra">
+                                    {{ commaNumber(worldDialog.ref.favorites)
+                                    }}<span
+                                        v-if="worldDialog.ref?.favorites > 0 && worldDialog.ref?.visits > 0"
+                                        class="extra">
+                                        ({{ favoriteRate }}%)
+                                    </span>
+                                </span>
+                            </div>
+                        </div>
+                        <div class="x-friend-item" style="cursor: default">
+                            <div class="detail">
+                                <span class="name">
+                                    {{ t('dialog.world.info.visits') }}
+                                </span>
+                                <span class="extra">
+                                    {{ commaNumber(worldDialog.ref.visits) }}
+                                </span>
+                            </div>
+                        </div>
+                        <div class="x-friend-item" style="cursor: default">
+                            <div class="detail">
+                                <span class="name">
+                                    {{ t('dialog.world.info.capacity') }}
+                                </span>
+                                <span class="extra">
+                                    {{ commaNumber(worldDialog.ref.recommendedCapacity) }} ({{
+                                        commaNumber(worldDialog.ref.capacity)
+                                    }})
+                                </span>
+                            </div>
+                        </div>
+                        <div class="x-friend-item" style="cursor: default">
+                            <div class="detail">
+                                <span class="name">
+                                    {{ t('dialog.world.info.created_at') }}
+                                </span>
+                                <span class="extra">
+                                    {{ formatDateFilter(worldDialog.ref.created_at, 'long') }}
+                                </span>
+                            </div>
+                        </div>
+                        <div class="x-friend-item" style="cursor: default">
+                            <div class="detail">
+                                <span class="name">
+                                    {{ t('dialog.world.info.last_updated') }}
+                                </span>
+                                <span v-if="worldDialog.lastUpdated" class="extra">
+                                    {{ formatDateFilter(worldDialog.lastUpdated, 'long') }}
+                                </span>
+                                <span v-else class="extra">
+                                    {{ formatDateFilter(worldDialog.ref.updated_at, 'long') }}
+                                </span>
+                            </div>
+                        </div>
+                        <div
+                            v-if="worldDialog.ref.labsPublicationDate !== 'none'"
+                            class="x-friend-item"
+                            style="cursor: default">
+                            <div class="detail">
+                                <span class="name">
+                                    {{ t('dialog.world.info.labs_publication_date') }}
+                                </span>
+                                <span class="extra">
+                                    {{ formatDateFilter(worldDialog.ref.labsPublicationDate, 'long') }}
+                                </span>
+                            </div>
+                        </div>
+                        <div
+                            v-if="worldDialog.ref.publicationDate !== 'none'"
+                            class="x-friend-item"
+                            style="cursor: default">
+                            <div class="detail">
+                                <span class="name" style="display: inline">
+                                    {{ t('dialog.world.info.publication_date') }}
+                                </span>
+                                <TooltipWrapper v-if="isTimeInLabVisible" side="top" style="margin-left: 5px">
+                                    <template #content>
+                                        <span>
+                                            {{ t('dialog.world.info.time_in_labs') }}
+                                            {{ timeInLab }}
+                                        </span>
+                                    </template>
+                                    <ArrowDown />
+                                </TooltipWrapper>
+                                <span class="extra">
+                                    {{ formatDateFilter(worldDialog.ref.publicationDate, 'long') }}
+                                </span>
+                            </div>
+                        </div>
+                        <div class="x-friend-item" style="cursor: default">
+                            <div class="detail">
+                                <span class="name">
+                                    {{ t('dialog.world.info.version') }}
+                                </span>
+                                <span class="extra" v-text="worldDialog.ref.version" />
+                            </div>
+                        </div>
+                        <div class="x-friend-item" style="cursor: default">
+                            <div class="detail">
+                                <span class="name">
+                                    {{ t('dialog.world.info.heat') }}
+                                </span>
+                                <span class="extra">
+                                    {{ commaNumber(worldDialog.ref.heat) }} {{ '🔥'.repeat(worldDialog.ref.heat) }}
+                                </span>
+                            </div>
+                        </div>
+                        <div class="x-friend-item" style="cursor: default">
+                            <div class="detail">
+                                <span class="name">
+                                    {{ t('dialog.world.info.popularity') }}
+                                </span>
+                                <span class="extra">
+                                    {{ commaNumber(worldDialog.ref.popularity) }}
+                                    {{ '💖'.repeat(worldDialog.ref.popularity) }}
+                                </span>
+                            </div>
+                        </div>
+                        <div class="x-friend-item" style="width: 100%; cursor: default">
+                            <div class="detail">
+                                <span class="name">
+                                    {{ t('dialog.world.info.platform') }}
+                                </span>
+                                <span class="extra" style="white-space: normal">{{ worldDialogPlatform }}</span>
+                            </div>
+                        </div>
+                        <div class="x-friend-item" style="cursor: default">
+                            <div class="detail">
+                                <span class="name">
+                                    {{ t('dialog.world.info.last_visited') }}
+                                </span>
+                                <span class="extra">
+                                    {{ worldDialog.timeSpent === 0 ? ' - ' : timeSpent }}
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+                <template #JSON>
+                    <Button
+                        class="rounded-full mr-2"
+                        size="icon-sm"
+                        variant="outline"
+                        @click="refreshWorldDialogTreeData()">
+                        <RefreshCw />
+                    </Button>
+                    <Button
+                        class="rounded-full"
+                        size="icon-sm"
+                        variant="outline"
+                        @click="downloadAndSaveJson(worldDialog.id, worldDialog.ref)">
+                        <Download />
+                    </Button>
+                    <vue-json-pretty :data="treeData" :deep="2" :theme="isDarkMode ? 'dark' : 'light'" show-icon />
+                    <br />
+                    <vue-json-pretty
+                        v-if="worldDialog.fileAnalysis.length > 0"
+                        :data="worldDialog.fileAnalysis"
+                        :deep="2"
+                        :theme="isDarkMode ? 'dark' : 'light'"
+                        show-icon />
+                </template>
+            </TabsUnderline>
+        </div>
 
         <template v-if="isDialogVisible">
             <WorldAllowedDomainsDialog :world-allowed-domains-dialog="worldAllowedDomainsDialog" />
@@ -709,7 +691,7 @@
                 v-model:change-world-image-dialog-visible="changeWorldImageDialogVisible"
                 v-model:previousImageUrl="previousImageUrl" />
         </template>
-    </Dialog>
+    </div>
 </template>
 
 <script setup>
@@ -737,8 +719,8 @@
         User,
         Wand2
     } from 'lucide-vue-next';
-    import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue';
+    import { DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { Button } from '@/components/ui/button';
     import { InputGroupTextareaField } from '@/components/ui/input-group';
     import { Spinner } from '@/components/ui/spinner';
diff --git a/src/components/ui/breadcrumb/Breadcrumb.vue b/src/components/ui/breadcrumb/Breadcrumb.vue
new file mode 100644
index 00000000..502695d9
--- /dev/null
+++ b/src/components/ui/breadcrumb/Breadcrumb.vue
@@ -0,0 +1,11 @@
+<script setup>
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <nav aria-label="breadcrumb" data-slot="breadcrumb" :class="props.class">
+        <slot />
+    </nav>
+</template>
diff --git a/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue b/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue
new file mode 100644
index 00000000..a1d14e71
--- /dev/null
+++ b/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue
@@ -0,0 +1,21 @@
+<script setup>
+    import { MoreHorizontal } from 'lucide-vue-next';
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <span
+        data-slot="breadcrumb-ellipsis"
+        role="presentation"
+        aria-hidden="true"
+        :class="cn('flex size-9 items-center justify-center', props.class)">
+        <slot>
+            <MoreHorizontal class="size-4" />
+        </slot>
+        <span class="sr-only">More</span>
+    </span>
+</template>
diff --git a/src/components/ui/breadcrumb/BreadcrumbItem.vue b/src/components/ui/breadcrumb/BreadcrumbItem.vue
new file mode 100644
index 00000000..af1cb144
--- /dev/null
+++ b/src/components/ui/breadcrumb/BreadcrumbItem.vue
@@ -0,0 +1,13 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <li data-slot="breadcrumb-item" :class="cn('inline-flex items-center gap-1.5', props.class)">
+        <slot />
+    </li>
+</template>
diff --git a/src/components/ui/breadcrumb/BreadcrumbLink.vue b/src/components/ui/breadcrumb/BreadcrumbLink.vue
new file mode 100644
index 00000000..ba6175ad
--- /dev/null
+++ b/src/components/ui/breadcrumb/BreadcrumbLink.vue
@@ -0,0 +1,20 @@
+<script setup>
+    import { Primitive } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false, default: 'a' },
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <Primitive
+        data-slot="breadcrumb-link"
+        :as="as"
+        :as-child="asChild"
+        :class="cn('hover:text-foreground transition-colors', props.class)">
+        <slot />
+    </Primitive>
+</template>
diff --git a/src/components/ui/breadcrumb/BreadcrumbList.vue b/src/components/ui/breadcrumb/BreadcrumbList.vue
new file mode 100644
index 00000000..87cbadab
--- /dev/null
+++ b/src/components/ui/breadcrumb/BreadcrumbList.vue
@@ -0,0 +1,17 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <ol
+        data-slot="breadcrumb-list"
+        :class="
+            cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', props.class)
+        ">
+        <slot />
+    </ol>
+</template>
diff --git a/src/components/ui/breadcrumb/BreadcrumbPage.vue b/src/components/ui/breadcrumb/BreadcrumbPage.vue
new file mode 100644
index 00000000..ea772ab6
--- /dev/null
+++ b/src/components/ui/breadcrumb/BreadcrumbPage.vue
@@ -0,0 +1,18 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <span
+        data-slot="breadcrumb-page"
+        role="link"
+        aria-disabled="true"
+        aria-current="page"
+        :class="cn('text-foreground font-normal', props.class)">
+        <slot />
+    </span>
+</template>
diff --git a/src/components/ui/breadcrumb/BreadcrumbSeparator.vue b/src/components/ui/breadcrumb/BreadcrumbSeparator.vue
new file mode 100644
index 00000000..7500d362
--- /dev/null
+++ b/src/components/ui/breadcrumb/BreadcrumbSeparator.vue
@@ -0,0 +1,20 @@
+<script setup>
+    import { ChevronRight } from 'lucide-vue-next';
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <li
+        data-slot="breadcrumb-separator"
+        role="presentation"
+        aria-hidden="true"
+        :class="cn('[&>svg]:size-3.5', props.class)">
+        <slot>
+            <ChevronRight />
+        </slot>
+    </li>
+</template>
diff --git a/src/components/ui/breadcrumb/index.js b/src/components/ui/breadcrumb/index.js
new file mode 100644
index 00000000..d650f7e4
--- /dev/null
+++ b/src/components/ui/breadcrumb/index.js
@@ -0,0 +1,7 @@
+export { default as Breadcrumb } from './Breadcrumb.vue';
+export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue';
+export { default as BreadcrumbItem } from './BreadcrumbItem.vue';
+export { default as BreadcrumbLink } from './BreadcrumbLink.vue';
+export { default as BreadcrumbList } from './BreadcrumbList.vue';
+export { default as BreadcrumbPage } from './BreadcrumbPage.vue';
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue';
diff --git a/src/composables/useAuthenticatedLayoutResizable.js b/src/composables/useMainLayoutResizable.js
similarity index 95%
rename from src/composables/useAuthenticatedLayoutResizable.js
rename to src/composables/useMainLayoutResizable.js
index b6453a8d..e79def52 100644
--- a/src/composables/useAuthenticatedLayoutResizable.js
+++ b/src/composables/useMainLayoutResizable.js
@@ -5,12 +5,13 @@ import { useAppearanceSettingsStore } from '../stores';
 
 import configRepository from '../service/config';
 
-export function useAuthenticatedLayoutResizable() {
+export function useMainLayoutResizable() {
     const asideMaxPx = 500;
 
     const appearanceStore = useAppearanceSettingsStore();
     const { setAsideWidth } = appearanceStore;
-    const { asideWidth, isSideBarTabShow, isNavCollapsed } = storeToRefs(appearanceStore);
+    const { asideWidth, isSideBarTabShow, isNavCollapsed } =
+        storeToRefs(appearanceStore);
 
     const fallbackWidth =
         typeof window !== 'undefined' && window.innerWidth
@@ -63,7 +64,9 @@ export function useAuthenticatedLayoutResizable() {
     const percentToPx = (percent, groupWidth) => (percent / 100) * groupWidth;
 
     const isAsideCollapsed = (layout) =>
-        Array.isArray(layout) && layout.length >= 2 && layout[layout.length - 1] <= 1;
+        Array.isArray(layout) &&
+        layout.length >= 2 &&
+        layout[layout.length - 1] <= 1;
 
     const asideDefaultSize = computed(() =>
         pxToPercent(asideWidth.value, undefined, 0)
@@ -170,6 +173,7 @@ export function useAuthenticatedLayoutResizable() {
         asidePanelRef,
         asideDefaultSize,
         asideMaxSize,
+        asideMaxPx,
         mainDefaultSize,
         handleLayout,
         setIsDragging,
diff --git a/src/plugin/router.js b/src/plugin/router.js
index 6d82874a..819f01df 100644
--- a/src/plugin/router.js
+++ b/src/plugin/router.js
@@ -2,7 +2,7 @@ import { createRouter, createWebHashHistory } from 'vue-router';
 
 import { watchState } from './../service/watchState';
 
-import AuthenticatedLayout from '../views/Layout/AuthenticatedLayout.vue';
+import MainLayout from '../views/Layout/MainLayout.vue';
 import Charts from './../views/Charts/Charts.vue';
 import FavoritesAvatar from './../views/Favorites/FavoritesAvatar.vue';
 import FavoritesFriend from './../views/Favorites/FavoritesFriend.vue';
@@ -31,7 +31,7 @@ const routes = [
     },
     {
         path: '/',
-        component: AuthenticatedLayout,
+        component: MainLayout,
         meta: { requiresAuth: true },
         children: [
             { path: '', redirect: { name: 'feed' } },
diff --git a/src/stores/avatar.js b/src/stores/avatar.js
index b28adf12..d1c64fc1 100644
--- a/src/stores/avatar.js
+++ b/src/stores/avatar.js
@@ -18,9 +18,12 @@ import { database } from '../service/database';
 import { useAdvancedSettingsStore } from './settings/advanced';
 import { useAvatarProviderStore } from './avatarProvider';
 import { useFavoriteStore } from './favorite';
+import { useGroupStore } from './group';
 import { useModalStore } from './modal';
+import { useUiStore } from './ui';
 import { useUserStore } from './user';
 import { useVRCXUpdaterStore } from './vrcxUpdater';
+import { useWorldStore } from './world';
 import { watchState } from '../service/watchState';
 
 import webApiService from '../service/webapi';
@@ -31,7 +34,10 @@ export const useAvatarStore = defineStore('Avatar', () => {
     const vrcxUpdaterStore = useVRCXUpdaterStore();
     const advancedSettingsStore = useAdvancedSettingsStore();
     const userStore = useUserStore();
+    const worldStore = useWorldStore();
+    const groupStore = useGroupStore();
     const modalStore = useModalStore();
+    const uiStore = useUiStore();
     const { t } = useI18n();
 
     let cachedAvatarModerations = new Map();
@@ -172,8 +178,22 @@ export const useAvatarStore = defineStore('Avatar', () => {
      * @param {string} avatarId
      * @returns
      */
-    function showAvatarDialog(avatarId) {
+    function showAvatarDialog(avatarId, options = {}) {
         const D = avatarDialog.value;
+        if (
+            !avatarDialog.value.visible &&
+            !userStore.userDialog.visible &&
+            !worldStore.worldDialog.visible &&
+            !groupStore.groupDialog.visible
+        ) {
+            uiStore.clearDialogCrumbs();
+        }
+        if (!options.skipBreadcrumb) {
+            uiStore.pushDialogCrumb('avatar', avatarId);
+        }
+        userStore.userDialog.visible = false;
+        worldStore.worldDialog.visible = false;
+        groupStore.groupDialog.visible = false;
         D.visible = true;
         D.loading = true;
         D.id = avatarId;
@@ -201,6 +221,7 @@ export const useAvatarStore = defineStore('Avatar', () => {
         const ref2 = cachedAvatars.get(avatarId);
         if (typeof ref2 !== 'undefined') {
             D.ref = ref2;
+            uiStore.setDialogCrumbLabel('avatar', D.id, D.ref?.name || D.id);
             updateVRChatAvatarCache();
             if (
                 ref2.releaseStatus !== 'public' &&
@@ -215,6 +236,11 @@ export const useAvatarStore = defineStore('Avatar', () => {
             .then((args) => {
                 const ref = applyAvatar(args.json);
                 D.ref = ref;
+                uiStore.setDialogCrumbLabel(
+                    'avatar',
+                    D.id,
+                    D.ref?.name || D.id
+                );
                 getAvatarGallery(avatarId);
                 updateVRChatAvatarCache();
                 if (/quest/.test(ref.tags)) {
diff --git a/src/stores/group.js b/src/stores/group.js
index ec0c015c..a7e4de79 100644
--- a/src/stores/group.js
+++ b/src/stores/group.js
@@ -16,11 +16,14 @@ import {
 } from '../shared/utils';
 import { database } from '../service/database.js';
 import { groupDialogFilterOptions } from '../shared/constants/';
+import { useAvatarStore } from './avatar';
 import { useGameStore } from './game';
 import { useInstanceStore } from './instance';
 import { useModalStore } from './modal';
 import { useNotificationStore } from './notification';
+import { useUiStore } from './ui';
 import { useUserStore } from './user';
+import { useWorldStore } from './world';
 import { watchState } from '../service/watchState';
 
 import configRepository from '../service/config';
@@ -31,8 +34,11 @@ export const useGroupStore = defineStore('Group', () => {
     const instanceStore = useInstanceStore();
     const gameStore = useGameStore();
     const userStore = useUserStore();
+    const worldStore = useWorldStore();
+    const avatarStore = useAvatarStore();
     const notificationStore = useNotificationStore();
     const modalStore = useModalStore();
+    const uiStore = useUiStore();
     const { t } = useI18n();
 
     let cachedGroups = new Map();
@@ -124,10 +130,24 @@ export const useGroupStore = defineStore('Group', () => {
         { flush: 'sync' }
     );
 
-    function showGroupDialog(groupId) {
+    function showGroupDialog(groupId, options = {}) {
         if (!groupId) {
             return;
         }
+        if (
+            !groupDialog.value.visible &&
+            !userStore.userDialog.visible &&
+            !worldStore.worldDialog.visible &&
+            !avatarStore.avatarDialog.visible
+        ) {
+            uiStore.clearDialogCrumbs();
+        }
+        if (!options.skipBreadcrumb) {
+            uiStore.pushDialogCrumb('group', groupId);
+        }
+        userStore.userDialog.visible = false;
+        worldStore.worldDialog.visible = false;
+        avatarStore.avatarDialog.visible = false;
         const D = groupDialog.value;
         D.visible = true;
         D.loading = true;
@@ -161,6 +181,11 @@ export const useGroupStore = defineStore('Group', () => {
                 if (groupId === args.ref.id) {
                     D.loading = false;
                     D.ref = args.ref;
+                    uiStore.setDialogCrumbLabel(
+                        'group',
+                        D.id,
+                        D.ref?.name || D.id
+                    );
                     D.inGroup = args.ref.membershipStatus === 'member';
                     D.ownerDisplayName = args.ref.ownerId;
                     userRequest
diff --git a/src/stores/ui.js b/src/stores/ui.js
index f212454f..2dc0db90 100644
--- a/src/stores/ui.js
+++ b/src/stores/ui.js
@@ -27,6 +27,7 @@ export const useUiStore = defineStore('Ui', () => {
     const notifiedMenus = ref([]);
     const shiftHeld = ref(false);
     const trayIconNotify = ref(false);
+    const dialogCrumbs = ref([]);
 
     watch(ctrlR, (isPressed) => {
         if (isPressed) {
@@ -58,6 +59,54 @@ export const useUiStore = defineStore('Ui', () => {
         }
     });
 
+    function pushDialogCrumb(type, id, label = '') {
+        if (!type || !id) {
+            return;
+        }
+        const items = dialogCrumbs.value;
+        const last = items[items.length - 1];
+        if (last && last.type === type && last.id === id) {
+            if (label && last.label !== label) {
+                last.label = label;
+            }
+            return;
+        }
+        const existingIndex = items.findIndex(
+            (item) => item.type === type && item.id === id
+        );
+        if (existingIndex !== -1) {
+            items.splice(existingIndex + 1);
+            if (label) {
+                items[existingIndex].label = label;
+            }
+            return;
+        }
+        items.push({ type, id, label: label || id });
+    }
+
+    function setDialogCrumbLabel(type, id, label) {
+        if (!type || !id || !label) {
+            return;
+        }
+        const item = dialogCrumbs.value.find(
+            (entry) => entry.type === type && entry.id === id
+        );
+        if (item) {
+            item.label = label;
+        }
+    }
+
+    function jumpDialogCrumb(index) {
+        if (index < 0 || index >= dialogCrumbs.value.length) {
+            return;
+        }
+        dialogCrumbs.value.splice(index + 1);
+    }
+
+    function clearDialogCrumbs() {
+        dialogCrumbs.value = [];
+    }
+
     // Make sure file drops outside of the screenshot manager don't navigate to the file path dropped.
     // This issue persists on prompts created with prompt(), unfortunately. Not sure how to fix that.
     document.body.addEventListener('drop', function (e) {
@@ -133,10 +182,15 @@ export const useUiStore = defineStore('Ui', () => {
     return {
         notifiedMenus,
         shiftHeld,
+        dialogCrumbs,
 
         notifyMenu,
         removeNotify,
         showConsole,
-        updateTrayIconNotify
+        updateTrayIconNotify,
+        pushDialogCrumb,
+        setDialogCrumbLabel,
+        jumpDialogCrumb,
+        clearDialogCrumbs
     };
 });
diff --git a/src/stores/user.js b/src/stores/user.js
index 85791536..d473a9f4 100644
--- a/src/stores/user.js
+++ b/src/stores/user.js
@@ -48,6 +48,7 @@ import { useNotificationStore } from './notification';
 import { usePhotonStore } from './photon';
 import { useSearchStore } from './search';
 import { useSharedFeedStore } from './sharedFeed';
+import { useUiStore } from './ui';
 import { useWorldStore } from './world';
 import { watchState } from '../service/watchState';
 
@@ -68,6 +69,7 @@ export const useUserStore = defineStore('User', () => {
     const groupStore = useGroupStore();
     const feedStore = useFeedStore();
     const worldStore = useWorldStore();
+    const uiStore = useUiStore();
     const moderationStore = useModerationStore();
     const photonStore = usePhotonStore();
     const sharedFeedStore = useSharedFeedStore();
@@ -310,6 +312,7 @@ export const useUserStore = defineStore('User', () => {
                 customUserTags.clear();
                 state.notes.clear();
                 subsetOfLanguages.value = [];
+                uiStore.clearDialogCrumbs();
             }
         },
         { flush: 'sync' }
@@ -755,7 +758,7 @@ export const useUserStore = defineStore('User', () => {
      *
      * @param {string} userId
      */
-    function showUserDialog(userId) {
+    function showUserDialog(userId, options = {}) {
         if (
             !userId ||
             typeof userId !== 'string' ||
@@ -763,6 +766,20 @@ export const useUserStore = defineStore('User', () => {
         ) {
             return;
         }
+        if (
+            !userDialog.value.visible &&
+            !worldStore.worldDialog.visible &&
+            !avatarStore.avatarDialog.visible &&
+            !groupStore.groupDialog.visible
+        ) {
+            uiStore.clearDialogCrumbs();
+        }
+        if (!options.skipBreadcrumb) {
+            uiStore.pushDialogCrumb('user', userId);
+        }
+        worldStore.worldDialog.visible = false;
+        avatarStore.avatarDialog.visible = false;
+        groupStore.groupDialog.visible = false;
         const D = userDialog.value;
         D.id = userId;
         D.treeData = {};
@@ -846,6 +863,11 @@ export const useUserStore = defineStore('User', () => {
                 if (args.ref.id === D.id) {
                     requestAnimationFrame(() => {
                         D.ref = args.ref;
+                        uiStore.setDialogCrumbLabel(
+                            'user',
+                            D.id,
+                            D.ref?.displayName || D.id
+                        );
                         D.friend = friendStore.friends.get(D.id);
                         D.isFriend = Boolean(D.friend);
                         D.note = String(D.ref.note || '');
diff --git a/src/stores/world.js b/src/stores/world.js
index 1ccb4c25..d9ea4dfd 100644
--- a/src/stores/world.js
+++ b/src/stores/world.js
@@ -14,9 +14,12 @@ import {
 } from '../shared/utils';
 import { instanceRequest, miscRequest, worldRequest } from '../api';
 import { database } from '../service/database';
+import { useAvatarStore } from './avatar';
 import { useFavoriteStore } from './favorite';
+import { useGroupStore } from './group';
 import { useInstanceStore } from './instance';
 import { useLocationStore } from './location';
+import { useUiStore } from './ui';
 import { useUserStore } from './user';
 import { watchState } from '../service/watchState';
 
@@ -25,6 +28,9 @@ export const useWorldStore = defineStore('World', () => {
     const favoriteStore = useFavoriteStore();
     const instanceStore = useInstanceStore();
     const userStore = useUserStore();
+    const avatarStore = useAvatarStore();
+    const groupStore = useGroupStore();
+    const uiStore = useUiStore();
     const { t } = useI18n();
 
     const worldDialog = reactive({
@@ -71,12 +77,26 @@ export const useWorldStore = defineStore('World', () => {
      * @param {string} tag
      * @param {string} shortName
      */
-    function showWorldDialog(tag, shortName = null) {
+    function showWorldDialog(tag, shortName = null, options = {}) {
         const D = worldDialog;
         const L = parseLocation(tag);
         if (L.worldId === '') {
             return;
         }
+        if (
+            !worldDialog.visible &&
+            !userStore.userDialog.visible &&
+            !avatarStore.avatarDialog.visible &&
+            !groupStore.groupDialog.visible
+        ) {
+            uiStore.clearDialogCrumbs();
+        }
+        if (!options.skipBreadcrumb) {
+            uiStore.pushDialogCrumb('world', L.worldId);
+        }
+        userStore.userDialog.visible = false;
+        avatarStore.avatarDialog.visible = false;
+        groupStore.groupDialog.visible = false;
         L.shortName = shortName;
         D.id = L.worldId;
         D.$location = L;
@@ -141,6 +161,11 @@ export const useWorldStore = defineStore('World', () => {
                 if (D.id === args.ref.id) {
                     D.loading = false;
                     D.ref = args.ref;
+                    uiStore.setDialogCrumbLabel(
+                        'world',
+                        D.id,
+                        D.ref?.name || D.id
+                    );
                     D.isFavorite = favoriteStore.getCachedFavoritesByObjectId(
                         D.id
                     );
diff --git a/src/views/Layout/AuthenticatedLayout.vue b/src/views/Layout/MainLayout.vue
similarity index 87%
rename from src/views/Layout/AuthenticatedLayout.vue
rename to src/views/Layout/MainLayout.vue
index 75affbe9..1b20134f 100644
--- a/src/views/Layout/AuthenticatedLayout.vue
+++ b/src/views/Layout/MainLayout.vue
@@ -18,10 +18,7 @@
                 <ResizablePanelGroup
                     ref="panelGroupRef"
                     direction="horizontal"
-                    :class="[
-                        'group/main-layout flex-1 h-full min-w-0',
-                        { 'aside-collapsed': isAsideCollapsedStatic }
-                    ]"
+                    :class="['group/main-layout flex-1 h-full min-w-0', { 'aside-collapsed': isAsideCollapsedStatic }]"
                     @layout="handleLayout">
                     <template #default="{ layout }">
                         <ResizablePanel :default-size="mainDefaultSize" :order="1">
@@ -46,7 +43,8 @@
                                 :max-size="asideMaxSize"
                                 :collapsed-size="0"
                                 collapsible
-                                :order="2">
+                                :order="2"
+                                :style="{ maxWidth: `${asideMaxPx}px` }">
                                 <Sidebar></Sidebar>
                             </ResizablePanel>
                         </template>
@@ -56,13 +54,7 @@
         </SidebarProvider>
 
         <!-- ## Dialogs ## -->
-        <UserDialog></UserDialog>
-
-        <WorldDialog></WorldDialog>
-
-        <AvatarDialog></AvatarDialog>
-
-        <GroupDialog></GroupDialog>
+        <MainDialogContainer></MainDialogContainer>
 
         <GroupMemberModerationDialog></GroupMemberModerationDialog>
 
@@ -102,16 +94,15 @@
     import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../../components/ui/resizable';
     import { SidebarInset, SidebarProvider } from '../../components/ui/sidebar';
     import { useAppearanceSettingsStore } from '../../stores';
-    import { useAuthenticatedLayoutResizable } from '../../composables/useAuthenticatedLayoutResizable';
+    import { useMainLayoutResizable } from '../../composables/useMainLayoutResizable';
     import { watchState } from '../../service/watchState';
 
-    import AvatarDialog from '../../components/dialogs/AvatarDialog/AvatarDialog.vue';
     import AvatarImportDialog from '../Favorites/dialogs/AvatarImportDialog.vue';
     import ChangelogDialog from '../Settings/dialogs/ChangelogDialog.vue';
     import ChooseFavoriteGroupDialog from '../../components/dialogs/ChooseFavoriteGroupDialog.vue';
+    import MainDialogContainer from '../../components/dialogs/MainDialogContainer.vue';
     import FriendImportDialog from '../Favorites/dialogs/FriendImportDialog.vue';
     import FullscreenImagePreview from '../../components/FullscreenImagePreview.vue';
-    import GroupDialog from '../../components/dialogs/GroupDialog/GroupDialog.vue';
     import GroupMemberModerationDialog from '../../components/dialogs/GroupDialog/GroupMemberModerationDialog.vue';
     import InviteGroupDialog from '../../components/dialogs/InviteGroupDialog.vue';
     import LaunchDialog from '../../components/dialogs/LaunchDialog.vue';
@@ -121,9 +112,7 @@
     import PrimaryPasswordDialog from '../Settings/dialogs/PrimaryPasswordDialog.vue';
     import SendBoopDialog from '../../components/dialogs/SendBoopDialog.vue';
     import Sidebar from '../Sidebar/Sidebar.vue';
-    import UserDialog from '../../components/dialogs/UserDialog/UserDialog.vue';
     import VRChatConfigDialog from '../Settings/dialogs/VRChatConfigDialog.vue';
-    import WorldDialog from '../../components/dialogs/WorldDialog/WorldDialog.vue';
     import WorldImportDialog from '../Favorites/dialogs/WorldImportDialog.vue';
 
     const router = useRouter();
@@ -180,16 +169,15 @@
     const {
         asideDefaultSize,
         asideMaxSize,
+        asideMaxPx,
         mainDefaultSize,
         handleLayout,
         setIsDragging,
         isAsideCollapsed,
         isSideBarTabShow
-    } = useAuthenticatedLayoutResizable();
+    } = useMainLayoutResizable();
 
-    const isAsideCollapsedStatic = computed(
-        () => !isSideBarTabShow.value || asideWidth.value === 0
-    );
+    const isAsideCollapsedStatic = computed(() => !isSideBarTabShow.value || asideWidth.value === 0);
 
     watch(
         () => watchState.isLoggedIn,