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/layouts/shared/files-tab/components/FileOperationAdmonitions.vue

@@ -1,53 +1,4 @@
 <template>
-	<Transition
-		enter-active-class="transition-all duration-300 ease-out overflow-hidden"
-		enter-from-class="opacity-0 max-h-0"
-		enter-to-class="opacity-100 max-h-40"
-		leave-active-class="transition-all duration-200 ease-in overflow-hidden"
-		leave-from-class="opacity-100 max-h-40"
-		leave-to-class="opacity-0 max-h-0"
-	>
-		<Admonition v-if="ctx.uploadState?.value?.isUploading" type="info" class="mb-4">
-			<template #icon>
-				<UploadIcon class="h-6 w-6 flex-none text-brand-blue" />
-			</template>
-			<template #header>
-				{{
-					ctx.uploadingLabel
-						? ctx.uploadingLabel(
-								ctx.uploadState.value.completedFiles,
-								ctx.uploadState.value.totalFiles,
-							)
-						: formatMessage(messages.uploadingFiles, {
-								completed: ctx.uploadState.value.completedFiles,
-								total: ctx.uploadState.value.totalFiles,
-							})
-				}}
-				<span v-if="ctx.uploadState.value.currentFileName" class="font-normal text-secondary">
-					— {{ ctx.uploadState.value.currentFileName }}
-				</span>
-			</template>
-			<span class="text-secondary">
-				{{
-					formatMessage(messages.uploadProgress, {
-						uploaded: formatBytes(ctx.uploadState.value.uploadedBytes),
-						total: formatBytes(ctx.uploadState.value.totalBytes),
-						percent: Math.round(uploadOverallProgress * 100),
-					})
-				}}
-			</span>
-			<template v-if="ctx.cancelUpload" #top-right-actions>
-				<ButtonStyled type="outlined" color="blue">
-					<button class="!border" @click="ctx.cancelUpload?.()">
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-			</template>
-			<template #progress>
-				<ProgressBar :progress="uploadOverallProgress" :max="1" color="blue" full-width />
-			</template>
-		</Admonition>
-	</Transition>
 	<TransitionGroup
 		name="fs-op"
 		enter-active-class="transition-all duration-300 ease-out overflow-hidden"
@@ -89,13 +40,13 @@
 					— {{ op.current_file?.split('/')?.pop() }}
 				</template>
 			</span>
-			<template v-if="op.id && ctx.dismissOperation" #top-right-actions>
+			<template v-if="op.id" #top-right-actions>
 				<ButtonStyled
 					v-if="op.state !== 'done' && !op.state?.startsWith('fail')"
 					type="outlined"
 					color="blue"
 				>
-					<button class="!border" @click="ctx.dismissOperation?.(op.id!, 'cancel')">
+					<button class="!border" @click="ctx.dismissOperation(op.id!, 'cancel')">
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
 				</ButtonStyled>
@@ -106,7 +57,7 @@
 					hover-color-fill="background"
 					:color="op.state === 'done' ? 'green' : 'red'"
 				>
-					<button @click="ctx.dismissOperation?.(op.id!, 'dismiss')">
+					<button @click="ctx.dismissOperation(op.id!, 'dismiss')">
 						<XIcon />
 					</button>
 				</ButtonStyled>
@@ -125,29 +76,19 @@
 </template>
 
 <script setup lang="ts">
-import { PackageOpenIcon, UploadIcon, XIcon } from '@modrinth/assets'
+import { PackageOpenIcon, XIcon } from '@modrinth/assets'
 import { formatBytes } from '@modrinth/utils'
-import { computed } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import ProgressBar from '#ui/components/base/ProgressBar.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { injectModrinthServerContext } from '#ui/providers'
 import { commonMessages } from '#ui/utils/common-messages'
 
-import { injectFileManager } from '../providers/file-manager'
-
 const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
-	uploadingFiles: {
-		id: 'files.operations.uploading-files',
-		defaultMessage: 'Uploading files ({completed}/{total})',
-	},
-	uploadProgress: {
-		id: 'files.operations.upload-progress',
-		defaultMessage: '{uploaded} / {total} ({percent}%)',
-	},
 	extracting: {
 		id: 'files.operations.extracting',
 		defaultMessage: 'Extracting {source}',
@@ -166,13 +107,7 @@ const messages = defineMessages({
 	},
 })
 
-const ctx = injectFileManager()
+const ctx = injectModrinthServerContext()
 
-const activeOperations = computed(() => ctx.activeOperations?.value ?? [])
-
-const uploadOverallProgress = computed(() => {
-	const state = ctx.uploadState?.value
-	if (!state || !state.isUploading || state.totalFiles === 0) return 0
-	return Math.min((state.completedFiles + state.currentFileProgress) / state.totalFiles, 1)
-})
+const activeOperations = ctx.activeOperations
 </script>

packages/ui/src/layouts/shared/files-tab/components/editor/FileEditor.vue

@@ -30,6 +30,7 @@ import { SpinnerIcon } from '@modrinth/assets'
 import { type Component, computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { injectModrinthClient } from '#ui/providers'
 import { injectNotificationManager } from '#ui/providers/web-notifications'
 import { getEditorLanguage, getFileExtension, isImageFile } from '#ui/utils/file-extensions'
 
@@ -37,12 +38,6 @@ import { injectFileManager } from '../../providers/file-manager'
 import type { EditingFile } from '../../types'
 import FileImageViewer from './FileImageViewer.vue'
 
-interface MclogsResponse {
-	success: boolean
-	url?: string
-	error?: string
-}
-
 const props = defineProps<{
 	file: EditingFile | null
 	editorComponent: Component | null
@@ -55,6 +50,7 @@ const emit = defineEmits<{
 const { formatMessage } = useVIntl()
 const { addNotification } = injectNotificationManager()
 const ctx = injectFileManager()
+const client = injectModrinthClient()
 
 const messages = defineMessages({
 	failedToOpenTitle: {
@@ -237,13 +233,7 @@ async function shareToMclogs() {
 	}
 
 	try {
-		const response = await fetch('https://api.mclo.gs/1/log', {
-			method: 'POST',
-			headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-			body: new URLSearchParams({ content: fileContent.value }),
-		})
-
-		const data = (await response.json()) as MclogsResponse
+		const data = await client.mclogs.logs_v1.create(fileContent.value)
 
 		if (data.success && data.url) {
 			await navigator.clipboard.writeText(data.url)
@@ -253,7 +243,7 @@ async function shareToMclogs() {
 				type: 'success',
 			})
 		} else {
-			throw new Error(data.error)
+			throw new Error('mclo.gs upload failed')
 		}
 	} catch (error) {
 		console.error('Error sharing file:', error)