From ff443de2468093c098d0deb29836ec93e150c266 Mon Sep 17 00:00:00 2001
From: mjkatgithub <melchior.kannengiesser@gmx.de>
Date: Sat, 28 Feb 2026 13:51:50 +0100
Subject: [PATCH 1/2] Enhance chat message list with infinite scroll and
 viewport preservation

- Introduce IntersectionObserver to detect scroll events for reaching the top and bottom of the message list.
- Add new props for loading states and viewport management, including `loadingNewer`, `centerOnMessageId`, and `preserveViewportOnPrepend`.
- Implement logic to emit events when the top or bottom of the message list is reached, allowing for dynamic loading of messages.
- Refactor message loading logic to support windowed message display based on read anchors and user interactions.
- Update unit tests to cover new scrolling behavior and viewport preservation features.
---
 app/components/Chat/MessageList.vue           | 207 ++++++++++++++++--
 app/pages/chat.vue                            | 201 +++++++++++++++--
 app/utils/chatTimeline.ts                     |  58 +++++
 tests/integration/utils/chatTimeline.spec.ts  |  18 +-
 .../unit/components/Chat/MessageList.spec.ts  |  86 +++++++-
 tests/unit/utils/chatTimeline.spec.ts         |  36 ++-
 6 files changed, 569 insertions(+), 37 deletions(-)

diff --git a/app/components/Chat/MessageList.vue b/app/components/Chat/MessageList.vue
index f655e29..5cc4d31 100644
--- a/app/components/Chat/MessageList.vue
+++ b/app/components/Chat/MessageList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import ChatMessageItem from "~/components/Chat/MessageItem.vue";
 import { useAppI18n } from "~/composables/useAppI18n";
 
@@ -52,14 +52,20 @@ type MediaResolver = (media: {
 
 const props = defineProps<{
   messages: MessageItem[];
-  canLoadOlder?: boolean;
-  loadingOlder?: boolean;
   resolveMediaBlobUrl?: MediaResolver;
   currentUserId?: string;
+  loadingOlder?: boolean;
+  loadingNewer?: boolean;
+  centerOnMessageId?: string;
+  stickToBottom?: boolean;
+  scrollIntentToken?: number;
+  preserveViewportOnPrepend?: boolean;
+  infiniteScrollOffsetPx?: number;
 }>();
 
 const emit = defineEmits<{
-  loadOlder: [];
+  reachTop: [];
+  reachBottom: [];
   reply: [target: { eventId: string; senderName: string; body: string }];
   toggleReaction: [payload: {
     messageId: string;
@@ -73,6 +79,14 @@ const { translateText } = useAppI18n();
 const resolvedBlobUrls = ref<Record<string, string>>({});
 const loadingMedia = ref<Record<string, boolean>>({});
 const lightboxUrl = ref<string | null>(null);
+const scrollContainer = ref<HTMLElement | null>(null);
+const topSentinel = ref<HTMLElement | null>(null);
+const bottomSentinel = ref<HTMLElement | null>(null);
+const topObserver = ref<IntersectionObserver | null>(null);
+const bottomObserver = ref<IntersectionObserver | null>(null);
+const lastTopEmitAt = ref(0);
+const lastBottomEmitAt = ref(0);
+const observerCooldownMs = 200;
 
 function needsBlobFetch(media: MediaInfo): boolean {
   return (
@@ -130,6 +144,109 @@ function emitReplyTarget(msg: MessageItem) {
   });
 }
 
+function disconnectObservers() {
+  topObserver.value?.disconnect();
+  bottomObserver.value?.disconnect();
+  topObserver.value = null;
+  bottomObserver.value = null;
+}
+
+function maybeEmitReachTop() {
+  if (props.loadingOlder) {
+    return;
+  }
+  const now = Date.now();
+  if (now - lastTopEmitAt.value < observerCooldownMs) {
+    return;
+  }
+  lastTopEmitAt.value = now;
+  emit("reachTop");
+}
+
+function maybeEmitReachBottom() {
+  if (props.loadingNewer) {
+    return;
+  }
+  const now = Date.now();
+  if (now - lastBottomEmitAt.value < observerCooldownMs) {
+    return;
+  }
+  lastBottomEmitAt.value = now;
+  emit("reachBottom");
+}
+
+function setupObservers() {
+  disconnectObservers();
+  if (
+    !scrollContainer.value ||
+    !topSentinel.value ||
+    !bottomSentinel.value ||
+    typeof IntersectionObserver === "undefined"
+  ) {
+    return;
+  }
+
+  const offsetPx = Math.max(0, props.infiniteScrollOffsetPx ?? 180);
+  const margin = `${offsetPx}px 0px ${offsetPx}px 0px`;
+  topObserver.value = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          maybeEmitReachTop();
+        }
+      }
+    },
+    {
+      root: scrollContainer.value,
+      rootMargin: margin,
+      threshold: 0.01,
+    },
+  );
+  bottomObserver.value = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          maybeEmitReachBottom();
+        }
+      }
+    },
+    {
+      root: scrollContainer.value,
+      rootMargin: margin,
+      threshold: 0.01,
+    },
+  );
+  topObserver.value.observe(topSentinel.value);
+  bottomObserver.value.observe(bottomSentinel.value);
+}
+
+function scrollToBottom() {
+  const container = scrollContainer.value;
+  if (!container) {
+    return;
+  }
+  container.scrollTop = container.scrollHeight;
+}
+
+function centerMessage(messageId: string) {
+  const container = scrollContainer.value;
+  if (!container) {
+    return;
+  }
+  const messageElements = Array.from(
+    container.querySelectorAll<HTMLElement>("[data-message-id]"),
+  );
+  const targetElement = messageElements.find((messageElement) => {
+    return messageElement.dataset.messageId === messageId;
+  });
+  if (!targetElement) {
+    return;
+  }
+  const targetCenterY = targetElement.offsetTop + targetElement.offsetHeight / 2;
+  const nextScrollTop = targetCenterY - container.clientHeight / 2;
+  container.scrollTop = Math.max(0, nextScrollTop);
+}
+
 watch(
   () => props.messages,
   (msgs) => {
@@ -141,23 +258,76 @@ watch(
   },
   { immediate: true, deep: false },
 );
+
+watch(
+  () => props.scrollIntentToken,
+  async () => {
+    await nextTick();
+    if (props.centerOnMessageId) {
+      centerMessage(props.centerOnMessageId);
+      return;
+    }
+    if (props.stickToBottom) {
+      scrollToBottom();
+    }
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.messages,
+  async (nextMessages, previousMessages) => {
+    if (!props.preserveViewportOnPrepend) {
+      return;
+    }
+    const container = scrollContainer.value;
+    if (!container) {
+      return;
+    }
+    if (previousMessages.length === 0 || nextMessages.length <= previousMessages.length) {
+      return;
+    }
+    const previousFirstMessage = previousMessages[0];
+    const nextFirstMessage = nextMessages[0];
+    if (!previousFirstMessage || !nextFirstMessage) {
+      return;
+    }
+    if (previousFirstMessage.id === nextFirstMessage.id) {
+      return;
+    }
+    const previousScrollHeight = container.scrollHeight;
+    await nextTick();
+    const scrollHeightDelta = container.scrollHeight - previousScrollHeight;
+    container.scrollTop += scrollHeightDelta;
+  },
+  { deep: false },
+);
+
+onMounted(async () => {
+  await nextTick();
+  setupObservers();
+});
+
+onBeforeUnmount(() => {
+  disconnectObservers();
+});
+
+watch(
+  [topSentinel, bottomSentinel, scrollContainer],
+  async () => {
+    await nextTick();
+    setupObservers();
+  },
+  { deep: false },
+);
 </script>
 
 <template>
-  <div class="flex flex-1 flex-col overflow-y-auto p-4">
-    <div
-      v-if="canLoadOlder && messages.length > 0"
-      class="mb-4 flex justify-center"
-    >
-      <UButton
-        size="sm"
-        variant="outline"
-        :loading="loadingOlder"
-        @click="emit('loadOlder')"
-      >
-        {{ translateText("chat.loadOlder") }}
-      </UButton>
-    </div>
+  <div
+    ref="scrollContainer"
+    class="flex flex-1 flex-col overflow-y-auto p-4"
+  >
+    <div ref="topSentinel" class="h-px w-full" />
     <template v-if="messages.length === 0">
       <p class="py-8 text-center text-gray-500 dark:text-gray-400">
         {{ translateText("chat.noMessages") }}
@@ -176,6 +346,7 @@ watch(
         />
       </div>
     </template>
+    <div ref="bottomSentinel" class="h-px w-full" />
   </div>
 
   <!-- Lightbox overlay -->
diff --git a/app/pages/chat.vue b/app/pages/chat.vue
index 132be0c..3c16d88 100644
--- a/app/pages/chat.vue
+++ b/app/pages/chat.vue
@@ -5,6 +5,7 @@ import { useChatMedia } from "~/composables/useChatMedia";
 import {
   buildReactionSummaryByEventId,
   mapTimelineEventsToMessages,
+  resolveTimelineWindowSelection,
 } from "~/utils/chatTimeline";
 
 type PresenceStatus = "online" | "away" | "busy" | "offline" | "unknown";
@@ -80,6 +81,8 @@ interface MemberItem {
 
 const MOBILE_BREAKPOINT = 1024;
 const HOME_SPACE_ID = "__home__";
+const INITIAL_TIMELINE_WINDOW_SIZE = 80;
+const SCROLL_WINDOW_EXPAND_STEP = 40;
 
 const {
   client,
@@ -99,10 +102,18 @@ const {
 
 const selectedRoomId = ref<string | null>(null);
 const selectedSpaceId = ref<string | null>(null);
+const allMessages = ref<ChatMessage[]>([]);
 const messages = ref<ChatMessage[]>([]);
 const matrixRooms = ref<Array<Record<string, any>>>([]);
 const loadingOlder = ref(false);
-const canLoadOlder = ref(true);
+const loadingNewer = ref(false);
+const hasMoreOlderMessages = ref(true);
+const windowStartIndex = ref(0);
+const windowEndIndex = ref(0);
+const centerOnMessageId = ref<string | undefined>(undefined);
+const stickToBottom = ref(false);
+const scrollIntentToken = ref(0);
+const preserveViewportOnPrepend = ref(false);
 const activeReplyTo = ref<ChatMessage["replyTo"] | null>(null);
 const loadMessagesTimerId = ref<number | null>(null);
 const leftSidebarOpen = ref(true);
@@ -311,6 +322,7 @@ watch(
   (rooms) => {
     if (rooms.length === 0) {
       selectedRoomId.value = null;
+      allMessages.value = [];
       messages.value = [];
       return;
     }
@@ -328,11 +340,14 @@ watch(
 );
 
 watch(selectedRoomId, (roomId) => {
-  canLoadOlder.value = true;
+  hasMoreOlderMessages.value = true;
   activeReplyTo.value = null;
-  if (roomId) {
-    loadMessages(roomId);
+  if (!roomId) {
+    allMessages.value = [];
+    messages.value = [];
+    return;
   }
+  loadMessages(roomId, { resetWindow: true });
 });
 
 function setReplyTarget(replyTarget: {
@@ -388,13 +403,63 @@ function isDirectRoom(room: RoomItem): boolean {
   return room.parentSpaceIds.length === 0 && joinedMemberCount === 2;
 }
 
-function loadMessages(roomId: string) {
+function getOwnReadAnchorEventId(room: Record<string, any>): string | undefined {
+  const ownUserId = client.value?.getUserId();
+  if (!ownUserId) {
+    return undefined;
+  }
+  const liveTimelineEvents = room.getLiveTimeline().getEvents();
+  for (let index = liveTimelineEvents.length - 1; index >= 0; index -= 1) {
+    const timelineEvent = liveTimelineEvents[index];
+    if (!timelineEvent) {
+      continue;
+    }
+    const eventType = timelineEvent.getType?.() ?? "";
+    if (eventType !== "m.room.message") {
+      continue;
+    }
+    const eventId = timelineEvent.getId?.();
+    if (!eventId) {
+      continue;
+    }
+    if (room.hasUserReadEvent(ownUserId, eventId)) {
+      return eventId;
+    }
+  }
+  return undefined;
+}
+
+function clampWindowRange(totalMessages: number) {
+  if (totalMessages <= 0) {
+    windowStartIndex.value = 0;
+    windowEndIndex.value = 0;
+    return;
+  }
+  windowStartIndex.value = Math.max(0, windowStartIndex.value);
+  windowEndIndex.value = Math.max(windowStartIndex.value, windowEndIndex.value);
+  windowEndIndex.value = Math.min(totalMessages, windowEndIndex.value);
+}
+
+function applyWindow() {
+  clampWindowRange(allMessages.value.length);
+  messages.value = allMessages.value.slice(
+    windowStartIndex.value,
+    windowEndIndex.value,
+  );
+}
+
+function loadMessages(
+  roomId: string,
+  options?: { resetWindow?: boolean },
+) {
   const room = client.value?.getRoom(roomId);
   if (!room) {
+    allMessages.value = [];
     messages.value = [];
     return;
   }
-  messages.value = mapTimelineEventsToMessages({
+  const previousVisibleMessages = messages.value;
+  const mappedMessages = mapTimelineEventsToMessages({
     room,
     ownUserId: client.value?.getUserId() ?? undefined,
     getMemberAvatarUrl: (member) => {
@@ -403,6 +468,53 @@ function loadMessages(roomId: string) {
     getMediaUrl,
     buildNoticeText,
   });
+  allMessages.value = mappedMessages;
+
+  const shouldResetWindow = options?.resetWindow ?? false;
+  if (shouldResetWindow) {
+    const allMessageIds = mappedMessages.map((message) => message.id);
+    const ownReadAnchorEventId = getOwnReadAnchorEventId(room);
+    const selection = resolveTimelineWindowSelection(allMessageIds, {
+      windowSize: INITIAL_TIMELINE_WINDOW_SIZE,
+      anchorEventId: ownReadAnchorEventId,
+    });
+    windowStartIndex.value = selection.startIndex;
+    windowEndIndex.value = selection.endIndex;
+    const hasNewerMessagesThanAnchor =
+      selection.anchorFound &&
+      selection.anchorIndex !== null &&
+      selection.anchorIndex < allMessageIds.length - 1;
+    centerOnMessageId.value =
+      hasNewerMessagesThanAnchor && ownReadAnchorEventId
+        ? ownReadAnchorEventId
+        : undefined;
+    stickToBottom.value = !hasNewerMessagesThanAnchor;
+    applyWindow();
+    scrollIntentToken.value += 1;
+    return;
+  }
+
+  const previousFirstMessageId = previousVisibleMessages[0]?.id;
+  const previousLastMessageId =
+    previousVisibleMessages[previousVisibleMessages.length - 1]?.id;
+  const nextStartIndex = previousFirstMessageId
+    ? mappedMessages.findIndex((message) => message.id === previousFirstMessageId)
+    : -1;
+  const nextLastIndex = previousLastMessageId
+    ? mappedMessages.findIndex((message) => message.id === previousLastMessageId)
+    : -1;
+  if (nextStartIndex >= 0 && nextLastIndex >= nextStartIndex) {
+    windowStartIndex.value = nextStartIndex;
+    windowEndIndex.value = nextLastIndex + 1;
+  } else {
+    const fallbackSelection = resolveTimelineWindowSelection(
+      mappedMessages.map((message) => message.id),
+      { windowSize: INITIAL_TIMELINE_WINDOW_SIZE },
+    );
+    windowStartIndex.value = fallbackSelection.startIndex;
+    windowEndIndex.value = fallbackSelection.endIndex;
+  }
+  applyWindow();
 }
 
 function patchMessageReactions(roomId: string) {
@@ -414,7 +526,7 @@ function patchMessageReactions(roomId: string) {
     room.getLiveTimeline().getEvents(),
     client.value?.getUserId() ?? undefined,
   );
-  messages.value = messages.value.map((message) => {
+  allMessages.value = allMessages.value.map((message) => {
     if (message.kind !== "message") {
       return message;
     }
@@ -423,6 +535,7 @@ function patchMessageReactions(roomId: string) {
       reactions: reactionSummaryByEventId.get(message.id) ?? [],
     };
   });
+  applyWindow();
 }
 
 function isReactionRelatedEvent(eventType: string): boolean {
@@ -448,7 +561,7 @@ async function onToggleReaction(payload: {
 
 function scheduleLoadMessages(roomId: string) {
   if (!import.meta.client) {
-    loadMessages(roomId);
+    loadMessages(roomId, { resetWindow: false });
     return;
   }
   if (loadMessagesTimerId.value !== null) {
@@ -456,7 +569,7 @@ function scheduleLoadMessages(roomId: string) {
   }
   loadMessagesTimerId.value = window.setTimeout(() => {
     loadMessagesTimerId.value = null;
-    loadMessages(roomId);
+    loadMessages(roomId, { resetWindow: false });
   }, 120);
 }
 
@@ -505,17 +618,68 @@ function buildNoticeText(
   return `${senderName} updated room settings`;
 }
 
-async function onLoadOlder() {
+async function withPrependViewportPreservation(
+  callback: () => Promise<void> | void,
+) {
+  preserveViewportOnPrepend.value = true;
+  try {
+    await callback();
+  } finally {
+    await nextTick();
+    preserveViewportOnPrepend.value = false;
+  }
+}
+
+async function onReachTop() {
   if (!selectedRoomId.value || loadingOlder.value) {
     return;
   }
+  if (windowStartIndex.value > 0) {
+    await withPrependViewportPreservation(() => {
+      windowStartIndex.value = Math.max(
+        0,
+        windowStartIndex.value - SCROLL_WINDOW_EXPAND_STEP,
+      );
+      applyWindow();
+    });
+    return;
+  }
+  if (!hasMoreOlderMessages.value) {
+    return;
+  }
   loadingOlder.value = true;
+  await withPrependViewportPreservation(async () => {
+    try {
+      const hasMoreMessages = await loadOlderMessages(selectedRoomId.value!);
+      hasMoreOlderMessages.value = hasMoreMessages;
+      loadMessages(selectedRoomId.value!, { resetWindow: false });
+      windowStartIndex.value = Math.max(
+        0,
+        windowStartIndex.value - SCROLL_WINDOW_EXPAND_STEP,
+      );
+      applyWindow();
+    } finally {
+      loadingOlder.value = false;
+    }
+  });
+}
+
+async function onReachBottom() {
+  if (loadingNewer.value) {
+    return;
+  }
+  if (windowEndIndex.value >= allMessages.value.length) {
+    return;
+  }
+  loadingNewer.value = true;
   try {
-    const hasMoreMessages = await loadOlderMessages(selectedRoomId.value);
-    canLoadOlder.value = hasMoreMessages;
-    loadMessages(selectedRoomId.value);
+    windowEndIndex.value = Math.min(
+      allMessages.value.length,
+      windowEndIndex.value + SCROLL_WINDOW_EXPAND_STEP,
+    );
+    applyWindow();
   } finally {
-    loadingOlder.value = false;
+    loadingNewer.value = false;
   }
 }
 
@@ -769,10 +933,15 @@ watch(
         <ChatMessageList
           :messages="messages"
           :current-user-id="userId ?? undefined"
-          :can-load-older="canLoadOlder"
           :loading-older="loadingOlder"
+          :loading-newer="loadingNewer"
+          :center-on-message-id="centerOnMessageId"
+          :stick-to-bottom="stickToBottom"
+          :scroll-intent-token="scrollIntentToken"
+          :preserve-viewport-on-prepend="preserveViewportOnPrepend"
           :resolve-media-blob-url="resolveMediaBlobUrl"
-          @load-older="onLoadOlder"
+          @reach-top="onReachTop"
+          @reach-bottom="onReachBottom"
           @reply="setReplyTarget"
           @toggle-reaction="onToggleReaction"
         />
diff --git a/app/utils/chatTimeline.ts b/app/utils/chatTimeline.ts
index c7faacb..cd06649 100644
--- a/app/utils/chatTimeline.ts
+++ b/app/utils/chatTimeline.ts
@@ -42,6 +42,18 @@ export interface ChatTimelineReply {
   body: string
 }
 
+export interface TimelineWindowOptions {
+  windowSize: number
+  anchorEventId?: string
+}
+
+export interface TimelineWindowSelection {
+  startIndex: number
+  endIndex: number
+  anchorIndex: number | null
+  anchorFound: boolean
+}
+
 interface MapTimelineArgs {
   room: Record<string, any>
   ownUserId: string | undefined
@@ -212,6 +224,52 @@ export function mapTimelineEventsToMessages({
   })
 }
 
+export function resolveTimelineWindowSelection(
+  eventIds: string[],
+  options: TimelineWindowOptions
+): TimelineWindowSelection {
+  const totalEvents = eventIds.length
+  if (totalEvents === 0) {
+    return {
+      startIndex: 0,
+      endIndex: 0,
+      anchorIndex: null,
+      anchorFound: false
+    }
+  }
+
+  const normalizedWindowSize = Math.max(1, Math.floor(options.windowSize || 0))
+  const effectiveWindowSize = Math.min(normalizedWindowSize, totalEvents)
+  const anchorEventId = options.anchorEventId
+  const anchorIndex = anchorEventId
+    ? eventIds.findIndex((eventId) => eventId === anchorEventId)
+    : -1
+  const anchorFound = anchorIndex >= 0
+
+  if (!anchorFound) {
+    return {
+      startIndex: totalEvents - effectiveWindowSize,
+      endIndex: totalEvents,
+      anchorIndex: null,
+      anchorFound: false
+    }
+  }
+
+  const halfWindowSize = Math.floor(effectiveWindowSize / 2)
+  let startIndex = anchorIndex - halfWindowSize
+  startIndex = Math.max(0, startIndex)
+  const maxStartIndex = Math.max(0, totalEvents - effectiveWindowSize)
+  startIndex = Math.min(startIndex, maxStartIndex)
+  const endIndex = Math.min(totalEvents, startIndex + effectiveWindowSize)
+
+  return {
+    startIndex,
+    endIndex,
+    anchorIndex,
+    anchorFound: true
+  }
+}
+
 type TimelineEventRecord = Record<string, any>
 
 interface ReactionAggregate {
diff --git a/tests/integration/utils/chatTimeline.spec.ts b/tests/integration/utils/chatTimeline.spec.ts
index b0d844c..9e27693 100644
--- a/tests/integration/utils/chatTimeline.spec.ts
+++ b/tests/integration/utils/chatTimeline.spec.ts
@@ -1,5 +1,8 @@
 import { describe, it } from 'vitest'
-import { mapTimelineEventsToMessages } from '~/utils/chatTimeline'
+import {
+  mapTimelineEventsToMessages,
+  resolveTimelineWindowSelection
+} from '~/utils/chatTimeline'
 
 function createTimelineEvent(
   id: string,
@@ -224,4 +227,17 @@ describe('chatTimeline integration', () => {
     mapped[2]?.replyTo?.eventId.should.equal('evt21')
     mapped[2]?.replyTo?.senderName.should.equal('Bob')
   })
+
+  it('creates a centered initial window around read anchor', () => {
+    const selection = resolveTimelineWindowSelection(
+      ['evt1', 'evt2', 'evt3', 'evt4', 'evt5', 'evt6'],
+      {
+        windowSize: 4,
+        anchorEventId: 'evt4'
+      }
+    )
+    selection.startIndex.should.equal(1)
+    selection.endIndex.should.equal(5)
+    selection.anchorFound.should.equal(true)
+  })
 })
diff --git a/tests/unit/components/Chat/MessageList.spec.ts b/tests/unit/components/Chat/MessageList.spec.ts
index aa337a9..9c3242b 100644
--- a/tests/unit/components/Chat/MessageList.spec.ts
+++ b/tests/unit/components/Chat/MessageList.spec.ts
@@ -1,4 +1,4 @@
-import { describe, it } from 'vitest'
+import { afterEach, beforeEach, describe, it } from 'vitest'
 import { mount } from '@vue/test-utils'
 import ChatMessageList from '~/components/Chat/MessageList.vue'
 
@@ -33,7 +33,40 @@ function mountMessageList(props: Record<string, unknown>) {
   })
 }
 
+interface IntersectionObserverRecord {
+  callback: IntersectionObserverCallback
+}
+
+const intersectionObserverRecords: IntersectionObserverRecord[] = []
+const originalIntersectionObserver = globalThis.IntersectionObserver
+
+class IntersectionObserverMock {
+  callback: IntersectionObserverCallback
+
+  constructor(callback: IntersectionObserverCallback) {
+    this.callback = callback
+    intersectionObserverRecords.push({ callback })
+  }
+
+  observe(): void {}
+  disconnect(): void {}
+  unobserve(): void {}
+  takeRecords(): IntersectionObserverEntry[] {
+    return []
+  }
+}
+
 describe('MessageList', () => {
+  beforeEach(() => {
+    intersectionObserverRecords.length = 0
+    globalThis.IntersectionObserver =
+      IntersectionObserverMock as unknown as typeof IntersectionObserver
+  })
+
+  afterEach(() => {
+    globalThis.IntersectionObserver = originalIntersectionObserver
+  })
+
   it('shows empty state when there are no messages', () => {
     const wrapper = mountMessageList({
       messages: []
@@ -205,4 +238,55 @@ describe('MessageList', () => {
     messageContainer.classes().should.include('group')
     messageContainer.classes().should.include('hover:bg-gray-50')
   })
+
+  it('emits reachTop when top sentinel intersects', async () => {
+    const wrapper = mountMessageList({
+      messages: [
+        {
+          id: 'evt-scroll-top',
+          kind: 'message',
+          senderId: '@alice:example.org',
+          senderName: 'Alice',
+          body: 'Scroll top'
+        }
+      ]
+    })
+    await wrapper.vm.$nextTick()
+
+    const topObserver = intersectionObserverRecords[0]
+    intersectionObserverRecords.length.should.be.greaterThan(0)
+    topObserver?.callback(
+      [{ isIntersecting: true } as IntersectionObserverEntry],
+      {} as IntersectionObserver
+    )
+    await wrapper.vm.$nextTick()
+
+    const events = wrapper.emitted('reachTop') ?? []
+    events.length.should.equal(1)
+  })
+
+  it('does not emit reachTop while older messages load', async () => {
+    const wrapper = mountMessageList({
+      messages: [
+        {
+          id: 'evt-scroll-guard',
+          kind: 'message',
+          senderId: '@alice:example.org',
+          senderName: 'Alice',
+          body: 'Scroll guard'
+        }
+      ],
+      loadingOlder: true
+    })
+
+    const topObserver = intersectionObserverRecords[0]
+    topObserver?.callback(
+      [{ isIntersecting: true } as IntersectionObserverEntry],
+      {} as IntersectionObserver
+    )
+    await wrapper.vm.$nextTick()
+
+    const events = wrapper.emitted('reachTop') ?? []
+    events.length.should.equal(0)
+  })
 })
diff --git a/tests/unit/utils/chatTimeline.spec.ts b/tests/unit/utils/chatTimeline.spec.ts
index 4a451f5..881770a 100644
--- a/tests/unit/utils/chatTimeline.spec.ts
+++ b/tests/unit/utils/chatTimeline.spec.ts
@@ -4,7 +4,8 @@ import {
   buildUndecryptableMessageText,
   getMessageBody,
   isUndecryptableEvent,
-  mapTimelineEventsToMessages
+  mapTimelineEventsToMessages,
+  resolveTimelineWindowSelection
 } from '~/utils/chatTimeline'
 
 describe('chatTimeline helpers', () => {
@@ -386,4 +387,37 @@ describe('chatTimeline helpers', () => {
     messages[0]!.reactions[0]!.emoji.should.equal('🔥')
     messages[0]!.reactions[0]!.hasOwnReaction.should.equal(true)
   })
+
+  it('builds bottom-aligned window without anchor', () => {
+    const selection = resolveTimelineWindowSelection(
+      ['evt1', 'evt2', 'evt3', 'evt4', 'evt5'],
+      { windowSize: 3 }
+    )
+    selection.startIndex.should.equal(2)
+    selection.endIndex.should.equal(5)
+    selection.anchorFound.should.equal(false)
+    ;(selection.anchorIndex === null).should.equal(true)
+  })
+
+  it('centers the window around a known anchor', () => {
+    const selection = resolveTimelineWindowSelection(
+      ['evt1', 'evt2', 'evt3', 'evt4', 'evt5', 'evt6', 'evt7'],
+      { windowSize: 5, anchorEventId: 'evt4' }
+    )
+    selection.startIndex.should.equal(1)
+    selection.endIndex.should.equal(6)
+    selection.anchorFound.should.equal(true)
+    selection.anchorIndex.should.equal(3)
+  })
+
+  it('falls back to bottom when anchor is unknown', () => {
+    const selection = resolveTimelineWindowSelection(
+      ['evt1', 'evt2', 'evt3'],
+      { windowSize: 2, anchorEventId: 'evt-missing' }
+    )
+    selection.startIndex.should.equal(1)
+    selection.endIndex.should.equal(3)
+    selection.anchorFound.should.equal(false)
+    ;(selection.anchorIndex === null).should.equal(true)
+  })
 })

From 039bb41452ebb260928eb333ae199cebc2eaf320 Mon Sep 17 00:00:00 2001
From: mjkatgithub <melchior.kannengiesser@gmx.de>
Date: Sat, 28 Feb 2026 14:06:11 +0100
Subject: [PATCH 2/2] Update CHANGELOG with chat enhancements and infinite
 scroll features

- Document changes to the chat timeline, including a bounded initial message window to improve loading experience.
- Note the transition from button-based pagination to bidirectional infinite scroll for chat history.
- Highlight the new initial message viewport behavior, centering around the user's last-read event when applicable.
---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8cb2ecc..c8254fe 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -58,6 +58,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Chat timeline now opens with a bounded initial message window to reduce
+  startup scroll depth and perceived room-load latency
+- Chat history loading switched from button-based pagination to bidirectional
+  infinite scroll with guarded top/bottom sentinel triggers
+- Initial message viewport now centers around the user's last-read event when
+  newer messages exist, and otherwise starts at the bottom
 - Matrix attachment encryption now uses unpadded base64 for IV and hashes
 - Image sending flow now checks room encryption before creating media events
 - Space navigation now separates icon-button interaction from text-click area