refactor: align files tab with content tab design (#5621)

* fix: files.vue bugs before styling changes * feat: move files tab to shared layout structure * fix: qa * fix: qa * fix: bugs * fix: lint * fix: admonition cleanup with progress + actions * fix: cleanup * fix: modals * fix: admon title * fix: i18n standard * fix: lint + i18n pass * fix: remove transition * fix: type errors * feat: files tab in app * fix: qa * fix: backup item minmax * fix: use ContentPageHeader for server panel * fix: lint * fix: lint * fix: lint * feat: page leave safety * fix: lint * fix: cargo fmt fix * fix: blank in prod * fix: content card table stuff * Revert "fix: blank in prod" This reverts commit 74758fe185. * fix: import * feat: browse worlds/servers flow * fix: worlds tab parity with content tab * fix: perf bug + shader filter pill copy * feat: singleplayer filter * fix: ordering * fix: breadcrumbs * fix: lint * fix: qa * feat: store server proj id when adding to a non-linked instance * fix: lint * fix: i18n + qa * fix: conflict * qa: already installed modal + placeholders not server-specific * fix: qa * fix: add + edit server modals * fix: qa * fix: security * fix: devin flags * fix: lint * chore: change file to break build cache * fix: admon * fix: import path stuff * feat: qa * fix: fmt fmt idiot --------- Signed-off-by: Calum H. <calum@modrinth.com>
2026-08-30 11:36:05 +00:00 · 2026-03-26 18:55:15 +00:00
parent 706eb800cb
commit 381ea51cce
170 changed files with 8052 additions and 4571 deletions
@@ -0,0 +1,114 @@
+<template>
+	<NewModal
+		ref="modal"
+		:header="formatMessage(messages.header, { type: item?.type })"
+		max-width="500px"
+	>
+		<form class="space-y-6 md:min-w-[400px]" @submit.prevent="handleSubmit">
+			<div class="flex flex-col gap-1">
+				<span class="font-semibold text-contrast">{{
+					formatMessage(messages.currentLocation)
+				}}</span>
+				<span class="text-secondary">{{ `${currentPath}/${item?.name}`.replace('//', '/') }}</span>
+			</div>
+			<label class="flex flex-col gap-2">
+				<span class="font-semibold text-contrast">{{
+					formatMessage(messages.destinationPath)
+				}}</span>
+				<StyledInput
+					ref="destinationInput"
+					v-model="destination"
+					:placeholder="formatMessage(messages.destinationPlaceholder)"
+					wrapper-class="w-full"
+				/>
+			</label>
+		</form>
+		<template #actions>
+			<div class="flex gap-2 justify-end">
+				<ButtonStyled type="outlined">
+					<button class="!border !border-surface-4" @click="hide">
+						<XIcon class="h-5 w-5" />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button @click="handleSubmit">
+						<RightArrowIcon class="h-5 w-5" />
+						{{ formatMessage(commonMessages.moveButton) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</template>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { RightArrowIcon, XIcon } from '@modrinth/assets'
+import { nextTick, ref } from 'vue'
+
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import StyledInput from '#ui/components/base/StyledInput.vue'
+import NewModal from '#ui/components/modal/NewModal.vue'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { commonMessages } from '#ui/utils/common-messages'
+
+import type { FileItem } from '../../types'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	header: {
+		id: 'files.move-modal.header',
+		defaultMessage: '{type, select, directory {Move folder} other {Move file}}',
+	},
+	currentLocation: {
+		id: 'files.move-modal.current-location',
+		defaultMessage: 'Current location',
+	},
+	destinationPath: {
+		id: 'files.move-modal.destination-path',
+		defaultMessage: 'Destination path',
+	},
+	destinationPlaceholder: {
+		id: 'files.move-modal.destination-placeholder',
+		defaultMessage: 'e.g. /my-folder',
+	},
+})
+
+const destinationInput = ref<HTMLInputElement | null>(null)
+
+defineProps<{
+	item: Pick<FileItem, 'name' | 'type'> | null
+	currentPath: string
+}>()
+
+const emit = defineEmits<{
+	move: [destination: string]
+}>()
+
+const modal = ref<InstanceType<typeof NewModal>>()
+const destination = ref('')
+
+const handleSubmit = () => {
+	const path = destination.value.replace('//', '/')
+	const normalized = path.startsWith('/') ? path : `/${path}`
+	emit('move', normalized)
+	hide()
+}
+
+const show = () => {
+	destination.value = ''
+	modal.value?.show()
+	nextTick(() => {
+		setTimeout(() => {
+			destinationInput.value?.focus()
+		}, 100)
+	})
+}
+
+const hide = () => {
+	modal.value?.hide()
+}
+
+defineExpose({ show, hide })
+</script>