From ce44d5cf165ef2b13d2ae6db6c8c7ec042fd31fa Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 28 Jul 2024 17:56:23 +1200
Subject: [PATCH] show when a message was received

---
 public/index.html | 32 +++++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/public/index.html b/public/index.html
index 3bb3639..8e989cd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -532,9 +532,6 @@
                         <div v-if="selectedPeerChatItems.length > 0" class="flex flex-col space-y-3 p-3">
                             <div v-for="chatItem of selectedPeerChatItems" class="flex flex-col max-w-xl" :class="{ 'ml-auto pl-4 md:pl-16 items-end': chatItem.is_outbound, 'mr-auto pr-4 md:pr-16 items-start': !chatItem.is_outbound }">
 
-                                <!-- sender name -->
-                                <div v-if="!chatItem.is_outbound" class="text-xs text-gray-500 ml-2">{{ selectedPeer.name }}</div>
-
                                 <!-- message content -->
                                 <div @click="onChatItemClick(chatItem)" class="border border-gray-300 rounded-xl shadow overflow-hidden" :class="[ chatItem.lxmf_message.state === 'failed' ? 'bg-red-500 text-white' : chatItem.is_outbound ? 'bg-[#3b82f6] text-white' : 'bg-[#efefef]' ]">
 
@@ -644,6 +641,11 @@
                                     </div>
                                 </div>
 
+                                <!-- received timestamp -->
+                                <div v-if="!chatItem.is_outbound" class="text-xs text-gray-500 mt-0.5">
+                                    {{ formatSecondsAgo(chatItem.lxmf_message.timestamp) }}
+                                </div>
+
                             </div>
                         </div>
                     </div>
@@ -2543,18 +2545,34 @@
                 const parsedSeconds = this.parseSeconds(seconds);
 
                 if(parsedSeconds.days > 0){
-                    return parsedSeconds.days + " days ago";
+                    if(parsedSeconds.days === 1){
+                        return "1 day ago";
+                    } else {
+                        return parsedSeconds.days + " days ago";
+                    }
                 }
 
                 if(parsedSeconds.hours > 0){
-                    return parsedSeconds.hours + " hours ago";
+                    if(parsedSeconds.hours === 1){
+                        return "1 hour ago";
+                    } else {
+                        return parsedSeconds.hours + " hours ago";
+                    }
                 }
 
                 if(parsedSeconds.minutes > 0){
-                    return parsedSeconds.minutes + " minutes ago";
+                    if(parsedSeconds.minutes === 1){
+                        return "a minute ago";
+                    } else {
+                        return parsedSeconds.minutes + " minutes ago";
+                    }
                 }
 
-                return parsedSeconds.seconds + " seconds ago";
+                if(parsedSeconds.seconds <= 1){
+                    return "a second ago";
+                } else {
+                    return parsedSeconds.seconds + " seconds ago";
+                }
 
             },
             formatMinutesSeconds: function(seconds) {