# SOLUTION.md
Date: 2025-10-04
Feature: Messaging - Add Date Display
Type: Enhancement

## IMPLEMENTATION

### Add Smart Timestamp Formatter Function
\\\javascript
function formatMessageTimestamp(isoString) {
    const msgDate = new Date(isoString);
    const today = new Date();
    const yesterday = new Date(today);
    yesterday.setDate(yesterday.getDate() - 1);
    
    // Reset time for date comparison
    const msgDay = new Date(msgDate.getFullYear(), msgDate.getMonth(), msgDate.getDate());
    const todayDay = new Date(today.getFullYear(), today.getMonth(), today.getDate());
    const yesterdayDay = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate());
    
    const timeStr = msgDate.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });
    
    if (msgDay.getTime() === todayDay.getTime()) {
        return timeStr; // "7:11 AM"
    } else if (msgDay.getTime() === yesterdayDay.getTime()) {
        return \Yesterday \\; // "Yesterday 7:11 AM"
    } else {
        const dateStr = msgDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
        return \\, \\; // "Oct 2, 7:11 AM"
    }
}
\\\

### Update displayMessages Function
Change line ~280 from:
\\\javascript
const timestamp = new Date(msg.created_at).toLocaleTimeString();
\\\

To:
\\\javascript
const timestamp = formatMessageTimestamp(msg.created_at);
\\\

## TESTING
- Send message today  shows time only
- Check message from yesterday  shows "Yesterday HH:MM AM"
- Check older messages  shows "MMM D, HH:MM AM"