From ca13912b07266651256c8f25df7f2f990709ab09 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Wed, 9 Oct 2024 21:58:14 +0300
Subject: [PATCH] web/roomview: scroll to bottom on new message

---
 web/src/ui/timeline/TimelineView.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/web/src/ui/timeline/TimelineView.tsx b/web/src/ui/timeline/TimelineView.tsx
index f5cbd126..e2c9b12a 100644
--- a/web/src/ui/timeline/TimelineView.tsx
+++ b/web/src/ui/timeline/TimelineView.tsx
@@ -13,7 +13,7 @@
 //
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
-import { use, useMemo } from "react"
+import { use, useEffect, useMemo, useRef } from "react"
 import { RoomStateStore } from "../../api/statestore.ts"
 import { useNonNullEventAsState } from "../../util/eventdispatcher.ts"
 import { ClientContext } from "../ClientContext.ts"
@@ -31,11 +31,26 @@ const TimelineView = ({ room }: TimelineViewProps) => {
 		client.loadMoreHistory(room.roomID)
 			.catch(err => console.error("Failed to load history", err))
 	}, [client, room.roomID])
-	return <div className="timeline-view">
+	const bottomRef = useRef<HTMLDivElement>(null)
+	const isAtBottom = useRef(true)
+	const handleScroll = useMemo(() => () => {
+		if (!bottomRef.current?.parentElement) {
+			return
+		}
+		const timelineView = bottomRef.current.parentElement
+		isAtBottom.current = timelineView.scrollTop + timelineView.clientHeight + 1 >= timelineView.scrollHeight
+	}, [])
+	useEffect(() => {
+		if (bottomRef.current && isAtBottom.current) {
+			bottomRef.current.scrollIntoView()
+		}
+	}, [timeline])
+	return <div className="timeline-view" onScroll={handleScroll}>
 		<button onClick={loadHistory}>Load history</button>
 		{timeline.map(entry => <TimelineEvent
 			key={entry.event_rowid} room={room} eventRowID={entry.event_rowid}
 		/>)}
+		<div ref={bottomRef}/>
 	</div>
 }