feat: make byte size units translatable (#5969)

Make byte size units translatable

apps/frontend/src/components/ui/FileInput.vue

@@ -17,74 +17,60 @@
 	</label>
 </template>
 
-<script>
-import { fileIsValid } from '~/helpers/fileUtils.js'
+<script setup lang="ts">
+import { useFormatBytes } from '@modrinth/ui'
+import { fileIsValid } from '@modrinth/utils'
+import { ref } from 'vue'
 
-export default {
-	components: {},
-	props: {
-		prompt: {
-			type: String,
-			default: 'Select file',
-		},
-		multiple: {
-			type: Boolean,
-			default: false,
-		},
-		accept: {
-			type: String,
-			default: null,
-		},
+const props = withDefaults(
+	defineProps<{
+		prompt?: string
+		multiple?: boolean
+		accept?: string
 		/**
 		 * The max file size in bytes
 		 */
-		maxSize: {
-			type: Number,
-			default: null,
-		},
-		showIcon: {
-			type: Boolean,
-			default: true,
-		},
-		shouldAlwaysReset: {
-			type: Boolean,
-			default: false,
-		},
-		longStyle: {
-			type: Boolean,
-			default: false,
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
+		maxSize?: number | null
+		showIcon?: boolean
+		shouldAlwaysReset?: boolean
+		longStyle?: boolean
+		disabled?: boolean
+	}>(),
+	{
+		prompt: 'Select file',
+		multiple: false,
+		showIcon: true,
+		shouldAlwaysReset: false,
+		longStyle: false,
+		disabled: false,
 	},
-	emits: ['change'],
-	data() {
-		return {
-			files: [],
-		}
-	},
-	methods: {
-		addFiles(files, shouldNotReset) {
-			if (!shouldNotReset || this.shouldAlwaysReset) {
-				this.files = files
-			}
+)
 
-			const validationOptions = { maxSize: this.maxSize, alertOnInvalid: true }
-			this.files = [...this.files].filter((file) => fileIsValid(file, validationOptions))
+const emit = defineEmits<{ change: [files: File[]] }>()
 
-			if (this.files.length > 0) {
-				this.$emit('change', this.files)
-			}
-		},
-		handleDrop(e) {
-			this.addFiles(e.dataTransfer.files)
-		},
-		handleChange(e) {
-			this.addFiles(e.target.files)
-		},
-	},
+const formatBytes = useFormatBytes()
+
+const files = ref<File[]>([])
+
+function addFiles(incoming: FileList, shouldNotReset = false) {
+	if (!shouldNotReset || props.shouldAlwaysReset) {
+		files.value = Array.from(incoming)
+	}
+	const validationOptions = { maxSize: props.maxSize, alertOnInvalid: true }
+	files.value = files.value.filter((file) => fileIsValid(file, validationOptions, formatBytes))
+	if (files.value.length > 0) {
+		emit('change', files.value)
+	}
+}
+
+function handleDrop(e: DragEvent) {
+	addFiles(e.dataTransfer!.files)
+}
+
+function handleChange(e: Event) {
+	const input = e.target as HTMLInputElement
+	if (!input.files) return
+	addFiles(input.files)
 }
 </script>
 

apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue

@@ -28,6 +28,7 @@ import {
 	injectNotificationManager,
 	OverflowMenu,
 	type OverflowMenuOption,
+	useFormatBytes,
 	useFormatDateTime,
 } from '@modrinth/ui'
 import { NavTabs } from '@modrinth/ui'
@@ -56,6 +57,7 @@ const formatDateTimeUtc = useFormatDateTime({
 	timeZoneName: 'short',
 	timeZone: 'UTC',
 })
+const formatBytes = useFormatBytes()
 
 type FlattenedFileReport = Labrinth.TechReview.Internal.FileReport & {
 	id: string
@@ -362,12 +364,6 @@ const formattedDate = computed(() => {
 	return `${diffDays} days ago`
 })
 
-function formatFileSize(bytes: number): string {
-	if (bytes < 1024) return `${bytes} B`
-	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KiB`
-	return `${(bytes / (1024 * 1024)).toFixed(2)} MiB`
-}
-
 function viewFileFlags(file: FlattenedFileReport) {
 	selectedFileId.value = file.id
 	currentTab.value = 'File'
@@ -851,7 +847,7 @@ const reviewSummaryPreview = computed(() => {
 		const fileVerdict = fileUnsafe > 0 ? 'Unsafe' : 'Safe'
 
 		markdown += `### ${fileData.fileName}\n`
-		markdown += `> ${formatFileSize(fileData.fileSize)} • ${fileData.decisions.length} issues • Max severity: ${fileData.maxSeverity} • **Verdict:** ${fileVerdict}\n\n`
+		markdown += `> ${formatBytes(fileData.fileSize)} • ${fileData.decisions.length} issues • Max severity: ${fileData.maxSeverity} • **Verdict:** ${fileVerdict}\n\n`
 		markdown += `<details>\n<summary>Issues (${fileSafe} safe, ${fileUnsafe} unsafe)</summary>\n\n`
 		markdown += `| Class | Issue Type | Severity | Decision |\n`
 		markdown += `|-------|------------|----------|----------|\n`
@@ -1150,7 +1146,7 @@ async function handleSubmitReview(verdict: 'safe' | 'unsafe') {
 						</span>
 						<div class="rounded-full border border-solid border-surface-5 bg-surface-3 px-2.5 py-1">
 							<span class="text-sm font-medium text-secondary">{{
-								formatFileSize(file.file_size)
+								formatBytes(file.file_size)
 							}}</span>
 						</div>
 						<div