/title new for generating new room titles

modified:   app.py
	modified:   templates/chat.html

templates/chat.html

@@ -155,7 +155,7 @@
             <!-- Loop through rooms and create list items for each room -->
             {% for room in rooms %}
             <a href="{{ url_for('chat', room_name=room.name) }}?username={{ username }}">
-            <li>
+            <li data-room-id="{{ room.id }}">
                 <!-- Display the room title if available, otherwise the room name -->
                 <b>{{ room.name }}</b> {% if room.title %}<br />{{ room.title }} {% endif %}
             </li>
@@ -227,6 +227,17 @@ socket.on("update_room_title", (data) => {
     document.title = data.title; // Update the window's title
 });
 
+// Socket event to update the room title in the sidebar.
+socket.on('update_room_list', function(updatedRoom) {
+    // Find the room list item by its data-room-id attribute
+    const roomListItem = document.querySelector(`#rooms-list li[data-room-id="${updatedRoom.id}"]`);
+
+    if (roomListItem) {
+        // Update the room list item's content with the new title
+        roomListItem.innerHTML = `<b>${updatedRoom.name}</b> ${updatedRoom.title ? '<br />' + updatedRoom.title : ''}`;
+    }
+});
+
 // Socket event when the user connects
 socket.on("connect", () => {
     socket.emit("join", {"username": username, "room_name": room_name});