GridBuffer: deduplicate empty lines

src/components/Player/GridBuffer.jsx

@@ -44,22 +44,27 @@ export default function GridBuffer ({ inbox, currentWindow }) {
     const rawMessagesContent =
       rawMessages
         .map((x) => x.content)
-        .map(([x]) => x)
+        .flat()
-        .map(({ text }) => text)
+        .map((message) => ({
-        .map((text) => text.trim())
+          ...message,
+          text: message.text.trim(),
+        }))
 
     const isEmpty =
       rawMessagesContent
-        .map((text) => text.length)
+        .map(({text}) => text.length)
         .every((l) => l === 0)
 
+    const getGridStyle = ({style}) => {
+      if (['alert', 'normal'].includes(style)) return 'grid'
+      else return style || 'grid'
+    }
+
     const messages =
       rawMessagesContent
-        .map((text) =>
+        .map((message) => ({
-          text.replace('   ', ' / '))
+          style: getGridStyle(message),
-        .map((text) => ({
+          text: message.text.replace('   ', ' / '),
-          style: 'grid',
-          text,
         }))
 
     setMessages(isEmpty ? [] : messages)

src/components/Player/TextMessage.jsx

@@ -7,7 +7,7 @@ export default function TextMessage ({ style, text }) {
     </span>)
 
   return ({
-    grid: (<div>{text}&nbsp;</div>),
+    grid: (text?.length > 0 ? <div>{text}</div> : <br />),
     input: (<span className='message input'>&gt; {text}</span>),
     subheader: (<strong className='message subheader'>{text}</strong>),
     emphasized: (<em className='message emphasized'>{text}</em>),

src/components/Player/player.css

@@ -84,8 +84,11 @@
 }
 
 .ifplayer .output .textBuffer > br:first-child,
+.ifplayer .output .gridBuffer > br:first-child,
 .ifplayer .output .textBuffer > br:last-child,
-.ifplayer .output .textBuffer > br + br + br {
+.ifplayer .output .gridBuffer > br:last-child,
+.ifplayer .output .textBuffer > br + br + br,
+.ifplayer .output .gridBuffer > br + br + br {
   display: none;
 }