fix: deeplink modal use new modal & DI stability (#5577)

* fix: deeplink

* feat: DI stability

* fix: lint

* fix: play server project deep link

* switch toggle icons

* pnpm prepr

---------

Co-authored-by: tdgao <mr.trumgao@gmail.com>

packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue

@@ -6,6 +6,45 @@
 			</span>
 		</template>
 
+		<div
+			v-if="projectInfo"
+			class="flex items-center gap-2.5 rounded-[20px] bg-surface-2 mx-6 mt-6 p-3"
+		>
+			<AutoLink :to="projectInfo.link" class="shrink-0">
+				<div
+					class="size-14 shrink-0 overflow-hidden rounded-2xl border border-solid border-surface-5"
+				>
+					<Avatar
+						v-if="projectInfo.iconUrl"
+						:src="projectInfo.iconUrl"
+						:alt="projectInfo.title"
+						size="100%"
+						no-shadow
+					/>
+				</div>
+			</AutoLink>
+			<div class="flex flex-col gap-1">
+				<AutoLink :to="projectInfo.link" class="font-semibold text-contrast hover:underline">
+					{{ projectInfo.title }}
+				</AutoLink>
+				<div v-if="projectInfo.owner" class="flex items-center gap-2 text-sm text-secondary">
+					<AutoLink
+						:to="projectInfo.owner.link"
+						class="flex items-center gap-1.5 text-inherit no-underline hover:underline"
+					>
+						<Avatar
+							:src="projectInfo.owner.iconUrl"
+							:alt="projectInfo.owner.name"
+							size="1.25rem"
+							:circle="projectInfo.owner.circle"
+							no-shadow
+						/>
+						<span class="font-medium">{{ projectInfo.owner.name }}</span>
+					</AutoLink>
+				</div>
+			</div>
+		</div>
+
 		<div class="flex flex-col gap-2.5 p-6">
 			<span class="font-semibold text-contrast">
 				{{ formatMessage(messages.instanceType) }}
@@ -34,8 +73,8 @@
 						class="!border-surface-4 !border"
 						@click="hideUninstallable = !hideUninstallable"
 					>
-						<EyeIcon v-if="hideUninstallable" />
-						<EyeOffIcon v-else />
+						<EyeOffIcon v-if="hideUninstallable" />
+						<EyeIcon v-else />
 					</button>
 				</ButtonStyled>
 			</div>
@@ -212,6 +251,7 @@ import {
 } from '@modrinth/assets'
 import { computed, ref } from 'vue'
 
+import AutoLink from '#ui/components/base/AutoLink.vue'
 import Avatar from '#ui/components/base/Avatar.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import Chips from '#ui/components/base/Chips.vue'
@@ -314,6 +354,20 @@ export interface ContentInstallInstance {
 	installing?: boolean
 }
 
+export interface ContentInstallProjectOwner {
+	name: string
+	iconUrl?: string
+	circle?: boolean
+	link: string | (() => void)
+}
+
+export interface ContentInstallProjectInfo {
+	title: string
+	iconUrl?: string | null
+	link: string
+	owner?: ContentInstallProjectOwner | null
+}
+
 const props = defineProps<{
 	instances: ContentInstallInstance[]
 	compatibleLoaders: string[]
@@ -323,6 +377,7 @@ const props = defineProps<{
 	defaultTab?: 'existing' | 'new'
 	preferredLoader?: string | null
 	preferredGameVersion?: string | null
+	projectInfo?: ContentInstallProjectInfo | null
 }>()
 
 const emit = defineEmits<{

packages/ui/src/layouts/shared/content-tab/index.ts

@@ -9,7 +9,11 @@ export { default as ConfirmModpackUpdateModal } from './components/modals/Confir
 export { default as ConfirmReinstallModal } from './components/modals/ConfirmReinstallModal.vue'
 export { default as ConfirmRepairModal } from './components/modals/ConfirmRepairModal.vue'
 export { default as ConfirmUnlinkModal } from './components/modals/ConfirmUnlinkModal.vue'
-export type { ContentInstallInstance } from './components/modals/ContentInstallModal.vue'
+export type {
+	ContentInstallInstance,
+	ContentInstallProjectInfo,
+	ContentInstallProjectOwner,
+} from './components/modals/ContentInstallModal.vue'
 export { default as ContentInstallModal } from './components/modals/ContentInstallModal.vue'
 export { default as ContentUpdaterModal } from './components/modals/ContentUpdaterModal.vue'
 export type { ModpackContentModalState } from './components/modals/ModpackContentModal.vue'

packages/ui/src/providers/create-context.ts

@@ -43,7 +43,9 @@ export function createContext<ContextValue>(
 			? `${providerComponentName}Context`
 			: contextName
 
-	const injectionKey: InjectionKey<ContextValue | null> = Symbol(symbolDescription)
+	const injectionKey: InjectionKey<ContextValue | null> = Symbol.for(
+		`modrinth:${symbolDescription}`,
+	)
 
 	/**
 	 * @param fallback The context value to return if the injection fails.