feat: make byte size units translatable (#5969)

Make byte size units translatable

packages/ui/src/components/base/AppearingProgressBar.vue

@@ -30,9 +30,10 @@
 </template>
 
 <script setup lang="ts">
-import { formatBytes } from '@modrinth/utils'
 import { computed, onUnmounted, ref, watch } from 'vue'
 
+import { useFormatBytes } from '#ui/composables'
+
 interface Props {
 	maxValue: number
 	currentValue: number
@@ -59,6 +60,8 @@ const props = withDefaults(defineProps<Props>(), {
 	],
 })
 
+const formatBytes = useFormatBytes()
+
 const currentPhrase = ref('')
 const usedPhrases = ref(new Set<number>())
 let phraseInterval: NodeJS.Timeout | null = null

packages/ui/src/components/base/DropzoneFileInput.vue

@@ -50,6 +50,7 @@ import { FolderUpIcon } from '@modrinth/assets'
 import { fileIsValid } from '@modrinth/utils'
 import { ref } from 'vue'
 
+import { useFormatBytes } from '../../composables'
 import { injectNotificationManager } from '../../providers'
 
 const { addNotification } = injectNotificationManager()
@@ -78,6 +79,8 @@ const props = withDefaults(
 	},
 )
 
+const formatBytes = useFormatBytes()
+
 const files = ref<File[]>([])
 
 function matchesAccept(file: File, accept?: string): boolean {
@@ -129,7 +132,7 @@ function addFiles(incoming: FileList, shouldNotReset = false) {
 		alertOnInvalid: true,
 	}
 
-	files.value = files.value.filter((file) => fileIsValid(file, validationOptions))
+	files.value = files.value.filter((file) => fileIsValid(file, validationOptions, formatBytes))
 
 	if (files.value.length > 0) {
 		emit('change', files.value)

packages/ui/src/components/base/FileInput.vue

@@ -12,73 +12,62 @@
 	</label>
 </template>
 
-<script>
+<script setup lang="ts">
 import { fileIsValid } from '@modrinth/utils'
-import { defineComponent } from 'vue'
+import { ref } from 'vue'
 
-export default defineComponent({
-	props: {
-		prompt: {
-			type: String,
-			default: 'Select file',
-		},
-		multiple: {
-			type: Boolean,
-			default: false,
-		},
-		accept: {
-			type: String,
-			default: null,
-		},
+import { useFormatBytes } from '../../composables'
+
+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))
-			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 emit = defineEmits<{ change: [files: File[]] }>()
+
+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>
 
 <style lang="scss" scoped>

packages/ui/src/components/project/ProjectPageVersions.vue

@@ -268,16 +268,12 @@ import {
 	Pagination,
 	TagItem,
 	useCompactNumber,
+	useFormatBytes,
 	useFormatDateTime,
 	VersionChannelIndicator,
 	VersionFilterControl,
 } from '@modrinth/ui'
-import {
-	formatBytes,
-	formatVersionsForDisplay,
-	type GameVersionTag,
-	type Version,
-} from '@modrinth/utils'
+import { formatVersionsForDisplay, type GameVersionTag, type Version } from '@modrinth/utils'
 import { Menu } from 'floating-vue'
 import { computed, type Ref, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -293,6 +289,7 @@ const formatDateTime = useFormatDateTime({
 	timeStyle: 'short',
 	dateStyle: 'long',
 })
+const formatBytes = useFormatBytes()
 
 type VersionWithDisplayUrlEnding = Version & {
 	displayUrlEnding: string

packages/ui/src/components/servers/admonitions/FileOperationAdmonition.vue

@@ -15,7 +15,7 @@
 			<span>
 				{{
 					formatMessage(messages.extracted, {
-						size: 'bytes_processed' in op ? formatBytes(op.bytes_processed ?? 0) : '0 B',
+						size: formatBytes(op.bytes_processed ?? 0),
 					})
 				}}
 			</span>
@@ -35,11 +35,11 @@
 
 <script setup lang="ts">
 import { PackageOpenIcon } from '@modrinth/assets'
-import { formatBytes } from '@modrinth/utils'
 import { computed } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { useFormatBytes } from '#ui/composables'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import type { FileOperation } from '#ui/layouts/shared/files-tab/types'
 import { injectModrinthServerContext } from '#ui/providers'
@@ -53,6 +53,7 @@ const props = defineProps<{
 }>()
 
 const { formatMessage } = useVIntl()
+const formatBytes = useFormatBytes()
 const ctx = injectModrinthServerContext()
 
 const messages = defineMessages({

packages/ui/src/components/servers/admonitions/UploadAdmonition.vue

@@ -25,13 +25,15 @@
 
 <script setup lang="ts">
 import { UploadIcon } from '@modrinth/assets'
-import { formatBytes } from '@modrinth/utils'
 import { computed } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { useFormatBytes } from '#ui/composables'
 import { injectModrinthServerContext } from '#ui/providers'
 
+const formatBytes = useFormatBytes()
+
 const ctx = injectModrinthServerContext()
 
 const state = computed(() => ctx.uploadState.value)