feat: modrinth hosting - files tab refactor (#4912)

* feat: api-client module for content v0

* feat: delete unused components + modules + setting

* feat: xhr uploading

* feat: fs module -> api-client

* feat: migrate files.vue to use tanstack

* fix: mem leak + other issues

* fix: build

* feat: switch to monaco

* fix: go back to using ace, but improve preloading + theme

* fix: styling + dead attrs

* feat: match figma

* fix: padding

* feat: files-new for ui page structure

* feat: finalize files.vue

* fix: lint

* fix: qa

* fix: dep

* fix: lint

* fix: lockfile merge

* feat: icons on navtab

* fix: surface alternating on table

* fix: hover surface color

---------

Signed-off-by: Calum H. <contact@cal.engineer>
Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

apps/frontend/src/components/ui/servers/FilesUploadZipUrlModal.vue

@@ -52,7 +52,7 @@
 				/>
 				<div v-if="submitted && error" class="text-red">{{ error }}</div>
 			</div>
-			<BackupWarning :backup-link="`/hosting/manage/${props.server.serverId}/backups`" />
+			<BackupWarning :backup-link="`/hosting/manage/${serverId}/backups`" />
 			<div class="flex justify-start gap-2">
 				<ButtonStyled color="brand">
 					<button v-tooltip="error" :disabled="submitted || !!error" type="submit">
@@ -74,21 +74,25 @@
 
 <script setup lang="ts">
 import { DownloadIcon, ExternalIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
-import { BackupWarning, ButtonStyled, injectNotificationManager, NewModal } from '@modrinth/ui'
+import {
+	BackupWarning,
+	ButtonStyled,
+	injectModrinthClient,
+	injectModrinthServerContext,
+	injectNotificationManager,
+	NewModal,
+} from '@modrinth/ui'
 import { ModrinthServersFetchError } from '@modrinth/utils'
 import { computed, nextTick, ref } from 'vue'
 
-import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
 import { handleServersError } from '~/composables/servers/modrinth-servers.ts'
 
 const notifications = injectNotificationManager()
+const client = injectModrinthClient()
+const { serverId } = injectModrinthServerContext()
 
 const cf = ref(false)
 
-const props = defineProps<{
-	server: ModrinthServer
-}>()
-
 const modal = ref<typeof NewModal>()
 const urlInput = ref<HTMLInputElement | null>(null)
 const url = ref('')
@@ -115,10 +119,10 @@ const handleSubmit = async () => {
 	if (!error.value) {
 		// hide();
 		try {
-			const dry = await props.server.fs.extractFile(trimmedUrl.value, true, true)
+			const dry = await client.kyros.files_v0.extractFile(trimmedUrl.value, true, true)
 
 			if (!cf.value || dry.modpack_name) {
-				await props.server.fs.extractFile(trimmedUrl.value, true, false, true)
+				await client.kyros.files_v0.extractFile(trimmedUrl.value, true, false)
 				hide()
 			} else {
 				submitted.value = false