add css for online user list

springChatRoom/src/main/resources/static/css/main.css

@@ -295,4 +295,14 @@ button.accent {
     .chat-header h2 {
         font-size: 1.1em;
     }
-}
+}
+
+/* online user */
+.green-light {
+    display: inline-block;
+    width: 10px;  /* Adjust the width as needed */
+    height: 10px; /* Adjust the height as needed */
+    background-color: green;
+    border-radius: 50%;
+    margin-right: 5px; /* Adjust the margin as needed */
+}

springChatRoom/src/main/resources/static/js/main.js

@@ -135,11 +135,33 @@ function updateOnlineUsers(users) {
     const userList = document.getElementById('userList');
     userList.innerHTML = ''; // Clear the list first
 
+//    users.forEach(user => {
+//        const listItem = document.createElement('li');
+//        listItem.textContent = user;
+//        userList.appendChild(listItem);
+//    });
+
     users.forEach(user => {
         const listItem = document.createElement('li');
-        listItem.textContent = user;
+
+        // Create a span for the green light
+        const greenLight = document.createElement('span');
+        greenLight.classList.add('green-light'); // You may need to define a CSS class for styling
+
+        // Append the green light span to the list item
+        listItem.appendChild(greenLight);
+
+        // Create a span for the username
+        const usernameSpan = document.createElement('span');
+        usernameSpan.textContent = user;
+
+        // Append the username span to the list item
+        listItem.appendChild(usernameSpan);
+
+        // Append the list item to the user list
         userList.appendChild(listItem);
     });
+
 }
 
 // Call the fetchUserList function to initially populate the user list