feat: make byte size units translatable (#5969)

Make byte size units translatable

apps/app-frontend/src/App.vue

@@ -51,9 +51,10 @@ import {
 	providePageContext,
 	providePopupNotificationManager,
 	useDebugLogger,
+	useFormatBytes,
 	useVIntl,
 } from '@modrinth/ui'
-import { formatBytes, renderString } from '@modrinth/utils'
+import { renderString } from '@modrinth/utils'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { getVersion } from '@tauri-apps/api/app'
 import { invoke } from '@tauri-apps/api/core'
@@ -262,6 +263,8 @@ onUnmounted(async () => {
 })
 
 const { formatMessage } = useVIntl()
+const formatBytes = useFormatBytes()
+
 const messages = defineMessages({
 	updateInstalledToastTitle: {
 		id: 'app.update.complete-toast.title',

apps/app-frontend/src/pages/project/Version.vue

@@ -176,9 +176,10 @@ import {
 	ButtonStyled,
 	Card,
 	CopyCode,
+	useFormatBytes,
 	useFormatDateTime,
 } from '@modrinth/ui'
-import { formatBytes, renderString } from '@modrinth/utils'
+import { renderString } from '@modrinth/utils'
 import { computed, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
@@ -191,6 +192,7 @@ const formatDateTime = useFormatDateTime({
 	timeStyle: 'short',
 	dateStyle: 'long',
 })
+const formatBytes = useFormatBytes()
 
 const breadcrumbs = useBreadcrumbs()
 

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

apps/frontend/src/helpers/fileUtils.js

@@ -1,32 +0,0 @@
-import { formatBytes } from '@modrinth/utils'
-
-export const fileIsValid = (file, validationOptions) => {
-	const { maxSize, alertOnInvalid } = validationOptions
-	if (maxSize !== null && maxSize !== undefined && file.size > maxSize) {
-		if (alertOnInvalid) {
-			alert(`File ${file.name} is too big! Must be less than ${formatBytes(maxSize)}`)
-		}
-		return false
-	}
-
-	return true
-}
-
-export const acceptFileFromProjectType = (projectType) => {
-	switch (projectType) {
-		case 'mod':
-			return '.jar,.zip,.litemod,application/java-archive,application/x-java-archive,application/zip'
-		case 'plugin':
-			return '.jar,.zip,application/java-archive,application/x-java-archive,application/zip'
-		case 'resourcepack':
-			return '.zip,application/zip'
-		case 'shader':
-			return '.zip,application/zip'
-		case 'datapack':
-			return '.zip,application/zip'
-		case 'modpack':
-			return '.mrpack,application/x-modrinth-modpack+zip,application/zip'
-		default:
-			return '*'
-	}
-}

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<{

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)

packages/ui/src/composables/format-bytes.ts

@@ -0,0 +1,39 @@
+import { defineMessage, useVIntl } from '#ui/composables/i18n.ts'
+
+const messages = [
+	defineMessage({
+		id: 'format.bytes.0',
+		defaultMessage: '{count, plural, one {# byte} other {# bytes}}',
+	}),
+	defineMessage({
+		id: 'format.bytes.1',
+		defaultMessage: '{count, number} KiB',
+	}),
+	defineMessage({
+		id: 'format.bytes.2',
+		defaultMessage: '{count, number} MiB',
+	}),
+	defineMessage({
+		id: 'format.bytes.3',
+		defaultMessage: '{count, number} GiB',
+	}),
+	defineMessage({
+		id: 'format.bytes.4',
+		defaultMessage: '{count, number} TiB',
+	}),
+]
+
+export function useFormatBytes() {
+	const { formatMessage } = useVIntl()
+
+	function format(bytes: number, decimals = 2): string {
+		if (bytes === 0) return formatMessage(messages[0], { count: 0 })
+
+		const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), messages.length - 1)
+		return formatMessage(messages[exponent], {
+			count: (bytes / Math.pow(1024, exponent)).toFixed(decimals),
+		})
+	}
+
+	return format
+}

packages/ui/src/composables/index.ts

@@ -1,5 +1,6 @@
 export * from './debug-logger'
 export * from './dynamic-font-size'
+export * from './format-bytes'
 export * from './format-date-time'
 export * from './format-money'
 export * from './format-number'

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

@@ -104,6 +104,7 @@ import { computed, ref } from 'vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import Checkbox from '#ui/components/base/Checkbox.vue'
 import TeleportOverflowMenu from '#ui/components/base/TeleportOverflowMenu.vue'
+import { useFormatBytes } from '#ui/composables'
 import { useFormatDateTime } from '#ui/composables/format-date-time'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { injectNotificationManager } from '#ui/providers/web-notifications'
@@ -164,8 +165,6 @@ const isDropTarget = computed(
 )
 const isDragSource = computed(() => fileDragActive.value && fileDragData.value?.path === props.path)
 
-const units = Object.freeze(['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'])
-
 const formatDateTime = useFormatDateTime({
 	year: '2-digit',
 	month: '2-digit',
@@ -173,6 +172,7 @@ const formatDateTime = useFormatDateTime({
 	hour: 'numeric',
 	minute: 'numeric',
 })
+const formatBytes = useFormatBytes()
 
 const containerClasses = computed(() => {
 	const dropTarget = isDropTarget.value
@@ -307,12 +307,7 @@ const formattedSize = computed(() => {
 	}
 
 	if (props.size === undefined) return ''
-	const bytes = props.size
-	if (bytes === 0) return '0 B'
-
-	const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1)
-	const size = (bytes / Math.pow(1024, exponent)).toFixed(2)
-	return `${size} ${units[exponent]}`
+	return formatBytes(props.size)
 })
 
 function openContextMenu(event: MouseEvent) {

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

@@ -115,12 +115,14 @@ import { CheckCircleIcon, FolderOpenIcon, SpinnerIcon, XCircleIcon } from '@modr
 import { computed, nextTick, ref, watch } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { useFormatBytes } from '#ui/composables'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { injectModrinthClient } from '#ui/providers/api-client'
 import { injectNotificationManager } from '#ui/providers/web-notifications'
 import { commonMessages } from '#ui/utils/common-messages'
 
 const { formatMessage } = useVIntl()
+const formatBytes = useFormatBytes()
 const { addNotification } = injectNotificationManager()
 const client = injectModrinthClient()
 
@@ -240,13 +242,6 @@ watch(
 	{ deep: true },
 )
 
-const formatFileSize = (bytes: number): string => {
-	if (bytes < 1024) return bytes + ' B'
-	if (bytes < 1024 ** 2) return (bytes / 1024).toFixed(1) + ' KB'
-	if (bytes < 1024 ** 3) return (bytes / 1024 ** 2).toFixed(1) + ' MB'
-	return (bytes / 1024 ** 3).toFixed(1) + ' GB'
-}
-
 const cancelUpload = (item: UploadItem) => {
 	if (item.uploader && item.status === 'uploading') {
 		item.uploader.cancel()
@@ -269,7 +264,7 @@ const uploadFile = async (file: File) => {
 		file,
 		progress: 0,
 		status: 'pending',
-		size: formatFileSize(file.size),
+		size: formatBytes(file.size, 1),
 	}
 
 	uploadQueue.value.push(uploadItem)

packages/ui/src/layouts/wrapped/hosting/manage/components/ServerManageStats.vue

@@ -65,6 +65,7 @@ import { useStorage } from '@vueuse/core'
 import { computed, defineAsyncComponent, onMounted, ref, shallowRef, watch } from 'vue'
 import { RouterLink } from 'vue-router'
 
+import { useFormatBytes } from '#ui/composables'
 import { injectModrinthServerContext, injectPageContext } from '#ui/providers'
 
 const VueApexCharts = defineAsyncComponent(() => import('vue3-apexcharts'))
@@ -92,6 +93,8 @@ const props = withDefaults(
 	},
 )
 
+const formatBytes = useFormatBytes()
+
 const chartsReady = ref(new Set<number>())
 const userPreferences = useStorage(`pyro-server-${serverId || 'unknown'}-preferences`, {
 	ramAsNumber: false,
@@ -178,21 +181,10 @@ const ramChartOptions = computed(() => buildChartOptions(ramWarning.value, 1, ra
 const cpuSeries = computed(() => [{ name: 'CPU', data: cpuData.value }])
 const ramSeries = computed(() => [{ name: 'Memory', data: ramData.value }])
 
-const formatBytes = (bytes: number) => {
-	const units = ['B', 'KB', 'MB', 'GB']
-	let value = bytes
-	let unit = 0
-	while (value >= 1024 && unit < units.length - 1) {
-		value /= 1024
-		unit++
-	}
-	return `${Math.round(value * 10) / 10} ${units[unit]}`
-}
-
 const metrics = computed(() => {
 	const storageMetric = {
 		title: 'Storage',
-		value: props.loading ? '0 B' : formatBytes(stats.value.storage_usage_bytes ?? 0),
+		value: formatBytes(props.loading ? 0 : (stats.value.storage_usage_bytes ?? 0), 1),
 		secondary: null as string | null,
 		icon: FolderOpenIcon,
 		showGraph: false,
@@ -241,10 +233,10 @@ const metrics = computed(() => {
 		{
 			title: 'Memory',
 			value: showRamAsBytes.value
-				? formatBytes(stats.value.ram_usage_bytes ?? 0)
+				? formatBytes(stats.value.ram_usage_bytes ?? 0, 1)
 				: `${ramPercent.value.toFixed(2)}%`,
 			secondary: showRamAsBytes.value
-				? `/ ${formatBytes(stats.value.ram_total_bytes ?? 0)}`
+				? `/ ${formatBytes(stats.value.ram_total_bytes ?? 0, 1)}`
 				: (null as string | null),
 			icon: DatabaseIcon,
 			showGraph: true,

packages/ui/src/locales/en-US/index.json

@@ -1217,6 +1217,21 @@
   "form.placeholder.state": {
     "defaultMessage": "Enter state/province"
   },
+  "format.bytes.0": {
+    "defaultMessage": "{count, plural, one {# byte} other {# bytes}}"
+  },
+  "format.bytes.1": {
+    "defaultMessage": "{count, number} KiB"
+  },
+  "format.bytes.2": {
+    "defaultMessage": "{count, number} MiB"
+  },
+  "format.bytes.3": {
+    "defaultMessage": "{count, number} GiB"
+  },
+  "format.bytes.4": {
+    "defaultMessage": "{count, number} TiB"
+  },
   "header.category.category": {
     "defaultMessage": "Category"
   },

packages/utils/utils.ts

@@ -94,18 +94,6 @@ export const sortedCategories = (tags, formatCategoryName, locale) => {
 	})
 }
 
-export const formatBytes = (bytes, decimals = 2) => {
-	if (bytes === 0) return '0 Bytes'
-
-	const k = 1024
-	const dm = decimals < 0 ? 0 : decimals
-	const sizes = ['Bytes', 'KiB', 'MiB', 'GiB']
-
-	const i = Math.floor(Math.log(bytes) / Math.log(k))
-
-	return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
-}
-
 export const capitalizeString = (name) => {
 	return name ? name.charAt(0).toUpperCase() + name.slice(1) : name
 }
@@ -240,7 +228,7 @@ export function cycleValue<T extends string>(value: T, values: T[]): T {
 	return values[index % values.length]
 }
 
-export const fileIsValid = (file, validationOptions) => {
+export const fileIsValid = (file, validationOptions, formatBytes) => {
 	const { maxSize, alertOnInvalid } = validationOptions
 	if (maxSize !== null && maxSize !== undefined && file.size > maxSize) {
 		if (alertOnInvalid) {