fix: intercom bubble positioning properly (#6111)

* feat: fix intercom properly

* fix: positioning size + css transition

* fix: lint

* fix: ts

* fix: nitpick

apps/frontend/src/layouts/default.vue

@@ -761,9 +761,13 @@ import {
 	commonMessages,
 	commonProjectTypeCategoryMessages,
 	commonSettingsMessages,
+	createHostingIntercomIdentityKey,
 	defineMessages,
 	injectModrinthClient,
+	injectPageContext,
 	OverflowMenu,
+	providePageContext,
+	useHostingIntercom,
 	useVIntl,
 } from '@modrinth/ui'
 import TeleportOverflowMenu from '@modrinth/ui/src/components/base/TeleportOverflowMenu.vue'
@@ -808,6 +812,25 @@ const router = useNativeRouter()
 const signInRouteObj = computed(() => getSignInRouteObj(route))
 const link = config.public.siteUrl + route.path.replace(/\/+$/, '')
 const client = injectModrinthClient()
+const pageContext = injectPageContext()
+const hostingIntercomActive = computed(() => route.path.startsWith('/hosting') && !!auth.value.user)
+const hostingIntercomServerId = computed(() => {
+	const rawId = route.params.id
+	return Array.isArray(rawId) ? rawId[0] : rawId
+})
+const hostingIntercom = useHostingIntercom({
+	enabled: hostingIntercomActive,
+	appId: computed(() => config.public.intercomAppId),
+	fetchToken: fetchIntercomToken,
+	identityKey: computed(() =>
+		createHostingIntercomIdentityKey(auth.value.user, hostingIntercomServerId.value),
+	),
+})
+
+providePageContext({
+	...pageContext,
+	intercomBubble: hostingIntercom.intercomBubble,
+})
 
 const { data: payoutBalance } = useQuery({
 	queryKey: ['payout', 'balance'],
@@ -836,6 +859,12 @@ const showTinMismatchBanner = computed(() => {
 
 const basePopoutId = useId()
 
+async function fetchIntercomToken() {
+	return $fetch('/api/intercom/messenger-jwt', {
+		query: hostingIntercomServerId.value ? { server_id: hostingIntercomServerId.value } : {},
+	})
+}
+
 const navMenuMessages = defineMessages({
 	home: {
 		id: 'layout.nav.home',

apps/frontend/src/pages/hosting/manage/[id].vue

@@ -9,8 +9,6 @@
 		:site-url="config.public.siteUrl as string"
 		:products="products"
 		:auth-user="authUser"
-		:fetch-intercom-token="fetchIntercomToken"
-		:intercom-app-id="config.public.intercomAppId as string"
 		:navigate-to-billing="() => router.push('/settings/billing')"
 		:navigate-to-servers="() => router.push('/hosting/manage')"
 		:browse-modpacks="
@@ -77,12 +75,6 @@ const authUser = auth.value?.user
 		}
 	: undefined
 
-async function fetchIntercomToken(): Promise<{ token: string }> {
-	return $fetch('/api/intercom/messenger-jwt', {
-		query: { server_id: serverId },
-	})
-}
-
 async function resolveViewer(): Promise<{ userId: string | null; userRole: string | null }> {
 	return {
 		userId: auth.value?.user?.id ?? null,