feat: linked server instances #5221

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft

tdgao wants to merge 120 commits into main from truman/linked-server-instances

apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,7 +1,7 @@
  
    <template>

    	<NewModal ref="modal" :header="formatMessage(messages.installToPlay)" :closable="true">

    		<div class="flex flex-col gap-6 max-w-[500px]">

    			<Admonition type="info" :header="formatMessage(messages.sharedServerInstance)">

    			<Admonition type="info" :header="formatMessage(messages.contentRequired)">

    				{{ formatMessage(messages.serverRequiresMods) }}

    			</Admonition>

    @@ -22,10 +22,10 @@
  
    			</div>

    			<div class="flex flex-col gap-2">

    				<span class="font-semibold text-contrast">

    					{{ formatMessage(messages.sharedInstance) }}

    				</span>

    				<div class="flex items-center gap-3 rounded-xl bg-surface-4 p-3">

    				<span class="font-semibold text-contrast">{{

    					formatMessage(messages.requiredModpack)

    				}}</span>

    				<div class="flex items-center gap-3 rounded-xl bg-surface-2 p-3">

    					<Avatar :src="project.icon_url" :alt="project.title" size="48px" />

    					<div class="flex flex-col gap-0.5">

    						<span class="font-semibold text-contrast">{{ project.title }}</span>

    @@ -162,10 +162,18 @@ const messages = defineMessages({
  
    		id: 'app.modal.install-to-play.shared-server-instance',

    		defaultMessage: 'Shared server instance',

    	},

    	contentRequired: {

    		id: 'app.modal.install-to-play.content-required',

    		defaultMessage: 'Content required',

    	},

    	serverRequiresMods: {

    		id: 'app.modal.install-to-play.server-requires-mods',

    		defaultMessage:

    			'This server requires mods to play. Click install to set up the required files from Modrinth.',

    			'This server requires mods to play. Click Install to set up the required files from Modrinth, then launch directly into the server.',

    	},

    	requiredModpack: {

    		id: 'app.modal.install-to-play.required-modpack',

    		defaultMessage: 'Required modpack',

    	},

    	sharedByToday: {

    		id: 'app.modal.install-to-play.shared-by-today',

apps/app-frontend/src/components/ui/modal/UpdateToPlayModal.vue

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -2,7 +2,7 @@
  
    	<NewModal ref="modal" :header="formatMessage(messages.updateToPlay)" :closable="true" no-padding>

    		<div class="max-w-[500px]">

    			<div class="flex flex-col gap-4 p-4">

    				<Admonition type="warning" :header="formatMessage(messages.updateRequired)">

    				<Admonition type="info" :header="formatMessage(messages.updateRequired)">

    					{{ formatMessage(messages.updateRequiredDescription, { name: instance.name }) }}

    				</Admonition>

    @@ -26,9 +26,12 @@
  
    					</div>

    				</div>

    			</div>

    			<div v-if="diffs.length" class="flex flex-col bg-surface-2 p-4 max-h-[272px] overflow-y-auto">

    			<div

    				v-if="diffs.length"

    				class="flex flex-col bg-surface-2 p-4 max-h-[272px] overflow-y-auto border-t border-b border-r-0 border-l-0 border-solid border-surface-5"

    			>

    				<div

    					v-for="diff in diffs"

    					v-for="(diff, index) in diffs"

    					:key="diff.project_id"

    					class="grid grid-cols-[auto_1fr_1fr_1fr] items-center min-h-10 h-10 gap-2"

    				>

    @@ -37,7 +40,10 @@
  
    						<PlusIcon v-if="diff.type === 'added'" />

    						<MinusIcon v-else-if="diff.type === 'removed'" />

    						<RefreshCwIcon v-else />

    						<div class="bg-surface-5 w-[1px] h-2 relative top-1"></div>

    						<div

    							:class="index === diffs.length - 1 ? 'bg-transparent' : 'bg-surface-5'"

    							class="w-[1px] h-2 relative top-1"

    						></div>

    					</div>

    					<div class="flex gap-1 col-span-2">

    @@ -378,5 +384,18 @@ const diffTypeMessages = defineMessages({
  
    	},

    })

    defineExpose({ show, hide })

    const hasUpdate = computed(() => {

    	if (!instance.linked_data) return false

    	return latestVersionId.value != null && latestVersionId.value !== instance.linked_data.version_id

    })

    function showIfUpdateAvailable(e?: MouseEvent): boolean {

    	if (hasUpdate.value) {

    		show(e)

    		return true

    	}

    	return false

    }

    defineExpose({ show, hide, hasUpdate, showIfUpdateAvailable })

    </script>

apps/app-frontend/src/pages/instance/Index.vue

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -7,30 +7,40 @@
  
    			<ExportModal ref="exportModal" :instance="instance" />

    			<InstanceSettingsModal ref="settingsModal" :instance="instance" :offline="offline" />

    			<UpdateToPlayModal ref="updateToPlayModal" :instance="instance" />

    			<ButtonStyled v-if="themeStore.featureFlags.server_project_qa">

    				<button @click="updateToPlayModal.show()">Update to play modal</button>

    			</ButtonStyled>

    			<ContentPageHeader>

    				<template #icon>

    					<Avatar :src="icon" :alt="instance.name" size="96px" :tint-by="instance.path" />

    					<Avatar :src="icon" :alt="instance.name" size="64px" :tint-by="instance.path" />

    				</template>

    				<template #title>

    					{{ instance.name }}

    				</template>

    				<template #summary> </template>

    				<template #stats>

    					<div

    						class="flex items-center gap-2 font-semibold transform capitalize border-0 border-solid border-divider pr-4 md:border-r"

    					>

    						<GameIcon class="h-6 w-6 text-secondary" />

    						{{ instance.loader }} {{ instance.game_version }}

    					</div>

    					<div class="flex items-center gap-2 font-semibold">

    						<TimerIcon class="h-6 w-6 text-secondary" />

    						<template v-if="timePlayed > 0">

    							{{ timePlayedHumanized }}

    						</template>

    						<template v-else> Never played </template>

    					<div class="flex items-center flex-wrap gap-2">

    						<div class="flex items-center gap-2 capitalize font-medium">

    							{{ instance.loader }} {{ instance.game_version }}

    						</div>

    						<div class="w-1.5 h-1.5 rounded-full bg-surface-5"></div>

    						<div class="flex items-center gap-2 font-medium">

    							<template v-if="timePlayed > 0">

    								{{ timePlayedHumanized }}

    							</template>

    							<template v-else> Never played </template>

    						</div>

    						<div v-if="isServerInstance" class="w-1.5 h-1.5 rounded-full bg-surface-5"></div>

    						<div v-if="isServerInstance" class="flex gap-1.5 items-center font-medium">

    							Linked to

    							<Avatar

    								:src="project.icon_url"

    								:alt="project.title"

    								:tint-by="instance.path"

    								size="24px"

    							/>

    							{{ project.title }}

    						</div>

    					</div>

    				</template>

    				<template #actions>

    @@ -169,7 +179,6 @@ import {
  
    	ExternalIcon,

    	EyeIcon,

    	FolderOpenIcon,

    	GameIcon,

    	GlobeIcon,

    	HashIcon,

    	MoreVerticalIcon,

    @@ -179,7 +188,6 @@ import {
  
    	ServerIcon,

    	SettingsIcon,

    	StopCircleIcon,

    	TimerIcon,

    	UpdatedIcon,

    	UserPlusIcon,

    	XIcon,

    @@ -211,7 +219,7 @@ import { get_by_profile_path } from '@/helpers/process'
  
    import { finish_install, get, get_full_path, kill, run } from '@/helpers/profile'

    import { showProfileInFolder } from '@/helpers/utils.js'

    import { handleSevereError } from '@/store/error.js'

    import { useBreadcrumbs, useLoading } from '@/store/state'

    import { useBreadcrumbs, useLoading, useTheming } from '@/store/state'

    dayjs.extend(duration)

    dayjs.extend(relativeTime)

    @@ -221,6 +229,7 @@ const route = useRoute()
  
    const router = useRouter()

    const breadcrumbs = useBreadcrumbs()

    const themeStore = useTheming()

    const offline = ref(!navigator.onLine)

    window.addEventListener('offline', () => {

    @@ -234,25 +243,35 @@ const instance = ref()
  
    const modrinthVersions = ref([])

    const playing = ref(false)

    const loading = ref(false)

    const updateToPlayModal = ref()

    const updateToPlayModal = ref() // TODO: show this modal when an update is available when click play button

    const isServerInstance = ref(false)

    const project = ref()

    async function fetchInstance() {

    	instance.value = await get(route.params.id).catch(handleError)

    	if (!offline.value && instance.value.linked_data && instance.value.linked_data.project_id) {

    		get_project(instance.value.linked_data.project_id, 'must_revalidate')

    			.catch(handleError)

    			.then((project) => {

    				if (project && project.versions) {

    					get_version_many(project.versions, 'must_revalidate')

    						.catch(handleError)

    						.then((versions) => {

    							modrinthVersions.value = versions.sort(

    								(a, b) => dayjs(b.date_published) - dayjs(a.date_published),

    							)

    						})

    		try {

    			project.value = await get_project(instance.value.linked_data.project_id, 'must_revalidate')

    			if (project.value && project.value.versions) {

    				const versions = await get_version_many(project.value.versions, 'must_revalidate')

    				modrinthVersions.value = versions.sort(

    					(a, b) => dayjs(b.date_published) - dayjs(a.date_published),

    				)

    				if (Object.keys(project.value).includes('minecraft_server')) {

    					isServerInstance.value = true

    				}

    			})

    				console.log(project)

    				// todo, remove on release

    				if (themeStore.featureFlags.server_project_qa) {

    					isServerInstance.value = true

    				}

    			}

    		} catch (error) {

    			handleError(error)

    		}

    	}

    	await updatePlayState()

    @@ -309,6 +328,10 @@ const loadingBar = useLoading()
  
    const options = ref(null)

    const startInstance = async (context) => {

    	if (updateToPlayModal.value?.showIfUpdateAvailable()) {

    		return

    	}

    	loading.value = true

    	try {

    		await run(route.params.id)

apps/app-frontend/src/pages/instance/Mods.vue

-Original file line number
+Diff line change
@@ Expand Up / @@ -7,7 +7,7 @@ @@
     					<input
     						v-model="searchFilter"
     						type="text"
-    						:placeholder="`Search ${filteredProjects.length} project${filteredProjects.length === 1 ? '' : 's'}...`"
+    						:placeholder="`Search ${filteredProjects.length} project${filteredProjects.length === 1 ? '' : 's'}... test`"
     						class="text-input search-input"
     						autocomplete="off"
     					/>
@@ Expand Down @@

apps/app-frontend/src/pages/project/Index.vue

-Original file line number
+Diff line change
@@ -1,6 +1,5 @@
     <template>
     	<div>
-    		<InstallToPlayModal ref="installToPlayModal" :project="data" />
     		<Teleport to="#sidebar-teleport-target">
     			<ProjectSidebarCompatibility
     				:project="data"
@@ Expand All / @@ -23,10 +22,8 @@ @@
     				class="project-sidebar-section"
     			/>
     		</Teleport>
+    		<InstallToPlayModal ref="installToPlayModal" :project="data" />
     		<div class="flex flex-col gap-4 p-6">
-    			<ButtonStyled v-if="themeStore.featureFlags.server_project_qa">
-    				<button @click="installToPlayModal.show()">Install to play modal</button>
-    			</ButtonStyled>
     			<InstanceIndicator v-if="instance" :instance="instance" />
     			<template v-if="data">
     				<Teleport
@@ Expand All / @@ -35,7 +32,47 @@ @@
     				>
     					<ProjectBackgroundGradient :project="data" />
     				</Teleport>
-    				<ProjectHeader :project="data" @contextmenu.prevent.stop="handleRightClick">
+    				<ServerProjectHeader
+    					v-if="isServerProject"
+    					:project="data"
+    					@contextmenu.prevent.stop="handleRightClick"
+    				>
+    					<template #actions>
+    						<ButtonStyled size="large" color="brand">
+    							<button @click="installToPlayModal.show()">
+    								<PlayIcon />
+    								Play
+    							</button>
+    						</ButtonStyled>
+    						<ButtonStyled size="large" circular type="transparent">
+    							<OverflowMenu
+    								:tooltip="`More options`"
+    								:options="[
+    									{
+    										id: 'open-in-browser',
+    										link: `https://modrinth.com/${data.project_type}/${data.slug}`,
+    										external: true,
+    									},
+    									{
+    										divider: true,
+    									},
+    									{
+    										id: 'report',
+    										color: 'red',
+    										hoverFilled: true,
+    										link: `https://modrinth.com/report?item=project&itemID=${data.id}`,
+    									},
+    								]"
+    								aria-label="More options"
+    							>
+    								<MoreVerticalIcon aria-hidden="true" />
+    								<template #open-in-browser> <ExternalIcon /> Open in browser </template>
+    								<template #report> <ReportIcon /> Report </template>
+    							</OverflowMenu>
+    						</ButtonStyled>
+    					</template>
+    				</ServerProjectHeader>
+    				<ProjectHeader v-else :project="data" @contextmenu.prevent.stop="handleRightClick">
     					<template #actions>
     						<ButtonStyled size="large" color="brand">
     							<button
@@ Expand Down Expand Up / @@ -142,6 +179,7 @@ import { @@
     	GlobeIcon,
     	HeartIcon,
     	MoreVerticalIcon,
+    	PlayIcon,
     	ReportIcon,
     } from '@modrinth/assets'
     import {
@@ Expand All / @@ -154,6 +192,7 @@ import { @@
     	ProjectSidebarCreators,
     	ProjectSidebarDetails,
     	ProjectSidebarLinks,
+    	ServerProjectHeader,
     } from '@modrinth/ui'
     import { openUrl } from '@tauri-apps/plugin-opener'
     import dayjs from 'dayjs'
@@ Expand Down Expand Up / @@ -190,8 +229,9 @@ const instanceProjects = ref(null) @@
     const installed = ref(false)
     const installedVersion = ref(null)
+    const isServerProject = ref(false)
-    const installToPlayModal = ref()
+    const installToPlayModal = ref(null) // TODO, only show install to play modal for server project types that have .mrpack for content
     const instanceFilters = computed(() => {
     	if (!instance.value) {
@@ Expand Down Expand Up / @@ -245,6 +285,12 @@ async function fetchProjectData() { @@
     			installedVersion.value = installedFile.metadata.version_id
     		}
     	}
+    	isServerProject.value = Object.keys(project).includes('minecraft_server')
+    	// todo, remove on release
+    	if (themeStore.featureFlags.server_project_qa) {
+    		isServerProject.value = true
+    	}
     	breadcrumbs.setName('Project', data.value.title)
     }
@@ Expand Down @@

apps/frontend/src/components/ui/create-project-version/components/McVersionPicker.vue

-Original file line number
+Diff line change
@@ -1,6 +1,6 @@
     <template>
     	<div class="space-y-2.5">
-    		<div class="flex items-center justify-between">
+    		<div v-if="!noHeader" class="flex items-center justify-between">
     			<span class="font-semibold text-contrast">
     				Minecraft versions <span class="text-red">*</span>
     			</span>
@@ Expand Down Expand Up / @@ -42,6 +42,7 @@ @@
     								versionType === 'all' && !group.isReleaseGroup ? 'w-max' : 'w-16',
     								modelValue.includes(version) ? '!text-contrast' : '',
     							]"
+    							:disabled="disabled"
     							@click="() => handleToggleVersion(version)"
     							@blur="
     								() => {
@@ Expand Down Expand Up / @@ -73,6 +74,8 @@ type GameVersion = Labrinth.Tags.v2.GameVersion @@
     const props = defineProps<{
     	modelValue: string[]
     	gameVersions: Labrinth.Tags.v2.GameVersion[]
+    	noHeader?: boolean
+    	disabled?: boolean
     }>()
     const emit = defineEmits<{
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: linked server instances #5221

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

feat: linked server instances #5221

Are you sure you want to change the base?

Uh oh!

feat: linked server instances #5221

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!