feat: shared server header & overview page for app and website

apps/app-frontend/src/App.vue

@@ -5,6 +5,7 @@ import {
 	nodeAuthState,
 	PanelVersionFeature,
 	TauriModrinthClient,
+	VerboseLoggingFeature,
 } from '@modrinth/api-client'
 import {
 	ArrowBigUpDashIcon,
@@ -146,6 +147,7 @@ const tauriApiClient = new TauriModrinthClient({
 			token: async () => (await getCreds())?.session,
 		}),
 		new PanelVersionFeature(),
+		new VerboseLoggingFeature(),
 	],
 })
 provideModrinthClient(tauriApiClient)
@@ -420,6 +422,7 @@ const route = useRoute()
 
 const loading = useLoading()
 loading.setEnabled(false)
+loading.startLoading()
 
 const error = useError()
 const errorModal = ref()
@@ -1023,6 +1026,8 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 				v-if="themeStore.featureFlags.servers_in_app"
 				v-tooltip.right="'Servers'"
 				to="/hosting/manage"
+				:is-primary="(r) => r.path === '/hosting/manage' || r.path === '/hosting/manage/'"
+				:is-subpage="(r) => r.path.startsWith('/hosting/manage/') && r.path !== '/hosting/manage/'"
 			>
 				<ServerIcon />
 			</NavButton>
@@ -1195,7 +1200,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 				</div>
 			</transition>
 			<div
-				class="loading-indicator-container h-8 fixed z-50"
+				class="loading-indicator-container h-8 fixed z-50 pointer-events-none"
 				:style="{
 					top: 'calc(var(--top-bar-height))',
 					left: 'calc(var(--left-bar-width))',

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

@@ -3,6 +3,7 @@
 		v-if="typeof to === 'string'"
 		:to="to"
 		v-bind="$attrs"
+		:active-class="isSubpage ? '' : undefined"
 		:class="{
 			'router-link-active': isPrimary && isPrimary(route),
 			'subpage-active': isSubpage && isSubpage(route),

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

@@ -39,19 +39,11 @@
 				>
 					<SpinnerIcon v-if="installing" class="animate-spin" />
 					<template v-else-if="!installed">
-						<DownloadIcon v-if="modpack || instance" />
+						<DownloadIcon v-if="shouldUseInstallIcon" />
 						<PlusIcon v-else />
 					</template>
 					<CheckIcon v-else />
-					{{
-						installing
-							? 'Installing'
-							: installed
-								? 'Installed'
-								: modpack || instance
-									? 'Install'
-									: 'Add to an instance'
-					}}
+					{{ installActionLabel }}
 				</button>
 			</ButtonStyled>
 		</template>
@@ -109,14 +101,44 @@ const props = defineProps({
 		type: String,
 		default: null,
 	},
+	customInstall: {
+		type: Function,
+		default: null,
+	},
 })
 
 const emit = defineEmits(['open', 'install'])
 
 const installing = ref(false)
+const installActionLabel = computed(() =>
+	installing.value
+		? 'Installing'
+		: props.installed
+			? 'Installed'
+			: props.customInstall || modpack.value || props.instance
+				? 'Install'
+				: 'Add to an instance',
+)
+const shouldUseInstallIcon = computed(
+	() => !!props.customInstall || !!modpack.value || !!props.instance,
+)
 
 async function install() {
 	installing.value = true
+	if (props.customInstall) {
+		try {
+			const didInstall = await props.customInstall(props.project)
+			if (didInstall !== false) {
+				emit('install', props.project.project_id ?? props.project.id)
+			}
+		} catch (err) {
+			handleError(err)
+		} finally {
+			installing.value = false
+		}
+		return
+	}
+
 	await installVersion(
 		props.project.project_id ?? props.project.id,
 		null,

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

@@ -185,9 +185,6 @@
   "app.modal.update-to-play.update-required-description": {
     "message": "An update is required to play {name}. Please update to the latest version to launch the game."
   },
-  "app.server-settings.failed-to-load-server": {
-    "message": "Failed to load server settings"
-  },
   "app.settings.developer-mode-enabled": {
     "message": "Developer mode enabled."
   },
@@ -601,11 +598,5 @@
   },
   "search.filter.locked.server-loader.title": {
     "message": "Loader is provided by the server"
-  },
-  "servers.busy.installing": {
-    "message": "Server is installing"
-  },
-  "servers.busy.syncing-content": {
-    "message": "Content sync in progress"
   }
 }