From f6a9dbef413d7dbbcd4255474ab1670cb6dec711 Mon Sep 17 00:00:00 2001
From: defnax <9952056+defnax@users.noreply.github.com>
Date: Mon, 6 Jul 2026 20:50:20 +0200
Subject: [PATCH] removed bubble chat from rooms

---
 webui-src/app/chat/chat.js          | 35 +++++++++++++++++++--
 webui-src/app/scss/pages/_chat.scss | 49 +++++++++++++++++++++++++++++
 2 files changed, 82 insertions(+), 2 deletions(-)

diff --git a/webui-src/app/chat/chat.js b/webui-src/app/chat/chat.js
index 6f6f57a..578fd3c 100644
--- a/webui-src/app/chat/chat.js
+++ b/webui-src/app/chat/chat.js
@@ -56,6 +56,16 @@ function sortLobbies(lobbies) {
   return []; // return empty array instead of undefined
 }
 
+function getNicknameColor(id, name) {
+  const hashString = id && id !== '00000000000000000000000000000000' ? id : (name || '');
+  let hash = 0;
+  for (let i = 0; i < hashString.length; i++) {
+    hash = hashString.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  const hue = Math.abs(hash) % 360;
+  return `hsl(${hue}, 75%, 35%)`;
+}
+
 // ***************************** models ***********************************
 
 const MobileState = {
@@ -191,6 +201,20 @@ const Message = () => {
       const text = (msg.msg || msg.message || '')
         .replaceAll('<br/>', '\n')
         .replace(new RegExp('<style[^<]*</style>|<[^>]*>', 'gm'), '');
+
+      const chatType = ChatLobbyModel.currentLobby && ChatLobbyModel.currentLobby.chatType;
+      const isRoom = chatType === 3;
+
+      if (isRoom) {
+        const nickColor = getNicknameColor(gxsId, username);
+        return m(
+          '.message.compact',
+          m('span.datetime', datetime),
+          m('span.username', { style: { color: nickColor } }, username + ':'),
+          m('span.messagetext', text)
+        );
+      }
+
       return m(
         '.message' + (msg.incoming ? '.incoming' : '.outgoing'),
         m('span.datetime', datetime),
@@ -637,10 +661,12 @@ const ChatConversationView = () => {
       scrollChatToBottom();
     },
     view: () => {
+      const chatType = ChatLobbyModel.currentLobby && ChatLobbyModel.currentLobby.chatType;
+      const isRoom = chatType === 3;
       return m('.chat-hub-conversation-layout', [
         m('.chat-hub-conversation-main', [
           m(
-            '.chat-hub-messages',
+            '.chat-hub-messages' + (isRoom ? '.compact-container' : ''),
             {
               oncreate: () => scrollChatToBottom(),
               onupdate: () => scrollChatToBottom(),
@@ -1036,6 +1062,7 @@ const LayoutSingle = () => {
     view: (vnode) => {
       const chatType = ChatLobbyModel.currentLobby.chatType;
       const isPrivate = chatType === 1 || chatType === 2;
+      const isRoom = chatType === 3;
       return m(
         '.node-panel.chat-panel.chat-room',
         {
@@ -1046,7 +1073,11 @@ const LayoutSingle = () => {
         },
         [
           m('.chat-overlay', { onclick: () => MobileState.closeAll() }),
-          m('.messages', { onclick: () => MobileState.closeAll() }, ChatLobbyModel.messages),
+          m(
+            '.messages' + (isRoom ? '.compact-container' : ''),
+            { onclick: () => MobileState.closeAll() },
+            ChatLobbyModel.messages
+          ),
           m(
             '.chatMessage',
             {},
diff --git a/webui-src/app/scss/pages/_chat.scss b/webui-src/app/scss/pages/_chat.scss
index 9f7958e..f499cd3 100644
--- a/webui-src/app/scss/pages/_chat.scss
+++ b/webui-src/app/scss/pages/_chat.scss
@@ -1064,4 +1064,53 @@ textarea.chatMsg {
   gap: 0.5rem;
   border-radius: 0.375rem;
 }
+
+/* Compact Room Chat Style (No bubbles, unique nickname colors) */
+.chat-hub-messages.compact-container,
+.messages.compact-container {
+  gap: 0.25rem !important;
+  padding: 0.75rem 1rem !important;
+  background-color: #ffffff !important;
+  display: flex !important;
+  flex-direction: column !important;
+
+  .message.compact {
+    display: block !important;
+    max-width: 100% !important;
+    padding: 0.15rem 0 !important;
+    border-radius: 0 !important;
+    background-color: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    align-self: flex-start !important;
+    font-size: 0.9rem !important;
+    line-height: 1.4 !important;
+    margin: 0 !important;
+
+    .datetime {
+      color: #808080 !important;
+      margin-right: 0.5rem !important;
+      font-size: 0.8rem !important;
+      font-family: monospace !important;
+      opacity: 1 !important;
+      display: inline-block !important;
+    }
+
+    .username {
+      font-weight: bold !important;
+      margin-right: 0.35rem !important;
+      font-size: 0.9rem !important;
+      display: inline-block !important;
+    }
+
+    .messagetext {
+      color: #1e293b !important;
+      white-space: pre-wrap !important;
+      word-break: break-word !important;
+      display: inline !important;
+      margin: 0 !important;
+    }
+  }
+}
+
 
\ No newline at end of file