Show the device count in short scale notation

app/models/profile.server.ts

@@ -7,8 +7,9 @@ import {
 import { type PgTransaction } from 'drizzle-orm/pg-core'
 import { type PostgresJsQueryResultHKT } from 'drizzle-orm/postgres-js'
 import { drizzleClient } from '~/db.server'
-import { type User, type Profile, profile, sensor, measurement } from '~/schema'
+import { type User, type Profile, profile, measurement } from '~/schema'
 import type * as schema from '~/schema'
+import { formatCount } from '~/utils/misc'
 
 export async function getProfileByUserId(id: Profile['id']) {
 	return drizzleClient.query.profile.findFirst({
@@ -74,16 +75,6 @@ export async function createProfileWithTransaction(
 	})
 }
 
-function formatCount(num: number): string {
-	if (num >= 1_000_000) {
-		return `${(num / 1_000_000).toFixed(1).replace(/\.0$/, '')}M`
-	}
-	if (num >= 1_000) {
-		return `${(num / 1_000).toFixed(1).replace(/\.0$/, '')}k`
-	}
-	return num.toString()
-}
-
 // function to get sensors and measurements count for a profile
 export async function getProfileSensorsAndMeasurementsCount(profile: Profile) {
 	const userId = profile.userId

app/routes/profile.$username.tsx

@@ -9,7 +9,7 @@ import {
 	getProfileByUsername,
 	getProfileSensorsAndMeasurementsCount,
 } from '~/models/profile.server'
-import { getInitials } from '~/utils/misc'
+import { formatCount, getInitials } from '~/utils/misc'
 import { getUserId } from '~/utils/session.server'
 
 export async function loader({ params, request }: LoaderFunctionArgs) {
@@ -117,7 +117,7 @@ export default function () {
 					<div className="grid grid-cols-2 gap-4 md:pt-6">
 						<div className="flex flex-col items-center rounded-lg bg-gray-100 p-4 dark:bg-dark-boxes">
 							<span className="text-2xl font-bold dark:text-dark-green">
-								{profile?.user?.devices.length}
+								{formatCount(profile?.user?.devices.length || 0)}
 							</span>
 							<span className="text-sm text-gray-500 dark:text-gray-400">
 								{t('devices')}

app/utils/misc.ts

@@ -26,3 +26,13 @@ export function getInitials(string: string) {
 	}
 	return initials
 }
+
+export function formatCount(num: number): string {
+	if (num >= 1_000_000) {
+		return `${(num / 1_000_000).toFixed(1).replace(/\.0$/, '')}M`
+	}
+	if (num >= 1_000) {
+		return `${(num / 1_000).toFixed(1).replace(/\.0$/, '')}k`
+	}
+	return num.toString()
+}