Adding in Room Aliases

app.js

@@ -89,11 +89,13 @@ async function initialize() {
     // Update port in URLs
     config.userAvatar = updatePortInUrl(config.userAvatar);
     config.rooms.forEach(room => {
-      addRoomToListWithoutWritingToConfig(room);
+      room.alias = room.alias || truncateHash(room.topic);
     });
     for (let user in registeredUsers) {
       registeredUsers[user] = updatePortInUrl(registeredUsers[user]);
     }
+
+    renderRoomList(); // Render the room list with aliases
   }
 
   const registerDiv = document.querySelector('#register');
@@ -257,10 +259,14 @@ function addRoomToList(topic) {
   const roomItem = document.createElement('li');
   roomItem.textContent = truncateHash(topic);
   roomItem.dataset.topic = topic;
+
+  // Add double-click event listener for editing room name
+  roomItem.addEventListener('dblclick', () => enterEditMode(roomItem));
+
   roomItem.addEventListener('click', () => switchRoom(topic));
   roomList.appendChild(roomItem);
 
-  config.rooms.push(topic);
+  config.rooms.push({ topic, alias: truncateHash(topic) });
   writeConfigToFile("./config.json");
 }
 
@@ -269,10 +275,55 @@ function addRoomToListWithoutWritingToConfig(topic) {
   const roomItem = document.createElement('li');
   roomItem.textContent = truncateHash(topic);
   roomItem.dataset.topic = topic;
+
+  // Add double-click event listener for editing room name
+  roomItem.addEventListener('dblclick', () => enterEditMode(roomItem));
+
   roomItem.addEventListener('click', () => switchRoom(topic));
   roomList.appendChild(roomItem);
 }
 
+function enterEditMode(roomItem) {
+  const originalText = roomItem.textContent;
+  const topic = roomItem.dataset.topic;
+  roomItem.innerHTML = '';
+
+  const input = document.createElement('input');
+  input.type = 'text';
+  input.value = originalText;
+  roomItem.appendChild(input);
+
+  input.focus();
+
+  input.addEventListener('blur', () => {
+    exitEditMode(roomItem, input, topic);
+  });
+
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') {
+      exitEditMode(roomItem, input, topic);
+    } else if (e.key === 'Escape') {
+      roomItem.textContent = originalText;
+    }
+  });
+}
+
+function exitEditMode(roomItem, input, topic) {
+  const newAlias = input.value.trim();
+  if (newAlias) {
+    roomItem.textContent = newAlias;
+
+    // Update the config with the new alias
+    const roomConfig = config.rooms.find(room => room.topic === topic);
+    if (roomConfig) {
+      roomConfig.alias = newAlias;
+      writeConfigToFile("./config.json");
+    }
+  } else {
+    roomItem.textContent = truncateHash(topic);
+  }
+}
+
 function switchRoom(topic) {
   const topicBuffer = b4a.from(topic, 'hex');
   joinSwarm(topicBuffer);
@@ -286,7 +337,7 @@ function leaveRoom() {
       roomItem.remove();
     }
 
-    config.rooms = config.rooms.filter(e => e !== topic);
+    config.rooms = config.rooms.filter(e => e.topic !== topic);
     writeConfigToFile("./config.json");
 
     currentRoom.destroy();
@@ -510,4 +561,22 @@ function updatePortInUrl(url) {
   return urlObject.toString();
 }
 
+function renderRoomList() {
+  const roomList = document.querySelector('#room-list');
+  roomList.innerHTML = '';
+
+  config.rooms.forEach(room => {
+    const roomItem = document.createElement('li');
+    roomItem.textContent = room.alias || truncateHash(room.topic);
+    roomItem.dataset.topic = room.topic;
+
+    roomItem.addEventListener('dblclick', () => enterEditMode(roomItem));
+    roomItem.addEventListener('click', () => switchRoom(room.topic));
+    roomList.appendChild(roomItem);
+  });
+}
+
+// Call this function when loading the rooms initially
+renderRoomList();
+
 initialize();