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>

packages/ui/src/components/servers/files/modals/FileUploadConflictModal.vue

@@ -0,0 +1,56 @@
+<template>
+	<ConfirmModal
+		ref="modal"
+		title="Do you want to overwrite these conflicting files?"
+		:proceed-label="`Overwrite`"
+		:proceed-icon="CheckIcon"
+		@proceed="proceed"
+	>
+		<div class="flex max-w-[30rem] flex-col gap-4">
+			<p class="m-0 font-semibold leading-normal">
+				<template v-if="hasMany">
+					Over 100 files will be overwritten if you proceed with extraction; here is just some of
+					them:
+				</template>
+				<template v-else>
+					The following {{ files.length }} files already exist on your server, and will be
+					overwritten if you proceed with extraction:
+				</template>
+			</p>
+			<ul class="m-0 max-h-80 list-none overflow-auto rounded-2xl bg-bg px-4 py-3">
+				<li v-for="file in files" :key="file" class="flex items-center gap-1 py-1 font-medium">
+					<XIcon class="shrink-0 text-red" /> {{ file }}
+				</li>
+			</ul>
+		</div>
+	</ConfirmModal>
+</template>
+
+<script setup lang="ts">
+import { CheckIcon, XIcon } from '@modrinth/assets'
+import { ConfirmModal } from '@modrinth/ui'
+import { computed, ref } from 'vue'
+
+const path = ref('')
+const files = ref<string[]>([])
+
+const emit = defineEmits<{
+	proceed: [path: string]
+}>()
+
+const modal = ref<InstanceType<typeof ConfirmModal>>()
+
+const hasMany = computed(() => files.value.length > 100)
+
+const show = (zipPath: string, conflictingFiles: string[]) => {
+	path.value = zipPath
+	files.value = conflictingFiles
+	modal.value?.show()
+}
+
+const proceed = () => {
+	emit('proceed', path.value)
+}
+
+defineExpose({ show })
+</script>