From 2c62749d9b70bdf8cca4d2a57ea9edac3e200566 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Wed, 17 Dec 2025 12:07:30 -0800
Subject: [PATCH] Attempt to fix new messages button

---
 src/routes/spaces/[relay]/[h]/+page.svelte  | 7 ++++---
 src/routes/spaces/[relay]/chat/+page.svelte | 7 ++++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/routes/spaces/[relay]/[h]/+page.svelte b/src/routes/spaces/[relay]/[h]/+page.svelte
index ef0924ad..ceb79bf8 100644
--- a/src/routes/spaces/[relay]/[h]/+page.svelte
+++ b/src/routes/spaces/[relay]/[h]/+page.svelte
@@ -171,6 +171,8 @@
   const onScroll = () => {
     showScrollButton = Math.abs(element?.scrollTop || 0) > 1500
 
+    const newMessages = document.getElementById("new-messages")
+
     if (!newMessages || newMessagesSeen) {
       showFixedNewMessages = false
     } else {
@@ -185,7 +187,7 @@
   }
 
   const scrollToNewMessages = () =>
-    newMessages?.scrollIntoView({behavior: "smooth", block: "center"})
+    document.getElementById("new-messages")?.scrollIntoView({behavior: "smooth", block: "center"})
 
   const scrollToBottom = () => element?.scrollTo({top: 0, behavior: "smooth"})
 
@@ -195,7 +197,6 @@
   let share = $state(popKey<TrustedEvent | undefined>("share"))
   let parent: TrustedEvent | undefined = $state()
   let element: HTMLElement | undefined = $state()
-  let newMessages: HTMLElement | undefined = $state()
   let chatCompose: HTMLElement | undefined = $state()
   let dynamicPadding: HTMLElement | undefined = $state()
   let newMessagesSeen = false
@@ -391,7 +392,7 @@
     {#each elements as { type, id, value, showPubkey } (id)}
       {#if type === "new-messages"}
         <div
-          bind:this={newMessages}
+          {id}
           class="flex items-center py-2 text-xs transition-colors"
           class:opacity-0={showFixedNewMessages}>
           <div class="h-px flex-grow bg-primary"></div>
diff --git a/src/routes/spaces/[relay]/chat/+page.svelte b/src/routes/spaces/[relay]/chat/+page.svelte
index 0fca0497..c615dfc6 100644
--- a/src/routes/spaces/[relay]/chat/+page.svelte
+++ b/src/routes/spaces/[relay]/chat/+page.svelte
@@ -98,6 +98,8 @@
   const onScroll = () => {
     showScrollButton = Math.abs(element?.scrollTop || 0) > 1500
 
+    const newMessages = document.getElementById("new-messages")
+
     if (!newMessages || newMessagesSeen) {
       showFixedNewMessages = false
     } else {
@@ -112,7 +114,7 @@
   }
 
   const scrollToNewMessages = () =>
-    newMessages?.scrollIntoView({behavior: "smooth", block: "center"})
+    document.getElementById("new-messages")?.scrollIntoView({behavior: "smooth", block: "center"})
 
   const scrollToBottom = () => element?.scrollTo({top: 0, behavior: "smooth"})
 
@@ -120,7 +122,6 @@
   let share = $state(popKey<TrustedEvent | undefined>("share"))
   let parent: TrustedEvent | undefined = $state()
   let element: HTMLElement | undefined = $state()
-  let newMessages: HTMLElement | undefined = $state()
   let chatCompose: HTMLElement | undefined = $state()
   let dynamicPadding: HTMLElement | undefined = $state()
   let newMessagesSeen = false
@@ -275,7 +276,7 @@
   {#each elements as { type, id, value, showPubkey } (id)}
     {#if type === "new-messages"}
       <div
-        bind:this={newMessages}
+        {id}
         class="flex items-center py-2 text-xs transition-colors"
         class:opacity-0={showFixedNewMessages}>
         <div class="h-px flex-grow bg-primary"></div>