web/roomview: scroll timeline to bottom on resize

web/src/ui/roomview/RoomView.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 { JSX, useRef } from "react"
+import { JSX, useEffect, useState } from "react"
 import { RoomStateStore } from "@/api/statestore"
 import MessageComposer from "../composer/MessageComposer.tsx"
 import TypingNotifications from "../composer/TypingNotifications.tsx"
@@ -30,11 +30,18 @@ interface RoomViewProps {
 }
 
 const RoomView = ({ room, rightPanelResizeHandle, rightPanel }: RoomViewProps) => {
-	const roomContextDataRef = useRef<RoomContextData | undefined>(undefined)
+	const [roomContextData] = useState(() => new RoomContextData(room))
-	if (roomContextDataRef.current === undefined) {
+	useEffect(() => {
-		roomContextDataRef.current = new RoomContextData(room)
+		window.activeRoomContext = roomContextData
+		window.addEventListener("resize", roomContextData.scrollToBottom)
+		return () => {
+			window.removeEventListener("resize", roomContextData.scrollToBottom)
+			if (window.activeRoomContext === roomContextData) {
+				window.activeRoomContext = undefined
 			}
-	return <RoomContext value={roomContextDataRef.current}>
+		}
+	}, [roomContextData])
+	return <RoomContext value={roomContextData}>
 		<div className="room-view">
 			<RoomViewHeader room={room}/>
 			<TimelineView/>

web/src/ui/roomview/roomcontext.ts

@@ -34,7 +34,7 @@ export class RoomContextData {
 
 	constructor(public store: RoomStateStore) {}
 
-	scrollToBottom() {
+	scrollToBottom = () => {
 		if (this.scrolledToBottom) {
 			this.timelineBottomRef.current?.scrollIntoView()
 		}

web/src/vite-env.d.ts

@@ -4,11 +4,13 @@
 import type Client from "@/api/client.ts"
 import type { GCSettings, RoomStateStore } from "@/api/statestore"
 import type { MainScreenContextFields } from "@/ui/MainScreenContext.ts"
+import type { RoomContextData } from "@/ui/roomview/roomcontext.ts"
 
 declare global {
 	interface Window {
 		client: Client
 		activeRoom?: RoomStateStore | null
+		activeRoomContext?: RoomContextData
 		mainScreenContext: MainScreenContextFields
 		openLightbox: (params: { src: string, alt: string }) => void
 		gcSettings: GCSettings