fix: i18n string problems (#6131)

* fix: apply non-json i18n fixes

* fix: pruning

* fix: prepr

* fix: run.mjs

* fix: lint

packages/ui/src/layouts/shared/files-tab/components/modals/FileCreateItemModal.vue

@@ -1,5 +1,13 @@
 <template>
-	<NewModal ref="modal" :header="formatMessage(messages.header, { type })" max-width="500px">
+	<NewModal
+		ref="modal"
+		:header="
+			formatMessage(messages.header, {
+				type: formatFileItemType(formatMessage, type),
+			})
+		"
+		max-width="500px"
+	>
 		<form class="space-y-6 md:min-w-[400px]" @submit.prevent="handleSubmit">
 			<label class="flex flex-col gap-2">
 				<span class="font-semibold text-contrast">{{
@@ -29,7 +37,11 @@
 				<ButtonStyled color="brand">
 					<button :disabled="!!error && submitted" @click="handleSubmit">
 						<PlusIcon class="h-5 w-5" />
-						{{ formatMessage(messages.createButton, { type }) }}
+						{{
+							formatMessage(messages.createButton, {
+								type: formatFileItemType(formatMessage, type),
+							})
+						}}
 					</button>
 				</ButtonStyled>
 			</div>
@@ -45,7 +57,7 @@ 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 { commonMessages, formatFileItemType } from '#ui/utils/common-messages'
 
 import { fileValidationMessages } from './file-validation-messages'
 
@@ -54,7 +66,7 @@ const { formatMessage } = useVIntl()
 const messages = defineMessages({
 	header: {
 		id: 'files.create-modal.header',
-		defaultMessage: 'Create a {type, select, directory {folder} other {file}}',
+		defaultMessage: 'Create a {type}',
 	},
 	placeholderFile: {
 		id: 'files.create-modal.placeholder-file',
@@ -66,7 +78,7 @@ const messages = defineMessages({
 	},
 	createButton: {
 		id: 'files.create-modal.create-button',
-		defaultMessage: 'Create {type, select, directory {folder} other {file}}',
+		defaultMessage: 'Create {type}',
 	},
 })
 

packages/ui/src/layouts/shared/files-tab/components/modals/FileDeleteItemModal.vue

@@ -2,7 +2,11 @@
 	<NewModal ref="modal" fade="danger" :header="formatMessage(messages.header)" max-width="500px">
 		<Admonition type="critical" class="md:min-w-[400px]">
 			<template #header>{{ formatMessage(messages.deletingName, { name: item?.name }) }}</template>
-			{{ formatMessage(messages.deleteWarning, { type: item?.type }) }}
+			{{
+				formatMessage(
+					item?.type === 'directory' ? messages.deleteFolderWarning : messages.deleteFileWarning,
+				)
+			}}
 		</Admonition>
 		<template #actions>
 			<div class="flex gap-2 justify-end">
@@ -46,10 +50,14 @@ const messages = defineMessages({
 		id: 'files.delete-modal.deleting-name',
 		defaultMessage: 'Deleting "{name}"',
 	},
-	deleteWarning: {
-		id: 'files.delete-modal.warning',
+	deleteFileWarning: {
+		id: 'files.delete-modal.warning.file',
+		defaultMessage: 'This file will be permanently deleted. This action cannot be undone.',
+	},
+	deleteFolderWarning: {
+		id: 'files.delete-modal.warning.folder',
 		defaultMessage:
-			'{type, select, directory {This folder and all its contents will be permanently deleted. This action cannot be undone.} other {This file will be permanently deleted. This action cannot be undone.}}',
+			'This folder and all its contents will be permanently deleted. This action cannot be undone.',
 	},
 })
 

packages/ui/src/layouts/shared/files-tab/components/modals/FileMoveItemModal.vue

@@ -1,7 +1,11 @@
 <template>
 	<NewModal
 		ref="modal"
-		:header="formatMessage(messages.header, { type: item?.type })"
+		:header="
+			formatMessage(messages.header, {
+				type: formatFileItemType(formatMessage, item?.type),
+			})
+		"
 		max-width="500px"
 	>
 		<form class="space-y-6 md:min-w-[400px]" @submit.prevent="handleSubmit">
@@ -50,7 +54,7 @@ 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 { commonMessages, formatFileItemType } from '#ui/utils/common-messages'
 
 import type { FileItem } from '../../types'
 
@@ -59,7 +63,7 @@ const { formatMessage } = useVIntl()
 const messages = defineMessages({
 	header: {
 		id: 'files.move-modal.header',
-		defaultMessage: '{type, select, directory {Move folder} other {Move file}}',
+		defaultMessage: 'Move {type}',
 	},
 	currentLocation: {
 		id: 'files.move-modal.current-location',

packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadConflictModal.vue

@@ -28,7 +28,7 @@
 				<div
 					v-for="(file, index) in files"
 					:key="file"
-					class="grid grid-cols-[auto_auto_1fr] items-center min-h-10 h-10 gap-2"
+					class="grid grid-cols-[auto_minmax(0,1fr)] items-center min-h-10 h-10 gap-2"
 				>
 					<div class="flex flex-col items-center justify-between">
 						<div class="w-[1px] h-2"></div>
@@ -38,14 +38,17 @@
 							class="w-[1px] h-2 relative top-1"
 						></div>
 					</div>
-					<span class="text-sm shrink-0 whitespace-nowrap">{{
-						formatMessage(messages.overwrittenLabel)
-					}}</span>
-					<span
-						v-tooltip="file"
-						class="text-sm text-contrast font-medium whitespace-nowrap overflow-hidden text-ellipsis"
-					>
-						{{ file }}
+					<span class="flex min-w-0 text-sm whitespace-nowrap overflow-hidden">
+						<IntlFormatted :message-id="messages.overwriteFileLabel" :values="{ path: file }">
+							<template #file-path="{ children }">
+								<span
+									v-tooltip="file"
+									class="min-w-0 text-contrast font-medium whitespace-nowrap overflow-hidden text-ellipsis"
+								>
+									<component :is="() => children" />
+								</span>
+							</template>
+						</IntlFormatted>
 					</span>
 				</div>
 			</div>
@@ -76,6 +79,7 @@ import { computed, ref } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import IntlFormatted from '#ui/components/base/IntlFormatted.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
@@ -105,9 +109,9 @@ const messages = defineMessages({
 		id: 'files.conflict-modal.overwritten-count',
 		defaultMessage: '{count} overwritten',
 	},
-	overwrittenLabel: {
-		id: 'files.conflict-modal.overwritten-label',
-		defaultMessage: 'Overwritten',
+	overwriteFileLabel: {
+		id: 'files.conflict-modal.overwrite-file-label',
+		defaultMessage: 'Will overwrite <file-path>{path}</file-path>',
 	},
 	overwriteButton: {
 		id: 'files.conflict-modal.overwrite-button',

packages/ui/src/layouts/shared/files-tab/components/upload/FileUploadDragAndDrop.vue

@@ -18,7 +18,7 @@
 				<p class="mt-2 text-xl">
 					{{
 						formatMessage(messages.dropToUpload, {
-							type: type ? type.toLocaleLowerCase() : undefined,
+							type: formatFileItemType(formatMessage, type?.toLocaleLowerCase(), true),
 						})
 					}}
 				</p>
@@ -32,6 +32,7 @@ import { UploadIcon } from '@modrinth/assets'
 import { ref } from 'vue'
 
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { formatFileItemType } from '#ui/utils/common-messages'
 
 const { formatMessage } = useVIntl()
 
@@ -47,7 +48,7 @@ defineProps<{
 const messages = defineMessages({
 	dropToUpload: {
 		id: 'files.upload.drag-and-drop.drop-to-upload',
-		defaultMessage: 'Drop {type, select, undefined {files} other {{type}s}} here to upload',
+		defaultMessage: 'Drop {type} here to upload',
 	},
 })