coracle/flotilla
1
3
Fork 9
Code Issues 32 Pull Requests 1 Actions Packages Projects 5 Releases Wiki Activity

Attempt to fix new messages button

Browse Source
This commit is contained in:
Jon Staab
2025-12-17 12:07:30 -08:00
parent 4be4288ef0
commit 2c62749d9b
2 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/spaces/[relay]/[h]/+page.svelte
+4 -3
View File
@@ -171,6 +171,8 @@
const onScroll = () => { const onScroll = () => {
showScrollButton = Math.abs(element?.scrollTop || 0) > 1500 showScrollButton = Math.abs(element?.scrollTop || 0) > 1500
const newMessages = document.getElementById("new-messages")
if (!newMessages || newMessagesSeen) { if (!newMessages || newMessagesSeen) {
showFixedNewMessages = false showFixedNewMessages = false
} else { } else {
@@ -185,7 +187,7 @@
} }
const scrollToNewMessages = () => 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"}) const scrollToBottom = () => element?.scrollTo({top: 0, behavior: "smooth"})
@@ -195,7 +197,6 @@
let share = $state(popKey<TrustedEvent | undefined>("share")) let share = $state(popKey<TrustedEvent | undefined>("share"))
let parent: TrustedEvent | undefined = $state() let parent: TrustedEvent | undefined = $state()
let element: HTMLElement | undefined = $state() let element: HTMLElement | undefined = $state()
let newMessages: HTMLElement | undefined = $state()
let chatCompose: HTMLElement | undefined = $state() let chatCompose: HTMLElement | undefined = $state()
let dynamicPadding: HTMLElement | undefined = $state() let dynamicPadding: HTMLElement | undefined = $state()
let newMessagesSeen = false let newMessagesSeen = false
@@ -391,7 +392,7 @@
{#each elements as { type, id, value, showPubkey } (id)} {#each elements as { type, id, value, showPubkey } (id)}
{#if type === "new-messages"} {#if type === "new-messages"}
<div <div
bind:this={newMessages} {id}
class="flex items-center py-2 text-xs transition-colors" class="flex items-center py-2 text-xs transition-colors"
class:opacity-0={showFixedNewMessages}> class:opacity-0={showFixedNewMessages}>
<div class="h-px flex-grow bg-primary"></div> <div class="h-px flex-grow bg-primary"></div>
src/routes/spaces/[relay]/chat/+page.svelte
+4 -3
View File
@@ -98,6 +98,8 @@
const onScroll = () => { const onScroll = () => {
showScrollButton = Math.abs(element?.scrollTop || 0) > 1500 showScrollButton = Math.abs(element?.scrollTop || 0) > 1500
const newMessages = document.getElementById("new-messages")
if (!newMessages || newMessagesSeen) { if (!newMessages || newMessagesSeen) {
showFixedNewMessages = false showFixedNewMessages = false
} else { } else {
@@ -112,7 +114,7 @@
} }
const scrollToNewMessages = () => 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"}) const scrollToBottom = () => element?.scrollTo({top: 0, behavior: "smooth"})
@@ -120,7 +122,6 @@
let share = $state(popKey<TrustedEvent | undefined>("share")) let share = $state(popKey<TrustedEvent | undefined>("share"))
let parent: TrustedEvent | undefined = $state() let parent: TrustedEvent | undefined = $state()
let element: HTMLElement | undefined = $state() let element: HTMLElement | undefined = $state()
let newMessages: HTMLElement | undefined = $state()
let chatCompose: HTMLElement | undefined = $state() let chatCompose: HTMLElement | undefined = $state()
let dynamicPadding: HTMLElement | undefined = $state() let dynamicPadding: HTMLElement | undefined = $state()
let newMessagesSeen = false let newMessagesSeen = false
@@ -275,7 +276,7 @@
{#each elements as { type, id, value, showPubkey } (id)} {#each elements as { type, id, value, showPubkey } (id)}
{#if type === "new-messages"} {#if type === "new-messages"}
<div <div
bind:this={newMessages} {id}
class="flex items-center py-2 text-xs transition-colors" class="flex items-center py-2 text-xs transition-colors"
class:opacity-0={showFixedNewMessages}> class:opacity-0={showFixedNewMessages}>
<div class="h-px flex-grow bg-primary"></div> <div class="h-px flex-grow bg-primary"></div>