Merge tag 'v0.10.20' into beta

apps/app-frontend/src/App.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { AuthFeature, TauriModrinthClient } from '@modrinth/api-client'
 import {
 	ArrowBigUpDashIcon,
 	ChangeSkinIcon,
@@ -18,12 +19,14 @@ import {
 	RefreshCwIcon,
 	RestoreIcon,
 	RightArrowIcon,
+	ServerIcon,
 	SettingsIcon,
 	UserIcon,
 	WorldIcon,
 	XIcon,
 } from '@modrinth/assets'
 import {
+	Admonition,
 	Avatar,
 	Button,
 	ButtonStyled,
@@ -32,9 +35,12 @@ import {
 	NotificationPanel,
 	OverflowMenu,
 	ProgressSpinner,
-	provideNotificationManager
+	provideModrinthClient,
+	provideNotificationManager,
+	useDebugLogger,
 } from '@modrinth/ui'
 import { renderString } from '@modrinth/utils'
+import { useQuery } from '@tanstack/vue-query'
 import { getVersion } from '@tauri-apps/api/app'
 import { invoke } from '@tauri-apps/api/core'
 import { getCurrentWindow } from '@tauri-apps/api/window'
@@ -63,7 +69,8 @@ import RunningAppBar from '@/components/ui/RunningAppBar.vue'
 import SplashScreen from '@/components/ui/SplashScreen.vue'
 import URLConfirmModal from '@/components/ui/URLConfirmModal.vue'
 import { useCheckDisableMouseover } from '@/composables/macCssFix.js'
-import { debugAnalytics, optOutAnalytics, trackEvent } from '@/helpers/analytics'
+import { debugAnalytics, initAnalytics, optOutAnalytics, trackEvent } from '@/helpers/analytics'
+import { check_reachable } from '@/helpers/auth.js'
 import { get_user } from '@/helpers/cache.js'
 import { command_listener, warning_listener } from '@/helpers/events.js'
 import { useFetch } from '@/helpers/fetch.js'
@@ -97,6 +104,16 @@ const notificationManager = new AppNotificationManager()
 provideNotificationManager(notificationManager)
 const { handleError, addNotification } = notificationManager
 
+const tauriApiClient = new TauriModrinthClient({
+	userAgent: `modrinth/theseus/${getVersion()} (support@modrinth.com)`,
+	features: [
+		new AuthFeature({
+			token: async () => (await getCreds()).session,
+		}),
+	],
+})
+provideModrinthClient(tauriApiClient)
+
 const news = ref([])
 const availableSurvey = ref(false)
 
@@ -121,6 +138,27 @@ const criticalErrorMessage = ref()
 
 const isMaximized = ref(false)
 
+const authUnreachableDebug = useDebugLogger('AuthReachableChecker')
+const authServerQuery = useQuery({
+	queryKey: ['authServerReachability'],
+	queryFn: async () => {
+		await check_reachable()
+		authUnreachableDebug('Auth servers are reachable')
+		return true
+	},
+	refetchInterval: 5 * 60 * 1000, // 5 minutes
+	retry: false,
+	refetchOnWindowFocus: false,
+})
+
+const authUnreachable = computed(() => {
+	if (authServerQuery.isError.value && !authServerQuery.isLoading.value) {
+		console.warn('Failed to reach auth servers', authServerQuery.error.value)
+		return true
+	}
+	return false
+})
+
 onMounted(async () => {
 	await useCheckDisableMouseover()
 	await getRemote(false) // [AR] Check for updates
@@ -156,6 +194,15 @@ const messages = defineMessages({
 		id: 'app.update.downloading-update',
 		defaultMessage: 'Downloading update ({percent}%)',
 	},
+	authUnreachableHeader: {
+		id: 'app.auth-servers.unreachable.header',
+		defaultMessage: 'Cannot reach authentication servers',
+	},
+	authUnreachableBody: {
+		id: 'app.auth-servers.unreachable.body',
+		defaultMessage:
+			'Minecraft authentication servers may be down right now. Check your internet connection and try again later.',
+	},
 })
 
 async function setupApp() {
@@ -315,7 +362,11 @@ const handleClose = async () => {
 
 const router = useRouter()
 router.afterEach((to, from, failure) => {
-	trackEvent('PageView', { path: to.path, fromPath: from.path, failed: failure })
+	trackEvent('PageView', {
+		path: to.path,
+		fromPath: from.path,
+		failed: failure,
+	})
 })
 const route = useRoute()
 
@@ -339,7 +390,7 @@ async function fetchCredentials() {
 	if (creds && creds.user_id) {
 		creds.user = await get_user(creds.user_id).catch(handleError)
 	}
-	credentials.value = creds
+	credentials.value = creds ?? null
 }
 
 async function signIn() {
@@ -387,6 +438,14 @@ const forceSidebar = computed(
 )
 const sidebarVisible = computed(() => sidebarToggled.value || forceSidebar.value)
 
+watch(showAd, () => {
+	if (!showAd.value) {
+		hide_ads_window(true)
+	} else {
+		init_ads_window(true)
+	}
+})
+
 onMounted(() => {
 	invoke('show_window')
 
@@ -570,7 +629,11 @@ provideAppUpdateDownloadProgress(appUpdateDownload) // [AR Note] If delete this
 <template>
 	<SplashScreen v-if="!stateFailed" ref="splashScreen" data-tauri-drag-region />
 	<div id="teleports"></div>
-	<div v-if="stateInitialized" class="app-grid-layout experimental-styles-within relative">
+	<div
+		v-if="stateInitialized"
+		class="app-grid-layout experimental-styles-within relative"
+		:class="{ 'disable-advanced-rendering': !themeStore.advancedRendering }"
+	>
 		<Suspense>
 			<AppSettingsModal ref="settingsModal" />
 		</Suspense>
@@ -589,6 +652,13 @@ provideAppUpdateDownloadProgress(appUpdateDownload) // [AR Note] If delete this
 			<NavButton v-if="themeStore.featureFlags.worlds_tab" v-tooltip.right="'Worlds'" to="/worlds">
 				<WorldIcon />
 			</NavButton>
+			<NavButton
+				v-if="themeStore.featureFlags.servers_in_app"
+				v-tooltip.right="'Servers'"
+				to="/servers/manage"
+			>
+				<ServerIcon />
+			</NavButton>
 			<NavButton
 				v-tooltip.right="'Discover content'"
 				to="/browse/modpack"
@@ -612,7 +682,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload) // [AR Note] If delete this
 			>
 				<LibraryIcon />
 			</NavButton>
-			<div class="h-px w-6 mx-auto my-2 bg-button-bg"></div>
+			<div class="h-px w-6 mx-auto my-2 bg-surface-5"></div>
 			<suspense>
 				<QuickInstanceSwitcher />
 			</suspense>
@@ -773,7 +843,10 @@ provideAppUpdateDownloadProgress(appUpdateDownload) // [AR Note] If delete this
 	<div
 		v-if="stateInitialized"
 		class="app-contents experimental-styles-within"
-		:class="{ 'sidebar-enabled': sidebarVisible }"
+		:class="{
+			'sidebar-enabled': sidebarVisible,
+			'disable-advanced-rendering': !themeStore.advancedRendering,
+		}"
 	>
 		<div class="app-viewport flex-grow router-view">
 			<transition name="popup-survey">
@@ -821,16 +894,25 @@ provideAppUpdateDownloadProgress(appUpdateDownload) // [AR Note] If delete this
 					width: 'calc(100% - var(--right-bar-width))',
 				}"
 			></div>
-			<div
+			<Admonition
 				v-if="criticalErrorMessage"
-				class="m-6 mb-0 flex flex-col border-red bg-bg-red rounded-2xl border-2 border-solid p-4 gap-1 font-semibold text-contrast"
+				type="critical"
+				:header="criticalErrorMessage.header"
+				class="m-6 mb-0"
 			>
-				<h1 class="m-0 text-lg font-extrabold">{{ criticalErrorMessage.header }}</h1>
 				<div
 					class="markdown-body text-primary"
 					v-html="renderString(criticalErrorMessage.body ?? '')"
 				></div>
-			</div>
+			</Admonition>
+			<Admonition
+				v-if="authUnreachable"
+				type="warning"
+				:header="formatMessage(messages.authUnreachableHeader)"
+				class="m-6 mb-0"
+			>
+				{{ formatMessage(messages.authUnreachableBody) }}
+			</Admonition>
 			<RouterView v-slot="{ Component }">
 				<template v-if="Component">
 					<Suspense @pending="loading.startLoading()" @resolve="loading.stopLoading()">
@@ -1032,7 +1114,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload) // [AR Note] If delete this
 
 .app-sidebar::before {
 	content: '';
-	box-shadow: -15px 0 15px -15px rgba(0, 0, 0, 0.2) inset;
+	box-shadow: -15px 0 15px -15px rgba(0, 0, 0, 0.1) inset;
 	top: 0;
 	bottom: 0;
 	left: -2rem;
@@ -1057,9 +1139,10 @@ provideAppUpdateDownloadProgress(appUpdateDownload) // [AR Note] If delete this
 	right: calc(-1 * var(--left-bar-width));
 	bottom: calc(-1 * var(--left-bar-width));
 	border-radius: var(--radius-xl);
-	box-shadow:
-		1px 1px 15px rgba(0, 0, 0, 0.2) inset,
-		inset 1px 1px 1px rgba(255, 255, 255, 0.23);
+	box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.1) inset;
+	border-color: var(--surface-5);
+	border-width: 1px;
+	border-style: solid;
 	pointer-events: none;
 }