feat: server management in app (#5628)

* start new server settings tabs

* update properties tab to match design

* better stying in general tab

* feat: add suffix input for hostname field

* implement tables for allocations and DNS records

* add tags for dns record type

* small gap adjustment

* polish advanced page

* adjust properties page hierarchy

* fix searching properties, empty state and projection radius appearing

* pnpm prepr

* update copy to match designs

* fix suffix input component

* style fixes and match heading size

* small fix

* fix search allocations placeholder

* adjust table styles

* move all installation settings helper text to below input

* update icon to use overflow menu buttons

* fix modal to be consistent

* open advanced properties when search

* remove other and custom properties, and update styles

* remove hide/show all java versions

* handle mc 26

* refactor: move server settings pages into /ui and add app ServerSettingsModal

* hook up server pages for app

* add server page header to app

* hook up server settings modal

* use large size

* fix card box shadow style

* fix hostname input for app

* fix app/website card containers

* implement external tabs for billing and admin billing

* fix save banner fixed to parent instead of page body

* remove unused prop to FriendsList causing warning in app

* fix client-only not available for app

* fix bottom cut off

* wire node auth

* implement full copy buttons

* dedup copy button tailwind styles

* fix hover class not working in @apply

* fix spacing

* fix error validation styles

* apply consistent styles and spacing

* feat: update hosting server card (#5609)

* fix type errors

* fix some stylesheets not imported for storybook

* add server listing stories

* add fix for frontend stylesheet imports

* remove props.

* convert copy code to use tailwind

* update server listing component styles

* update server info label styles

* start status/player count info label, more style updates and fixes

* add new server card buttons

* hook up server cards and implement updated styles

* hook up on download button

* fix tauri throwing error when api returns 204 No Content

* hook up purchase server modal in app

* fix upgrading state loading icon

* pnpm prepr

* filter out servers past 30 days after cancellation

* do not apply opacity on lock or spiner icons

* fix disabled server icon background

* update pending change stage

* handle known suspension states

* refactor: reduce code duplication for server listing

* update disabled state text color

* fix loading icon color

* clean up copy

* fix disabled opacity for server card

* update server listing files kept to be countdown

* implement resubscribe modal

* implement proper provisioning state for resubscribe

* fix duplicate attribute and pnpm prepr

* feat: add shared UI package auth DI

* feat: update purchase server flow (#5714)

* implement server list empty state component

* fix stories and adjust spacing

* implement select plan design refresh

* implement auth for empty server list

* use refs instead of reactive

* pnpm prepr

* fix auth usage for empty servers list

* move app auth provider setup to src/providers/setup

* pnpm prepr

* fix max height

* style fix

* fix getCreds no auth is blocking api client

* implement servers guest plan modal and signin which redirects back to modal's next step

* refactor guest plan select logic into provider

* implement sign in or create account popup

* remove force empty serverList

* add download button for suspended mod and generic

* add handling for when user logs out

* QA pass style fixes

* more consistent page styles

* fix duplicate export

* refactor: remove all fallback stuff from resubscribe modal

* implement shared download latest backup util

* i18n pass

* pnpm prepr

* fix region being selected if ping failed

* pnpm prepr

* feat: servers in app finalization (#5744)

* feat: start on shared console implementation into logs and overview pages

* fix: terminal gap issues

* feat: swap word wrap for full screen

* fix: stats cards alignment

* fix: stats

* feat: fix console clear + remove copy

* fix: lint

* fix: use reset not clear

* feat: shared server header & overview page for app and website (#5736)

* feat: implement shared server header for app and website

* feat: implement wrapped overview page with shared composable and hook it up

* pnpm prepr

* fix: bugs

* qa: cleanup

* feat: root.vue shared layout

* feat: delete old options pages + fix discovery frontend

* fix: discovery

* fix: misc style/layout issues

* fix page padding

* fix: modal height jankiness

* feat: implement server install content in app and server setup modal with DI

* fix: spacing

* remove servers in app feature flag

* Revert "remove servers in app feature flag"

This reverts commit 86e284c4bd.

* fix: qa

* feat: remove legacy components from apps/frontend/src/components/ui/servers

---------

Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>

* qa pass (#5738)

* fix: qa

* feat: qa

* fix: server icon fetch fails due to global node auth race condition overriding each other

* fix: lint

* fix: server icon upload/sync and centralize logic

* fix: server settings modal not closing for server reset

* fix: better server sorting

* feat: copy address in server listing card

* fix: notification panel in modal and when overlapping with action bar

* fix: empty server list empty state flashing when refresh, fixed by adding isReady auth flag

* feat: use floating action bar for save banner

* fix: saving state in save bar

* fix: edit server icon styling

* fix: confirm modal to have consistent buttons

* feat: loading animation for server panel + caching improvements for app

* pnpm prepr

* feat: search page deduplication (#5754)

* fix: action bar behind modal

* fix: remove warning modal for stopping

* fix: server cards states

* we hate webkit we hate webkit

* fix: update allocation creation to not use modal

* fix: properties tab spacing and styles

* feat: add files tab copy

* fix: advanced properties icon

* fix: remove back to all servers link

* feat: add files tab link in copy

* fix: server header styles to be consistent with instance

* fix: add header icons back

* feat: update instance settings icon to be consistent

* fix: icon container

* feat: upload state persistence across tabs

* fix: server labels text wrapping

* fix: use surface-5 border

* fix: loading spinner showing with onboarding below

* feat: new server button shows purchase modal in website

* fix: billing page not showing quarterly interval

* fix: server downgrade not showing updated subscription notification

* fix: server settings invalidate saved state and remove server context provider since its already provided in the page

* pnpm prepr

* add stripe publishable key to app build

* feat: console highlighting

* fix: rename servers title to modrinth hosting

* feat: search fix

* fix: qa/styles

* fix: ip click active and remove power dont ask again

* fix: qa

* feat: highlighting fix console

* fix: disable conflicts action

* fix: error dismiss bug

* feat: modal clarification

* fix: files perms issue

* fix: lint

* feat: modal fix

* enable show uptime

* fix: add loading state to edit server icon

* fix: notification panel take in has sidebar from settings

* fix: consistency pass on app settings

* fix: consistency pass on instance settings

* pnpm prepr

* fix: nagivate to billing button in app to go to website

* fix: stripe return url in app causing app to open modrinth.com in tauri

* refactor: better show polling UI code

* fix: new server polling comparison to use server ids instead of length

* fix: buttonstyled story

* fix: button styling

* fix: content.vue regression

* feat: project url redirects

* fix: breadcrumbs

* fix: purchase with newly added card

* fix: console ordering problems

* fix: app-frontend missing env config and staging environment

* fix: log syncing for instances and server panel accidentally

* fix: QA issues

* fix: server page loading state

* fix: stats card logic

* fix: lint

* fix: qa

* fix: console height padding

* fix: terminal padding + loading indicator

* feat: update medal server listing styling

* fix: no upgrade button for medal server listing in app

* fix: go to overview instead of content tab after onboarding

* fix: qa

* fix: teleport modals to body

* fix: logs tab + qa

* fix: local storage for user preferences

* fix: qa loading indic

* feat: considitonal debug and trace

* fix: jump to top on install bug

* feat: swap out server hard drive icon to server stack icon

* feat: servers in app feature flag default true

* fix: highlight row ufll

* fix: webkit thing onto a tag

* fix: input field

* fix: clear fix

* fix: lint

* fix: fmt

* feat: improve share modal and bring it back for sharing log

* pnpm prepr

* fix: menu overflowing

* feat: remove servers in app feature flag

* fix: server stat charts no longer showing color

* fix: library nav no primary state

* fix: better modal height and width

* fix: highlighting bugs

* fix: empty states

* fix: delay import to fix overview page slow load on MacOS

* fix: medal server listing too bright on light mode

* fix: admon analysis + fix logs

* fix: bug

* fix: clear purchase intent from sign-in after closing modal

* performance: improve server manage stats loading by splitting reactivity

* fix: deploy + admon + disable highlighting

* fix: clippy

---------

Co-authored-by: tdgao <mr.trumgao@gmail.com>
Co-authored-by: Truman Gao <106889354+tdgao@users.noreply.github.com>

* feat: temp wrangler

* fix: lint

* fix: logs upload

* fix: console empty state and admon regressions

* fix: fields

* feat: log deleting + prefetch for Logs.vue

* feat: move delete before share

* feat: clear endpoint

* feat: we ball!

---------

Co-authored-by: Calum H. <calum@modrinth.com>
Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>

packages/ui/src/components/servers/edit-server-icon/EditServerIcon.vue

@@ -0,0 +1,264 @@
+<template>
+	<div class="flex flex-col gap-2.5">
+		<span class="text-lg font-semibold text-contrast">Icon</span>
+		<div class="group relative w-fit">
+			<OverflowMenu
+				v-tooltip="'Edit icon'"
+				class="m-0 cursor-pointer appearance-none border-none bg-transparent p-0 transition-transform group-active:scale-95"
+				:disabled="isIconActionLoading"
+				:options="[
+					{
+						id: 'upload',
+						action: () => triggerFileInput(),
+					},
+					{
+						id: 'sync',
+						action: () => resetIcon(),
+					},
+				]"
+			>
+				<ServerIcon
+					class="size-28 transition-[filter] group-hover:brightness-[0.50]"
+					:class="isIconActionLoading ? 'brightness-[0.50]' : ''"
+					:image="displayIcon"
+				/>
+				<div
+					class="absolute top-0 h-full w-full flex items-center justify-center"
+					:class="isIconActionLoading ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'"
+				>
+					<SpinnerIcon
+						v-if="isIconActionLoading"
+						aria-hidden="true"
+						class="h-10 w-10 animate-spin text-primary"
+					/>
+					<EditIcon v-else aria-hidden="true" class="h-10 w-10 text-primary" />
+				</div>
+				<template #upload> <UploadIcon /> Upload icon </template>
+				<template #sync> <TransferIcon /> Sync icon </template>
+			</OverflowMenu>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { EditIcon, SpinnerIcon, TransferIcon, UploadIcon } from '@modrinth/assets'
+import { useQueryClient } from '@tanstack/vue-query'
+import { computed, ref } from 'vue'
+
+import { OverflowMenu, ServerIcon } from '#ui/components'
+import { useServerImage } from '#ui/composables'
+import {
+	injectModrinthClient,
+	injectModrinthServerContext,
+	injectNotificationManager,
+} from '#ui/providers'
+
+const { addNotification } = injectNotificationManager()
+const client = injectModrinthClient()
+const { serverId, server } = injectModrinthServerContext()
+const queryClient = useQueryClient()
+const isUploadingIcon = ref(false)
+const isSyncingIcon = ref(false)
+const isIconActionLoading = computed(() => isUploadingIcon.value || isSyncingIcon.value)
+
+const {
+	image: displayIcon,
+	refetch: refetchRemoteIcon,
+	setImage,
+	clearImage,
+} = useServerImage(
+	serverId,
+	computed(() => server.value?.upstream ?? null),
+	{
+		includeProjectFallback: false,
+	},
+)
+
+function getStatusCode(error: unknown): number | undefined {
+	const err = error as { statusCode?: number; response?: { status?: number } }
+	return err.statusCode ?? err.response?.status
+}
+
+function isNotFound(error: unknown): boolean {
+	return getStatusCode(error) === 404
+}
+
+const uploadFile = async (e: Event) => {
+	if (isIconActionLoading.value) return
+
+	const file = (e.target as HTMLInputElement).files?.[0]
+	if (!file) {
+		addNotification({
+			type: 'error',
+			title: 'No file selected',
+			text: 'Please select a file to upload.',
+		})
+		return
+	}
+
+	isUploadingIcon.value = true
+
+	try {
+		const scaledFile = await new Promise<File>((resolve, reject) => {
+			const canvas = document.createElement('canvas')
+			const ctx = canvas.getContext('2d')
+			const img = new Image()
+			img.onload = () => {
+				canvas.width = 64
+				canvas.height = 64
+				ctx?.drawImage(img, 0, 0, 64, 64)
+				canvas.toBlob((blob) => {
+					if (blob) {
+						resolve(new File([blob], 'server-icon.png', { type: 'image/png' }))
+					} else {
+						reject(new Error('Canvas toBlob failed'))
+					}
+				}, 'image/png')
+				URL.revokeObjectURL(img.src)
+			}
+			img.onerror = reject
+			img.src = URL.createObjectURL(file)
+		})
+
+		const fsAuth = await client.archon.servers_v0.getFilesystemAuth(serverId)
+
+		try {
+			await client.kyros.files_v0.uploadFileWithAuth(fsAuth, '/server-icon.png', scaledFile).promise
+		} catch (scaledUploadError) {
+			// Node FS may reject create when file already exists. Delete and retry once.
+			try {
+				await client.kyros.files_v0.deleteFileOrFolderWithAuth(fsAuth, '/server-icon.png', false)
+			} catch (deleteError) {
+				if (!isNotFound(deleteError)) {
+					throw scaledUploadError
+				}
+			}
+
+			await client.kyros.files_v0.uploadFileWithAuth(fsAuth, '/server-icon.png', scaledFile).promise
+		}
+
+		// Keep original file in sync when possible, but don't block icon updates on failures here.
+		try {
+			await client.kyros.files_v0.deleteFileOrFolderWithAuth(
+				fsAuth,
+				'/server-icon-original.png',
+				false,
+			)
+		} catch (deleteOriginalError) {
+			if (!isNotFound(deleteOriginalError)) {
+				// best effort
+			}
+		}
+
+		try {
+			await client.kyros.files_v0.uploadFileWithAuth(fsAuth, '/server-icon-original.png', file)
+				.promise
+		} catch (originalUploadError) {
+			if (!isNotFound(originalUploadError)) {
+				// best effort
+			}
+		}
+
+		const canvas = document.createElement('canvas')
+		const ctx = canvas.getContext('2d')
+		const img = new Image()
+		await new Promise<void>((resolve) => {
+			img.onload = () => {
+				canvas.width = 512
+				canvas.height = 512
+				ctx?.drawImage(img, 0, 0, 512, 512)
+				const dataURL = canvas.toDataURL('image/png')
+				setImage(dataURL)
+				queryClient.setQueriesData({ queryKey: ['servers', 'detail', serverId, 'icon'] }, dataURL)
+				resolve()
+				URL.revokeObjectURL(img.src)
+			}
+			img.src = URL.createObjectURL(file)
+		})
+		await refetchRemoteIcon()
+
+		addNotification({
+			type: 'success',
+			title: 'Server icon updated',
+			text: 'Your server icon was successfully changed.',
+		})
+	} catch {
+		addNotification({
+			type: 'error',
+			title: 'Upload failed',
+			text: 'Failed to upload server icon.',
+		})
+	} finally {
+		isUploadingIcon.value = false
+	}
+}
+
+const resetIcon = async () => {
+	if (isIconActionLoading.value) return
+	isSyncingIcon.value = true
+
+	try {
+		const fsAuth = await client.archon.servers_v0.getFilesystemAuth(serverId)
+		const deleteResults = await Promise.allSettled([
+			client.kyros.files_v0.deleteFileOrFolderWithAuth(fsAuth, '/server-icon.png', false),
+			client.kyros.files_v0.deleteFileOrFolderWithAuth(fsAuth, '/server-icon-original.png', false),
+		])
+
+		for (const result of deleteResults) {
+			if (result.status === 'rejected' && !isNotFound(result.reason)) {
+				throw result.reason
+			}
+		}
+
+		// Force default icon state across all useServerImage instances via the shared query cache.
+		// Use `null` (not `undefined`) because TanStack Query v5 treats setQueriesData(undefined)
+		// as a no-op. The `null` sentinel is handled by useServerImage's image computed.
+		clearImage()
+		await queryClient.cancelQueries({ queryKey: ['servers', 'detail', serverId, 'icon'] })
+		queryClient.setQueriesData({ queryKey: ['servers', 'detail', serverId, 'icon'] }, null)
+
+		addNotification({
+			type: 'success',
+			title: 'Server icon reset',
+			text: 'Your server icon was successfully reset.',
+		})
+	} catch {
+		addNotification({
+			type: 'error',
+			title: 'Reset failed',
+			text: 'Failed to reset server icon.',
+		})
+	} finally {
+		isSyncingIcon.value = false
+	}
+}
+
+const triggerFileInput = () => {
+	if (isIconActionLoading.value) return
+
+	const input = document.createElement('input')
+	input.type = 'file'
+	input.id = 'server-icon-field'
+	input.accept = 'image/png,image/jpeg,image/gif,image/webp'
+	const cleanup = () => {
+		input.remove()
+		window.removeEventListener('focus', handleWindowFocus)
+	}
+	const handleWindowFocus = () => {
+		// If picker was cancelled there is no change event; clean up on focus return.
+		setTimeout(() => {
+			if (!input.value) cleanup()
+		}, 0)
+	}
+	input.onchange = async (event) => {
+		try {
+			await uploadFile(event)
+		} finally {
+			cleanup()
+		}
+	}
+	document.body.appendChild(input)
+	window.addEventListener('focus', handleWindowFocus, { once: true })
+	input.click()
+}
+</script>