Wire admin studio SSR and search infrastructure

resources/js/components/artwork/ArtworkComments.jsx

@@ -5,20 +5,44 @@ import ReactionBar from '../comments/ReactionBar'
 import LevelBadge from '../xp/LevelBadge'
 import { isFlood } from '../../utils/emojiFlood'
 
+const ABSOLUTE_DATE_FORMATTER = new Intl.DateTimeFormat('en-US', {
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric',
+  timeZone: 'UTC',
+})
+
+const ABSOLUTE_DATE_TIME_FORMATTER = new Intl.DateTimeFormat('en-US', {
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: '2-digit',
+  timeZone: 'UTC',
+})
+
 // ── Helpers ───────────────────────────────────────────────────────────────────
 
-function timeAgo(dateStr) {
-  if (!dateStr) return ''
-  const date    = new Date(dateStr)
-  const seconds = Math.floor((Date.now() - date.getTime()) / 1000)
-  if (seconds < 60) return 'just now'
-  const minutes = Math.floor(seconds / 60)
-  if (minutes < 60) return `${minutes}m ago`
-  const hours = Math.floor(minutes / 60)
-  if (hours < 24) return `${hours}h ago`
-  const days = Math.floor(hours / 24)
-  if (days < 365) return `${days}d ago`
-  return date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
+function formatAbsoluteDate(value) {
+  if (!value) return ''
+
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return ''
+
+  return ABSOLUTE_DATE_FORMATTER.format(date)
+}
+
+function formatAbsoluteDateTime(value) {
+  if (!value) return ''
+
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return ''
+
+  return ABSOLUTE_DATE_TIME_FORMATTER.format(date)
+}
+
+function formatCommentTime(primaryLabel, createdAt) {
+  return primaryLabel || formatAbsoluteDate(createdAt)
 }
 
 /* ── Icons ─────────────────────────────────────────────────────────────────── */
@@ -135,10 +159,10 @@ function ReplyItem({ reply, parentId, artworkId, isLoggedIn, onReplyPosted, dept
           <span className="text-white/15" aria-hidden="true">·</span>
           <time
             dateTime={reply.created_at}
-            title={reply.created_at ? new Date(reply.created_at).toLocaleString() : ''}
+            title={formatAbsoluteDateTime(reply.created_at)}
             className="text-[10px] font-medium tracking-wide text-white/25 uppercase"
           >
-            {reply.time_ago || timeAgo(reply.created_at)}
+            {formatCommentTime(reply.time_ago, reply.created_at)}
           </time>
         </div>
 
@@ -292,10 +316,10 @@ function CommentItem({ comment, isLoggedIn, artworkId, onReplyPosted }) {
               <span className="text-white/15" aria-hidden="true">·</span>
               <time
                 dateTime={comment.created_at}
-                title={comment.created_at ? new Date(comment.created_at).toLocaleString() : ''}
+                title={formatAbsoluteDateTime(comment.created_at)}
                 className="text-[11px] font-medium tracking-wide text-white/30 uppercase"
               >
-                {comment.time_ago || timeAgo(comment.created_at)}
+                {formatCommentTime(comment.time_ago, comment.created_at)}
               </time>
             </div>