Make profile formatting hydration-safe

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">