change previous instance dialog navigation to use main dialog container

src/components/dialogs/UserDialog/PreviousInstancesUserDialog.vue

@@ -1,36 +1,34 @@
 <template>
-    <Dialog v-model:open="isVisible">
-        <DialogContent class="sm:max-w-250">
-            <DialogHeader>
-                <DialogTitle>{{ t('dialog.previous_instances.header') }}</DialogTitle>
-            </DialogHeader>
+    <div>
+        <DialogHeader>
+            <DialogTitle>{{ t('dialog.previous_instances.header') }}</DialogTitle>
+        </DialogHeader>
 
-            <DataTableLayout
-                class="min-w-0 w-full"
-                :table="table"
-                :loading="loading"
-                :table-style="tableStyle"
-                :page-sizes="pageSizes"
-                :total-items="totalItems"
-                :on-page-size-change="handlePageSizeChange">
-                <template #toolbar>
-                    <div style="display: flex; align-items: center; justify-content: space-between">
-                        <span style="font-size: 14px" v-text="previousInstancesUserDialog.userRef.displayName"></span>
-                        <InputGroupField
-                            v-model="search"
-                            :placeholder="t('dialog.previous_instances.search_placeholder')"
-                            clearable
-                            class="w-1/3"
-                            style="display: block" />
-                    </div>
-                </template>
-            </DataTableLayout>
-        </DialogContent>
-    </Dialog>
+        <DataTableLayout
+            class="min-w-0 w-full"
+            :table="table"
+            :loading="loading"
+            :table-style="tableStyle"
+            :page-sizes="pageSizes"
+            :total-items="totalItems"
+            :on-page-size-change="handlePageSizeChange">
+            <template #toolbar>
+                <div style="display: flex; align-items: center; justify-content: space-between">
+                    <span style="font-size: 14px" v-text="previousInstancesUserDialog.userRef.displayName"></span>
+                    <InputGroupField
+                        v-model="search"
+                        :placeholder="t('dialog.previous_instances.search_placeholder')"
+                        clearable
+                        class="w-1/3"
+                        style="display: block" />
+                </div>
+            </template>
+        </DataTableLayout>
+    </div>
 </template>
 
 <script setup>
-    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+    import { DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, ref, watch } from 'vue';
     import { InputGroupField } from '@/components/ui/input-group';
     import { storeToRefs } from 'pinia';
@@ -56,25 +54,6 @@
     import { database } from '../../../service/database';
     import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
 
-    const props = defineProps({
-        previousInstancesUserDialog: {
-            type: Object,
-            default: () => ({
-                visible: false,
-                userRef: {},
-                loading: false,
-                forceUpdate: 0,
-                previousInstances: [],
-                previousInstancesTable: {
-                    data: [],
-                    filters: [{ prop: 'displayName', value: '' }]
-                }
-            })
-        }
-    });
-
-    const emit = defineEmits(['update:previous-instances-user-dialog']);
-
     const modalStore = useModalStore();
     const loading = ref(false);
     const rawRows = ref([]);
@@ -84,22 +63,14 @@
     const tableStyle = { maxHeight: '400px' };
 
     const { showLaunchDialog } = useLaunchStore();
-    const { showPreviousInstancesInfoDialog } = useInstanceStore();
+    const instanceStore = useInstanceStore();
+    const { showPreviousInstancesInfoDialog } = instanceStore;
+    const { previousInstancesUserDialog } = storeToRefs(instanceStore);
     const { shiftHeld } = storeToRefs(useUiStore());
     const { stringComparer } = storeToRefs(useSearchStore());
     const vrcxStore = useVrcxStore();
     const { t } = useI18n();
 
-    const isVisible = computed({
-        get: () => props.previousInstancesUserDialog.visible,
-        set: (value) => {
-            emit('update:previous-instances-user-dialog', {
-                ...props.previousInstancesUserDialog,
-                visible: value
-            });
-        }
-    });
-
     const displayRows = computed(() => {
         const q = String(search.value ?? '')
             .trim()
@@ -160,7 +131,7 @@
 
     const refreshPreviousInstancesUserTable = async () => {
         loading.value = true;
-        const data = await database.getPreviousInstancesByUserId(props.previousInstancesUserDialog.userRef);
+        const data = await database.getPreviousInstancesByUserId(previousInstancesUserDialog.value.userRef);
         const array = [];
         for (const item of data.values()) {
             item.$location = parseLocation(item.location);
@@ -173,9 +144,19 @@
     };
 
     watch(
-        () => props.previousInstancesUserDialog.openFlg,
+        () => previousInstancesUserDialog.value.visible,
+        (visible) => {
+            if (visible) {
+                refreshPreviousInstancesUserTable();
+            }
+        },
+        { immediate: true }
+    );
+
+    watch(
+        () => previousInstancesUserDialog.value.openFlg,
         () => {
-            if (props.previousInstancesUserDialog.visible) {
+            if (previousInstancesUserDialog.value.visible) {
                 refreshPreviousInstancesUserTable();
             }
         }
@@ -183,8 +164,8 @@
 
     function deleteGameLogUserInstance(row) {
         database.deleteGameLogInstance({
-            id: props.previousInstancesUserDialog.userRef.id,
-            displayName: props.previousInstancesUserDialog.userRef.displayName,
+            id: previousInstancesUserDialog.value.userRef.id,
+            displayName: previousInstancesUserDialog.value.userRef.displayName,
             location: row.location,
             events: row.events
         });

src/components/dialogs/UserDialog/UserDialog.vue

@@ -1176,7 +1176,6 @@
             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" />
@@ -1256,6 +1255,7 @@
         useFriendStore,
         useGalleryStore,
         useGroupStore,
+        useInstanceStore,
         useInviteStore,
         useLocationStore,
         useModalStore,
@@ -1285,7 +1285,6 @@
 
     const BioDialog = defineAsyncComponent(() => import('./BioDialog.vue'));
     const LanguageDialog = defineAsyncComponent(() => import('./LanguageDialog.vue'));
-    const PreviousInstancesUserDialog = defineAsyncComponent(() => import('./PreviousInstancesUserDialog.vue'));
     const PronounsDialog = defineAsyncComponent(() => import('./PronounsDialog.vue'));
     const SendInviteRequestDialog = defineAsyncComponent(() => import('./SendInviteRequestDialog.vue'));
     const SocialStatusDialog = defineAsyncComponent(() => import('./SocialStatusDialog.vue'));
@@ -1315,6 +1314,7 @@
     );
 
     const modalStore = useModalStore();
+    const instanceStore = useInstanceStore();
 
     const { hideUserNotes, hideUserMemos, isDarkMode } = storeToRefs(useAppearanceSettingsStore());
     const { bioLanguage, avatarRemoteDatabase, translationApi, translationApiType } =
@@ -1402,12 +1402,6 @@
     });
     const sendInviteRequestDialogVisible = ref(false);
 
-    const previousInstancesUserDialog = ref({
-        visible: false,
-        openFlg: false,
-        userRef: {}
-    });
-
     const socialStatusDialog = ref({
         visible: false,
         loading: false,
@@ -2314,12 +2308,7 @@
     }
 
     function showPreviousInstancesUserDialog(userRef) {
-        const D = previousInstancesUserDialog.value;
-        D.userRef = userRef;
-        D.visible = true;
-        // trigger watcher
-        D.openFlg = true;
-        nextTick(() => (D.openFlg = false));
+        instanceStore.showPreviousInstancesUserDialog(userRef);
     }
 
     function toggleAvatarCopying() {