Make profile formatting hydration-safe

resources/js/components/profile/CreatorJourneySection.jsx

@@ -1,14 +1,11 @@
 import React from 'react'
+import { formatProfileDate, formatProfileNumber } from '../../lib/profileFormatters'
 
 function formatDate(value) {
   if (!value) return null
 
   try {
-    return new Intl.DateTimeFormat('en', {
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric',
-    }).format(new Date(value))
+    return formatProfileDate(value, { month: 'short', day: 'numeric', year: 'numeric' })
   } catch {
     return null
   }
@@ -17,7 +14,7 @@ function formatDate(value) {
 function formatYear(value) {
   if (!value) return null
   try {
-    return new Intl.DateTimeFormat('en', { year: 'numeric' }).format(new Date(value))
+    return formatProfileDate(value, { year: 'numeric' })
   } catch {
     return null
   }
@@ -268,8 +265,8 @@ function YearlyProductivityChart({ recaps }) {
                 <div className="absolute inset-y-0 left-0 flex w-full items-center px-3 opacity-0 transition-opacity group-hover:opacity-100">
                   <span className="text-[11px] font-semibold text-white drop-shadow-sm">
                     {uploads} upload{uploads !== 1 ? 's' : ''}
-                    {(item.metrics?.views ?? 0) > 0 ? ` · ${Number(item.metrics.views).toLocaleString()} views` : ''}
-                    {(item.metrics?.downloads ?? 0) > 0 ? ` · ${Number(item.metrics.downloads).toLocaleString()} dl` : ''}
+                    {(item.metrics?.views ?? 0) > 0 ? ` · ${formatProfileNumber(item.metrics.views)} views` : ''}
+                    {(item.metrics?.downloads ?? 0) > 0 ? ` · ${formatProfileNumber(item.metrics.downloads)} dl` : ''}
                   </span>
                 </div>
               </div>
@@ -292,8 +289,8 @@ function YearlyProductivityChart({ recaps }) {
       {/* Summary footer */}
       <div className="mt-5 flex flex-wrap gap-4 border-t border-white/5 pt-4 text-[12px] text-slate-400">
         <span><span className="font-semibold text-white">{sorted.length}</span> active years</span>
-        <span><span className="font-semibold text-white">{sorted.reduce((s, r) => s + r.metrics.uploads_count, 0).toLocaleString()}</span> total uploads</span>
-        <span><span className="font-semibold text-white">{Number(sorted.reduce((s, r) => s + (r.metrics.views ?? 0), 0)).toLocaleString()}</span> total views</span>
+        <span><span className="font-semibold text-white">{formatProfileNumber(sorted.reduce((s, r) => s + r.metrics.uploads_count, 0))}</span> total uploads</span>
+        <span><span className="font-semibold text-white">{formatProfileNumber(sorted.reduce((s, r) => s + (r.metrics.views ?? 0), 0))}</span> total views</span>
       </div>
     </div>
   )
@@ -550,8 +547,8 @@ export default function CreatorJourneySection({ journey, username }) {
                   <p className="mt-3 text-sm leading-relaxed text-slate-300">{item.summary}</p>
 
                   <div className="mt-4 grid gap-2 sm:grid-cols-2">
-                    <StatPill label="Views" value={(item.metrics?.views ?? 0).toLocaleString()} />
-                    <StatPill label="Downloads" value={(item.metrics?.downloads ?? 0).toLocaleString()} />
+                    <StatPill label="Views" value={formatProfileNumber(item.metrics?.views ?? 0)} />
+                    <StatPill label="Downloads" value={formatProfileNumber(item.metrics?.downloads ?? 0)} />
                     {(item.metrics?.featured_count ?? 0) > 0 && (
                       <StatPill label="Featured" value={item.metrics.featured_count} />
                     )}

resources/js/components/profile/collections/CollectionCard.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import CollectionVisibilityBadge from './CollectionVisibilityBadge'
+import { formatProfileDate, formatProfileNumber } from '../../../lib/profileFormatters'
 
 async function requestJson(url, { method = 'GET', body } = {}) {
   const response = await fetch(url, {
@@ -26,14 +27,7 @@ async function requestJson(url, { method = 'GET', body } = {}) {
 function formatUpdated(value) {
   if (!value) return 'Updated recently'
 
-  const date = new Date(value)
-  if (Number.isNaN(date.getTime())) return 'Updated recently'
-
-  return new Intl.DateTimeFormat(undefined, {
-    month: 'short',
-    day: 'numeric',
-    year: 'numeric',
-  }).format(date)
+  return formatProfileDate(value, { month: 'short', day: 'numeric', year: 'numeric' }) || 'Updated recently'
 }
 
 function StatPill({ icon, label, value }) {
@@ -178,7 +172,7 @@ export default function CollectionCard({ collection, isOwner, onDelete, onToggle
               {collection?.subtitle ? <p className="mt-1 truncate text-sm text-slate-300">{collection.subtitle}</p> : null}
               {collection?.owner?.name ? <p className="mt-1 truncate text-sm text-slate-400">Curated by {collection.owner.name}{collection?.owner?.username ? ` • @${collection.owner.username}` : ''}</p> : null}
               <p className="mt-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">
-                {(collection?.artworks_count ?? 0).toLocaleString()} artworks
+                {formatProfileNumber(collection?.artworks_count ?? 0)} artworks
               </p>
             </div>
           </div>
@@ -190,9 +184,9 @@ export default function CollectionCard({ collection, isOwner, onDelete, onToggle
           ) : null}
 
           <div className="mt-4 flex flex-wrap gap-2">
-            <StatPill icon="fa-heart" label="likes" value={(collection?.likes_count ?? 0).toLocaleString()} />
-            <StatPill icon="fa-bell" label="followers" value={(collection?.followers_count ?? 0).toLocaleString()} />
-            {collection?.collaborators_count > 1 ? <StatPill icon="fa-user-group" label="curators" value={(collection?.collaborators_count ?? 0).toLocaleString()} /> : null}
+            <StatPill icon="fa-heart" label="likes" value={formatProfileNumber(collection?.likes_count ?? 0)} />
+            <StatPill icon="fa-bell" label="followers" value={formatProfileNumber(collection?.followers_count ?? 0)} />
+            {collection?.collaborators_count > 1 ? <StatPill icon="fa-user-group" label="curators" value={formatProfileNumber(collection?.collaborators_count ?? 0)} /> : null}
           </div>
 
           <div className="mt-4 flex items-center justify-between gap-3 text-xs text-slate-400">

resources/js/components/profile/tabs/TabAbout.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { usePage } from '@inertiajs/react'
 import CreatorJourneySection from '../CreatorJourneySection'
 import { shinyFlagUrl } from '../../../utils/flagUrl'
+import { formatProfileDate, formatProfileNumber } from '../../../lib/profileFormatters'
 
 const SOCIAL_ICONS = {
   twitter:    { icon: 'fa-brands fa-x-twitter',  label: 'X / Twitter',  hoverClass: 'hover:border-slate-300/30 hover:text-slate-100 hover:bg-white/[0.08]' },
@@ -66,7 +67,7 @@ function getContentTypeIcon(label) {
 }
 
 function formatNumber(value) {
-  return Number(value ?? 0).toLocaleString()
+  return formatProfileNumber(value)
 }
 
 function formatRelativeDate(value) {
@@ -79,7 +80,7 @@ function formatRelativeDate(value) {
     const now = new Date()
     const diffSeconds = Math.round((date.getTime() - now.getTime()) / 1000)
     const absSeconds = Math.abs(diffSeconds)
-    const formatter = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
+    const formatter = new Intl.RelativeTimeFormat('en-US', { numeric: 'auto' })
 
     if (absSeconds < 3600) {
       return formatter.format(Math.round(diffSeconds / 60), 'minute')
@@ -110,7 +111,7 @@ function formatShortDate(value) {
     const date = new Date(value)
     if (Number.isNaN(date.getTime())) return null
 
-    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+    return formatProfileDate(date, { month: 'short', day: 'numeric', year: 'numeric' })
   } catch {
     return null
   }
@@ -131,7 +132,7 @@ function formatContributionDate(value) {
     const date = new Date(value)
     if (Number.isNaN(date.getTime())) return null
 
-    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+    return formatProfileDate(date, { month: 'short', day: 'numeric', year: 'numeric' })
   } catch {
     return null
   }
@@ -237,14 +238,13 @@ export default function TabAbout({ user, profile, stats, achievements, worldRewa
   const flagUrl = shinyFlagUrl(profile?.country_code, props?.cdn?.files_url)
 
   const joinDate = user.created_at
-    ? new Date(user.created_at).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })
+    ? formatProfileDate(user.created_at, { month: 'long', day: 'numeric', year: 'numeric' })
     : null
 
   const lastVisit = user.last_visit_at
     ? (() => {
         try {
-          const d = new Date(user.last_visit_at)
-          return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+          return formatProfileDate(user.last_visit_at, { month: 'short', day: 'numeric', year: 'numeric' })
         } catch { return null }
       })()
     : null
@@ -254,7 +254,7 @@ export default function TabAbout({ user, profile, stats, achievements, worldRewa
   const birthDate = profile?.birthdate
     ? (() => {
         try {
-          return new Date(profile.birthdate).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })
+          return formatProfileDate(profile.birthdate, { month: 'long', day: 'numeric', year: 'numeric' })
         } catch { return null }
       })()
     : null
@@ -381,9 +381,9 @@ export default function TabAbout({ user, profile, stats, achievements, worldRewa
                         {entry.group?.headline ? <p className="mt-1 text-sm text-slate-400">{truncateText(entry.group.headline, 100)}</p> : null}
                         {entry.summary ? <p className="mt-3 text-sm text-slate-300">{entry.summary}</p> : null}
                         <div className="mt-3 flex flex-wrap gap-3 text-xs text-slate-500">
-                          <span>{Number(entry.counts?.credited_artworks || 0).toLocaleString()} credited artworks</span>
-                          <span>{Number(entry.counts?.releases || 0).toLocaleString()} releases</span>
-                          <span>{Number(entry.counts?.projects || 0).toLocaleString()} projects</span>
+                          <span>{formatProfileNumber(entry.counts?.credited_artworks || 0)} credited artworks</span>
+                          <span>{formatProfileNumber(entry.counts?.releases || 0)} releases</span>
+                          <span>{formatProfileNumber(entry.counts?.projects || 0)} projects</span>
                           {entry.joined_at ? <span>Joined {formatContributionDate(entry.joined_at)}</span> : null}
                         </div>
                         {Array.isArray(entry.role_labels) && entry.role_labels.length > 0 ? (

resources/js/components/profile/tabs/TabFollowers.jsx

@@ -1,17 +1,11 @@
 import React from 'react'
+import { formatProfileDate, formatProfileNumber } from '../../../lib/profileFormatters'
 
 function formatFollowedAt(value) {
   if (!value) return null
 
   try {
-    const date = new Date(value)
-    if (Number.isNaN(date.getTime())) return null
-
-    return date.toLocaleDateString(undefined, {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-    })
+    return formatProfileDate(value, { year: 'numeric', month: 'short', day: 'numeric' })
   } catch {
     return null
   }
@@ -36,7 +30,7 @@ export default function TabFollowers({ listing, username, followerCount }) {
         <i className="fa-solid fa-users text-sky-400 fa-fw" />
         Followers
         <span className="rounded bg-white/5 px-1.5 py-0.5 text-[10px] font-medium normal-case tracking-normal text-slate-400">
-          {total.toLocaleString()}
+          {formatProfileNumber(total)}
         </span>
       </h2>
 

resources/js/components/profile/tabs/TabStats.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { formatProfileNumber } from '../../../lib/profileFormatters'
 
 function KpiCard({ icon, label, value, color = 'text-sky-400' }) {
   return (
@@ -7,7 +8,7 @@ function KpiCard({ icon, label, value, color = 'text-sky-400' }) {
         <i className={`fa-solid ${icon} text-xl`} />
       </div>
       <div>
-        <p className="text-2xl font-bold text-white tabular-nums">{Number(value ?? 0).toLocaleString()}</p>
+        <p className="text-2xl font-bold text-white tabular-nums">{formatProfileNumber(value)}</p>
         <p className="text-xs text-slate-500 mt-0.5 uppercase tracking-wider">{label}</p>
       </div>
     </div>
@@ -71,7 +72,7 @@ export default function TabStats({ stats, followerCount, followAnalytics }) {
               </div>
               <div className="text-right">
                 <div className="text-xs uppercase tracking-widest text-slate-500">Weighted Score</div>
-                <div className="mt-1 text-2xl font-bold text-white tabular-nums">{Number(medalTotals?.score_total ?? 0).toLocaleString()}</div>
+                <div className="mt-1 text-2xl font-bold text-white tabular-nums">{formatProfileNumber(medalTotals?.score_total ?? 0)}</div>
               </div>
             </div>
             <div className="mt-4 grid grid-cols-2 gap-3 md:grid-cols-4">
@@ -83,7 +84,7 @@ export default function TabStats({ stats, followerCount, followAnalytics }) {
               ].map((item) => (
                 <div key={item.label} className="rounded-2xl border border-white/10 bg-black/15 px-4 py-4">
                   <div className="text-[11px] uppercase tracking-widest text-slate-500">{item.label}</div>
-                  <div className={`mt-2 text-2xl font-semibold tabular-nums ${item.color}`}>{Number(item.value).toLocaleString()}</div>
+                  <div className={`mt-2 text-2xl font-semibold tabular-nums ${item.color}`}>{formatProfileNumber(item.value)}</div>
                 </div>
               ))}
             </div>

resources/js/components/profile/worlds/ProfileWorldHistoryCard.jsx

@@ -1,14 +1,12 @@
 import React from 'react'
+import { formatProfileDate } from '../../../lib/profileFormatters'
 import ProfileWorldRecognitionBadge from './ProfileWorldRecognitionBadge'
 
 function formatDate(value) {
   if (!value) return null
 
   try {
-    const date = new Date(value)
-    if (Number.isNaN(date.getTime())) return null
-
-    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+    return formatProfileDate(value, { month: 'short', day: 'numeric', year: 'numeric' })
   } catch {
     return null
   }
@@ -119,4 +117,4 @@ export default function ProfileWorldHistoryCard({ entry }) {
       </div>
     </article>
   )
-}
+}

resources/js/components/profile/worlds/ProfileWorldHistorySummary.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { formatProfileDate } from '../../../lib/profileFormatters'
 import ProfileWorldStatsRow from './ProfileWorldStatsRow'
 import ProfileWorldRecognitionBadge from './ProfileWorldRecognitionBadge'
 
@@ -6,10 +7,7 @@ function formatDate(value) {
   if (!value) return null
 
   try {
-    const date = new Date(value)
-    if (Number.isNaN(date.getTime())) return null
-
-    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+    return formatProfileDate(value, { month: 'short', day: 'numeric', year: 'numeric' })
   } catch {
     return null
   }
@@ -51,4 +49,4 @@ export default function ProfileWorldHistorySummary({ history }) {
       ) : null}
     </div>
   )
-}
+}