@@ -219,47 +226,51 @@ onUnmounted(() => unlisten())
:class="`transition-all ${modLoading || installing ? `brightness-[0.25] scale-[0.85]` : `group-hover:brightness-75`}`"
/>
-
-
-
+
+
+
-
-
-
-
-
-
+
+
+
+
+
diff --git a/apps/app-frontend/src/components/ui/InstanceIndicator.vue b/apps/app-frontend/src/components/ui/InstanceIndicator.vue
index 2787635117..cb077c4bfb 100644
--- a/apps/app-frontend/src/components/ui/InstanceIndicator.vue
+++ b/apps/app-frontend/src/components/ui/InstanceIndicator.vue
@@ -1,6 +1,6 @@
diff --git a/apps/app-frontend/src/components/ui/instance/instance-admonitions/index.vue b/apps/app-frontend/src/pages/instance/components/admonitions/index.vue
similarity index 91%
rename from apps/app-frontend/src/components/ui/instance/instance-admonitions/index.vue
rename to apps/app-frontend/src/pages/instance/components/admonitions/index.vue
index e16171bc5b..5e4d996ad6 100644
--- a/apps/app-frontend/src/components/ui/instance/instance-admonitions/index.vue
+++ b/apps/app-frontend/src/pages/instance/components/admonitions/index.vue
@@ -36,11 +36,11 @@ import { computed, ref, watch } from 'vue'
import type { SharedInstanceUnavailableReason } from '@/helpers/install'
import type { GameInstance } from '@/helpers/types'
-import InstanceAdmonitionsSharedInstanceStale from './instance-admonitions-shared-instance-stale.vue'
-import InstanceAdmonitionsSharedInstanceUnavailable from './instance-admonitions-shared-instance-unavailable.vue'
-import InstanceAdmonitionsSharedInstanceUpdateAvailable from './instance-admonitions-shared-instance-update-available.vue'
-import InstanceAdmonitionsSharedInstanceWrongAccount from './instance-admonitions-shared-instance-wrong-account.vue'
-import type { InstanceAdmonitionItem, SharedInstanceRole } from './types'
+import InstanceAdmonitionsSharedInstanceStale from './shared-instance-stale.vue'
+import InstanceAdmonitionsSharedInstanceUnavailable from './shared-instance-unavailable.vue'
+import InstanceAdmonitionsSharedInstanceUpdateAvailable from './shared-instance-update-available.vue'
+import InstanceAdmonitionsSharedInstanceWrongAccount from './shared-instance-wrong-account.vue'
+import type { InstanceAdmonitionItem, SharedInstanceRole } from './types.ts'
defineOptions({
inheritAttrs: false,
diff --git a/apps/app-frontend/src/components/ui/instance/instance-admonitions/instance-admonitions-messages.ts b/apps/app-frontend/src/pages/instance/components/admonitions/messages.ts
similarity index 100%
rename from apps/app-frontend/src/components/ui/instance/instance-admonitions/instance-admonitions-messages.ts
rename to apps/app-frontend/src/pages/instance/components/admonitions/messages.ts
diff --git a/apps/app-frontend/src/components/ui/instance/instance-admonitions/instance-admonitions-shared-instance-stale.vue b/apps/app-frontend/src/pages/instance/components/admonitions/shared-instance-stale.vue
similarity index 63%
rename from apps/app-frontend/src/components/ui/instance/instance-admonitions/instance-admonitions-shared-instance-stale.vue
rename to apps/app-frontend/src/pages/instance/components/admonitions/shared-instance-stale.vue
index e437bfe1cf..63d053a91e 100644
--- a/apps/app-frontend/src/components/ui/instance/instance-admonitions/instance-admonitions-shared-instance-stale.vue
+++ b/apps/app-frontend/src/pages/instance/components/admonitions/shared-instance-stale.vue
@@ -6,23 +6,27 @@
>
{{ formatMessage(messages.sharedInstanceChangesBody) }}
-
-
-
+
@@ -36,13 +40,13 @@
-
-
diff --git a/apps/app-frontend/src/pages/instance/Logs.vue b/apps/app-frontend/src/pages/instance/logs/index.vue
similarity index 73%
rename from apps/app-frontend/src/pages/instance/Logs.vue
rename to apps/app-frontend/src/pages/instance/logs/index.vue
index 6a08117dd7..fd8add17f7 100644
--- a/apps/app-frontend/src/pages/instance/Logs.vue
+++ b/apps/app-frontend/src/pages/instance/logs/index.vue
@@ -11,51 +11,20 @@ import {
injectNotificationManager,
provideConsoleManager,
} from '@modrinth/ui'
+import { useQuery } from '@tanstack/vue-query'
import { computed, onUnmounted, ref, shallowRef, triggerRef, watch, watchEffect } from 'vue'
-import { useRoute } from 'vue-router'
import { useInstanceConsole } from '@/composables/useInstanceConsole'
import { log_listener, process_listener } from '@/helpers/events.js'
import { delete_logs_by_filename, get_output_by_filename } from '@/helpers/logs.js'
+import { injectInstancePage } from '../instance-context'
+import { instanceKeys } from '../query-options'
+
const client = injectModrinthClient()
const { handleError } = injectNotificationManager()
-const route = useRoute()
-
-const props = defineProps({
- instance: {
- type: Object,
- default() {
- return {}
- },
- },
- options: {
- type: Object,
- default() {
- return {}
- },
- },
- offline: {
- type: Boolean,
- default() {
- return false
- },
- },
- playing: {
- type: Boolean,
- default() {
- return false
- },
- },
- installed: {
- type: Boolean,
- default() {
- return false
- },
- },
-})
-
-const instanceId = computed(() => route.params.id)
+const instancePage = injectInstancePage()
+const instanceId = instancePage.instanceId
const {
liveConsole,
historicalConsole,
@@ -66,7 +35,17 @@ const {
clearLive,
} = useInstanceConsole(instanceId.value)
-await hydrate()
+const consoleHydrationQuery = useQuery({
+ queryKey: computed(() => instanceKeys.console(instanceId.value)),
+ queryFn: async () => {
+ await hydrate()
+ return true
+ },
+ staleTime: 0,
+ refetchOnMount: 'always',
+})
+
+await consoleHydrationQuery.suspense()
function buildLogList(rawLogs) {
return [
@@ -88,18 +67,29 @@ function buildLogList(rawLogs) {
}
const logs = ref(buildLogList([]))
-
-void getHistoricalLogs()
- .then((allLogs) => {
- logs.value = buildLogList(allLogs)
- })
- .catch(handleError)
+const historicalLogsQuery = useQuery({
+ queryKey: computed(() => instanceKeys.logs(instanceId.value)),
+ queryFn: getHistoricalLogs,
+ staleTime: 0,
+})
+watch(
+ historicalLogsQuery.data,
+ (allLogs) => {
+ if (allLogs) logs.value = buildLogList(allLogs)
+ },
+ { immediate: true },
+)
+watch(historicalLogsQuery.error, (error) => {
+ if (error) handleError(error)
+})
const selectedLogIndex = ref(0)
const isLive = computed(() => selectedLogIndex.value === 0)
const filteredLogs = computed(() =>
- props.playing ? logs.value.filter((l) => l.live || l.name !== 'latest.log') : logs.value,
+ instancePage.playing.value
+ ? logs.value.filter((l) => l.live || l.name !== 'latest.log')
+ : logs.value,
)
const logSources = computed(() =>
@@ -140,16 +130,16 @@ const selectedLog = computed(() => filteredLogs.value[selectedLogIndex.value])
const deleteDisabled = computed(() => {
const log = selectedLog.value
if (!log || log.live) return true
- return log.filename === 'latest.log' && props.playing
+ return log.filename === 'latest.log' && instancePage.playing.value
})
async function deleteSelectedLog() {
const log = selectedLog.value
if (!log || log.live) return
- await delete_logs_by_filename(props.instance.id, log.log_type, log.filename)
+ await delete_logs_by_filename(instanceId.value, log.log_type, log.filename)
invalidate()
- const freshLogs = await getHistoricalLogs()
- logs.value = buildLogList(freshLogs)
+ const { data } = await historicalLogsQuery.refetch()
+ if (data) logs.value = buildLogList(data)
selectedLogIndex.value = 0
}
@@ -166,7 +156,7 @@ provideConsoleManager({
onDelete: deleteSelectedLog,
deleteDisabled,
deleteDisabledTooltip: 'Cannot delete latest.log while the instance is running',
- shareDisabled: computed(() => props.offline),
+ shareDisabled: instancePage.offline,
emptyStateType: 'instance',
crashAnalysis,
onDismissCrash: () => {
@@ -186,7 +176,7 @@ watch(selectedLogIndex, async (newIndex) => {
return
}
- const output = await get_output_by_filename(props.instance.id, log.log_type, log.filename).catch(
+ const output = await get_output_by_filename(instanceId.value, log.log_type, log.filename).catch(
handleError,
)
if (output) {
@@ -197,7 +187,7 @@ watch(selectedLogIndex, async (newIndex) => {
selectedLogIndex.value = 0
-if (!props.playing) {
+if (!instancePage.playing.value) {
void analyseForCrash()
}
@@ -216,12 +206,13 @@ const unlistenProcesses = await process_listener(async (e) => {
if (e.event === 'launched') {
liveConsole.clear()
invalidate()
+ void historicalLogsQuery.refetch()
selectedLogIndex.value = 0
}
if (e.event === 'finished') {
invalidate()
- const freshLogs = await getHistoricalLogs()
- logs.value = buildLogList(freshLogs)
+ const { data } = await historicalLogsQuery.refetch()
+ if (data) logs.value = buildLogList(data)
void analyseForCrash()
}
})
diff --git a/apps/app-frontend/src/pages/instance/query-options.ts b/apps/app-frontend/src/pages/instance/query-options.ts
new file mode 100644
index 0000000000..93f4ee81c8
--- /dev/null
+++ b/apps/app-frontend/src/pages/instance/query-options.ts
@@ -0,0 +1,79 @@
+import { queryOptions } from '@tanstack/vue-query'
+
+import { get_project_v3 } from '@/helpers/cache.js'
+import { get as getInstance } from '@/helpers/instance'
+import { loadInstanceContentData } from '@/helpers/instance-content'
+import { get_by_instance_id } from '@/helpers/process'
+import { refreshWorlds } from '@/helpers/worlds'
+
+export const instanceKeys = {
+ all: ['instances'] as const,
+ detail: (instanceId: string) => [...instanceKeys.all, 'summary', instanceId] as const,
+ processes: (instanceId: string) => [...instanceKeys.all, 'processes', instanceId] as const,
+ content: (instanceId: string) => [...instanceKeys.all, 'content', instanceId] as const,
+ rootPath: (instanceId: string) => [...instanceKeys.detail(instanceId), 'root-path'] as const,
+ files: (instanceId: string, path: string) =>
+ [...instanceKeys.detail(instanceId), 'files', path] as const,
+ console: (instanceId: string) => [...instanceKeys.detail(instanceId), 'console'] as const,
+ logs: (instanceId: string) => [...instanceKeys.detail(instanceId), 'logs'] as const,
+ installedProjectIds: (instanceId: string, source: 'content' | 'worlds') =>
+ [...instanceKeys.detail(instanceId), 'installed-project-ids', source] as const,
+ linkedContent: (instanceId: string) => ['linkedModpackContent', instanceId] as const,
+ worlds: (instanceId: string) => ['worlds', instanceId] as const,
+ linkedProject: (projectId: string) => ['project', 'v3', projectId] as const,
+ sharedEligibility: (userId: string | null | undefined) =>
+ ['shared-instance-eligibility', userId] as const,
+ sharedUpdatePreview: (instanceId: string, userId: string | null | undefined) =>
+ [...instanceKeys.detail(instanceId), 'shared-update-preview', userId] as const,
+ sharedMembers: (instanceId: string) => ['sharedInstanceUsers', instanceId] as const,
+}
+
+export function instanceDetailQueryOptions(instanceId: string) {
+ return queryOptions({
+ queryKey: instanceKeys.detail(instanceId),
+ queryFn: async () => {
+ const instance = await getInstance(instanceId)
+ if (!instance) throw new Error(`Instance ${instanceId} is not managed`)
+ return instance
+ },
+ staleTime: 30_000,
+ })
+}
+
+export function instanceProcessesQueryOptions(instanceId: string) {
+ return queryOptions({
+ queryKey: instanceKeys.processes(instanceId),
+ queryFn: async () => {
+ const processes = await get_by_instance_id(instanceId)
+ return Array.isArray(processes) ? processes : []
+ },
+ staleTime: 0,
+ })
+}
+
+export function instanceLinkedProjectQueryOptions(projectId: string) {
+ return queryOptions({
+ queryKey: instanceKeys.linkedProject(projectId),
+ queryFn: () => get_project_v3(projectId, 'must_revalidate'),
+ staleTime: 30_000,
+ })
+}
+
+export function instanceContentQueryOptions(
+ instanceId: string,
+ onError?: (error: Error) => unknown,
+) {
+ return queryOptions({
+ queryKey: instanceKeys.content(instanceId),
+ queryFn: () => loadInstanceContentData(instanceId, undefined, onError),
+ staleTime: 30_000,
+ })
+}
+
+export function instanceWorldsQueryOptions(instanceId: string) {
+ return queryOptions({
+ queryKey: instanceKeys.worlds(instanceId),
+ queryFn: () => refreshWorlds(instanceId),
+ staleTime: 0,
+ })
+}
diff --git a/apps/app-frontend/src/pages/instance/share/index.vue b/apps/app-frontend/src/pages/instance/share/index.vue
index b6addbe3bf..d88eed0d3c 100644
--- a/apps/app-frontend/src/pages/instance/share/index.vue
+++ b/apps/app-frontend/src/pages/instance/share/index.vue
@@ -55,20 +55,7 @@
-
+
-
+
@@ -123,21 +108,21 @@
:description="formatMessage(messages.noFriendsInvitedDescription)"
>
-
+ {{
+ formatMessage(messages.inviteFriendsButton)
+ }}
+