feat: show update available notif for modrinth app in linux (#5181)

* feat: show update available notif for modrinth app in linux

* remove changelog button

* update copy

* pnpm prepr

* add restart app changelog

* pnpm prepr

* use env var to check for updates are disabled

* update copy

* pnpm prepr

---------

Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

apps/app-frontend/src/App.vue

@@ -71,6 +71,7 @@ import PromotionWrapper from '@/components/ui/PromotionWrapper.vue'
 import QuickInstanceSwitcher from '@/components/ui/QuickInstanceSwitcher.vue'
 import RunningAppBar from '@/components/ui/RunningAppBar.vue'
 import SplashScreen from '@/components/ui/SplashScreen.vue'
+import UpdateAvailableToast from '@/components/ui/UpdateAvailableToast.vue'
 import UpdateToast from '@/components/ui/UpdateToast.vue'
 import URLConfirmModal from '@/components/ui/URLConfirmModal.vue'
 import { useCheckDisableMouseover } from '@/composables/macCssFix.js'
@@ -143,6 +144,7 @@ const showOnboarding = ref(false)
 const nativeDecorations = ref(false)
 
 const os = ref('')
+const isDevEnvironment = ref(false)
 
 const stateInitialized = ref(false)
 
@@ -247,6 +249,7 @@ async function setupApp() {
 
 	os.value = await getOS()
 	const dev = await isDev()
+	isDevEnvironment.value = dev
 	const version = await getVersion()
 	showOnboarding.value = !onboarded
 
@@ -505,21 +508,23 @@ const restarting = ref(false)
 const updateToastDismissed = ref(false)
 const availableUpdate = ref(null)
 const updateSize = ref(null)
+const updatesEnabled = ref(true)
 async function checkUpdates() {
 	if (!(await areUpdatesEnabled())) {
 		console.log('Skipping update check as updates are disabled in this build or environment')
+		updatesEnabled.value = false
 		return
 	}
 
 	async function performCheck() {
 		const update = await invoke('plugin:updater|check')
-		const isExistingUpdate = update.version === availableUpdate.value?.version
-
 		if (!update) {
 			console.log('No update available')
 			return
 		}
 
+		const isExistingUpdate = update.version === availableUpdate.value?.version
+
 		if (isExistingUpdate) {
 			console.log('Update is already known')
 			return
@@ -769,6 +774,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 					@restart="installUpdate"
 					@download="downloadAvailableUpdate"
 				/>
+				<UpdateAvailableToast v-else-if="!updatesEnabled && os === 'Linux' && !isDevEnvironment" />
 			</Transition>
 		</Suspense>
 		<Transition name="fade">

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

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { XIcon } from '@modrinth/assets'
+import { ButtonStyled, commonMessages, defineMessages, useVIntl } from '@modrinth/ui'
+import { getVersion } from '@tauri-apps/api/app'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const { formatMessage } = useVIntl()
+
+const dismissed = ref(false)
+const availableUpdate = ref<{ version: string } | null>(null)
+
+let checkInterval: ReturnType<typeof setInterval> | null = null
+
+async function checkForUpdate() {
+	try {
+		const [response, currentVersion] = await Promise.all([
+			fetch('https://launcher-files.modrinth.com/updates.json'),
+			getVersion(),
+		])
+		const updates = await response.json()
+		const latestVersion = updates?.version
+
+		if (latestVersion && latestVersion !== currentVersion) {
+			if (latestVersion !== availableUpdate.value?.version) {
+				availableUpdate.value = { version: latestVersion }
+				dismissed.value = false
+			}
+		}
+	} catch (e) {
+		console.error('Failed to check for updates:', e)
+	}
+}
+
+function dismiss() {
+	dismissed.value = true
+}
+
+onMounted(() => {
+	checkForUpdate()
+	checkInterval = setInterval(checkForUpdate, 5 * 60 * 1000)
+})
+
+onUnmounted(() => {
+	if (checkInterval) {
+		clearInterval(checkInterval)
+	}
+})
+
+const messages = defineMessages({
+	title: {
+		id: 'app.update-toast.title',
+		defaultMessage: 'Update available',
+	},
+	body: {
+		id: 'app.update-toast.body.linux',
+		defaultMessage:
+			'Modrinth App v{version} is available. Use your package manager to update for the latest features and fixes!',
+	},
+	download: {
+		id: 'app.update-toast.download-page',
+		defaultMessage: 'Download',
+	},
+})
+</script>
+<template>
+	<div
+		v-if="availableUpdate && !dismissed"
+		class="grid grid-cols-[min-content] fixed card-shadow rounded-2xl top-[--top-bar-height] mt-6 right-6 p-4 z-10 bg-bg-raised border-divider border-solid border-[2px]"
+	>
+		<div class="flex min-w-[25rem] gap-4">
+			<h2 class="whitespace-nowrap text-base text-contrast font-semibold m-0 grow">
+				{{ formatMessage(messages.title) }}
+			</h2>
+			<ButtonStyled size="small" circular>
+				<button v-tooltip="formatMessage(commonMessages.closeButton)" @click="dismiss">
+					<XIcon />
+				</button>
+			</ButtonStyled>
+		</div>
+		<p class="text-sm mt-2 mb-0">
+			{{ formatMessage(messages.body, { version: availableUpdate.version }) }}
+		</p>
+	</div>
+</template>

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

@@ -38,6 +38,9 @@
   "app.update-toast.body.download-complete": {
     "message": "Modrinth App v{version} has finished downloading. Reload to update now, or automatically when you close Modrinth App."
   },
+  "app.update-toast.body.linux": {
+    "message": "Modrinth App v{version} is available. Use your package manager to update for the latest features and fixes!"
+  },
   "app.update-toast.body.metered": {
     "message": "Modrinth App v{version} is available now! Since you're on a metered network, we didn't automatically download it."
   },
@@ -47,6 +50,9 @@
   "app.update-toast.download": {
     "message": "Download ({size})"
   },
+  "app.update-toast.download-page": {
+    "message": "Download"
+  },
   "app.update-toast.downloading": {
     "message": "Downloading..."
   },