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>
2026-01-06 00:35:51 +00:00
parent 61d4a34f0f
commit 099011a177
89 changed files with 5863 additions and 2091 deletions
--- a/packages/ui/src/components/servers/files/modals/FileRenameItemModal.vue
+++ b/packages/ui/src/components/servers/files/modals/FileRenameItemModal.vue
@@ -0,0 +1,94 @@
+<template>
+	<NewModal ref="modal" :header="`Renaming ${item?.type}`">
+		<form class="flex flex-col gap-4 md:w-[600px]" @submit.prevent="handleSubmit">
+			<div class="flex flex-col gap-2">
+				<div class="font-semibold text-contrast">Name</div>
+				<input
+					ref="renameInput"
+					v-model="itemName"
+					autofocus
+					type="text"
+					class="bg-bg-input w-full rounded-lg p-4"
+					required
+				/>
+				<div v-if="submitted && error" class="text-red">{{ error }}</div>
+			</div>
+			<div class="flex justify-start gap-4">
+				<ButtonStyled color="brand">
+					<button :disabled="!!error" type="submit">
+						<EditIcon class="h-5 w-5" />
+						Rename
+					</button>
+				</ButtonStyled>
+				<ButtonStyled>
+					<button type="button" @click="hide">
+						<XIcon class="h-5 w-5" />
+						Cancel
+					</button>
+				</ButtonStyled>
+			</div>
+		</form>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { EditIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, NewModal } from '@modrinth/ui'
+import { computed, nextTick, ref } from 'vue'
+
+const props = defineProps<{
+	item: { name: string; type: string } | null
+}>()
+
+const emit = defineEmits<{
+	rename: [newName: string]
+}>()
+
+const modal = ref<InstanceType<typeof NewModal>>()
+const renameInput = ref<HTMLInputElement | null>(null)
+const itemName = ref('')
+const submitted = ref(false)
+
+const error = computed(() => {
+	if (!itemName.value) {
+		return 'Name is required.'
+	}
+	if (props.item?.type === 'file') {
+		const validPattern = /^[a-zA-Z0-9-_.\s]+$/
+		if (!validPattern.test(itemName.value)) {
+			return 'Name must contain only alphanumeric characters, dashes, underscores, dots, or spaces.'
+		}
+	} else {
+		const validPattern = /^[a-zA-Z0-9-_\s]+$/
+		if (!validPattern.test(itemName.value)) {
+			return 'Name must contain only alphanumeric characters, dashes, underscores, or spaces.'
+		}
+	}
+	return ''
+})
+
+const handleSubmit = () => {
+	submitted.value = true
+	if (!error.value) {
+		emit('rename', itemName.value)
+		hide()
+	}
+}
+
+const show = (item: { name: string; type: string }) => {
+	itemName.value = item.name
+	submitted.value = false
+	modal.value?.show()
+	nextTick(() => {
+		setTimeout(() => {
+			renameInput.value?.focus()
+		}, 100)
+	})
+}
+
+const hide = () => {
+	modal.value?.hide()
+}
+
+defineExpose({ show, hide })
+</script>