Add timestamp & edited thing

src/app/game/berry-dash/chatroom/page.tsx

@@ -5,6 +5,7 @@ import { BackButton } from '@/app/components/BackButton'
 import { DiscordButton } from '@/app/components/DiscordButton'
 import { GetIconForUser } from '@/util/bd'
 import { getCookie } from '@/util/cookie'
+import { formatHumanTime } from '@/util/time'
 import { faTrashCan } from '@fortawesome/free-regular-svg-icons'
 import { faPencil } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -30,6 +31,8 @@ interface Message {
   birdColor: BirdColor
   overlayColor: BirdColor
   customIcon: string | null
+  timestamp: number
+  editedAt: number
   editing: boolean
 }
 
@@ -233,7 +236,20 @@ export default function BerryDashChatroom () {
                         </div>
                       </div>
                     )}
-                    <p>{item.username}</p>
+                    <p>
+                      {item.username}{' '}
+                      <span className='text-[rgb(150,150,200)]'>
+                        {formatHumanTime(item.timestamp)}
+                      </span>
+                      {item.editedAt != 0 && (
+                        <>
+                          {' '}
+                          <span className='text-[rgb(100,100,150)]'>
+                            (edited)
+                          </span>
+                        </>
+                      )}
+                    </p>
                     <p className='w-240 max-w-[calc(100vw-136px)] truncate select-text'>
                       {atob(item.content)}
                     </p>

src/util/time.ts

@@ -0,0 +1,27 @@
+export const formatHumanTime = (unixTimestamp: number) => {
+  const date = new Date(unixTimestamp * 1000)
+  const now = new Date()
+
+  const isToday =
+    date.getFullYear() === now.getFullYear() &&
+    date.getMonth() === now.getMonth() &&
+    date.getDate() === now.getDate()
+
+  const yesterday = new Date()
+  yesterday.setDate(now.getDate() - 1)
+  const isYesterday =
+    date.getFullYear() === yesterday.getFullYear() &&
+    date.getMonth() === yesterday.getMonth() &&
+    date.getDate() === yesterday.getDate()
+
+  const timeStr = date.toLocaleTimeString(undefined, {
+    hour: 'numeric',
+    minute: '2-digit'
+  })
+
+  if (isToday) return timeStr
+  if (isYesterday) return `Yesterday at ${timeStr}`
+
+  const dateStr = date.toLocaleDateString()
+  return `${dateStr}, ${timeStr}`
+}