Wire admin studio SSR and search infrastructure

resources/js/components/artwork/ArtworkDetailsPanel.jsx

@@ -1,24 +1,33 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import ArtworkFormatBadges from './ArtworkFormatBadges'
 
+const NUMBER_FORMATTER = new Intl.NumberFormat('en-US')
+const ABSOLUTE_DATE_FORMATTER = new Intl.DateTimeFormat('en-US', {
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric',
+  timeZone: 'UTC',
+})
+
 function formatCount(value) {
   const n = Number(value || 0)
   if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1).replace(/\.0$/, '')}M`
   if (n >= 1_000) return `${(n / 1_000).toFixed(1).replace(/\.0$/, '')}k`
-  return n.toLocaleString()
+  return NUMBER_FORMATTER.format(n)
 }
 
-function formatDate(value) {
+function formatDate(value, useRelative = true) {
   if (!value) return '—'
   try {
     const d = new Date(value)
+    if (!useRelative) return ABSOLUTE_DATE_FORMATTER.format(d)
     const now = Date.now()
     const diff = now - d.getTime()
     const days = Math.floor(diff / 86_400_000)
     if (days === 0) return 'Today'
     if (days === 1) return 'Yesterday'
     if (days < 30) return `${days} days ago`
-    return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
+    return ABSOLUTE_DATE_FORMATTER.format(d)
   } catch {
     return '—'
   }
@@ -46,9 +55,14 @@ function InfoRow({ label, value }) {
 }
 
 export default function ArtworkDetailsPanel({ artwork, stats }) {
+  const [hydrated, setHydrated] = useState(false)
   const width = artwork?.dimensions?.width || artwork?.width || 0
   const height = artwork?.dimensions?.height || artwork?.height || 0
-  const resolution = width > 0 && height > 0 ? `${width.toLocaleString()} × ${height.toLocaleString()}` : null
+  const resolution = width > 0 && height > 0 ? `${NUMBER_FORMATTER.format(width)} × ${NUMBER_FORMATTER.format(height)}` : null
+
+  useEffect(() => {
+    setHydrated(true)
+  }, [])
 
   return (
     <section className="rounded-2xl border border-white/[0.06] bg-white/[0.03] p-5">
@@ -86,7 +100,7 @@ export default function ArtworkDetailsPanel({ artwork, stats }) {
             <ArtworkFormatBadges width={width} height={height} className="mt-2" />
           </div>
         ) : null}
-        <InfoRow label="Uploaded" value={formatDate(artwork?.published_at)} />
+        <InfoRow label="Uploaded" value={formatDate(artwork?.published_at, hydrated)} />
       </div>
     </section>
   )