add number formatting

src/app/interface/channel-card/index.tsx

@@ -7,6 +7,7 @@ import { cn } from "@/lib/utils"
 import { ChannelInfo } from "@/types"
 import { isCertifiedUser } from "@/app/certification"
 import { DefaultAvatar } from "../default-avatar"
+import { formatLargeNumber } from "@/lib/formatLargeNumber"
 
 export function ChannelCard({
   channel,
@@ -103,9 +104,9 @@ export function ChannelCard({
             {isCertifiedUser(channel.datasetUser) ? <div className="text-xs text-neutral-400"><RiCheckboxCircleFill className="" /></div> : null}
           </div>}
           {!isCreateButton && <div className="flex flex-row items-center justify-center text-neutral-400">
-            <div className="text-center text-xs">{0} videos</div>
+            <div className="text-center text-xs">{formatLargeNumber(0)} videos</div>
             <div className="px-1">-</div>
-            <div className="text-center text-xs">{channel.likes} likes</div>
+            <div className="text-center text-xs">{formatLargeNumber(channel.likes)} likes</div>
           </div>}
         </div>
       </div>

src/app/interface/collection-card/index.tsx

@@ -11,6 +11,7 @@ import { formatTimeAgo } from "@/lib/formatTimeAgo"
 import { isCertifiedUser } from "@/app/certification"
 import { transparentImage } from "@/lib/transparentImage"
 import { DefaultAvatar } from "../default-avatar"
+import { formatLargeNumber } from "@/lib/formatLargeNumber"
 
 export function CollectionCard({
   collection,
@@ -162,7 +163,7 @@ export function CollectionCard({
               isCompact ? `text-2xs lg:text-xs` : `text-sm`,
               `space-x-1`
             )}>
-            <div>{collection.numberOfViews} views</div>
+            <div>{formatLargeNumber(collection.numberOfViews)} views</div>
             <div className="font-semibold scale-125">·</div>
             <div>{formatTimeAgo(collection.updatedAt)}</div>
             </div>

src/app/interface/like-button/generic.tsx

@@ -4,6 +4,7 @@ import { RiThumbDownLine } from "react-icons/ri"
 import { RiThumbDownFill } from "react-icons/ri"
 
 import { cn } from "@/lib/utils"
+import { formatLargeNumber } from "@/lib/formatLargeNumber"
 
 export const likeButtonClassName = cn(
   `flex flex-row`,
@@ -58,7 +59,7 @@ export function GenericLikeButton({
         <div>{
           isLikedByUser ? <RiThumbUpFill /> :  <RiThumbUpLine />
         }</div>
-        <div>{Math.max(0, numberOfLikes)}</div>
+        <div>{formatLargeNumber(Math.max(0, numberOfLikes))}</div>
       </div>
       <div className={cn(
         `flex flex-row items-center justify-center`,
@@ -76,7 +77,7 @@ export function GenericLikeButton({
         <div>{
           isDislikedByUser ? <RiThumbDownFill /> :  <RiThumbDownLine />
         }</div>
-        <div>{Math.max(0, numberOfDislikes)}</div>
+        <div>{formatLargeNumber(Math.max(0, numberOfDislikes))}</div>
       </div>
     </div>
   )

src/app/interface/top-header/index.tsx

@@ -13,6 +13,7 @@ const pathway = Pathway_Gothic_One({
 import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
 import { getTags } from '@/app/server/actions/ai-tube-hf/getTags'
+import Link from 'next/link'
 
 export function TopHeader() {
   const [_pending, startTransition] = useTransition()
@@ -95,9 +96,11 @@ export function TopHeader() {
                 )} />
               </div>
             </div>
-            <div className="font-semibold">
-              {view === "public_music_videos" ? "AiTube Music" : "AiTube"}
-            </div>
+            <Link href="/">
+              <div className="font-semibold">
+                {view === "public_music_videos" ? "AiTube Music" : "AiTube"}
+              </div>
+            </Link>
           </div>
         </div>
         <div className={cn(

src/app/interface/track-card/index.tsx

@@ -11,6 +11,7 @@ import { formatTimeAgo } from "@/lib/formatTimeAgo"
 import { isCertifiedUser } from "@/app/certification"
 import { transparentImage } from "@/lib/transparentImage"
 import { DefaultAvatar } from "../default-avatar"
+import { formatLargeNumber } from "@/lib/formatLargeNumber"
 
 export function TrackCard({
   media,
@@ -228,7 +229,7 @@ export function TrackCard({
               isCompact ? `text-2xs lg:text-xs` : `text-sm`,
               `space-x-1`
             )}>
-            <div>{media.numberOfViews} views</div>
+            <div>{formatLargeNumber(media.numberOfViews)} views</div>
             <div className="font-semibold scale-125">·</div>
             <div>{formatTimeAgo(media.updatedAt)}</div>
             </div>}

src/app/interface/video-card/index.tsx

@@ -11,6 +11,7 @@ import { formatTimeAgo } from "@/lib/formatTimeAgo"
 import { isCertifiedUser } from "@/app/certification"
 import { transparentImage } from "@/lib/transparentImage"
 import { DefaultAvatar } from "../default-avatar"
+import { formatLargeNumber } from "@/lib/formatLargeNumber"
 
 export function VideoCard({
   media,
@@ -208,7 +209,7 @@ export function VideoCard({
               isCompact ? `text-2xs lg:text-xs` : `text-sm`,
               `space-x-1`
             )}>
-            <div>{media.numberOfViews} views</div>
+            <div>{formatLargeNumber(media.numberOfViews)} views</div>
             <div className="font-semibold scale-125">·</div>
             <div>{formatTimeAgo(media.updatedAt)}</div>
             </div>

src/app/views/public-video-view/index.tsx

@@ -21,6 +21,7 @@ import { DefaultAvatar } from "@/app/interface/default-avatar"
 import { LikeButton } from "@/app/interface/like-button"
 
 import { ReportModal } from "../report-modal"
+import { formatLargeNumber } from "@/lib/formatLargeNumber"
 
 export function PublicVideoView() {
   const [_pending, startTransition] = useTransition()
@@ -188,7 +189,10 @@ export function PublicVideoView() {
                 `flex flex-row items-center`,
                 `text-neutral-400 text-xs font-normal space-x-1`,
                 )}>
-                <div>0 followers</div>
+                <div>{
+                  // TODO implement the follower system
+                  formatLargeNumber(0)
+                } followers</div>
                 <div></div>
               </div>
             </a>
@@ -271,7 +275,7 @@ export function PublicVideoView() {
           `text-sm text-zinc-100`,
         )}>
           <div className="flex flex-row space-x-2 font-medium mb-1">
-            <div>{video.numberOfViews} views</div>
+            <div>{formatLargeNumber(video.numberOfViews)} views</div>
             <div>{formatTimeAgo(video.updatedAt).replace("about ", "")}</div>
           </div>
           <p>{video.description}</p>

src/lib/formatLargeNumber.ts

@@ -0,0 +1,14 @@
+export function formatLargeNumber(num: number): string {
+  if (num < 1000) {
+    return num.toString(); // Display as-is for numbers under 1000
+  } else if (num < 1000000) {
+    // Format for thousands
+    return (num / 1000).toFixed(num < 10000 ? 1 : 0) + "K";
+  } else if (num < 1000000000) {
+    // Format for millions
+    return (num / 1000000).toFixed(num < 10000000 ? 1 : 0) + "M";
+  } else {
+    // Format for billions
+    return (num / 1000000000).toFixed(num < 10000000000 ? 1 : 0) + "B";
+  }
+}