feat: make byte size units translatable (#5969)

Make byte size units translatable

apps/frontend/src/pages/[type]/[id]/settings/index.vue

@@ -146,7 +146,11 @@
 											const input = e.target
 											if (input.files?.length) {
 												if (
-													fileIsValid(input.files[0], { maxSize: 524288000, alertOnInvalid: true })
+													fileIsValid(
+														input.files[0],
+														{ maxSize: 524288000, alertOnInvalid: true },
+														formatBytes,
+													)
 												)
 													showBannerPreview(Array.from(input.files))
 											}
@@ -379,6 +383,7 @@ import {
 	StyledInput,
 	Toggle,
 	UnsavedChangesPopup,
+	useFormatBytes,
 	usePageLeaveSafety,
 } from '@modrinth/ui'
 import { fileIsValid, formatProjectStatus, formatProjectType } from '@modrinth/utils'
@@ -405,6 +410,8 @@ const flags = useFeatureFlags()
 const tags = useGeneratedState()
 const router = useNativeRouter()
 
+const formatBytes = useFormatBytes()
+
 const name = ref(project.value.title)
 const slug = ref(project.value.slug)
 const summary = ref(project.value.description)

apps/frontend/src/pages/[type]/[id]/version/[version].vue

@@ -442,9 +442,10 @@ import {
 	MultiSelect,
 	PROJECT_DEP_MARKER_QUERY,
 	StyledInput,
+	useFormatBytes,
 	useFormatDateTime,
 } from '@modrinth/ui'
-import { formatBytes, renderHighlightedString } from '@modrinth/utils'
+import { renderHighlightedString } from '@modrinth/utils'
 
 import Breadcrumbs from '~/components/ui/Breadcrumbs.vue'
 import CreateProjectVersionModal from '~/components/ui/create-project-version/CreateProjectVersionModal.vue'
@@ -473,6 +474,7 @@ const formatDateTime = useFormatDateTime({
 	dateStyle: 'long',
 })
 const formatDate = useFormatDateTime({ dateStyle: 'medium' })
+const formatBytes = useFormatBytes()
 
 // Helper for accessing nuxt app $formatVersion
 const formatVersionDisplay = (versions: string[]) => (data as any).$formatVersion(versions)

apps/frontend/src/pages/admin/file_lookup.vue

@@ -81,11 +81,19 @@
 
 <script setup lang="ts">
 import { FileIcon, SpinnerIcon, UploadIcon } from '@modrinth/assets'
-import { Admonition, Avatar, CopyCode, injectNotificationManager } from '@modrinth/ui'
-import { formatBytes, type Project, type Version } from '@modrinth/utils'
+import {
+	Admonition,
+	Avatar,
+	CopyCode,
+	injectNotificationManager,
+	useFormatBytes,
+} from '@modrinth/ui'
+import type { Project, Version } from '@modrinth/utils'
 
 const { addNotification } = injectNotificationManager()
 
+const formatBytes = useFormatBytes()
+
 const fileInput = ref<HTMLInputElement>()
 const selectedFile = ref<File | null>(null)
 const fileHashes = ref<{