Merge pull request #1553 from PR0M3TH3AN/feature/dm-peek-animation-3120133740455078105

Add peek animation and hidden scrollbars to DM views

css/tailwind.source.css

@@ -5984,3 +5984,11 @@
     }
   }
 }
+
+.no-scrollbar {
+  scrollbar-width: none;
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}

js/ui/dm/ConversationList.js

@@ -47,7 +47,7 @@ export function ConversationList({
   }
   root.appendChild(header);
 
-  const list = createElement(doc, "div", "dm-conversation-list__items");
+  const list = createElement(doc, "div", "dm-conversation-list__items no-scrollbar");
   list.setAttribute("role", "listbox");
   list.setAttribute("aria-label", "Conversation list");
 
@@ -75,6 +75,37 @@ export function ConversationList({
       });
       list.appendChild(row);
     });
+
+    // Peek animation
+    if (conversations.length > 0) {
+      if (typeof IntersectionObserver !== "undefined") {
+        const observer = new IntersectionObserver((entries) => {
+          const entry = entries[0];
+          if (entry.isIntersecting) {
+            observer.disconnect();
+            setTimeout(() => {
+              if (list.scrollHeight > list.clientHeight) {
+                list.scrollTo({ top: 40, behavior: "smooth" });
+                setTimeout(() => {
+                  list.scrollTo({ top: 0, behavior: "smooth" });
+                }, 600);
+              }
+            }, 300);
+          }
+        }, { threshold: 0.1 });
+        observer.observe(list);
+      } else {
+        // Fallback for no IntersectionObserver (e.g. some tests or very old browsers)
+        setTimeout(() => {
+          if (list.scrollHeight > list.clientHeight) {
+            list.scrollTo({ top: 40, behavior: "smooth" });
+            setTimeout(() => {
+              list.scrollTo({ top: 0, behavior: "smooth" });
+            }, 600);
+          }
+        }, 600);
+      }
+    }
   }
 
   list.addEventListener("keydown", (event) => {

js/ui/dm/MessageThread.js

@@ -93,7 +93,7 @@ export function MessageThread({
   }
   root.appendChild(header);
 
-  const timeline = createElement(doc, "div", "dm-message-thread__timeline");
+  const timeline = createElement(doc, "div", "dm-message-thread__timeline no-scrollbar");
   timeline.setAttribute("role", "log");
   timeline.setAttribute("aria-live", "polite");
 
@@ -137,11 +137,43 @@ export function MessageThread({
     });
   }
 
-  // Scroll to bottom
+  // Scroll to bottom and peek
   if (messages.length > 0) {
+    const animate = () => {
+      timeline.scrollTop = timeline.scrollHeight;
+
+      if (timeline.scrollHeight > timeline.clientHeight) {
+        setTimeout(() => {
+          const targetScroll = Math.max(0, timeline.scrollTop - 40);
+          timeline.scrollTo({ top: targetScroll, behavior: "smooth" });
+
+          setTimeout(() => {
+            timeline.scrollTo({
+              top: timeline.scrollHeight,
+              behavior: "smooth",
+            });
+          }, 600);
+        }, 600);
+      }
+    };
+
+    if (typeof IntersectionObserver !== "undefined") {
+      const observer = new IntersectionObserver((entries) => {
+        const entry = entries[0];
+        if (entry.isIntersecting) {
+          observer.disconnect();
+          // First ensure we are at bottom
+          timeline.scrollTop = timeline.scrollHeight;
+          setTimeout(animate, 300);
+        }
+      }, { threshold: 0.1 });
+      observer.observe(timeline);
+    } else {
       setTimeout(() => {
         timeline.scrollTop = timeline.scrollHeight;
+        animate();
       }, 0);
+    }
   }
 
   root.appendChild(timeline);