Unified time display method to show relative time

assets/messenger-favicon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M.3,64s2.81-2.93,9.23-10.37c7.79-9.05,6.63-19.56,8.06-25.71C22.54,6.52,38.72,9.29,51.18,6A52.35,52.35,0,0,0,64,0s1,25.48-17.52,25.19c-7.06-.1-12.24,2.27-15.24,5.09,0,0,3.56-1.09,6.42-1.71,5.84-1.26,13.14,1.89,13.14,1.89a16.71,16.71,0,0,0-8.88,5.16c-1.53,1.78-3.84,7.74-11,10.59-3.24,1.29-12.45,3.12-17,6.63C11.56,54.64.3,64,.3,64Z" style="fill:#fff"/></svg>

css/main.css

@@ -628,6 +628,7 @@ sm-button[variant=primary] .icon {
 }
 .mail-card .date {
   margin-left: auto;
+  font-weight: 500;
   white-space: nowrap;
 }
 .mail-card .subject {
@@ -1136,7 +1137,7 @@ sm-button[variant=primary] .icon {
 }
 
 #dm_container {
-  transition: 0.3s;
+  padding-bottom: 3.5rem;
 }
 
 sm-tab-panels {
@@ -1145,7 +1146,7 @@ sm-tab-panels {
 
 #inbox_mail_container,
 #sent_mail_container {
-  padding-bottom: 6rem;
+  padding-bottom: 3.5rem;
 }
 
 #chat, #mail {
@@ -1154,7 +1155,7 @@ sm-tab-panels {
 
 #mail {
   height: 100vh;
-  padding: 1.5rem;
+  padding: 0 1.5rem;
   align-items: flex-start;
 }
 #mail .flex {

css/main.scss

@@ -573,6 +573,7 @@ sm-button[variant="primary"]{
     }
     .date{
         margin-left: auto;
+        font-weight: 500;
         white-space: nowrap;
     }
     .subject{
@@ -1071,7 +1072,7 @@ sm-button[variant="primary"]{
     display: none;
 }
 #dm_container{
-    transition: 0.3s;
+    padding-bottom: 3.5rem;
 }
 sm-tab-panels{
     overflow: hidden auto;
@@ -1080,14 +1081,14 @@ sm-tab-panels{
 #inbox_mail_container,
 #sent_mail_container
 {
-    padding-bottom: 6rem;
+    padding-bottom: 3.5rem;
 }
 #chat, #mail{
     background: rgba(var(--foreground-color), 1);
 }
 #mail{
     height: 100vh;
-    padding: 1.5rem;
+    padding: 0 1.5rem;
     align-items: flex-start;
     .flex{margin-top: 1rem;
         sm-button:first-of-type{

index.html

@@ -5,7 +5,7 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>FLO Messenger</title>
-    <link rel="shortcut icon" href="assets/messenger-favicon.png" type="image/png">
+    <link rel="shortcut icon" href="assets/messenger-favicon_1.png" type="image/png">
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="css/main.min.css">
@@ -242,14 +242,13 @@
     </template>
 
 	<template id="contact_template">
-		<div class="contact" tabindex="0">
+		<div class="contact interact" tabindex="0">
 			<div class="initial flex align-center"></div>
 			<h4 class="name"></h4>
             <h5 class="last-message"></h5>
             <h5 class="time"></h5>
             <!--<sm-menu align-options="right">
                 <sm-menu-option class="send-mail-option">Send mail</sm-menu-option>
-                <sm-menu-option onclick="copyToClipboard('.copy', 'FLO ID copied', this.closest('.contact'))">Copy FLO ID</sm-menu-option>
             </sm-menu>-->
 		</div>
 	</template>
@@ -300,7 +299,7 @@
 			<div id="contacts" class="grid">
 				<header class="grid">
                     <div class="grid align-center">
-                        <h4>Direct Messages</h4>
+                        <h4>Chats</h4>
                         <sm-menu align-options="right">
                             <sm-menu-option onclick="initGroupCreation()">Create a group</sm-menu-option>
                         </sm-menu>
@@ -661,7 +660,7 @@
         })
 
         function setAttributes(el, attrs) {
-            for (var key in attrs) {
+            for (key in attrs) {
                 el.setAttribute(key, attrs[key]);
             }
         }
@@ -752,15 +751,19 @@
         function getFormatedTime(time, relative) {
             try {
                 if (String(time).indexOf('_'))
-                    time = String(time).split('_')[0]
+                time = String(time).split('_')[0]
-                let timeFrag = new Date(parseInt(time)).toString().split(' '),
+                const intTime = parseInt(time)
+                if(String(intTime).length < 13)
+                    time *= 1000
+                let timeFrag = new Date(intTime).toString().split(' '),
                     day = timeFrag[0],
                     month = timeFrag[1],
                     date = timeFrag[2],
                     year = timeFrag[3],
-                    minutes = new Date(parseInt(time)).getMinutes(),
+                    minutes = new Date(intTime).getMinutes(),
-                    hours = new Date(parseInt(time)).getHours(),
+                    hours = new Date(intTime).getHours(),
                     currentTime = new Date().toString().split(' ')
+
                 minutes = minutes < 10 ? `0${minutes}` : minutes
                 let finalHours = ``;
                 if (hours > 12)
@@ -773,12 +776,23 @@
                 finalHours = hours >= 12 ? `${finalHours} PM` : `${finalHours} AM`
                 if (relative) {
                     if (year == currentYear) {
-                        if (currentTime[1] === month && date === currentTime[2])
+                        if (currentTime[1] === month){
-                            return `Today at ${finalHours}`;
+                            const dateDiff = (parseInt(currentTime[2]) - parseInt(date))
+                            if(dateDiff === 0)
+                                return `${finalHours}`;
+                            else if(dateDiff === 1)
+                                return `yesterday`;
+                            else if(dateDiff > 1 && dateDiff < 8)
+                                return currentTime[0];
+                            else
+                                return ` ${date} ${month}`;
+                        }
                         else
                             return ` ${date} ${month}`;
 
                     }
+                    else
+                        return `${month} ${year}`;
                 }
                 else
                     return `${month} ${date} ${year}`;
@@ -1058,18 +1072,9 @@
 		// render elements 
 		const render = {
 			mailCard(floID, ref, subject, timestamp, content, markUnread){
+                console.log(timestamp)
                 let card = getRef('mail_card_template').content.cloneNode(true),
-                    cardContainer = card.querySelector('.mail-card'),
+                    cardContainer = card.firstElementChild
-                    time = new Date(timestamp).toString(),
-                    minutes = String(new Date(timestamp).getMinutes()),
-                    hours = new Date(timestamp).getHours(),
-                    dateTime
-                minutes = minutes.length === 1 ? `0${minutes}` : minutes  
-                let finalHours = hours - 12 > 0 ? `${hours - 12}:${minutes} pm` : `${hours}:${minutes} am`
-                if(new Date().getDate() === new Date(timestamp).getDate())
-                    dateTime = finalHours
-                else
-                    dateTime = time.slice(4, 10)
                 let mailSummery = content.split(' ')
                 mailSummery.splice(16)
                 mailSummery = mailSummery.join(' ')
@@ -1089,26 +1094,16 @@
                     contact = floGlobals.contacts[floID] || floID
                 if(markUnread)
                     cardContainer.classList.add('unread')
-                card.querySelector('.sender').textContent = contact
+                cardContainer.querySelector('.sender').textContent = contact
-                card.querySelector('.subject').textContent = subject
+                cardContainer.querySelector('.subject').textContent = subject
-                card.querySelector('.date').textContent = dateTime
+                cardContainer.querySelector('.date').textContent = getFormatedTime(timestamp, true)
-                card.querySelector('.description').textContent = mailSummery
+                cardContainer.querySelector('.description').textContent = mailSummery
                 return card
             },
             
             mail(from, to, subject, timestamp, content){
                 let card = getRef('mail_template').content.cloneNode(true),
-                    cardContainer = card.querySelector('.mail'),
+                    cardContainer = card.querySelector('.mail')
-                    time = new Date(timestamp).toString(),
-                    minutes = String(new Date(timestamp).getMinutes()),
-                    hours = new Date(timestamp).getHours(),
-                    dateTime
-                minutes = minutes.length === 1 ? `0${minutes}` : minutes  
-                let finalHours = hours - 12 > 0 ? `${hours - 12}:${minutes} pm` : `${hours}:${minutes} am`
-                if(new Date().getDate() === new Date(timestamp).getDate())
-                    dateTime = finalHours
-                else
-                    dateTime = time.slice(4, 10)
                 let senderName, floID
                 if(from === myFloID){
                     let count = 0, list = [];
@@ -1128,7 +1123,7 @@
                 card.querySelector('.sender-name').textContent = senderName
                 card.querySelector('.flo-id').textContent = floID
                 card.querySelector('.mail-subject').textContent = subject
-                card.querySelector('.date').textContent = dateTime;
+                card.querySelector('.date').textContent = getFormatedTime(timestamp);
                 card.querySelector('.mail-content').textContent = content
                 return card
             },
@@ -1137,10 +1132,13 @@
                         cardContainer = card.firstElementChild
                 cardContainer.setAttribute("name", name || 'Unknown')
                 cardContainer.setAttribute("flo-id", floID)
-                card.querySelector('.name').textContent = name || 'Unknown'
+                cardContainer.querySelector('.name').textContent = name || 'Unknown'
-                const lastMessage = Object.values(await messenger.getChat(floID)).pop()
+                messenger.getChat(floID).then(chat => {
-                card.querySelector('.last-message').textContent = lastMessage.message
+                    const lastMessage = Object.values(chat).pop()
-                card.querySelector('.time').textContent = getFormatedTime(lastMessage.time, true)
+                    console.log(chat, lastMessage)
+                    cardContainer.querySelector('.last-message').textContent = lastMessage.message
+                    cardContainer.querySelector('.time').textContent = getFormatedTime(lastMessage.time, true)
+                })
                 let initial = card.querySelector('.initial')
                 initial.textContent = name ? name.charAt(0) : 'U'
                 let color = randomColor()
@@ -1173,8 +1171,13 @@
                     cardContainer.classList.add('unconfirmed')
 
                 cardContainer.classList.add(category)
-                if(isValidUrl(message))
+                if(isValidUrl(message)){
-                    cardContainer.children[0].innerHTML = `<a href="${message}" target="_blank">${message}</a>`
+                    const anchorTag = document.createElement('a')
+                    anchorTag.href = message
+                    anchorTag.target="_blank"
+                    anchorTag.textContent = message
+                    cardContainer.children[0].append(anchorTag)
+                }
                 else{
                     if(message.length === 2 && isEmoji(message))
                         cardContainer.classList.add('big-emoji')
@@ -1292,6 +1295,10 @@
                     else
                         getRef('mail_contact_list').lastElementChild.focus()
                 }
+                if(e.code === 'Enter' || e.code === 'Space'){
+                    getRef('send_mail_to').value = document.activeElement.getAttribute('flo-id')
+                    getRef('mail_contact_list').classList.add('hide-completely')
+                }
             }
         })
 
@@ -1338,14 +1345,10 @@
                 if(target.dataset.target)
                     showPanel(target, target.dataset.target)
             }
-            else if(e.target.closest('.contact')){
+            else if(e.target.closest('.contact') && e.target.closest('#mail_contact_list')){
                 getRef('send_mail_to').value = e.target.closest('.contact').getAttribute('flo-id')
                 getRef('mail_contact_list').classList.add('hide-completely')
             }
-            else if(e.target.closest('.contact') && e.code === 'Enter' || e.code === 'Space'){
-                getRef('send_mail_to').value = document.activeElement.getAttribute('flo-id')
-                getRef('mail_contact_list').classList.add('hide-completely')
-            }
             if(e.target.closest('.navbar-item') && activePage.button !== e.target.closest('.navbar-item')){
                 let targetButton = e.target.closest('.navbar-item'),
                 targetPage = getRef(targetButton.dataset.target)
@@ -1379,26 +1382,6 @@
 				getRef('send_mail_to').value = floID;
 				return false;
 			}
-
-            //detect click on chat cards
-            if (!e.target.closest("sm-menu") && e.target.closest(".contact")){
-                const contact = e.target.closest(".contact")
-                if(activeChat['chatCard'] === contact && window.innerWidth > 640) return
-                getRef('chat_page_button').setAttribute('data-notifications', '0')
-                getRef('chat').classList.remove('hide-completely')
-                contact.classList.remove('unread')
-                viewConversation(contact)
-                if(activeChat['chatCard'])
-                    activeChat['chatCard'].classList.remove('active')
-                contact.classList.add('active')
-                activeChat['chatCard'] = contact
-				if(activeChatPage.id === 'contacts'){
-                    getRef('chat').classList.remove('hide-on-mobile')
-					getRef('contacts').classList.add('hide-on-mobile')
-                    activeChatPage = getRef('chat')
-					getRef('main_navbar').classList.add('hide-on-mobile')
-				}
-            }
             
             //Detect emoji clicks
             if(e.target.closest('.emoji')){
@@ -1407,6 +1390,39 @@
             }
         })
 
+        let clickedContact = {}
+        getRef('contacts').addEventListener('click', e => {
+            //detect click on chat cards
+            if (e.target.closest(".contact")){
+                const contact = e.target.closest(".contact")
+                clickedContact['card'] = contact
+                clickedContact['floID'] = contact.getAttribute("flo-id")
+                if(e.target.closest("sm-menu")){
+                    //show contact detail popup
+                }
+                else if(isCreatingGroup){
+                    // code for adding group members
+                }
+                else{
+                    if(activeChat['chatCard'] === contact && window.innerWidth > 640) return
+                    getRef('chat_page_button').setAttribute('data-notifications', '0')
+                    getRef('chat').classList.remove('hide-completely')
+                    contact.classList.remove('unread')
+                    viewConversation(contact)
+                    if(activeChat['chatCard'])
+                        activeChat['chatCard'].classList.remove('active')
+                    contact.classList.add('active')
+                    activeChat['chatCard'] = contact
+                    if(activeChatPage.id === 'contacts'){
+                        getRef('chat').classList.remove('hide-on-mobile')
+                        getRef('contacts').classList.add('hide-on-mobile')
+                        activeChatPage = getRef('chat')
+                        getRef('main_navbar').classList.add('hide-on-mobile')
+                    }
+                }
+            }
+        })
+
         const emojis = ["😀", "😃", "😄", "😁", "😆", "😅", "😂", "🤣", "😊", "😇", "🙂", "🙃", "😉", "😌", "😍", "🥰", "😘", "😗","😙", "😚", "😋", "😛", "😝", "😜", "🤪", "🤨", "🧐", 
                         "🤓", "😎", "🤩", "🥳", "😏", "😒", "😞", "😔", "😟", "😕", "🙁", "☹️", "😣", "😖", "😫", "😩", "🥺", "😢", "😭", "😤", "😠", "😡", "🤬", "🤯", "😳", "🥵", "🥶", 
                         "😱", "😨", "😰", "😥", "😓", "🤗", "🤔", "🤭", "🤫", "🤥", "😶", "😐", "😑", "😬", "🙄", "😯", "😦", "😧", "😮", "😲", "🥱", "😴", "🤤", "😪", "😵", "🤐", "🥴",
@@ -1447,21 +1463,19 @@
             })
         }
 
-        let isEnterSendToggle = getRef('is_enter_send_toggle'),
+        let isEnterSend = true
-            isEnterSend = true
-
         if(localStorage.getItem('isEnterSend') === null)
             localStorage.setItem('isEnterSend', 'true')
 
         if (localStorage.isEnterSend === 'true') {
             isEnterSend = true
-            isEnterSendToggle.checked = true;
+            getRef('is_enter_send_toggle').checked = true;
         } else {
             isEnterSend = false
-            isEnterSendToggle.checked = false;
+            getRef('is_enter_send_toggle').checked = false;
         }
         
-        isEnterSendToggle.addEventListener('change', function(){
+        getRef('is_enter_send_toggle').addEventListener('change', function(){
             if(this.checked){
                 isEnterSend = true
                 localStorage.setItem("isEnterSend", 'true');
@@ -1711,7 +1725,7 @@
         async function renderChatList() {
             getRef('dm_container').innerHTML = ''
             for (floID of messenger.getChatOrder().direct){
-                await render.contactCard(floID, floGlobals.contacts[floID], 'chat')
+                render.contactCard(floID, floGlobals.contacts[floID], 'chat')
             }
         }
 
@@ -1764,7 +1778,7 @@
         
         async function viewConversation(contact) {
             getRef('chat_container').innerHTML = ''
-            let floID = contact.getAttribute("flo-id"),
+            let floID = clickedContact['floID'],
                 name = contact.getAttribute('name'),
                 textColor = contact.getAttribute('text-color'),
                 backgroundColor = contact.getAttribute('background-color')