Chat post changes

tgui/packages/common/storage.ts

@@ -164,7 +164,7 @@ class StorageProxy implements StorageBackend {
                   const hub = new HubStorageBackend();
 
                   // Migrate these existing settings from byondstorage to the IFrame
-                  for (const setting of ['panel-settings', 'chat-state', 'chat-messages']) {
+                  for (const setting of ['rogue-panel-settings', 'chat-state', 'chat-messages']) {
                     hub
                       .get(setting)
                       .then((settings) => iframe.set(setting, settings));

tgui/packages/tgui-panel/Panel.tsx

@@ -43,7 +43,6 @@ export function Panel(props) {
               </Stack.Item>
               <Stack.Item>
                 <Button
-                  color="grey"
                   selected={audioVisible}
                   icon="music"
                   tooltip="Music player"

tgui/packages/tgui-panel/chat/ChatPageSettings.tsx

@@ -31,7 +31,7 @@ export function ChatPageSettings(props) {
         {!page.isMain && (
           <Stack.Item>
             <Button
-              color="blue"
+              color="bad"
               icon="angles-left"
               tooltip="Reorder tab to the left"
               onClick={moveChatLeft}
@@ -52,7 +52,7 @@ export function ChatPageSettings(props) {
         {!page.isMain && (
           <Stack.Item ml={0.5}>
             <Button
-              color="blue"
+              color="bad"
               icon="angles-right"
               tooltip="Reorder tab to the right"
               onClick={moveChatRight}
@@ -75,7 +75,7 @@ export function ChatPageSettings(props) {
         </Stack.Item>
         {!page.isMain && (
           <Stack.Item>
-            <Button color="red" icon="times" onClick={removeChatPage}>
+            <Button color="bad" icon="times" onClick={removeChatPage}>
               Remove
             </Button>
           </Stack.Item>

tgui/packages/tgui-panel/chat/renderer.tsx

@@ -53,9 +53,13 @@ function createHighlightNode(text, color) {
   return node;
 }
 
-function createMessageNode() {
+function createMessageNode(messageOdd) {
   const node = document.createElement('div');
-  node.className = 'ChatMessage';
+  let className = 'ChatMessage';
+  if(messageOdd) {
+    className = 'ChatMessage--zebra';
+  }
+  node.className = className;
   return node;
 }
 
@@ -117,6 +121,8 @@ class ChatRenderer {
   scrollTracking: boolean;
   lastScrollHeight: number;
   highlightParsers: Array<any> | null;
+  zebraHighlight: boolean;
+  disableCombine: boolean;
   handleScroll: (type: any) => void;
 
   constructor() {
@@ -132,6 +138,8 @@ class ChatRenderer {
     this.scrollNode = null;
     this.scrollTracking = true;
     this.lastScrollHeight = 0;
+    this.zebraHighlight = false;
+    this.disableCombine = false;
     this.handleScroll = (evt) => {
       const node = this.scrollNode;
       if (!node) {
@@ -363,11 +371,13 @@ class ChatRenderer {
     for (const payload of batch) {
       const message = createMessage(payload);
       // Combine messages
-      const combinable = this.getCombinableMessage(message);
-      if (combinable) {
-        combinable.times = (combinable.times || 1) + 1;
-        updateMessageBadge(combinable);
-        continue;
+      if(!this.disableCombine) {
+        const combinable = this.getCombinableMessage(message);
+        if (combinable) {
+          combinable.times = (combinable.times || 1) + 1;
+          updateMessageBadge(combinable);
+          continue;
+        }
       }
       // Reuse message node
       if (message.node) {
@@ -379,7 +389,11 @@ class ChatRenderer {
       }
       // Create message node
       else {
-        node = createMessageNode();
+        let oddMessage: boolean = false;
+        if(this.zebraHighlight) {
+          oddMessage = (this.visibleMessages.length % 2) === 0;
+        }
+        node = createMessageNode(oddMessage);
         // Payload is plain text
         if (message.text) {
           node.textContent = message.text;