fixed unread dot in wrong place

frontend/js/chat.js

@@ -104,7 +104,6 @@ async function initializeSocket() {
             if (contactItem) {
                 const unreadIndicator = contactItem.querySelector('.unread-indicator');
                 unreadIndicator.style.display = 'inline';
-                unreadIndicator.textContent = '•'; // or any other indicator you prefer
             }
             if (!addedContacts.has(username)) {
                 socket.emit('contacts', username);
@@ -180,6 +179,13 @@ async function initializeSocket() {
         const contact = document.createElement('li');
         contact.className = 'contact-item';
 
+        const leftWrapper = document.createElement('div');
+        leftWrapper.className = 'left-wrapper';
+
+        const unreadIndicator = document.createElement('span');
+        unreadIndicator.className = 'unread-indicator';
+        unreadIndicator.textContent = '•';
+
         const usernameSpan = document.createElement('span');
         usernameSpan.textContent = contactUsername;
         usernameSpan.className = 'contact-username';
@@ -188,15 +194,11 @@ async function initializeSocket() {
         removeButton.textContent = 'X';
         removeButton.className = 'remove-contact';
 
-        const unreadIndicator = document.createElement('span');
-        unreadIndicator.className = 'unread-indicator';
-
         if(status === "unread") {
             unreadIndicator.style.display = 'inline';
         } else {
             unreadIndicator.style.display = 'none';
         }
-        unreadIndicator.textContent = '•';
 
         removeButton.addEventListener('click', (e) => {
             e.stopPropagation();
@@ -206,9 +208,10 @@ async function initializeSocket() {
             addedContacts.delete(contactUsername);
         });
 
+        leftWrapper.appendChild(unreadIndicator);
         contact.appendChild(usernameSpan);
+        contact.appendChild(leftWrapper);
         contact.appendChild(removeButton);
-        contact.appendChild(unreadIndicator);
 
         contact.addEventListener('click', () => {
             currentRecipient = contactUsername;

frontend/stylesheet/chat.css

@@ -147,10 +147,32 @@ button:hover {
     color: red;
     margin: 0 10px;
 }
-.unread {
-    height: 5px;
-    width: 5px;
-    background-color: #bbb;
-    border-radius: 50%;
-    display: inline-block;
+
+.contact-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 5px;
+    margin-bottom: 5px;
+}
+
+.contact-username {
+    flex-grow: 1;
+    margin-right: 10px;  /* Increased space between username and remove button */
+}
+
+.remove-contact {
+    margin-right: 5px;  /* Space between remove button and unread indicator */
+}
+
+.unread-indicator {
+    /*font-size: 20px;*/
+    display: flex;
+    align-items: center;  /* Vertical centering */
+    height: 100%;  /* Match height of parent */
+}
+
+.right-wrapper {
+    display: flex;
+    align-items: center;
 }