From 3ef278fa5f27b62f06ca15f63ed885309d5ed657 Mon Sep 17 00:00:00 2001
From: He4eT <He4eT@oddsquat.org>
Date: Sat, 27 Jan 2024 03:28:05 +0100
Subject: [PATCH] TextBuffer: add scroll targets

---
 .../OutputBox/TextBuffer/TextBuffer.jsx       | 21 ++++++++++---------
 .../OutputBox/TextMessage/TextMessage.jsx     |  2 ++
 .../TextMessage/TextMessage.module.scss       |  5 ++++-
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/Player/OutputBox/TextBuffer/TextBuffer.jsx b/src/components/Player/OutputBox/TextBuffer/TextBuffer.jsx
index e460376..66acb56 100644
--- a/src/components/Player/OutputBox/TextBuffer/TextBuffer.jsx
+++ b/src/components/Player/OutputBox/TextBuffer/TextBuffer.jsx
@@ -4,6 +4,9 @@ import TextMessage from '../TextMessage/TextMessage'
 
 import * as s from '../../Player.module.scss'
 
+const eol = { style: 'endOfLine' }
+const scrollTarget = { style: 'scrollTarget' }
+
 const isFakeStatus = (w) =>
   w.height < 5
 
@@ -22,15 +25,13 @@ const parseInbox = (inbox, currentWindow) => {
   if (!currentInbox) {
     return {
       clear: false,
-      incoming: [],
+      incoming: [scrollTarget],
     }
   }
 
   const { text: inboxMessagesRaw } =
     currentInbox
 
-  const eol = { style: 'endOfLine' }
-
   const incoming =
     inboxMessagesRaw
       /* Normalize. */
@@ -40,7 +41,7 @@ const parseInbox = (inbox, currentWindow) => {
           : [eol])
       /* Flatten. */
       .reduce((acc, x) =>
-        acc.concat(x), [])
+        acc.concat(x), [scrollTarget])
 
   return {
     incoming,
@@ -63,13 +64,13 @@ export default function TextBuffer ({ inbox, currentWindow }) {
       : messages.concat(incoming))
 
     setTimeout(() => {
-      const inputs =
-        textBufferEl.current.querySelectorAll('.message.input')
-      const lastInput =
-        inputs[inputs.length - 1]
+      const scrollTargets =
+        textBufferEl.current.querySelectorAll(`.${scrollTarget.style}`)
+      const freshScrollTarget =
+        scrollTargets[scrollTargets.length - 1]
 
-      lastInput
-        ? lastInput.scrollIntoView()
+      freshScrollTarget
+        ? freshScrollTarget.scrollIntoView()
         : textBufferEl.current.scrollTo({
           top: textBufferEl.current.scrollHeight,
           behavior: 'smooth',
diff --git a/src/components/Player/OutputBox/TextMessage/TextMessage.jsx b/src/components/Player/OutputBox/TextMessage/TextMessage.jsx
index fea76fe..f0e6a27 100644
--- a/src/components/Player/OutputBox/TextMessage/TextMessage.jsx
+++ b/src/components/Player/OutputBox/TextMessage/TextMessage.jsx
@@ -15,6 +15,8 @@ export default function TextMessage ({ style, text }) {
       (<strong className={[s.message, s.subheader].join(' ')}>{text}</strong>),
     emphasized:
       (<em className={[s.message, s.emphasized].join(' ')}>{text}</em>),
+    scrollTarget:
+      (<div className={[s.scrollTarget, style].join(' ')}></div>),
     endOfLine:
       (<br />),
   })[style] || defaultContent
diff --git a/src/components/Player/OutputBox/TextMessage/TextMessage.module.scss b/src/components/Player/OutputBox/TextMessage/TextMessage.module.scss
index b0b2ed0..9bf4bba 100644
--- a/src/components/Player/OutputBox/TextMessage/TextMessage.module.scss
+++ b/src/components/Player/OutputBox/TextMessage/TextMessage.module.scss
@@ -1,6 +1,5 @@
 .message {
   &.input {
-    scroll-margin-top: var(--inner-padding);
     color: var(--input-color);
   }
 
@@ -9,3 +8,7 @@
     color: var(--accent-color);
   }
 }
+
+.scrollTarget {
+  scroll-margin-block-start: var(--inner-padding);
+}