feat: add breadcrumb components and main dialog layout functionality

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)) {

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

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
     };
 });

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 || '');

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
                     );