added remove contact button

frontend/js/chat.js

@@ -85,23 +85,45 @@ async function initializeSocket() {
         // Add and display contact/incoming messages
         if (recipient !== currentRecipient && username !== currentUsername) {
             // Check if the contact has already been added
-            const contact = document.createElement('li');
-            contact.textContent = username;
-
-            contact.addEventListener('click', () => {
-                currentRecipient = username;
-                recipientInput.value = username;
-                localStorage.setItem('currentRecipient', currentRecipient);
-                socket.emit('get messages', username);
-            })
-            // If not found contact that is already in set (so should not be displayed) it display it in contact sidebar
             if (!addedContacts.has(username)) {
-                contacts.appendChild(contact);
-                console.log('Created contact:', username);
+                addContact(username, socket);
                 // Add the username to the Set of added contacts
                 addedContacts.add(username);
             }
         }
+
+        function addContact(username, socket) {
+            const contact = document.createElement('li');
+            contact.className = 'contact-item';
+
+            const usernameSpan = document.createElement('span');
+            usernameSpan.textContent = username;
+            usernameSpan.className = 'contact-username';
+
+            const removeButton = document.createElement('button');
+            removeButton.textContent = 'X';
+            removeButton.className = 'remove-contact';
+
+            contact.appendChild(usernameSpan);
+            contact.appendChild(removeButton);
+
+            usernameSpan.addEventListener('click', () => {
+                currentRecipient = username;
+                recipientInput.value = username;
+                localStorage.setItem('currentRecipient', currentRecipient);
+                socket.emit('get messages', username);
+            });
+
+            removeButton.addEventListener('click', (e) => {
+                e.stopPropagation();
+                contacts.removeChild(contact);
+                addedContacts.delete(username);
+            });
+
+            contacts.appendChild(contact);
+            console.log('Created contact:', username);
+        }
+
     });
 
     // If not previous messages found on backend
@@ -155,3 +177,4 @@ async function initializeSocket() {
 }
 
 initializeSocket();
+

frontend/stylesheet/chat.css

@@ -16,7 +16,7 @@ body {
 }
 
 .sidebar {
-    width: 150px;
+    width: 200px;
     background-color: #1e1e1e;
     padding: 1rem;
     overflow-y: auto;
@@ -32,17 +32,33 @@ body {
     padding: 0;
 }
 
-#contacts > li {
+.contact-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     color: white;
     padding: 0.5rem;
     cursor: pointer;
     transition: background-color 0.3s ease;
 }
 
-#contacts > li:hover {
+.contact-item:hover {
     background-color: #2c2c2c;
 }
 
+.remove-contact {
+    background-color: #ff4d4d;
+    color: white;
+    border: none;
+    padding: 2px 5px;
+    border-radius: 3px;
+    cursor: pointer;
+}
+
+.remove-contact:hover {
+    background-color: #ff3333;
+}
+
 .chat-area {
     flex-grow: 1;
     display: flex;