merge previous instances dialog

src/components/dialogs/MainDialogContainer.vue

@@ -21,10 +21,8 @@
 
     import AvatarDialog from './AvatarDialog/AvatarDialog.vue';
     import GroupDialog from './GroupDialog/GroupDialog.vue';
-    import PreviousInstancesGroupDialog from './PreviousInstancesDialog/PreviousInstancesGroupDialog.vue';
     import PreviousInstancesInfoDialog from './PreviousInstancesDialog/PreviousInstancesInfoDialog.vue';
-    import PreviousInstancesUserDialog from './UserDialog/PreviousInstancesUserDialog.vue';
+    import PreviousInstancesListDialog from './PreviousInstancesDialog/PreviousInstancesListDialog.vue';
-    import PreviousInstancesWorldDialog from './PreviousInstancesDialog/PreviousInstancesWorldDialog.vue';
     import UserDialog from './UserDialog/UserDialog.vue';
     import WorldDialog from './WorldDialog/WorldDialog.vue';
 
@@ -37,6 +35,7 @@
 
     const {
         previousInstancesInfoDialogVisible,
+        previousInstancesInfoDialogInstanceId,
         previousInstancesUserDialog,
         previousInstancesWorldDialog,
         previousInstancesGroupDialog
@@ -67,8 +66,18 @@
     const dialogCrumbs = computed(() => uiStore.dialogCrumbs);
     const activeCrumb = computed(() => dialogCrumbs.value[dialogCrumbs.value.length - 1] || null);
     const activeType = computed(() => {
-        if (activeCrumb.value?.type) {
+        const type = (() => {
-            return activeCrumb.value.type;
+            if (previousInstancesInfoDialogVisible.value) {
+                return 'previous-instances-info';
+            }
+            if (previousInstancesUserDialog.value.visible) {
+                return 'previous-instances-user';
+            }
+            if (previousInstancesWorldDialog.value.visible) {
+                return 'previous-instances-world';
+            }
+            if (previousInstancesGroupDialog.value.visible) {
+                return 'previous-instances-group';
             }
             if (userStore.userDialog.visible) {
                 return 'user';
@@ -82,19 +91,18 @@
             if (groupStore.groupDialog.visible) {
                 return 'group';
             }
-        if (previousInstancesInfoDialogVisible.value) {
+            const crumb = activeCrumb.value;
-            return 'previous-instances-info';
+            return crumb?.type ?? null;
-        }
+        })();
-        if (previousInstancesUserDialog.value.visible) {
+        console.log('[prev-instances] activeType', {
-            return 'previous-instances-user';
+            type,
-        }
+            infoVisible: previousInstancesInfoDialogVisible.value,
-        if (previousInstancesWorldDialog.value.visible) {
+            infoId: previousInstancesInfoDialogInstanceId.value,
-            return 'previous-instances-world';
+            userVisible: previousInstancesUserDialog.value.visible,
-        }
+            worldVisible: previousInstancesWorldDialog.value.visible,
-        if (previousInstancesGroupDialog.value.visible) {
+            groupVisible: previousInstancesGroupDialog.value.visible
-            return 'previous-instances-group';
+        });
-        }
+        return type;
-        return null;
     });
     const activeComponent = computed(() => {
         switch (activeType.value) {
@@ -109,15 +117,28 @@
             case 'previous-instances-info':
                 return PreviousInstancesInfoDialog;
             case 'previous-instances-user':
-                return PreviousInstancesUserDialog;
+                return PreviousInstancesListDialog;
             case 'previous-instances-world':
-                return PreviousInstancesWorldDialog;
+                return PreviousInstancesListDialog;
             case 'previous-instances-group':
-                return PreviousInstancesGroupDialog;
+                return PreviousInstancesListDialog;
             default:
                 return null;
         }
     });
+    const activeComponentProps = computed(() => {
+        switch (activeType.value) {
+            case 'previous-instances-user':
+                return { variant: 'user' };
+            case 'previous-instances-world':
+                return { variant: 'world' };
+            case 'previous-instances-group':
+                return { variant: 'group' };
+            default:
+                return {};
+        }
+    });
+
     const dialogClass = computed(() => {
         switch (activeType.value) {
             case 'world':
@@ -137,13 +158,6 @@
         }
     });
 
-    const keepAliveInclude = [
-        'PreviousInstancesInfoDialog',
-        'PreviousInstancesUserDialog',
-        'PreviousInstancesWorldDialog',
-        'PreviousInstancesGroupDialog'
-    ];
-
     const shouldShowBreadcrumbs = computed(() => dialogCrumbs.value.length > 1);
     const shouldCollapseBreadcrumbs = computed(() => dialogCrumbs.value.length > 5);
     const middleBreadcrumbs = computed(() => {
@@ -199,7 +213,10 @@
 
 <template>
     <Dialog v-model:open="isOpen">
-        <DialogContent :class="dialogClass" style="top: 10vh" :show-close-button="false">
+        <DialogContent
+            :class="dialogClass"
+            style="top: 10vh"
+            :show-close-button="false">
             <Breadcrumb v-if="shouldShowBreadcrumbs" class="mb-2">
                 <BreadcrumbList>
                     <template v-if="shouldCollapseBreadcrumbs">
@@ -274,9 +291,7 @@
                 </BreadcrumbList>
             </Breadcrumb>
 
-            <KeepAlive :include="keepAliveInclude">
+            <component :is="activeComponent" v-if="activeComponent" v-bind="activeComponentProps" :key="activeType" />
-                <component :is="activeComponent" v-if="activeComponent" />
-            </KeepAlive>
         </DialogContent>
     </Dialog>
 </template>

src/components/dialogs/PreviousInstancesDialog/PreviousInstancesGroupDialog.vue

@@ -1,181 +0,0 @@
-<template>
-    <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="previousInstancesGroupDialog.groupRef.name"></span>
-                    <InputGroupField
-                        class="w-1/3"
-                        v-model="search"
-                        :placeholder="t('dialog.previous_instances.search_placeholder')"
-                        clearable />
-                </div>
-            </template>
-        </DataTableLayout>
-    </div>
-</template>
-
-<script setup>
-    defineOptions({ name: 'PreviousInstancesGroupDialog' });
-
-    import { computed, ref, watch } from 'vue';
-    import { DialogHeader, DialogTitle } from '@/components/ui/dialog';
-    import { InputGroupField } from '@/components/ui/input-group';
-    import { storeToRefs } from 'pinia';
-    import { useI18n } from 'vue-i18n';
-
-    import {
-        compareByCreatedAt,
-        localeIncludes,
-        parseLocation,
-        removeFromArray,
-        timeToText
-    } from '../../../shared/utils';
-    import { useInstanceStore, useModalStore, useSearchStore, useUiStore, useVrcxStore } from '../../../stores';
-    import { DataTableLayout } from '../../ui/data-table';
-    import { createColumns } from './previousInstancesGroupColumns.jsx';
-    import { database } from '../../../service/database';
-    import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
-
-    const instanceStore = useInstanceStore();
-    const { showPreviousInstancesInfoDialog } = instanceStore;
-    const { previousInstancesGroupDialog } = storeToRefs(instanceStore);
-    const { shiftHeld } = useUiStore();
-    const { stringComparer } = storeToRefs(useSearchStore());
-    const { t } = useI18n();
-
-    const loading = ref(false);
-
-    const modalStore = useModalStore();
-
-    const vrcxStore = useVrcxStore();
-    const rawRows = ref([]);
-    const pageSizes = [10, 25, 50, 100];
-    const pageSize = ref(10);
-    const tableStyle = { maxHeight: '400px' };
-    const search = ref('');
-
-    const displayRows = computed(() => {
-        const q = String(search.value ?? '')
-            .trim()
-            .toLowerCase();
-        const rows = Array.isArray(rawRows.value) ? rawRows.value : [];
-        if (!q) return rows;
-        return rows.filter((row) => {
-            return (
-                localeIncludes(row?.worldName ?? '', q, stringComparer.value) ||
-                localeIncludes(row?.groupName ?? '', q, stringComparer.value) ||
-                localeIncludes(row?.location ?? '', q, stringComparer.value)
-            );
-        });
-    });
-
-    const columns = computed(() =>
-        createColumns({
-            shiftHeld,
-            onShowInfo: showPreviousInstancesInfoDialog,
-            onDelete: deleteGameLogGroupInstance,
-            onDeletePrompt: deleteGameLogGroupInstancePrompt
-        })
-    );
-
-    const { table } = useVrcxVueTable({
-        persistKey: 'previousInstancesGroupDialog',
-        data: displayRows,
-        columns: columns.value,
-        getRowId: (row) => `${row?.location ?? ''}:${row?.created_at ?? ''}`,
-        initialSorting: [{ id: 'created_at', desc: true }],
-        initialPagination: {
-            pageIndex: 0,
-            pageSize: pageSize.value
-        },
-        tableOptions: {
-            autoResetPageIndex: false
-        }
-    });
-
-    watch(
-        columns,
-        (next) => {
-            table.setOptions((prev) => ({
-                ...prev,
-                columns: /** @type {any} */ (next)
-            }));
-        },
-        { immediate: true }
-    );
-
-    const totalItems = computed(() => {
-        const length = table.getFilteredRowModel().rows.length;
-        const max = vrcxStore.maxTableSize;
-        return length > max && length < max + 51 ? max : length;
-    });
-
-    const handlePageSizeChange = (size) => {
-        pageSize.value = size;
-    };
-
-    watch(
-        () => previousInstancesGroupDialog.value.visible,
-        (visible) => {
-            if (visible) {
-                refreshPreviousInstancesGroupTable();
-            }
-        },
-        { immediate: true }
-    );
-
-    watch(
-        () => previousInstancesGroupDialog.value.openFlg,
-        () => {
-            if (previousInstancesGroupDialog.value.visible) {
-                refreshPreviousInstancesGroupTable();
-            }
-        }
-    );
-
-    function refreshPreviousInstancesGroupTable() {
-        loading.value = true;
-        const D = previousInstancesGroupDialog.value;
-        database.getPreviousInstancesByGroupId(D.groupRef.id).then((data) => {
-            const array = [];
-            for (const ref of data.values()) {
-                ref.$location = parseLocation(ref.location);
-                ref.timer = ref.time > 0 ? timeToText(ref.time) : '';
-                array.push(ref);
-            }
-            array.sort(compareByCreatedAt);
-            rawRows.value = array;
-            loading.value = false;
-        });
-    }
-
-    function deleteGameLogGroupInstance(row) {
-        database.deleteGameLogInstanceByInstanceId({ location: row.location });
-        removeFromArray(rawRows.value, row);
-    }
-
-    function deleteGameLogGroupInstancePrompt(row) {
-        modalStore
-            .confirm({
-                description: 'Continue? Delete GameLog Instance',
-                title: 'Confirm'
-            })
-            .then(({ ok }) => {
-                if (!ok) return;
-                deleteGameLogGroupInstance(row);
-            })
-            .catch(() => {});
-    }
-</script>

src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue

@@ -77,7 +77,6 @@
         strict: false,
         ageGate: false
     });
-    const fullscreen = ref(false);
 
     const { stringComparer } = storeToRefs(useSearchStore());
     const vrcxStore = useVrcxStore();

src/components/dialogs/PreviousInstancesDialog/PreviousInstancesListDialog.vue

@@ -0,0 +1,299 @@
+<template>
+    <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"
+            :on-page-change="handlePageChange">
+            <template #toolbar>
+                <div style="display: flex; align-items: center; justify-content: space-between">
+                    <span style="font-size: 14px" v-text="headerText"></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>
+    defineOptions({ name: 'PreviousInstancesListDialog' });
+
+    import { computed, ref, watch } from 'vue';
+    import { DialogHeader, DialogTitle } from '@/components/ui/dialog';
+    import { InputGroupField } from '@/components/ui/input-group';
+    import { storeToRefs } from 'pinia';
+    import { useI18n } from 'vue-i18n';
+
+    import {
+        useInstanceStore,
+        useLaunchStore,
+        useModalStore,
+        useSearchStore,
+        useUiStore,
+        useUserStore,
+        useVrcxStore
+    } from '../../../stores';
+    import {
+        compareByCreatedAt,
+        localeIncludes,
+        parseLocation,
+        removeFromArray,
+        timeToText
+    } from '../../../shared/utils';
+    import { DataTableLayout } from '../../ui/data-table';
+    import { createPreviousInstancesColumns } from './previousInstancesColumns.jsx';
+    import { database } from '../../../service/database';
+    import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
+
+    const props = defineProps({
+        variant: {
+            type: String,
+            required: true,
+            validator: (value) => ['user', 'world', 'group'].includes(value)
+        }
+    });
+
+    const instanceStore = useInstanceStore();
+    const { showPreviousInstancesInfoDialog } = instanceStore;
+    const {
+        previousInstancesInfoDialogVisible,
+        previousInstancesInfoDialogInstanceId,
+        previousInstancesListState,
+        previousInstancesUserDialog,
+        previousInstancesWorldDialog,
+        previousInstancesGroupDialog
+    } = storeToRefs(instanceStore);
+    const { shiftHeld } = storeToRefs(useUiStore());
+    const { stringComparer } = storeToRefs(useSearchStore());
+    const { currentUser } = storeToRefs(useUserStore());
+    const { showLaunchDialog } = useLaunchStore();
+    const modalStore = useModalStore();
+    const vrcxStore = useVrcxStore();
+    const { t } = useI18n();
+
+    const dialogState = computed(() => {
+        if (props.variant === 'user') return previousInstancesUserDialog.value;
+        if (props.variant === 'world') return previousInstancesWorldDialog.value;
+        return previousInstancesGroupDialog.value;
+    });
+
+    const getListState = () => {
+        const state = previousInstancesListState.value[props.variant];
+        if (state) {
+            return state;
+        }
+        previousInstancesListState.value[props.variant] = {
+            search: '',
+            pageSize: 10,
+            pageIndex: 0
+        };
+        return previousInstancesListState.value[props.variant];
+    };
+
+    const loading = ref(false);
+    const rawRows = ref([]);
+    const pageSizes = [10, 25, 50, 100];
+    const pageSize = computed({
+        get: () => getListState().pageSize,
+        set: (value) => {
+            getListState().pageSize = value;
+        }
+    });
+    const tableStyle = { maxHeight: '400px' };
+    const search = computed({
+        get: () => getListState().search,
+        set: (value) => {
+            getListState().search = value;
+        }
+    });
+
+    const headerText = computed(() => {
+        const state = dialogState.value;
+        if (props.variant === 'user') return state?.userRef?.displayName ?? '';
+        if (props.variant === 'world') return state?.worldRef?.name ?? '';
+        return state?.groupRef?.name ?? '';
+    });
+
+    const persistKey = computed(() => {
+        if (props.variant === 'user') return 'previousInstancesUserDialog';
+        if (props.variant === 'world') return 'previousInstancesWorldDialog';
+        return 'previousInstancesGroupDialog';
+    });
+
+    const pageIndex = computed({
+        get: () => getListState().pageIndex,
+        set: (value) => {
+            getListState().pageIndex = value;
+        }
+    });
+
+    const displayRows = computed(() => {
+        const q = String(search.value ?? '')
+            .trim()
+            .toLowerCase();
+        const rows = Array.isArray(rawRows.value) ? rawRows.value : [];
+        if (!q) return rows;
+        return rows.filter((row) => {
+            return (
+                localeIncludes(row?.worldName ?? '', q, stringComparer.value) ||
+                localeIncludes(row?.groupName ?? '', q, stringComparer.value) ||
+                localeIncludes(row?.location ?? '', q, stringComparer.value)
+            );
+        });
+    });
+
+    function deleteGameLogInstance(row) {
+        if (props.variant === 'user') {
+            database.deleteGameLogInstance({
+                id: previousInstancesUserDialog.value.userRef.id,
+                displayName: previousInstancesUserDialog.value.userRef.displayName,
+                location: row.location,
+                events: row.events
+            });
+        } else {
+            database.deleteGameLogInstanceByInstanceId({ location: row.location });
+        }
+        removeFromArray(rawRows.value, row);
+    }
+
+    function deleteGameLogInstancePrompt(row) {
+        const description =
+            props.variant === 'user'
+                ? 'Continue? Delete User From GameLog Instance'
+                : 'Continue? Delete GameLog Instance';
+        modalStore
+            .confirm({
+                description,
+                title: 'Confirm'
+            })
+            .then(({ ok }) => {
+                if (!ok) return;
+                deleteGameLogInstance(row);
+            })
+            .catch(() => {});
+    }
+
+    const handleShowInfo = (location) => {
+        const instanceId = location ?? '';
+        showPreviousInstancesInfoDialog(instanceId);
+    };
+
+    const columns = computed(() =>
+        createPreviousInstancesColumns(props.variant, {
+            shiftHeld,
+            currentUserId: currentUser.value?.id,
+            forceUpdateKey: previousInstancesWorldDialog.value?.forceUpdate,
+            onLaunch: showLaunchDialog,
+            onShowInfo: handleShowInfo,
+            onDelete: deleteGameLogInstance,
+            onDeletePrompt: deleteGameLogInstancePrompt
+        })
+    );
+
+    const { table } = useVrcxVueTable({
+        persistKey: persistKey.value,
+        data: displayRows,
+        columns: columns.value,
+        getRowId: (row) => `${row?.location ?? ''}:${row?.created_at ?? ''}`,
+        initialSorting: [{ id: 'created_at', desc: true }],
+        initialPagination: {
+            pageIndex: pageIndex.value,
+            pageSize: pageSize.value
+        },
+        tableOptions: {
+            autoResetPageIndex: false
+        }
+    });
+
+    watch(
+        columns,
+        (next) => {
+            table.setOptions((prev) => ({
+                ...prev,
+                columns: /** @type {any} */ (next)
+            }));
+        },
+        { immediate: true }
+    );
+
+    const totalItems = computed(() => {
+        const length = table.getFilteredRowModel().rows.length;
+        const max = vrcxStore.maxTableSize;
+        return length > max && length < max + 51 ? max : length;
+    });
+
+    const handlePageSizeChange = (size) => {
+        pageSize.value = size;
+    };
+
+    const handlePageChange = (page) => {
+        pageIndex.value = Math.max(0, page - 1);
+    };
+
+    const refreshTable = async () => {
+        loading.value = true;
+        const array = [];
+        try {
+            if (props.variant === 'user') {
+                const data = await database.getPreviousInstancesByUserId(previousInstancesUserDialog.value.userRef);
+                for (const item of data.values()) {
+                    item.$location = parseLocation(item.location);
+                    item.timer = item.time > 0 ? timeToText(item.time) : '';
+                    array.push(item);
+                }
+            } else if (props.variant === 'world') {
+                const D = previousInstancesWorldDialog.value;
+                const data = await database.getPreviousInstancesByWorldId(D.worldRef);
+                for (const ref of data.values()) {
+                    ref.$location = parseLocation(ref.location);
+                    ref.timer = ref.time > 0 ? timeToText(ref.time) : '';
+                    array.push(ref);
+                }
+            } else {
+                const D = previousInstancesGroupDialog.value;
+                const data = await database.getPreviousInstancesByGroupId(D.groupRef.id);
+                for (const ref of data.values()) {
+                    ref.$location = parseLocation(ref.location);
+                    ref.timer = ref.time > 0 ? timeToText(ref.time) : '';
+                    array.push(ref);
+                }
+            }
+            array.sort(compareByCreatedAt);
+            rawRows.value = array;
+        } finally {
+            loading.value = false;
+        }
+    };
+
+    watch(
+        () => dialogState.value?.visible,
+        (visible) => {
+            if (visible) {
+                refreshTable();
+            }
+        },
+        { immediate: true }
+    );
+
+    watch(
+        () => dialogState.value?.openFlg,
+        () => {
+            if (dialogState.value?.visible) {
+                refreshTable();
+            }
+        }
+    );
+</script>

src/components/dialogs/PreviousInstancesDialog/PreviousInstancesWorldDialog.vue

@@ -1,192 +0,0 @@
-<template>
-    <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="previousInstancesWorldDialog.worldRef.name"></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>
-    defineOptions({ name: 'PreviousInstancesWorldDialog' });
-
-    import { computed, ref, watch } from 'vue';
-    import { DialogHeader, DialogTitle } from '@/components/ui/dialog';
-    import { InputGroupField } from '@/components/ui/input-group';
-    import { storeToRefs } from 'pinia';
-    import { useI18n } from 'vue-i18n';
-
-    import {
-        useInstanceStore,
-        useModalStore,
-        useSearchStore,
-        useUiStore,
-        useUserStore,
-        useVrcxStore
-    } from '../../../stores';
-    import {
-        compareByCreatedAt,
-        localeIncludes,
-        parseLocation,
-        removeFromArray,
-        timeToText
-    } from '../../../shared/utils';
-    import { DataTableLayout } from '../../ui/data-table';
-    import { createColumns } from './previousInstancesWorldColumns.jsx';
-    import { database } from '../../../service/database';
-    import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
-
-    const { t } = useI18n();
-
-    const modalStore = useModalStore();
-
-    const instanceStore = useInstanceStore();
-    const { showPreviousInstancesInfoDialog } = instanceStore;
-    const { previousInstancesWorldDialog } = storeToRefs(instanceStore);
-    const { shiftHeld } = storeToRefs(useUiStore());
-    const { currentUser } = storeToRefs(useUserStore());
-    const { stringComparer } = storeToRefs(useSearchStore());
-
-    const vrcxStore = useVrcxStore();
-    const rawRows = ref([]);
-    const pageSizes = [10, 25, 50, 100];
-    const pageSize = ref(10);
-    const tableStyle = { maxHeight: '400px' };
-    const loading = ref(false);
-    const search = ref('');
-
-    const displayRows = computed(() => {
-        const q = String(search.value ?? '')
-            .trim()
-            .toLowerCase();
-        const rows = Array.isArray(rawRows.value) ? rawRows.value : [];
-        if (!q) return rows;
-        return rows.filter((row) => {
-            return (
-                localeIncludes(row?.worldName ?? '', q, stringComparer.value) ||
-                localeIncludes(row?.groupName ?? '', q, stringComparer.value) ||
-                localeIncludes(row?.location ?? '', q, stringComparer.value)
-            );
-        });
-    });
-
-    const columns = computed(() =>
-        createColumns({
-            shiftHeld,
-            currentUserId: currentUser.value?.id,
-            forceUpdateKey: previousInstancesWorldDialog.value?.forceUpdate,
-            onShowInfo: showPreviousInstancesInfoDialog,
-            onDelete: deleteGameLogWorldInstance,
-            onDeletePrompt: deleteGameLogWorldInstancePrompt
-        })
-    );
-
-    const { table } = useVrcxVueTable({
-        persistKey: 'previousInstancesWorldDialog',
-        data: displayRows,
-        columns: columns.value,
-        getRowId: (row) => `${row?.location ?? ''}:${row?.created_at ?? ''}`,
-        initialSorting: [{ id: 'created_at', desc: true }],
-        initialPagination: {
-            pageIndex: 0,
-            pageSize: pageSize.value
-        },
-        tableOptions: {
-            autoResetPageIndex: false
-        }
-    });
-
-    watch(
-        columns,
-        (next) => {
-            table.setOptions((prev) => ({
-                ...prev,
-                columns: /** @type {any} */ (next)
-            }));
-        },
-        { immediate: true }
-    );
-
-    const totalItems = computed(() => {
-        const length = table.getFilteredRowModel().rows.length;
-        const max = vrcxStore.maxTableSize;
-        return length > max && length < max + 51 ? max : length;
-    });
-
-    const handlePageSizeChange = (size) => {
-        pageSize.value = size;
-    };
-
-    function refreshPreviousInstancesWorldTable() {
-        loading.value = true;
-        const D = previousInstancesWorldDialog.value;
-        database.getPreviousInstancesByWorldId(D.worldRef).then((data) => {
-            const array = [];
-            for (const ref of data.values()) {
-                ref.$location = parseLocation(ref.location);
-                ref.timer = ref.time > 0 ? timeToText(ref.time) : '';
-                array.push(ref);
-            }
-            array.sort(compareByCreatedAt);
-            rawRows.value = array;
-            loading.value = false;
-        });
-    }
-
-    function deleteGameLogWorldInstance(row) {
-        database.deleteGameLogInstanceByInstanceId({ location: row.location });
-        removeFromArray(rawRows.value, row);
-    }
-
-    function deleteGameLogWorldInstancePrompt(row) {
-        modalStore
-            .confirm({
-                description: 'Continue? Delete GameLog Instance',
-                title: 'Confirm'
-            })
-            .then(({ ok }) => {
-                if (!ok) return;
-                deleteGameLogWorldInstance(row);
-            })
-            .catch(() => {});
-    }
-
-    watch(
-        () => previousInstancesWorldDialog.value.visible,
-        (visible) => {
-            if (visible) {
-                refreshPreviousInstancesWorldTable();
-            }
-        },
-        { immediate: true }
-    );
-
-    watch(
-        () => previousInstancesWorldDialog.value.openFlg,
-        () => {
-            if (previousInstancesWorldDialog.value.visible) {
-                refreshPreviousInstancesWorldTable();
-            }
-        }
-    );
-</script>

src/components/dialogs/PreviousInstancesDialog/previousInstancesColumns.jsx

@@ -0,0 +1,229 @@
+import { ArrowUpDown, Info, LogIn, Trash2 } from 'lucide-vue-next';
+
+import DisplayName from '../../DisplayName.vue';
+import Location from '../../Location.vue';
+import LocationWorld from '../../LocationWorld.vue';
+import { Button } from '../../ui/button';
+import { i18n } from '../../../plugin';
+import { formatDateFilter } from '../../../shared/utils';
+
+const { t } = i18n.global;
+
+const sortButton = ({ column, label, descFirst = false }) => (
+    <Button
+        variant="ghost"
+        size="sm"
+        class="-ml-2 h-8 px-2"
+        onClick={() => {
+            const sorted = column.getIsSorted();
+            if (!sorted && descFirst) {
+                column.toggleSorting(true);
+                return;
+            }
+            column.toggleSorting(sorted === 'asc');
+        }}
+    >
+        {label}
+        <ArrowUpDown class="ml-1 h-4 w-4" />
+    </Button>
+);
+
+const resolveBool = (maybeRef) => {
+    if (maybeRef && typeof maybeRef === 'object' && 'value' in maybeRef) {
+        return !!maybeRef.value;
+    }
+    return !!maybeRef;
+};
+
+const baseDateColumn = () => ({
+    id: 'created_at',
+    accessorFn: (row) => (row?.created_at ? Date.parse(row.created_at) : 0),
+    size: 170,
+    header: ({ column }) =>
+        sortButton({
+            column,
+            label: t('table.previous_instances.date'),
+            descFirst: true
+        }),
+    cell: ({ row }) => <span>{formatDateFilter(row.original?.created_at, 'long')}</span>
+});
+
+const timeColumn = () => ({
+    id: 'time',
+    accessorFn: (row) => row?.time ?? 0,
+    size: 100,
+    header: ({ column }) => sortButton({ column, label: t('table.previous_instances.time') }),
+    cell: ({ row }) => <span>{row.original?.timer ?? ''}</span>
+});
+
+const actionsColumn = ({ shiftHeld, onShowInfo, onDelete, onDeletePrompt, onLaunch }) => ({
+    id: 'actions',
+    enableSorting: false,
+    size: onLaunch ? 140 : 120,
+    header: () => t('table.previous_instances.action'),
+    meta: {
+        thClass: 'text-right',
+        tdClass: 'text-right'
+    },
+    cell: ({ row }) => {
+        const original = row.original;
+        const isShiftHeld = resolveBool(shiftHeld);
+
+        return (
+            <div class="inline-flex items-center justify-end gap-1">
+                {onLaunch ? (
+                    <Button
+                        size="icon-sm"
+                        variant="ghost"
+                        class="w-6 h-6 text-xs"
+                        onClick={(event) => {
+                            event.stopPropagation();
+                            onLaunch?.(original?.location);
+                        }}
+                    >
+                        <LogIn class="h-4 w-4" />
+                    </Button>
+                ) : null}
+
+                <Button
+                    size="icon-sm"
+                    variant="ghost"
+                    class="w-6 h-6 text-xs"
+                    onClick={(event) => {
+                        event.stopPropagation();
+                        onShowInfo?.(original?.$location?.tag);
+                    }}
+                >
+                    <Info class="h-4 w-4" />
+                </Button>
+
+                <Button
+                    size="icon-sm"
+                    variant="ghost"
+                    class="w-6 h-6 text-xs"
+                    style={isShiftHeld ? { color: '#f56c6c' } : undefined}
+                    onClick={(event) => {
+                        event.stopPropagation();
+                        if (isShiftHeld) {
+                            onDelete?.(original);
+                        } else {
+                            onDeletePrompt?.(original);
+                        }
+                    }}
+                >
+                    <Trash2 class="h-4 w-4" />
+                </Button>
+            </div>
+        );
+    }
+});
+
+export const createPreviousInstancesColumns = (variant, config) => {
+    if (variant === 'user') {
+        return [
+            baseDateColumn(),
+            {
+                id: 'world',
+                accessorFn: (row) => row?.worldName ?? row?.name ?? '',
+                header: ({ column }) => sortButton({ column, label: t('table.previous_instances.world') }),
+                meta: {
+                    stretch: true
+                },
+                cell: ({ row }) => (
+                    <Location
+                        location={row.original?.location}
+                        hint={row.original?.worldName}
+                        grouphint={row.original?.groupName}
+                    />
+                )
+            },
+            {
+                id: 'creator',
+                accessorFn: (row) => row?.$location?.userId ?? '',
+                size: 170,
+                header: () => t('table.previous_instances.instance_creator'),
+                cell: ({ row }) => (
+                    <DisplayName
+                        userid={row.original?.$location?.userId}
+                        location={row.original?.$location?.tag}
+                    />
+                )
+            },
+            timeColumn(),
+            actionsColumn({
+                shiftHeld: config.shiftHeld,
+                onLaunch: config.onLaunch,
+                onShowInfo: config.onShowInfo,
+                onDelete: config.onDelete,
+                onDeletePrompt: config.onDeletePrompt
+            })
+        ];
+    }
+
+    if (variant === 'world') {
+        return [
+            baseDateColumn(),
+            {
+                id: 'instance',
+                accessorFn: (row) => row?.$location?.tag ?? row?.location ?? '',
+                header: () => t('table.previous_instances.instance_name'),
+                meta: {
+                    stretch: true
+                },
+                cell: ({ row }) => (
+                    <LocationWorld
+                        locationobject={row.original?.$location}
+                        grouphint={row.original?.groupName}
+                        currentuserid={config.currentUserId}
+                    />
+                )
+            },
+            {
+                id: 'creator',
+                accessorFn: (row) => row?.$location?.userId ?? '',
+                size: 170,
+                header: () => t('table.previous_instances.instance_creator'),
+                cell: ({ row }) => (
+                    <DisplayName
+                        userid={row.original?.$location?.userId}
+                        location={row.original?.$location?.tag}
+                        forceUpdateKey={config.forceUpdateKey}
+                    />
+                )
+            },
+            timeColumn(),
+            actionsColumn({
+                shiftHeld: config.shiftHeld,
+                onShowInfo: config.onShowInfo,
+                onDelete: config.onDelete,
+                onDeletePrompt: config.onDeletePrompt
+            })
+        ];
+    }
+
+    return [
+        baseDateColumn(),
+        {
+            id: 'instance',
+            accessorFn: (row) => row?.worldName ?? row?.name ?? '',
+            header: () => t('table.previous_instances.instance_name'),
+            meta: {
+                stretch: true
+            },
+            cell: ({ row }) => (
+                <Location
+                    location={row.original?.$location?.tag ?? row.original?.location}
+                    grouphint={row.original?.groupName}
+                    hint={row.original?.worldName}
+                />
+            )
+        },
+        timeColumn(),
+        actionsColumn({
+            shiftHeld: config.shiftHeld,
+            onShowInfo: config.onShowInfo,
+            onDelete: config.onDelete,
+            onDeletePrompt: config.onDeletePrompt
+        })
+    ];
+};

src/components/dialogs/PreviousInstancesDialog/previousInstancesGroupColumns.jsx

@@ -1,123 +0,0 @@
-import { ArrowUpDown, Info, Trash2 } from 'lucide-vue-next';
-
-import Location from '../../Location.vue';
-import { Button } from '../../ui/button';
-import { i18n } from '../../../plugin';
-import { formatDateFilter } from '../../../shared/utils';
-
-const { t } = i18n.global;
-
-const sortButton = ({ column, label, descFirst = false }) => (
-    <Button
-        variant="ghost"
-        size="sm"
-        class="-ml-2 h-8 px-2"
-        onClick={() => {
-            const sorted = column.getIsSorted();
-            if (!sorted && descFirst) {
-                column.toggleSorting(true);
-                return;
-            }
-            column.toggleSorting(sorted === 'asc');
-        }}
-    >
-        {label}
-        <ArrowUpDown class="ml-1 h-4 w-4" />
-    </Button>
-);
-
-const resolveBool = (maybeRef) => {
-    if (maybeRef && typeof maybeRef === 'object' && 'value' in maybeRef) {
-        return !!maybeRef.value;
-    }
-    return !!maybeRef;
-};
-
-export const createColumns = ({ shiftHeld, onShowInfo, onDelete, onDeletePrompt }) => [
-    {
-        id: 'created_at',
-        accessorFn: (row) => (row?.created_at ? Date.parse(row.created_at) : 0),
-        size: 170,
-        header: ({ column }) =>
-            sortButton({
-                column,
-                label: t('table.previous_instances.date'),
-                descFirst: true
-            }),
-        cell: ({ row }) => (
-            <span>{formatDateFilter(row.original?.created_at, 'long')}</span>
-        )
-    },
-    {
-        id: 'instance',
-        accessorFn: (row) => row?.worldName ?? row?.name ?? '',
-        header: () => t('table.previous_instances.instance_name'),
-        meta: {
-            stretch: true
-        },
-        cell: ({ row }) => (
-            <Location
-                location={
-                    row.original?.$location?.tag ?? row.original?.location
-                }
-                grouphint={row.original?.groupName}
-                hint={row.original?.worldName}
-            />
-        )
-    },
-    {
-        id: 'time',
-        accessorFn: (row) => row?.time ?? 0,
-        size: 100,
-        header: ({ column }) =>
-            sortButton({ column, label: t('table.previous_instances.time') }),
-        cell: ({ row }) => <span>{row.original?.timer ?? ''}</span>
-    },
-    {
-        id: 'actions',
-        enableSorting: false,
-        size: 120,
-        header: () => t('table.previous_instances.action'),
-        meta: {
-            thClass: 'text-right',
-            tdClass: 'text-right'
-        },
-        cell: ({ row }) => {
-            const original = row.original;
-            const isShiftHeld = resolveBool(shiftHeld);
-
-            return (
-                <div class="inline-flex items-center justify-end gap-1">
-                    <Button
-                        size="icon-sm"
-                        variant="ghost"
-                        class="w-6 h-6 text-xs"
-                        onClick={(event) => {
-                            event.stopPropagation();
-                            onShowInfo?.(original?.location);
-                        }}
-                    >
-                        <Info class="h-4 w-4" />
-                    </Button>
-
-                    <Button
-                        size="icon-sm"
-                        variant="ghost"
-                        class="w-6 h-6 text-xs"
-                        style={isShiftHeld ? { color: '#f56c6c' } : undefined}
-                        onClick={(event) => {
-                            event.stopPropagation();
-                            if (isShiftHeld) {
-                                onDelete?.(original);
-                            } else {
-                                onDeletePrompt?.(original);
-                            }
-                        }}
-                    >
-                        <Trash2 class="h-4 w-4" />
-                    </Button>
-                </div>
-            );
-        }
-    }
-];

src/components/dialogs/PreviousInstancesDialog/previousInstancesWorldColumns.jsx

@@ -1,142 +0,0 @@
-import { ArrowUpDown, Info, Trash2 } from 'lucide-vue-next';
-
-import DisplayName from '../../DisplayName.vue';
-import LocationWorld from '../../LocationWorld.vue';
-import { Button } from '../../ui/button';
-import { i18n } from '../../../plugin';
-import { formatDateFilter } from '../../../shared/utils';
-
-const { t } = i18n.global;
-
-const sortButton = ({ column, label, descFirst = false }) => (
-    <Button
-        variant="ghost"
-        size="sm"
-        class="-ml-2 h-8 px-2"
-        onClick={() => {
-            const sorted = column.getIsSorted();
-            if (!sorted && descFirst) {
-                column.toggleSorting(true);
-                return;
-            }
-            column.toggleSorting(sorted === 'asc');
-        }}
-    >
-        {label}
-        <ArrowUpDown class="ml-1 h-4 w-4" />
-    </Button>
-);
-
-const resolveBool = (maybeRef) => {
-    if (maybeRef && typeof maybeRef === 'object' && 'value' in maybeRef) {
-        return !!maybeRef.value;
-    }
-    return !!maybeRef;
-};
-
-export const createColumns = ({
-    shiftHeld,
-    currentUserId,
-    forceUpdateKey,
-    onShowInfo,
-    onDelete,
-    onDeletePrompt
-}) => [
-    {
-        id: 'created_at',
-        accessorFn: (row) => (row?.created_at ? Date.parse(row.created_at) : 0),
-        size: 170,
-        header: ({ column }) =>
-            sortButton({
-                column,
-                label: t('table.previous_instances.date'),
-                descFirst: true
-            }),
-        cell: ({ row }) => (
-            <span>{formatDateFilter(row.original?.created_at, 'long')}</span>
-        )
-    },
-    {
-        id: 'instance',
-        accessorFn: (row) => row?.$location?.tag ?? row?.location ?? '',
-        header: () => t('table.previous_instances.instance_name'),
-        meta: {
-            stretch: true
-        },
-        cell: ({ row }) => (
-            <LocationWorld
-                locationobject={row.original?.$location}
-                grouphint={row.original?.groupName}
-                currentuserid={currentUserId}
-            />
-        )
-    },
-    {
-        id: 'creator',
-        accessorFn: (row) => row?.$location?.userId ?? '',
-        size: 170,
-        header: () => t('table.previous_instances.instance_creator'),
-        cell: ({ row }) => (
-            <DisplayName
-                userid={row.original?.$location?.userId}
-                location={row.original?.$location?.tag}
-                forceUpdateKey={forceUpdateKey}
-            />
-        )
-    },
-    {
-        id: 'time',
-        accessorFn: (row) => row?.time ?? 0,
-        size: 100,
-        header: ({ column }) =>
-            sortButton({ column, label: t('table.previous_instances.time') }),
-        cell: ({ row }) => <span>{row.original?.timer ?? ''}</span>
-    },
-    {
-        id: 'actions',
-        enableSorting: false,
-        size: 120,
-        header: () => t('table.previous_instances.action'),
-        meta: {
-            thClass: 'text-right',
-            tdClass: 'text-right'
-        },
-        cell: ({ row }) => {
-            const original = row.original;
-            const isShiftHeld = resolveBool(shiftHeld);
-
-            return (
-                <div class="inline-flex items-center justify-end gap-1">
-                    <Button
-                        size="icon-sm"
-                        variant="ghost"
-                        class="w-6 h-6 text-xs"
-                        onClick={(event) => {
-                            event.stopPropagation();
-                            onShowInfo?.(original?.location);
-                        }}
-                    >
-                        <Info class="h-4 w-4" />
-                    </Button>
-
-                    <Button
-                        size="icon-sm"
-                        variant="ghost"
-                        class="w-6 h-6 text-xs"
-                        style={isShiftHeld ? { color: '#f56c6c' } : undefined}
-                        onClick={(event) => {
-                            event.stopPropagation();
-                            if (isShiftHeld) {
-                                onDelete?.(original);
-                            } else {
-                                onDeletePrompt?.(original);
-                            }
-                        }}
-                    >
-                        <Trash2 class="h-4 w-4" />
-                    </Button>
-                </div>
-            );
-        }
-    }
-];

src/components/dialogs/UserDialog/PreviousInstancesUserDialog.vue

@@ -1,198 +0,0 @@
-<template>
-    <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>
-    </div>
-</template>
-
-<script setup>
-    defineOptions({ name: 'PreviousInstancesUserDialog' });
-
-    import { computed, ref, watch } from 'vue';
-    import { DialogHeader, DialogTitle } from '@/components/ui/dialog';
-    import { InputGroupField } from '@/components/ui/input-group';
-    import { storeToRefs } from 'pinia';
-    import { useI18n } from 'vue-i18n';
-
-    import {
-        useInstanceStore,
-        useLaunchStore,
-        useModalStore,
-        useSearchStore,
-        useUiStore,
-        useVrcxStore
-    } from '../../../stores';
-    import {
-        compareByCreatedAt,
-        localeIncludes,
-        parseLocation,
-        removeFromArray,
-        timeToText
-    } from '../../../shared/utils';
-    import { DataTableLayout } from '../../ui/data-table';
-    import { createColumns } from './previousInstancesUserColumns.jsx';
-    import { database } from '../../../service/database';
-    import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
-
-    const modalStore = useModalStore();
-    const loading = ref(false);
-    const rawRows = ref([]);
-    const pageSizes = [10, 25, 50, 100];
-    const pageSize = ref(10);
-    const tableStyle = { maxHeight: '400px' };
-
-    const { showLaunchDialog } = useLaunchStore();
-    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 search = ref('');
-
-    const displayRows = computed(() => {
-        const q = String(search.value ?? '')
-            .trim()
-            .toLowerCase();
-        const rows = Array.isArray(rawRows.value) ? rawRows.value : [];
-        if (!q) return rows;
-        return rows.filter((row) => {
-            return (
-                localeIncludes(row?.worldName ?? '', q, stringComparer.value) ||
-                localeIncludes(row?.groupName ?? '', q, stringComparer.value) ||
-                localeIncludes(row?.location ?? '', q, stringComparer.value)
-            );
-        });
-    });
-
-    const columns = computed(() =>
-        createColumns({
-            shiftHeld,
-            onLaunch: showLaunchDialog,
-            onShowInfo: showPreviousInstancesInfoDialog,
-            onDelete: deleteGameLogUserInstance,
-            onDeletePrompt: deleteGameLogUserInstancePrompt
-        })
-    );
-
-    const { table } = useVrcxVueTable({
-        persistKey: 'previousInstancesUserDialog',
-        data: displayRows,
-        columns: columns.value,
-        getRowId: (row) => `${row?.location ?? ''}:${row?.created_at ?? ''}`,
-        initialSorting: [{ id: 'created_at', desc: true }],
-        initialPagination: {
-            pageIndex: 0,
-            pageSize: pageSize.value
-        },
-        tableOptions: {
-            autoResetPageIndex: false
-        }
-    });
-
-    watch(
-        columns,
-        (next) => {
-            table.setOptions((prev) => ({
-                ...prev,
-                columns: next
-            }));
-        },
-        { immediate: true }
-    );
-
-    const totalItems = computed(() => {
-        const length = table.getFilteredRowModel().rows.length;
-        const max = vrcxStore.maxTableSize;
-        return length > max && length < max + 51 ? max : length;
-    });
-
-    const handlePageSizeChange = (size) => {
-        pageSize.value = size;
-    };
-
-    const refreshPreviousInstancesUserTable = async () => {
-        loading.value = true;
-        const data = await database.getPreviousInstancesByUserId(previousInstancesUserDialog.value.userRef);
-        const array = [];
-        for (const item of data.values()) {
-            item.$location = parseLocation(item.location);
-            item.timer = item.time > 0 ? timeToText(item.time) : '';
-            array.push(item);
-        }
-        array.sort(compareByCreatedAt);
-        rawRows.value = array;
-        loading.value = false;
-    };
-
-    watch(
-        () => previousInstancesUserDialog.value.visible,
-        (visible) => {
-            if (visible) {
-                refreshPreviousInstancesUserTable();
-            }
-        },
-        { immediate: true }
-    );
-
-    watch(
-        () => previousInstancesUserDialog.value.openFlg,
-        () => {
-            if (previousInstancesUserDialog.value.visible) {
-                refreshPreviousInstancesUserTable();
-            }
-        }
-    );
-
-    function deleteGameLogUserInstance(row) {
-        database.deleteGameLogInstance({
-            id: previousInstancesUserDialog.value.userRef.id,
-            displayName: previousInstancesUserDialog.value.userRef.displayName,
-            location: row.location,
-            events: row.events
-        });
-        removeFromArray(rawRows.value, row);
-    }
-
-    function deleteGameLogUserInstancePrompt(row) {
-        modalStore
-            .confirm({
-                description: 'Continue? Delete User From GameLog Instance',
-                title: 'Confirm'
-            })
-            .then(({ ok }) => {
-                if (!ok) return;
-                deleteGameLogUserInstance(row);
-            })
-            .catch(() => {});
-    }
-</script>
-
-<style scoped>
-    .button-pd-0 {
-        padding: 0;
-    }
-</style>

src/components/dialogs/UserDialog/previousInstancesUserColumns.jsx

@@ -1,153 +0,0 @@
-import { ArrowUpDown, Info, LogIn, Trash2 } from 'lucide-vue-next';
-
-import DisplayName from '../../DisplayName.vue';
-import Location from '../../Location.vue';
-import { Button } from '../../ui/button';
-import { i18n } from '../../../plugin';
-import { formatDateFilter } from '../../../shared/utils';
-
-const { t } = i18n.global;
-
-const sortButton = ({ column, label, descFirst = false }) => (
-    <Button
-        variant="ghost"
-        size="sm"
-        class="-ml-2 h-8 px-2"
-        onClick={() => {
-            const sorted = column.getIsSorted();
-            if (!sorted && descFirst) {
-                column.toggleSorting(true);
-                return;
-            }
-            column.toggleSorting(sorted === 'asc');
-        }}
-    >
-        {label}
-        <ArrowUpDown class="ml-1 h-4 w-4" />
-    </Button>
-);
-
-const resolveBool = (maybeRef) => {
-    if (maybeRef && typeof maybeRef === 'object' && 'value' in maybeRef) {
-        return !!maybeRef.value;
-    }
-    return !!maybeRef;
-};
-
-export const createColumns = ({
-    shiftHeld,
-    onLaunch,
-    onShowInfo,
-    onDelete,
-    onDeletePrompt
-}) => [
-    {
-        id: 'created_at',
-        accessorFn: (row) => (row?.created_at ? Date.parse(row.created_at) : 0),
-        size: 170,
-        header: ({ column }) =>
-            sortButton({
-                column,
-                label: t('table.previous_instances.date'),
-                descFirst: true
-            }),
-        cell: ({ row }) => (
-            <span>{formatDateFilter(row.original?.created_at, 'long')}</span>
-        )
-    },
-    {
-        id: 'world',
-        accessorFn: (row) => row?.worldName ?? row?.name ?? '',
-        header: ({ column }) =>
-            sortButton({ column, label: t('table.previous_instances.world') }),
-        meta: {
-            stretch: true
-        },
-        cell: ({ row }) => (
-            <Location
-                location={row.original?.location}
-                hint={row.original?.worldName}
-                grouphint={row.original?.groupName}
-            />
-        )
-    },
-    {
-        id: 'creator',
-        accessorFn: (row) => row?.$location?.userId ?? '',
-        size: 170,
-        header: () => t('table.previous_instances.instance_creator'),
-        cell: ({ row }) => (
-            <DisplayName
-                userid={row.original?.$location?.userId}
-                location={row.original?.$location?.tag}
-            />
-        )
-    },
-    {
-        id: 'time',
-        accessorFn: (row) => row?.time ?? 0,
-        size: 100,
-        header: ({ column }) =>
-            sortButton({ column, label: t('table.previous_instances.time') }),
-        cell: ({ row }) => <span>{row.original?.timer ?? ''}</span>
-    },
-    {
-        id: 'actions',
-        enableSorting: false,
-        size: 140,
-        header: () => t('table.previous_instances.action'),
-        meta: {
-            thClass: 'text-right',
-            tdClass: 'text-right'
-        },
-        cell: ({ row }) => {
-            const original = row.original;
-            const isShiftHeld = resolveBool(shiftHeld);
-
-            return (
-                <div class="inline-flex items-center justify-end gap-1">
-                    <Button
-                        size="icon-sm"
-                        variant="ghost"
-                        class="w-6 h-6 text-xs"
-                        onClick={(event) => {
-                            event.stopPropagation();
-                            onLaunch?.(original?.location);
-                        }}
-                    >
-                        <LogIn class="h-4 w-4" />
-                    </Button>
-
-                    <Button
-                        size="icon-sm"
-                        variant="ghost"
-                        class="w-6 h-6 text-xs"
-                        onClick={(event) => {
-                            event.stopPropagation();
-                            onShowInfo?.(original?.location);
-                        }}
-                    >
-                        <Info class="h-4 w-4" />
-                    </Button>
-
-                    <Button
-                        size="icon-sm"
-                        variant="ghost"
-                        class="w-6 h-6 text-xs"
-                        style={isShiftHeld ? { color: '#f56c6c' } : undefined}
-                        onClick={(event) => {
-                            event.stopPropagation();
-                            if (isShiftHeld) {
-                                onDelete?.(original);
-                            } else {
-                                onDeletePrompt?.(original);
-                            }
-                        }}
-                    >
-                        <Trash2 class="h-4 w-4" />
-                    </Button>
-                </div>
-            );
-        }
-    }
-];

src/stores/instance.js

@@ -138,6 +138,12 @@ export const useInstanceStore = defineStore('Instance', () => {
         }
     });
 
+    const previousInstancesListState = ref({
+        user: { search: '', pageSize: 10, pageIndex: 0 },
+        world: { search: '', pageSize: 10, pageIndex: 0 },
+        group: { search: '', pageSize: 10, pageIndex: 0 }
+    });
+
     const instanceJoinHistory = reactive(new Map());
 
     const currentInstanceUsersData = ref([]);
@@ -1459,6 +1465,7 @@ export const useInstanceStore = defineStore('Instance', () => {
         previousInstancesUserDialog,
         previousInstancesWorldDialog,
         previousInstancesGroupDialog,
+        previousInstancesListState,
         instanceJoinHistory,
         currentInstanceUsersData,