feat(chat): clickable unread bar (#741)

Satellite-im · Oct 21, 2024 · a7c1e9a · a7c1e9a
1 parent 08f230e
commit a7c1e9a
Showing 1 changed file with 16 additions and 3 deletions.
diff --git a/src/lib/components/messaging/Conversation.svelte b/src/lib/components/messaging/Conversation.svelte
@@ -67,8 +67,7 @@
         setTimeout(() => {
             if (scrollContainer) {
                 if (unreads) {
-                    let element = document.getElementById(`message-${unreads.last_viewed}`)
-                    if (element) element.scrollIntoView({ behavior: "smooth" })
+                    scrollToUnread()
                 } else {
                     scrollContainer.scrollTop = scrollContainer.scrollHeight
                 }
@@ -84,6 +83,18 @@
         })
     }
 
+    function scrollToUnread() {
+        if (!unreads) return
+        let element = document.getElementById(`message-${unreads.last_viewed}`)
+        if (element) {
+            element.scrollIntoView({ behavior: "smooth" })
+        } else {
+            // Assume that unread messages exceed currently loaded ones so we scroll all the way up
+            let messages = document.getElementsByClassName("message-bubble")
+            messages[0].scrollIntoView({ behavior: "smooth" })
+        }
+    }
+
     onDestroy(() => {
         if (scrollContainer.scrollHeight <= scrollContainer.clientHeight) markAsRead($chat.id)
     })
@@ -98,7 +109,7 @@
         </div>
     {:else}
         {#if unreads && unreads.unread > 0}
-            <div class="unreads">
+            <div class="unreads" aria-label="unreads" role="presentation" on:click={scrollToUnread}>
                 <div class="bookmark"></div>
                 {$_("chat.newMessageSinceAmount", { values: { amount: unreads.unread, date: $date(unreads.since, { format: "medium" }), time: $time(unreads.since) } })}
             </div>
@@ -151,6 +162,8 @@
             background-color: var(--focus-color);
             border-radius: 0 0 var(--border-radius) var(--border-radius);
             z-index: 1;
+            cursor: pointer;
+
             .bookmark {
                 position: absolute;
                 top: 0;