From 0469ca6cb4b4803303499748ae51486e273ce7bd Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Mon, 2 Sep 2024 21:04:26 +0100
Subject: [Embeds] Format big numbers (#5087)

---
 bskyembed/src/components/post.tsx |  8 ++++----
 bskyembed/src/utils.ts            | 10 ++++++++++
 2 files changed, 14 insertions(+), 4 deletions(-)

(limited to 'bskyembed/src')

diff --git a/bskyembed/src/components/post.tsx b/bskyembed/src/components/post.tsx
index 1d1e8f4d8..4db5eeb45 100644
--- a/bskyembed/src/components/post.tsx
+++ b/bskyembed/src/components/post.tsx
@@ -11,7 +11,7 @@ import likeIcon from '../../assets/heart2_filled_stroke2_corner0_rounded.svg'
 import logo from '../../assets/logo.svg'
 import repostIcon from '../../assets/repost_stroke2_corner2_rounded.svg'
 import {CONTENT_LABELS} from '../labels'
-import {getRkey, niceDate} from '../utils'
+import {getRkey, niceDate, prettyNumber} from '../utils'
 import {Container} from './container'
 import {Embed} from './embed'
 import {Link} from './link'
@@ -78,7 +78,7 @@ export function Post({thread}: Props) {
             <div className="flex items-center gap-2 cursor-pointer">
               <img src={likeIcon} className="w-5 h-5" />
               <p className="font-bold text-neutral-500 mb-px">
-                {post.likeCount}
+                {prettyNumber(post.likeCount)}
               </p>
             </div>
           )}
@@ -86,7 +86,7 @@ export function Post({thread}: Props) {
             <div className="flex items-center gap-2 cursor-pointer">
               <img src={repostIcon} className="w-5 h-5" />
               <p className="font-bold text-neutral-500 mb-px">
-                {post.repostCount}
+                {prettyNumber(post.repostCount)}
               </p>
             </div>
           )}
@@ -97,7 +97,7 @@ export function Post({thread}: Props) {
           <div className="flex-1" />
           <p className="cursor-pointer text-brand font-bold hover:underline hidden min-[450px]:inline">
             {post.replyCount
-              ? `Read ${post.replyCount} ${
+              ? `Read ${prettyNumber(post.replyCount)} ${
                   post.replyCount > 1 ? 'replies' : 'reply'
                 } on Bluesky`
               : `View on Bluesky`}
diff --git a/bskyembed/src/utils.ts b/bskyembed/src/utils.ts
index 1f6fd5061..cfa4a525b 100644
--- a/bskyembed/src/utils.ts
+++ b/bskyembed/src/utils.ts
@@ -16,3 +16,13 @@ export function getRkey({uri}: {uri: string}): string {
   const at = new AtUri(uri)
   return at.rkey
 }
+
+const formatter = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+  roundingMode: 'trunc',
+})
+
+export function prettyNumber(number: number) {
+  return formatter.format(number)
+}
-- 
cgit 1.4.1