Add room names to room view header, add a copy topic button and remove the display of the topics

app.js

@@ -313,6 +313,15 @@ function exitEditMode(roomItem, input, topic) {
       roomConfig.alias = newAlias;
       writeConfigToFile("./config.json");
     }
+
+    // Check if the edited room is the current room in view
+    const currentTopic = document.querySelector('#chat-room-topic').innerText;
+    if (currentTopic === topic) {
+      const chatRoomName = document.querySelector('#chat-room-name');
+      if (chatRoomName) {
+        chatRoomName.innerText = newAlias;
+      }
+    }
   } else {
     roomItem.textContent = truncateHash(topic);
   }
@@ -320,7 +329,24 @@ function exitEditMode(roomItem, input, topic) {
 
 function switchRoom(topic) {
   console.log('Switching to room:', topic); // Debugging log
-  document.querySelector('#chat-room-topic').innerText = topic; // Set full topic here
+  const chatRoomTopic = document.querySelector('#chat-room-topic');
+  const chatRoomName = document.querySelector('#chat-room-name');
+
+  if (chatRoomTopic) {
+    chatRoomTopic.innerText = topic; // Set full topic here
+  } else {
+    console.error('Element #chat-room-topic not found');
+  }
+
+  if (chatRoomName) {
+    // Update the room name in the header
+    const room = config.rooms.find(r => r.topic === topic);
+    const roomName = room ? room.alias : truncateHash(topic);
+    chatRoomName.innerText = roomName;
+  } else {
+    console.error('Element #chat-room-name not found');
+  }
+
   clearMessages();
   renderMessagesForRoom(topic);
 

index.html

@@ -46,10 +46,9 @@
       <div id="chat" class="hidden">
         <div id="header">
           <div id="details">
-            <div>
+            <div style="display: inline;">
-              Topic: <span id="chat-room-topic"></span>
+              <strong><span id="chat-room-name"></span></strong> | <a href="#" id="copy-topic-link" class="mini-button">Copy Topic</a>
-            </div>
+              <span id="chat-room-topic" style="display: none;"></span>
-            <div>
             </div>
           </div>
           <div id="user-list">
@@ -73,12 +72,71 @@
   <script>
     document.addEventListener('DOMContentLoaded', function() {
       const messageInput = document.getElementById('message');
+      const copyTopicLink = document.getElementById('copy-topic-link');
+      const chatRoomTopic = document.getElementById('chat-room-topic');
+
+      if (messageInput) {
         messageInput.addEventListener('keydown', function(event) {
           if (event.key === 'Enter' && !event.shiftKey) {
             event.preventDefault();
             document.getElementById('message-form').dispatchEvent(new Event('submit'));
           }
         });
+      }
+
+      if (copyTopicLink) {
+        copyTopicLink.addEventListener('click', function(event) {
+          event.preventDefault();
+          if (chatRoomTopic) {
+            const topic = chatRoomTopic.innerText;
+            navigator.clipboard.writeText(topic).then(() => {
+              alert('Topic copied to clipboard!');
+            }).catch(err => {
+              console.error('Failed to copy topic:', err);
+            });
+          } else {
+            console.error('Element #chat-room-topic not found');
+          }
+        });
+      }
+
+      const switchRoom = (topic) => {
+        console.log('Switching to room:', topic); // Debugging log
+        const chatRoomTopic = document.querySelector('#chat-room-topic');
+        const chatRoomName = document.querySelector('#chat-room-name');
+
+        if (chatRoomTopic) {
+          chatRoomTopic.innerText = topic; // Set full topic here
+        } else {
+          console.error('Element #chat-room-topic not found');
+        }
+
+        if (chatRoomName) {
+          // Update the room name in the header
+          const room = config.rooms.find(r => r.topic === topic);
+          const roomName = room ? room.alias : truncateHash(topic);
+          chatRoomName.innerText = roomName;
+        } else {
+          console.error('Element #chat-room-name not found');
+        }
+
+        clearMessages();
+        renderMessagesForRoom(topic);
+
+        // Show chat UI elements
+        document.querySelector('#chat').classList.remove('hidden');
+        document.querySelector('#setup').classList.add('hidden');
+      };
+
+      const roomList = document.querySelector('#room-list');
+      if (roomList) {
+        roomList.addEventListener('click', function(event) {
+          const roomItem = event.target.closest('li');
+          if (roomItem) {
+            switchRoom(roomItem.dataset.topic);
+          }
+        });
+      }
     });
   </script>
 </body>

style.css

@@ -12,6 +12,27 @@ body {
     transition: background-color 0.3s ease, color 0.3s ease;
 }
 
+.mini-button {
+    display: inline-block;
+    padding: 3px 7px;
+    font-size: 14px;
+    font-weight: bold;
+    color: #fff;
+    background-color: #7289da;
+    border: none;
+    border-radius: 3px;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  .mini-button:hover {
+    background-color: #0056b3;
+  }
+
+.bold {
+    font-weight: bold;
+  }
+
 pear-ctrl[data-platform="darwin"] { float: right; margin-top: 4px; }
 
 pear-ctrl {