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/FilesUploadDropdown.vue

@@ -102,14 +102,13 @@
 
 <script setup lang="ts">
 import { CheckCircleIcon, FolderOpenIcon, XCircleIcon } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager } from '@modrinth/ui'
+import { ButtonStyled, injectModrinthClient, injectNotificationManager } from '@modrinth/ui'
 import { computed, nextTick, ref, watch } from 'vue'
 
-import type { FSModule } from '~/composables/servers/modules/fs.ts'
-
 import PanelSpinner from './PanelSpinner.vue'
 
 const { addNotification } = injectNotificationManager()
+const client = injectModrinthClient()
 
 interface UploadItem {
 	file: File
@@ -123,7 +122,7 @@ interface UploadItem {
 		| 'cancelled'
 		| 'incorrect-type'
 	size: string
-	uploader?: any
+	uploader?: ReturnType<typeof client.kyros.files_v0.uploadFile>
 	error?: Error
 }
 
@@ -132,7 +131,6 @@ interface Props {
 	fileType?: string
 	marginBottom?: number
 	acceptedTypes?: Array<string>
-	fs: FSModule
 }
 
 defineOptions({
@@ -208,6 +206,7 @@ const cancelUpload = (item: UploadItem) => {
 }
 
 const badFileTypeMsg = 'Upload had incorrect file type'
+
 const uploadFile = async (file: File) => {
 	const uploadItem: UploadItem = {
 		file,
@@ -229,19 +228,18 @@ const uploadFile = async (file: File) => {
 
 		uploadItem.status = 'uploading'
 		const filePath = `${props.currentPath}/${file.name}`.replace('//', '/')
-		const uploader = await props.fs.uploadFile(filePath, file)
-		uploadItem.uploader = uploader
 
-		if (uploader?.onProgress) {
-			uploader.onProgress(({ progress }: { progress: number }) => {
+		const uploader = client.kyros.files_v0.uploadFile(filePath, file, {
+			onProgress: ({ progress }) => {
 				const index = uploadQueue.value.findIndex((item) => item.file.name === file.name)
 				if (index !== -1) {
 					uploadQueue.value[index].progress = Math.round(progress)
 				}
-			})
-		}
+			},
+		})
+		uploadItem.uploader = uploader
 
-		await uploader?.promise
+		await uploader.promise
 		const index = uploadQueue.value.findIndex((item) => item.file.name === file.name)
 		if (index !== -1 && uploadQueue.value[index].status !== 'cancelled') {
 			uploadQueue.value[index].status = 'completed'