tidy up

src/components/dialogs/MainDialogContainer.vue

@@ -35,28 +35,7 @@
 
     const { previousInstancesInfoDialog, previousInstancesListDialog } = storeToRefs(instanceStore);
 
-    const isOpen = computed({
-        get: () =>
-            userStore.userDialog.visible ||
-            worldStore.worldDialog.visible ||
-            avatarStore.avatarDialog.visible ||
-            groupStore.groupDialog.visible ||
-            previousInstancesInfoDialog.value.visible ||
-            previousInstancesListDialog.value.visible,
-        set: (value) => {
-            if (!value) {
-                userStore.userDialog.visible = false;
-                worldStore.worldDialog.visible = false;
-                avatarStore.avatarDialog.visible = false;
-                groupStore.groupDialog.visible = false;
-                instanceStore.hidePreviousInstancesDialogs();
-                uiStore.clearDialogCrumbs();
-            }
-        }
-    });
-
     const dialogCrumbs = computed(() => uiStore.dialogCrumbs);
-    const activeCrumb = computed(() => dialogCrumbs.value[dialogCrumbs.value.length - 1] || null);
     const activeType = computed(() => {
         const type = (() => {
             if (previousInstancesInfoDialog.value.visible) {
@@ -77,8 +56,7 @@
             if (groupStore.groupDialog.visible) {
                 return 'group';
             }
-            const crumb = activeCrumb.value;
+            return null;
-            return crumb?.type ?? null;
         })();
         return type;
     });
@@ -116,6 +94,19 @@
                 return {};
         }
     });
+    const isOpen = computed({
+        get: () => activeComponent.value !== null,
+        set: (value) => {
+            if (!value) {
+                userStore.userDialog.visible = false;
+                worldStore.worldDialog.visible = false;
+                avatarStore.avatarDialog.visible = false;
+                groupStore.groupDialog.visible = false;
+                instanceStore.hidePreviousInstancesDialogs();
+                uiStore.clearDialogCrumbs();
+            }
+        }
+    });
 
     const dialogClass = computed(() => {
         switch (activeType.value) {

src/stores/avatar.js

@@ -190,12 +190,12 @@ export const useAvatarStore = defineStore('Avatar', () => {
             groupStore.groupDialog.visible ||
             instanceStore.previousInstancesInfoDialog.visible ||
             instanceStore.previousInstancesListDialog.visible;
-        if (!hadActiveDialog) {
+        uiStore.openDialog({
-            uiStore.clearDialogCrumbs();
+            type: 'avatar',
-        }
+            id: avatarId,
-        if (!options.skipBreadcrumb) {
+            skipBreadcrumb: options.skipBreadcrumb,
-            uiStore.pushDialogCrumb('avatar', avatarId);
+            hadActiveDialog
-        }
+        });
         instanceStore.hidePreviousInstancesDialogs();
         userStore.userDialog.visible = false;
         worldStore.worldDialog.visible = false;

src/stores/group.js

@@ -142,12 +142,12 @@ export const useGroupStore = defineStore('Group', () => {
             avatarStore.avatarDialog.visible ||
             instanceStore.previousInstancesInfoDialog.visible ||
             instanceStore.previousInstancesListDialog.visible;
-        if (!hadActiveDialog) {
+        uiStore.openDialog({
-            uiStore.clearDialogCrumbs();
+            type: 'group',
-        }
+            id: groupId,
-        if (!options.skipBreadcrumb) {
+            skipBreadcrumb: options.skipBreadcrumb,
-            uiStore.pushDialogCrumb('group', groupId);
+            hadActiveDialog
-        }
+        });
         instanceStore.hidePreviousInstancesDialogs();
         userStore.userDialog.visible = false;
         worldStore.worldDialog.visible = false;

src/stores/instance.js

@@ -290,15 +290,24 @@ export const useInstanceStore = defineStore('Instance', () => {
     }
 
     function showPreviousInstancesInfoDialog(instanceId, options = {}) {
+        const hadActiveDialog =
+            userStore.userDialog.visible ||
+            worldStore.worldDialog.visible ||
+            groupStore.groupDialog.visible ||
+            previousInstancesInfoDialog.value.visible ||
+            previousInstancesListDialog.value.visible ||
+            uiStore.dialogCrumbs.length > 0;
         hidePreviousInstancesDialogs();
         previousInstancesInfoDialog.value.visible = true;
         previousInstancesInfoDialog.value.instanceId = instanceId;
-        if (!options.skipBreadcrumb && instanceId) {
+        if (instanceId) {
-            uiStore.pushDialogCrumb(
+            uiStore.openDialog({
-                'previous-instances-info',
+                type: 'previous-instances-info',
-                instanceId,
+                id: instanceId,
-                formatPreviousInstancesInfoLabel(instanceId)
+                label: formatPreviousInstancesInfoLabel(instanceId),
-            );
+                skipBreadcrumb: options.skipBreadcrumb,
+                hadActiveDialog
+            });
             const location = parseLocation(instanceId);
             if (
                 location.worldId &&
@@ -326,6 +335,13 @@ export const useInstanceStore = defineStore('Instance', () => {
         targetRef,
         options = {}
     ) {
+        const hadActiveDialog =
+            userStore.userDialog.visible ||
+            worldStore.worldDialog.visible ||
+            groupStore.groupDialog.visible ||
+            previousInstancesInfoDialog.value.visible ||
+            previousInstancesListDialog.value.visible ||
+            uiStore.dialogCrumbs.length > 0;
         hidePreviousInstancesDialogs();
         previousInstancesListDialog.value.variant = variant;
         let resolved = null;
@@ -342,16 +358,18 @@ export const useInstanceStore = defineStore('Instance', () => {
         previousInstancesListDialog.value.visible = true;
         previousInstancesListDialog.value.openFlg = true;
         nextTick(() => (previousInstancesListDialog.value.openFlg = false));
-        if (!options.skipBreadcrumb && resolved?.id) {
+        if (resolved?.id) {
             const label =
                 variant === 'user'
                     ? resolved.displayName || resolved.id
                     : resolved.name || resolved.id;
-            uiStore.pushDialogCrumb(
+            uiStore.openDialog({
-                `previous-instances-${variant}`,
+                type: `previous-instances-${variant}`,
-                resolved.id,
+                id: resolved.id,
-                label
+                label,
-            );
+                skipBreadcrumb: options.skipBreadcrumb,
+                hadActiveDialog
+            });
         }
     }
 

src/stores/ui.js

@@ -107,6 +107,21 @@ export const useUiStore = defineStore('Ui', () => {
         dialogCrumbs.value = [];
     }
 
+    function openDialog({
+        type,
+        id,
+        label = '',
+        skipBreadcrumb = false,
+        hadActiveDialog = false
+    }) {
+        if (!hadActiveDialog) {
+            clearDialogCrumbs();
+        }
+        if (!skipBreadcrumb) {
+            pushDialogCrumb(type, id, label);
+        }
+    }
+
     // 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) {
@@ -191,6 +206,7 @@ export const useUiStore = defineStore('Ui', () => {
         pushDialogCrumb,
         setDialogCrumbLabel,
         jumpDialogCrumb,
-        clearDialogCrumbs
+        clearDialogCrumbs,
+        openDialog
     };
 });

src/stores/user.js

@@ -774,12 +774,12 @@ export const useUserStore = defineStore('User', () => {
             groupStore.groupDialog.visible ||
             instanceStore.previousInstancesInfoDialog.visible ||
             instanceStore.previousInstancesListDialog.visible;
-        if (!hadActiveDialog) {
+        uiStore.openDialog({
-            uiStore.clearDialogCrumbs();
+            type: 'user',
-        }
+            id: userId,
-        if (!options.skipBreadcrumb) {
+            skipBreadcrumb: options.skipBreadcrumb,
-            uiStore.pushDialogCrumb('user', userId);
+            hadActiveDialog
-        }
+        });
         instanceStore.hidePreviousInstancesDialogs();
         worldStore.worldDialog.visible = false;
         avatarStore.avatarDialog.visible = false;

src/stores/world.js

@@ -91,12 +91,12 @@ export const useWorldStore = defineStore('World', () => {
             groupStore.groupDialog.visible ||
             instanceStore.previousInstancesInfoDialog.visible ||
             instanceStore.previousInstancesListDialog.visible;
-        if (!hadActiveDialog) {
+        uiStore.openDialog({
-            uiStore.clearDialogCrumbs();
+            type: 'world',
-        }
+            id: L.worldId,
-        if (!options.skipBreadcrumb) {
+            skipBreadcrumb: options.skipBreadcrumb,
-            uiStore.pushDialogCrumb('world', L.worldId);
+            hadActiveDialog
-        }
+        });
         D.visible = true;
         instanceStore.hidePreviousInstancesDialogs();
         userStore.userDialog.visible = false;