tabbed navigation + db request fix

src/public/rooms.js

@@ -10,37 +10,92 @@ async function render_rooms_wrapper() {
 
 function render_rooms(room_info) {
     const roomsContainer = document.getElementById('rooms');
-    roomsContainer.innerHTML= '';
+    roomsContainer.innerHTML = '';
 
-    room_info.forEach(([roomId, pubkey]) => {
+    const tabBar = document.createElement('div');
+    tabBar.className = 'tab-bar';
+    roomsContainer.appendChild(tabBar);
+
+    const contentContainer = document.createElement('div');
+    contentContainer.className = 'room-content-container';
+    roomsContainer.appendChild(contentContainer);
+
+    room_info.forEach(([roomId, pubkey], index) => {
+        // tab button
+        const tabButton = document.createElement('button');
+        tabButton.className = 'tab-button';
+        tabButton.textContent = roomId;
+        tabButton.dataset.roomId = roomId;
+        tabButton.addEventListener('click', () => openRoom(roomId));
+        tabBar.appendChild(tabButton);
+
+        // room content
         const roomDiv = document.createElement('div');
         roomDiv.id = `room-${roomId}`;
-        roomDiv.classList.add(`key-${pubkey}`);
+        roomDiv.className = 'room-content';
+
+        // public key textarea
+        const pubKeyText = document.createElement('textarea');
+        pubKeyText.value = pubkey;
+        pubKeyText.readOnly = true;
+        roomDiv.appendChild(pubKeyText);
+
+        // messages list
         const messagesUl = document.createElement('ul');
         messagesUl.id = `messages-${roomId}`;
-        messagesUl.classList.add(`key-${pubkey}`);
+        messagesUl.className = `key-${pubkey}`;
+        roomDiv.appendChild(messagesUl);
+
+        // message form
         const form = document.createElement('form');
         form.id = `form-${roomId}`;
-        form.classList.add(`key-${pubkey}`);
-        form.action = '';
+        form.className = `key-${pubkey}`;
+
         const input = document.createElement('input');
         input.id = `input-${roomId}`;
-        input.classList.add(`key-${pubkey}`);
+        input.className = `key-${pubkey}`;
         input.autocomplete = 'off';
+
         const button = document.createElement('button');
         button.textContent = 'Send';
 
         form.appendChild(input);
         form.appendChild(button);
-        roomDiv.appendChild(messagesUl);
         roomDiv.appendChild(form);
+        contentContainer.appendChild(roomDiv);
 
-        roomsContainer.appendChild(roomDiv);
+        // show first room by default
+        if (index === 0) {
+            roomDiv.style.display = 'block';
+            tabButton.classList.add('active');
+        } else {
+            roomDiv.style.display = 'none';
+        }
 
         create_listener(form, input);
     });
 }
 
+// handle tab switching
+function openRoom(roomId) {
+    const roomIdStr = String(roomId);
+
+    document.querySelectorAll('.room-content').forEach(div => {
+        div.style.display = 'none';
+    });
+    document.querySelectorAll('.tab-button').forEach(button => {
+        button.classList.remove('active');
+    });
+
+    const roomDiv = document.getElementById(`room-${roomIdStr}`);
+    const tabButton = document.querySelector(`.tab-button[data-room-id="${roomIdStr}"]`);
+
+    if (roomDiv && tabButton) {
+        roomDiv.style.display = 'block';
+        tabButton.classList.add('active');
+    }
+}
+
 async function request_rooms() {
     const apiUrl = '/chat/rooms';
     const response = await fetch(apiUrl, { method: 'GET' });