From 009cff1116f099ad192afe6e039dac831fb9111b Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Sat, 4 Apr 2026 00:15:05 +0200
Subject: [PATCH] fix filtering

---
 webapp/components/Chat/Chat.vue | 33 +++++++++++++++++++++++++++------
 1 file changed, 27 insertions(+), 6 deletions(-)

diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue
index dbdb061c0..31c5d6842 100644
--- a/webapp/components/Chat/Chat.vue
+++ b/webapp/components/Chat/Chat.vue
@@ -244,6 +244,7 @@ export default {
   beforeDestroy() {
     this._subscriptions?.forEach((s) => s.unsubscribe())
     if (this._intersectionObserver) this._intersectionObserver.disconnect()
+    if (this._roomLoaderObserver) this._roomLoaderObserver.disconnect()
     if (this._mutationObserver) this._mutationObserver.disconnect()
     if (this._seenFlushTimer) clearTimeout(this._seenFlushTimer)
   },
@@ -593,18 +594,38 @@ export default {
         this.$toast.error(error.message)
       }
       // Re-init IntersectionObserver after it was disabled by roomsLoaded=true.
-      // The library only calls initIntersectionObserver on loadingRooms true→false.
-      // We can only toggle loadingRooms when the search is empty (otherwise the
-      // search input gets destroyed). The dirty flag persists across searches until cleared.
-      if (this.roomObserverDirty && !this.roomsLoaded && !this.roomSearch) {
+      // The library only calls initIntersectionObserver on loadingRooms true→false,
+      // but toggling loadingRooms destroys the search input. Instead, we directly
+      // access the web component's shadow DOM to re-enable the loader and observer.
+      if (this.roomObserverDirty && !this.roomsLoaded) {
         this.roomObserverDirty = false
-        this.loadingRooms = true
         this.$nextTick(() => {
-          this.loadingRooms = false
+          this.reinitRoomLoader()
         })
       }
     },
 
+    reinitRoomLoader() {
+      const shadow = this.$el?.shadowRoot
+      if (!shadow) return
+      const loader = shadow.querySelector('#infinite-loader-rooms')
+      const roomsList = shadow.querySelector('#rooms-list')
+      if (!loader || !roomsList) return
+      // Make loader visible (library hides it via v-show when showLoader=false)
+      loader.style.display = ''
+      // Create a new IntersectionObserver to trigger pagination on scroll
+      if (this._roomLoaderObserver) this._roomLoaderObserver.disconnect()
+      this._roomLoaderObserver = new IntersectionObserver(
+        (entries) => {
+          if (entries[0].isIntersecting && !this.roomsLoaded) {
+            this.fetchMoreRooms()
+          }
+        },
+        { root: roomsList, threshold: 0 },
+      )
+      this._roomLoaderObserver.observe(loader)
+    },
+
     fetchMoreRooms() {
       this.fetchRooms({ search: this.roomSearch || undefined })
     },