bug fixes

css/main.css

@@ -1013,13 +1013,18 @@ sm-button[variant=primary] {
   font-size: 0.8rem;
 }
 
+.selectable-contact,
+.group-member,
+.blocked-id {
+  gap: 1rem;
+  padding: 0.5rem 0;
+}
+
 .selectable-contact {
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  padding: 0.5rem 0;
-  gap: 1rem;
 }
 .selectable-contact input {
   margin-left: auto;
@@ -1028,10 +1033,6 @@ sm-button[variant=primary] {
 .group-member {
   display: flex;
   align-items: center;
-  padding: 0.5rem 0;
-}
-.group-member .initial {
-  margin-right: 1rem;
 }
 .group-member .admin-tag {
   margin-left: auto;
@@ -1395,8 +1396,6 @@ sm-button[variant=primary] {
 
 #auto_complete_contact {
   position: relative;
-  justify-content: flex-start;
-  padding-bottom: 0;
 }
 
 #mail_contact_list {
@@ -1518,6 +1517,10 @@ sm-button[variant=primary] {
   margin-right: 0.5rem;
 }
 
+#search_chats {
+  --min-height: 3rem;
+}
+
 #chat_page,
 #mail_page,
 #settings {
@@ -1709,7 +1712,7 @@ sm-button[variant=primary] {
   padding: 0.5rem;
   margin-left: -0.5rem;
 }
-#chat_header #chat_details {
+#chat_header #chat_details_button {
   background-color: rgba(var(--text-color), 0.06);
   border-radius: 2rem;
   justify-self: center;
@@ -2115,7 +2118,7 @@ sm-button[variant=primary] {
   #chat_header {
     grid-template-columns: auto minmax(0, 1fr);
   }
-  #chat_header #chat_details {
+  #chat_header #chat_details_button {
     max-width: calc(100% - 2rem);
     margin-left: -1.7rem;
   }

css/main.scss

@@ -904,10 +904,14 @@ sm-button[variant="primary"] {
     font-size: 0.8rem;
   }
 }
+.selectable-contact,
+.group-member,
+.blocked-id {
+  gap: 1rem;
+  padding: 0.5rem 0;
+}
 .selectable-contact {
   user-select: none;
-  padding: 0.5rem 0;
-  gap: 1rem;
   input {
     margin-left: auto;
   }
@@ -915,10 +919,6 @@ sm-button[variant="primary"] {
 .group-member {
   display: flex;
   align-items: center;
-  padding: 0.5rem 0;
-  .initial {
-    margin-right: 1rem;
-  }
   .admin-tag {
     margin-left: auto;
     padding: 0.1rem 0.6rem;
@@ -1250,8 +1250,6 @@ sm-button[variant="primary"] {
 }
 #auto_complete_contact {
   position: relative;
-  justify-content: flex-start;
-  padding-bottom: 0;
 }
 #mail_contact_list {
   max-height: 40vh;
@@ -1357,6 +1355,9 @@ sm-button[variant="primary"] {
     margin-right: 0.5rem;
   }
 }
+#search_chats {
+  --min-height: 3rem;
+}
 #chat_page,
 #mail_page,
 #settings {
@@ -1525,7 +1526,7 @@ sm-button[variant="primary"] {
     padding: 0.5rem;
     margin-left: -0.5rem;
   }
-  #chat_details {
+  #chat_details_button {
     background-color: rgba(var(--text-color), 0.06);
     border-radius: 2rem;
     justify-self: center;
@@ -1909,7 +1910,7 @@ sm-button[variant="primary"] {
   }
   #chat_header {
     grid-template-columns: auto minmax(0, 1fr);
-    #chat_details {
+    #chat_details_button {
       max-width: calc(100% - 2rem);
       margin-left: -1.7rem;
     }

index.html

@@ -273,8 +273,7 @@
                             <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path>
                         </svg>
                     </button>
-                    <button id="chat_details" class="flex align-center interactive"
+                    <button id="chat_details_button" class="flex align-center interactive">
-                        onclick="openPopup('contact_details_popup')">
                         <div id="receiver_initial" class="initial flex align-center margin-right-0-5"></div>
                         <h4 id="receiver_name"></h4>
                         <svg class="icon margin-left-0-5" xmlns="http://www.w3.org/2000/svg" height="24px"
@@ -747,7 +746,7 @@
                 </button>
             </fieldset>
             <div class="grid gap-1">
-                <h5>Saved FLO IDs</h5>
+                <h5>Contacts</h5>
                 <sm-input id="search_contacts" type="search" placeholder="Search name or FLO ID"> </sm-input>
                 <div id="contacts_container" class="observe-empty-state"></div>
                 <div class="empty-state">
@@ -987,19 +986,21 @@
             history.pushState({ type: 'popup' }, null, null)
             switch (e.target.id) {
                 case 'contact_details_popup':
-                    if (clickedContact.isGroup)
+                    const floID = floGlobals.uiState.activeFloID;
-                        isAdmin = messenger.groups[clickedContact.floID].admin === myFloID
+                    const isGroup = messenger.groups.hasOwnProperty(floID);
+                    if (isGroup)
+                        isAdmin = messenger.groups[floID].admin === myFloID
                     if (clickedContact.chatCard.closest('#chats_list')) {
                         let isAdmin = false
                         let addAsContact
-                        if (!floGlobals.contacts.hasOwnProperty(clickedContact.floID) && !clickedContact.isGroup)
+                        if (!floGlobals.contacts.hasOwnProperty(floID) && !isGroup)
                             addAsContact = html`
                                 <button id="add_as_contact_option" class="option" onclick="addAsContact()">
                                     <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <g> <rect fill="none" height="24" width="24" /> </g> <g> <path d="M20,9V6h-2v3h-3v2h3v3h2v-3h3V9H20z M9,12c2.21,0,4-1.79,4-4c0-2.21-1.79-4-4-4S5,5.79,5,8C5,10.21,6.79,12,9,12z M9,6 c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2,2S7,9.1,7,8C7,6.9,7.9,6,9,6z M15.39,14.56C13.71,13.7,11.53,13,9,13c-2.53,0-4.71,0.7-6.39,1.56 C1.61,15.07,1,16.1,1,17.22V20h16v-2.78C17,16.1,16.39,15.07,15.39,14.56z M15,18H3v-0.78c0-0.38,0.2-0.72,0.52-0.88 C4.71,15.73,6.63,15,9,15c2.37,0,4.29,0.73,5.48,1.34C14.8,16.5,15,16.84,15,17.22V18z" /> </g> </svg>
                                     Add as contact
                                 </button>`;
                         let markReadUnread
-                        if (messenger.marked[clickedContact.floID]?.includes('unread')) {
+                        if (messenger.marked[floID]?.includes('unread')) {
                             markReadUnread = html`
                             <button id="mark_read_option" class="option" onclick="markAsRead()">
                                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <g> <rect fill="none" height="24" width="24" /> <path d="M12,18l-6,0l-4,4V4c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v7l-2,0V4H4v12l8,0V18z M23,14.34l-1.41-1.41l-4.24,4.24l-2.12-2.12 l-1.41,1.41L17.34,20L23,14.34z" /> </g> </svg>
@@ -1015,7 +1016,7 @@
                             `;
                         }
                         let blockUnblock
-                        if (messenger.blocked.has(clickedContact.floID)) {
+                        if (messenger.blocked.has(floID)) {
                             blockUnblock = html`
                                 <button class="option" onclick="unblockUser()">
                                     <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
@@ -1032,7 +1033,7 @@
                         }
 
                         let deleteChat
-                        if (!clickedContact.isGroup) {
+                        if (!isGroup) {
                             deleteChat = html`
                             <button id="delete_chat_option" class="option option--danger" onclick="deleteChat()">
                                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0V0z" fill="none" /> <path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z" /> </svg>
@@ -1051,15 +1052,16 @@
                             ${deleteChat}
                         `)
                     }
-                    if (clickedContact.isGroup) {
+                    if (isGroup) {
+                        const { description, created } = messenger.groups[floID]
                         getRef("contact_initial").innerHTML = ` <svg class="icon group-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M13.61,28.09c-1.63,0-4.72-2.35-5.33-3.58a21.65,21.65,0,0,1-1.35-7.32s-.26-6.07,6.68-6.07a6.38,6.38,0,0,1,6.69,6.07A21.65,21.65,0,0,1,19,24.51c-.62,1.23-3.7,3.58-5.34,3.58"/><path d="M50.39,28.09c-1.64,0-4.72-2.35-5.34-3.58a21.9,21.9,0,0,1-1.35-7.32s-.26-6.07,6.69-6.07a6.37,6.37,0,0,1,6.68,6.07,21.65,21.65,0,0,1-1.35,7.32c-.61,1.23-3.7,3.58-5.33,3.58"/><path d="M32,31.74c-2.21,0-6.37-3.17-7.2-4.83A29.3,29.3,0,0,1,23,17s-.35-8.21,9-8.21c8.68,0,9,8.21,9,8.21a29.3,29.3,0,0,1-1.83,9.88c-.82,1.66-5,4.83-7.2,4.83"/><path d="M48.29,38.58c-4.16-1.83-8.57-3.08-10.34-6.4a12,12,0,0,1-6,3.73,12,12,0,0,1-5.95-3.73c-1.77,3.32-6.18,4.57-10.34,6.4-1.7.71-3.11,9.88-1.13,9.88A33.06,33.06,0,0,0,31.23,53h1.54a33.06,33.06,0,0,0,16.65-4.53C51.4,48.46,50,39.29,48.29,38.58Z"/><path d="M14.82,36.57c.76-.33,1.54-.65,2.3-1,2.49-1,4.85-2,6.22-3.44C21.07,31.23,19,30.25,18,28.41a8.83,8.83,0,0,1-4.41,2.76,8.83,8.83,0,0,1-4.4-2.76c-1.31,2.46-4.58,3.38-7.66,4.74-1.26.52-2.3,7.31-.84,7.31a24.55,24.55,0,0,0,10.86,3.31C11.89,40.81,12.86,37.39,14.82,36.57Z"/><path d="M62.45,33.15c-3.08-1.36-6.35-2.28-7.66-4.74a8.83,8.83,0,0,1-4.4,2.76A8.83,8.83,0,0,1,46,28.41c-1,1.84-3,2.82-5.32,3.76,1.37,1.43,3.73,2.41,6.22,3.44.76.31,1.54.63,2.26,1,2,.83,3,4.25,3.29,7.21a24.55,24.55,0,0,0,10.86-3.31C64.75,40.46,63.71,33.67,62.45,33.15Z"/></svg> `
-                        getRef("last_interaction_time").textContent = `Created ${getFormattedTime(messenger.groups[clickedContact.floID].created)}`;
+                        getRef("last_interaction_time").textContent = `Created ${getFormattedTime(created)}`;
-                        getRef("group_description").value = messenger.groups[clickedContact.floID].description === '' ? 'Add group description' : messenger.groups[clickedContact.floID].description;
+                        getRef("group_description").value = description === '' ? 'Add group description' : description;
-                        render.groupMembers(clickedContact.floID)
+                        render.groupMembers(floID)
                         getRef('contact_details_popup').classList.add('is-group');
                         getRef('group_members_card').classList.remove('hide')
                         getRef('group_description_card').classList.remove('hide')
-                        getRef('edit_group_button').dataset.groupId = clickedContact.floID;
+                        getRef('edit_group_button').dataset.groupId = floID;
                         if (isAdmin) {
                             getRef('contact_name').disabled = false
                             getRef('group_description').disabled = false
@@ -1071,15 +1073,15 @@
                         }
                     } else {
                         getRef('contact_name').disabled = false
-                        getRef('contact_initial').textContent = getContactName(clickedContact['floID']).charAt(0)
+                        getRef('contact_initial').textContent = getContactName(floID).charAt(0)
                         getRef("last_interaction_time").textContent = ``;
                         getRef('contact_details_popup').classList.remove('is-group');
                         getRef('group_members_card').classList.add('hide')
                         getRef('group_description_card').classList.add('hide')
                     }
-                    getRef('contact_initial').setAttribute('style', `--contact-color: var(${contactColor(clickedContact['floID'])})`)
+                    getRef('contact_initial').setAttribute('style', `--contact-color: var(${contactColor(floID)})`)
-                    getRef('contact_name').value = getContactName(clickedContact['floID'])
+                    getRef('contact_name').value = getContactName(floID)
-                    getRef('contact_flo_id').value = clickedContact['floID']
+                    getRef('contact_flo_id').value = floID
                     break;
                 case 'contacts_popup':
                     const contacts = []
@@ -1111,9 +1113,11 @@
         document.addEventListener('popupclosed', e => {
             switch (e.target.id) {
                 case 'contact_details_popup':
-                    clickedContact['name'] = getRef('contact_name').value.trim()
                     getRef('contact_name').revert()
-                    editGroupMembers()
+                    if (messenger.groups.hasOwnProperty(floGlobals.uiState.activeFloID)) {
+                        isGroupEditable = true
+                        editGroupMembers()
+                    }
                     break;
                 case 'contacts_popup':
                     renderElem(getRef('popup_contacts_container'), html``)
@@ -2412,8 +2416,8 @@
                     let contact = e.target.closest(".contact")
                     clickedContact['chatCard'] = contact
                     clickedContact['floID'] = contact.dataset.floId
-                    clickedContact['name'] = contact.dataset.name
                     clickedContact['isGroup'] = messenger.groups.hasOwnProperty(clickedContact['floID'])
+                    floGlobals.uiState.activeFloID = clickedContact.floID
                     openPopup('contact_details_popup')
                 }, 500)
                 getRef('chats_list').addEventListener('touchmove', handleTouchMove)
@@ -2432,6 +2436,11 @@
                 getRef('chats_list').removeEventListener('touchmove', handleTouchMove)
             }
         })
+        floGlobals.uiState = {}
+        getRef('chat_details_button').addEventListener('click', e => {
+            floGlobals.uiState.activeFloID = activeChat.floID
+            openPopup('contact_details_popup')
+        })
 
         getRef('mail_contact_list').addEventListener('click', e => {
             if (e.target.closest('.contact')) {
@@ -2442,36 +2451,32 @@
 
 
         let clickedContact = {}
-
+        // process click on chat card 
-        getRef('chats_list').addEventListener('click', e => {
+        delegate(getRef('chats_list'), 'click', '.contact', e => {
-            //detect click on chat cards
+            clickedContact = {
-            if (e.target.closest(".contact")) {
+                chatCard: e.delegateTarget,
-                let contact = e.target.closest(".contact")
+                floID: e.delegateTarget.dataset.floId,
-                clickedContact = {
+                isGroup: messenger.groups.hasOwnProperty(e.delegateTarget.dataset.floId)
-                    chatCard: contact,
+            }
-                    floID: contact.dataset.floId,
+            if (clickedContact['floID'] === myFloID) return
-                    name: contact.dataset.name,
+            if (e.target.closest(".initial") || e.target.closest(".menu")) {
-                    isGroup: messenger.groups.hasOwnProperty(contact.dataset.floId)
+                floGlobals.uiState.activeFloID = clickedContact.floID
-                }
+                openPopup('contact_details_popup')
-                if (clickedContact['floID'] === myFloID) return
+            } else {
-                if (e.target.closest(".initial") || e.target.closest(".menu")) {
+                e.delegateTarget.classList.remove('unread')
-                    openPopup('contact_details_popup')
+                if (activeChat['chatCard'] === e.delegateTarget && !isMobileView) return
-                } else {
+                document.title = `FLO Messenger`
-                    contact.classList.remove('unread')
+                getRef('chat_view').classList.remove('hide')
-                    if (activeChat['chatCard'] === contact && !isMobileView) return
+                viewConversation(e.delegateTarget)
-                    document.title = `FLO Messenger`
+                if (activeChat['chatCard'])
-                    getRef('chat_view').classList.remove('hide')
+                    activeChat['chatCard'].classList.remove('active')
-                    viewConversation(contact)
+                e.delegateTarget.classList.add('active')
-                    if (activeChat['chatCard'])
+                activeChat['chatCard'] = e.delegateTarget
-                        activeChat['chatCard'].classList.remove('active')
+                if (activeChatPage.id === 'contacts') {
-                    contact.classList.add('active')
+                    getRef('chat_view').classList.remove('hide-on-mobile')
-                    activeChat['chatCard'] = contact
+                    getRef('contacts').classList.add('hide-on-mobile')
-                    if (activeChatPage.id === 'contacts') {
+                    activeChatPage = getRef('chat_view')
-                        getRef('chat_view').classList.remove('hide-on-mobile')
+                    getRef('main_navbar').classList.add('hide-on-mobile')
-                        getRef('contacts').classList.add('hide-on-mobile')
-                        activeChatPage = getRef('chat_view')
-                        getRef('main_navbar').classList.add('hide-on-mobile')
-                    }
                 }
             }
         })
@@ -2911,11 +2916,10 @@
         async function viewConversation(contact) {
             // clear rendered date cards if any 
             renderedDates = {}
-            let floID = clickedContact['floID'],
+            let floID = clickedContact['floID']
-                name = contact.dataset.name
 
             activeChat['floID'] = floID
-            activeChat['isGroup'] = messenger.groups[floID] ? true : false
+            activeChat['isGroup'] = messenger.groups.hasOwnProperty(floID)
             getRef("receiver_name").textContent = getContactName(floID);
             if (activeChat.isGroup) {
                 getRef("receiver_initial").innerHTML = ` <svg class="icon group-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M13.61,28.09c-1.63,0-4.72-2.35-5.33-3.58a21.65,21.65,0,0,1-1.35-7.32s-.26-6.07,6.68-6.07a6.38,6.38,0,0,1,6.69,6.07A21.65,21.65,0,0,1,19,24.51c-.62,1.23-3.7,3.58-5.34,3.58"/><path d="M50.39,28.09c-1.64,0-4.72-2.35-5.34-3.58a21.9,21.9,0,0,1-1.35-7.32s-.26-6.07,6.69-6.07a6.37,6.37,0,0,1,6.68,6.07,21.65,21.65,0,0,1-1.35,7.32c-.61,1.23-3.7,3.58-5.33,3.58"/><path d="M32,31.74c-2.21,0-6.37-3.17-7.2-4.83A29.3,29.3,0,0,1,23,17s-.35-8.21,9-8.21c8.68,0,9,8.21,9,8.21a29.3,29.3,0,0,1-1.83,9.88c-.82,1.66-5,4.83-7.2,4.83"/><path d="M48.29,38.58c-4.16-1.83-8.57-3.08-10.34-6.4a12,12,0,0,1-6,3.73,12,12,0,0,1-5.95-3.73c-1.77,3.32-6.18,4.57-10.34,6.4-1.7.71-3.11,9.88-1.13,9.88A33.06,33.06,0,0,0,31.23,53h1.54a33.06,33.06,0,0,0,16.65-4.53C51.4,48.46,50,39.29,48.29,38.58Z"/><path d="M14.82,36.57c.76-.33,1.54-.65,2.3-1,2.49-1,4.85-2,6.22-3.44C21.07,31.23,19,30.25,18,28.41a8.83,8.83,0,0,1-4.41,2.76,8.83,8.83,0,0,1-4.4-2.76c-1.31,2.46-4.58,3.38-7.66,4.74-1.26.52-2.3,7.31-.84,7.31a24.55,24.55,0,0,0,10.86,3.31C11.89,40.81,12.86,37.39,14.82,36.57Z"/><path d="M62.45,33.15c-3.08-1.36-6.35-2.28-7.66-4.74a8.83,8.83,0,0,1-4.4,2.76A8.83,8.83,0,0,1,46,28.41c-1,1.84-3,2.82-5.32,3.76,1.37,1.43,3.73,2.41,6.22,3.44.76.31,1.54.63,2.26,1,2,.83,3,4.25,3.29,7.21a24.55,24.55,0,0,0,10.86-3.31C64.75,40.46,63.71,33.67,62.45,33.15Z"/></svg> `
@@ -3119,24 +3123,9 @@
                 .catch(error => notify(error, "error"));
         })
 
-        async function changeContactName(name, isChat = false) {
+        async function changeContactName(name) {
-            let isGroup,
+            const floID = floGlobals.uiState.activeFloID
-                floID
+            const isGroup = messenger.groups.hasOwnProperty(floID)
-            if (isChat) {
-                activeChat['name'] = name
-                if (activeChat['name'] === '')
-                    activeChat['name'] = 'Unknown'
-                isGroup = activeChat.isGroup
-                floID = activeChat.floID
-                name = activeChat['name']
-            } else {
-                clickedContact['name'] = name
-                if (clickedContact['name'] === '')
-                    clickedContact['name'] = 'Unknown'
-                isGroup = clickedContact.isGroup
-                floID = clickedContact.floID
-                name = clickedContact['name']
-            }
             if (isGroup) {
                 messenger.changeGroupName(floID, name).then(res => {
                     updateChatCards({ name, floID, isGroup: true })
@@ -3215,7 +3204,7 @@
                         clickedContact.chatCard = ''
                         closePopup()
                         getRef('chat_view').classList.add('hide')
-                        notify('FLo ID blocked', 'success')
+                        notify('FLO ID blocked', 'success')
                     })
                 }
             })

scripts/components.js

@@ -182,6 +182,7 @@ border: none;
     --danger-color: red;
     --width: 100%;
     --icon-gap: 0.5rem;
+    --min-height: 3.5rem;
     --background: rgba(var(--text-color, (17,17,17)), 0.06);
 }
 .hide{
@@ -200,8 +201,8 @@ button:focus{
     outline: var(--accent-color, teal) solid medium;
 }
 .icon {
-    height: 1.4rem;
+    height: 1.2rem;
-    width: 1.4rem;
+    width: 1.2rem;
     fill: rgba(var(--text-color, (17,17,17)), 0.6);
 }
 
@@ -222,7 +223,7 @@ button:focus{
     background: var(--background);
     width: 100%;
     outline: none;
-    min-height: var(--min-height,3rem);
+    min-height: var(--min-height);
 }
 .input.readonly .clear{
     opacity: 0 !important;