From a7c1e9a16144b045cbfe57b599a0be0e84f6e937 Mon Sep 17 00:00:00 2001
From: Flemmli97 <34157027+Flemmli97@users.noreply.github.com>
Date: Tue, 22 Oct 2024 01:29:47 +0200
Subject: [PATCH] feat(chat): clickable unread bar (#741)

---
 .../components/messaging/Conversation.svelte  | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/messaging/Conversation.svelte b/src/lib/components/messaging/Conversation.svelte
index e10d0465c..a8f7b993d 100644
--- 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;