feat: update required empty state for modrinth hosting (#7125)

apps/app-frontend/src/App.vue

@@ -71,6 +71,7 @@ import AppActionBar from '@/components/ui/AppActionBar.vue'
 import Breadcrumbs from '@/components/ui/Breadcrumbs.vue'
 import ErrorModal from '@/components/ui/ErrorModal.vue'
 import FriendsList from '@/components/ui/friends/FriendsList.vue'
+import HostingUpdateRequired from '@/components/ui/HostingUpdateRequired.vue'
 import AddServerToInstanceModal from '@/components/ui/install_flow/AddServerToInstanceModal.vue'
 import UnknownPackWarningModal from '@/components/ui/install_flow/UnknownPackWarningModal.vue'
 import MinecraftAuthErrorModal from '@/components/ui/minecraft-auth-error-modal/MinecraftAuthErrorModal.vue'
@@ -209,6 +210,12 @@ const forceSidebar = computed(
 )
 const sidebarVisible = computed(() => sidebarToggled.value || forceSidebar.value)
 const hostingRouteActive = computed(() => route.path.startsWith('/hosting'))
+const hostingUpdateRequired = computed(
+	() =>
+		hostingRouteActive.value &&
+		!!appUpdateState.availableUpdate.value &&
+		appUpdateState.updatesEnabled.value,
+)
 const prideFundraiserEnabled = computed(
 	() => themeStore.getFeatureFlag('pride_fundraiser') && Date.now() < PRIDE_FUNDRAISER_END_DATE,
 )
@@ -219,7 +226,9 @@ const hostingIntercomIdentityKey = computed(() => {
 	return `${userId}:${serverId ?? 'hosting'}`
 })
 const hostingIntercom = useHostingIntercom({
-	enabled: computed(() => hostingRouteActive.value && !!credentials.value?.session),
+	enabled: computed(
+		() => hostingRouteActive.value && !hostingUpdateRequired.value && !!credentials.value?.session,
+	),
 	appId: 'ykeritl9',
 	fetchToken: fetchIntercomToken,
 	identityKey: hostingIntercomIdentityKey,
@@ -1787,7 +1796,8 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			>
 				{{ formatMessage(messages.authUnreachableBody) }}
 			</Admonition>
-			<RouterView v-slot="{ Component }">
+			<HostingUpdateRequired v-if="hostingUpdateRequired" />
+			<RouterView v-else v-slot="{ Component }">
 				<template v-if="Component">
 					<Suspense @pending="onSuspensePending" @resolve="onSuspenseResolve">
 						<component :is="Component"></component>

apps/app-frontend/src/components/ui/HostingUpdateRequired.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { DownloadIcon, ExcitedRinthbot, RefreshCwIcon, ServerStackIcon } from '@modrinth/assets'
+import { Button, commonMessages, defineMessages, useVIntl } from '@modrinth/ui'
+import { computed } from 'vue'
+
+import {
+	appUpdateState,
+	downloadAvailableAppUpdate,
+	installAvailableAppUpdate,
+} from '@/providers/app-update'
+import { useRootBreadcrumb } from '@/providers/breadcrumbs'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	title: {
+		id: 'app.hosting.update-required.title',
+		defaultMessage: 'Modrinth App update required',
+	},
+	description: {
+		id: 'app.hosting.update-required.description',
+		defaultMessage: 'You need to update to use Modrinth Hosting through the Modrinth App',
+	},
+	downloadToUpdate: {
+		id: 'app.hosting.update-required.download',
+		defaultMessage: 'Download to update',
+	},
+	downloadingUpdate: {
+		id: 'app.action-bar.downloading-update',
+		defaultMessage: 'Downloading update',
+	},
+	reloadToUpdate: {
+		id: 'app.action-bar.reload-to-update',
+		defaultMessage: 'Reload to update',
+	},
+	excitedRinthbotAlt: {
+		id: 'app.hosting.update-required.rinthbot-alt',
+		defaultMessage: 'Excited Modrinth Bot',
+	},
+})
+
+useRootBreadcrumb({
+	slot: 'root',
+	id: 'servers',
+	label: () => formatMessage(commonMessages.serversLabel),
+	to: '/hosting/manage/',
+	visual: { type: 'icon', component: ServerStackIcon },
+})
+
+const { downloading, downloadPercent, downloadProgress, finishedDownloading } = appUpdateState
+
+const isUpdateDownloading = computed(
+	() =>
+		downloading.value ||
+		(downloadProgress.value > 0 && downloadProgress.value < 1 && !finishedDownloading.value),
+)
+
+async function handleUpdateClick() {
+	if (isUpdateDownloading.value) {
+		return
+	}
+
+	if (finishedDownloading.value) {
+		await installAvailableAppUpdate()
+	} else {
+		await downloadAvailableAppUpdate()
+	}
+}
+</script>
+
+<template>
+	<div class="box-border flex min-h-full items-center justify-center p-4">
+		<div class="relative mx-auto w-full max-w-xl pt-28">
+			<img
+				:src="ExcitedRinthbot"
+				:alt="formatMessage(messages.excitedRinthbotAlt)"
+				class="absolute right-8 top-0 h-28 w-auto md:right-20"
+			/>
+			<div class="relative flex flex-col gap-5 rounded-lg bg-bg-raised p-7 shadow-lg">
+				<div
+					class="absolute left-0 top-0 h-px w-full bg-gradient-to-r from-transparent via-green-500 to-transparent opacity-40"
+					style="
+						background: linear-gradient(
+							to right,
+							transparent 2rem,
+							var(--color-green) calc(100% - 13rem),
+							var(--color-green) calc(100% - 5rem),
+							transparent calc(100% - 2rem)
+						);
+					"
+				></div>
+
+				<div class="flex flex-col gap-5">
+					<h1 class="m-0 text-3xl font-extrabold">
+						{{ formatMessage(messages.title) }}
+					</h1>
+					<p class="m-0 text-lg">
+						{{ formatMessage(messages.description) }}
+					</p>
+					<Button
+						type="colored"
+						color="brand"
+						:disabled="isUpdateDownloading"
+						:aria-busy="isUpdateDownloading"
+						@click="handleUpdateClick"
+					>
+						<RefreshCwIcon v-if="finishedDownloading" />
+						<DownloadIcon v-else />
+						<span v-if="isUpdateDownloading">
+							{{ formatMessage(messages.downloadingUpdate) }}
+							<span class="inline-block w-[3ch] text-right tabular-nums">
+								{{ downloadPercent }}%
+							</span>
+						</span>
+						<span v-else-if="finishedDownloading">
+							{{ formatMessage(messages.reloadToUpdate) }}
+						</span>
+						<span v-else>{{ formatMessage(messages.downloadToUpdate) }}</span>
+					</Button>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>

apps/app-frontend/src/locales/en-US/index.json

@@ -302,6 +302,18 @@
   "app.export-modal.version-number-placeholder": {
     "message": "1.0.0"
   },
+  "app.hosting.update-required.description": {
+    "message": "You need to update to use Modrinth Hosting through the Modrinth App"
+  },
+  "app.hosting.update-required.download": {
+    "message": "Download to update"
+  },
+  "app.hosting.update-required.rinthbot-alt": {
+    "message": "Excited Modrinth Bot"
+  },
+  "app.hosting.update-required.title": {
+    "message": "Modrinth App update required"
+  },
   "app.install.phase.downloading_content": {
     "message": "Downloading content"
   },