diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index c8648f19..97d22e68 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -95,13 +95,13 @@ function previewAvatar() {
- {{ account.statusesCount }} Posts
+ {{ formattedNumber(account.statusesCount) }} Posts
- {{ account.followingCount }} Following
+ {{ humanReadableNumber(account.followingCount) }} Following
- {{ account.followersCount }} Followers
+ {{ humanReadableNumber(account.followersCount) }} Followers
diff --git a/components/account/AccountHoverCard.vue b/components/account/AccountHoverCard.vue
index 41d29c9c..fabba76f 100644
--- a/components/account/AccountHoverCard.vue
+++ b/components/account/AccountHoverCard.vue
@@ -11,15 +11,15 @@ defineProps<{
- {{ account.statusesCount }} Posts
+ {{ formattedNumber(account.statusesCount) }} Posts
•
- {{ account.followingCount }} Following
+ {{ humanReadableNumber(account.followingCount) }} Following
•
- {{ account.followersCount }} Followers
+ {{ humanReadableNumber(account.followersCount) }} Followers
diff --git a/composables/numbers.ts b/composables/numbers.ts
new file mode 100644
index 00000000..a287576a
--- /dev/null
+++ b/composables/numbers.ts
@@ -0,0 +1,15 @@
+const formatter = Intl.NumberFormat()
+
+export const humanReadableNumber = (num: number) => {
+ if (num < 10000)
+ return formatter.format(num)
+
+ if (num < 1000000)
+ return `${Math.floor(num / 1000)}K`
+
+ return `${Math.floor(num / 1000000)}M`
+}
+
+export const formattedNumber = (num: number) => {
+ return formatter.format(num)
+}