malice

public

Star0

Fork 0

Watch0

131 commits 2 branches 0 tags 0 releases4.4 MiB

Commit `988fbf982ada`

tarball

atagen <boss@atagen.co>2026-10-27 03:55 UTC

2 files changed+57-12

web: drive jumps to a message through the timeline viewport

jumpTo used a browser smooth scrollIntoView that TimelineViewport didn't know about, so every anchor restore from settling images or history filling in aborted it and snapped the view back toward where it started. reveal() animates the jump itself, retargets it when layout shifts mid-flight, and holds the landed row until the user scrolls. farFromLatest is now measured on consumed scrolls too, or the jump to latest arrow never showed after a jump.

Modified file: web/src/App.svelte+12 additions−5 deletions@@ -775,13 +775,13 @@
     const top = timelineEl.scrollTop;
     const scrolledUp = top < lastScrollTop - 1;
     lastScrollTop = top;
+    measureLatest();
     if (timelineViewport?.consumeScroll()) return;
     const gap = timelineEl.scrollHeight - top - timelineEl.clientHeight;
     const wasAtBottom = stickToBottom;
     const byUser = scrollbarHeld || performance.now() - userScrollAt < USER_SCROLL_MS;
     stickToBottom = (gap < 2 || (wasAtBottom && !(byUser && scrolledUp))) && (timelineRows?.atTail() ?? true);
     if (stickToBottom && gap >= 2) timelineViewport?.scrollToBottom(false);
-    farFromLatest = gap > 240 || !(timelineRows?.atTail() ?? true);
     if (stickToBottom && !wasAtBottom) queueReadReceipt();
     timelineViewport?.capture();
     const grew = (timelineEl.scrollTop < WINDOW_EDGE && timelineRows?.grow('up')) || (gap < WINDOW_EDGE && timelineRows?.grow('down'));
@@ -789,13 +789,22 @@
     else if (timelineEl.scrollTop < 80 && !hasStart && !paginateBusy) void paginate();
   }
 
+  function measureLatest(): void {
+    if (!timelineEl) return;
+    const gap = timelineEl.scrollHeight - timelineEl.scrollTop - timelineEl.clientHeight;
+    farFromLatest = gap > 240 || !(timelineRows?.atTail() ?? true);
+  }
+
   function pinTimeline(node: HTMLElement) {
     const viewport = new TimelineViewport(node.parentElement!, $selectedRoomId);
     timelineViewport = viewport;
     const observer = new ResizeObserver(() => {
       if (timelineViewport !== viewport || viewport.roomId !== $selectedRoomId) return;
       if (stickToBottom) viewport.scrollToBottom(!motionActive());
-      else viewport.restore();
+      else {
+        viewport.restore();
+        measureLatest();
+      }
     });
     observer.observe(node);
     if (node.parentElement) observer.observe(node.parentElement);
@@ -1275,9 +1284,7 @@
       return;
     }
     stickToBottom = false;
-    timelineViewport?.releaseScroll();
-    el.scrollIntoView({ block: 'center', behavior: recentred ? 'instant' : 'smooth' });
-    if (recentred) timelineViewport?.capture();
+    timelineViewport?.reveal(el, !recentred);
     el.classList.remove('flash');
     void el.offsetWidth;
     el.classList.add('flash');

Modified file: web/src/lib/timeline-viewport.ts+45 additions−7 deletions@@ -9,7 +9,7 @@ export class TimelineViewport {
   private top = 0;
   private scrollTarget: number | null = null;
   private frame: number | null = null;
-  private animation: { from: number; to: number; start: number } | null = null;
+  private animation: { from: number; to: number; start: number; anchored: boolean } | null = null;
   private initialized = false;
   private settledTop: number | null = null;
 
@@ -46,22 +46,46 @@ export class TimelineViewport {
   }
 
   restore(): void {
-    this.releaseScroll();
+    const animation = this.animation?.anchored ? this.animation : null;
+    if (!animation) this.releaseScroll();
     const rows = [...this.element.querySelectorAll<HTMLElement>('[data-item]')];
-    const top = this.element.getBoundingClientRect().top + this.element.clientTop;
     for (const anchor of this.anchors) {
       const row = rows.find((row) => row.dataset.item === anchor.itemId) ??
         (anchor.eventId ? rows.find((row) => row.dataset.event === anchor.eventId) : undefined);
       if (!row) continue;
-      this.setTop(this.element.scrollTop + row.getBoundingClientRect().top - top - anchor.offset);
+      const target = this.element.scrollTop + this.offsetOf(row) - anchor.offset;
+      if (animation) {
+        const shift = target - animation.to;
+        animation.from += shift;
+        animation.to = target;
+        this.setTop(this.element.scrollTop + shift);
+        return;
+      }
+      this.setTop(target);
       this.top = this.element.scrollTop;
       this.settledTop = this.top;
       return;
     }
+    this.releaseScroll();
     this.setTop(this.top);
     this.recapture();
   }
 
+  reveal(row: HTMLElement, smooth: boolean): void {
+    this.releaseScroll();
+    const max = Math.max(0, this.element.scrollHeight - this.element.clientHeight);
+    const centred = this.element.scrollTop + this.offsetOf(row) - Math.max(0, (this.element.clientHeight - row.offsetHeight) / 2);
+    const target = Math.min(max, Math.max(0, centred));
+    this.anchors = [{ itemId: row.dataset.item, eventId: row.dataset.event, offset: this.offsetOf(row) - (target - this.element.scrollTop) }];
+    this.top = target;
+    if (smooth && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      this.animate({ from: this.element.scrollTop, to: target, start: performance.now(), anchored: true });
+      return;
+    }
+    this.setTop(target);
+    this.hold();
+  }
+
   scrollToBottom(smooth = false): void {
     const target = Math.max(0, this.element.scrollHeight - this.element.clientHeight);
     const animate = smooth && this.initialized && !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -74,8 +98,7 @@ export class TimelineViewport {
     }
     if (this.animation && Math.abs(this.animation.to - target) < 0.5) return;
     if (Math.abs(this.element.scrollTop - target) < 0.5) return;
-    this.animation = { from: this.element.scrollTop, to: target, start: performance.now() };
-    if (this.frame === null) this.frame = requestAnimationFrame(this.advance);
+    this.animate({ from: this.element.scrollTop, to: target, start: performance.now(), anchored: false });
   }
 
   consumeScroll(): boolean {
@@ -93,6 +116,20 @@ export class TimelineViewport {
     this.scrollTarget = null;
   }
 
+  private animate(animation: NonNullable<TimelineViewport['animation']>): void {
+    this.animation = animation;
+    if (this.frame === null) this.frame = requestAnimationFrame(this.advance);
+  }
+
+  private hold(): void {
+    this.settledTop = this.element.scrollTop;
+    this.scrollTarget = null;
+  }
+
+  private offsetOf(row: HTMLElement): number {
+    return row.getBoundingClientRect().top - this.element.getBoundingClientRect().top - this.element.clientTop;
+  }
+
   private advance = (now: number): void => {
     this.frame = null;
     const animation = this.animation;
@@ -103,7 +140,8 @@ export class TimelineViewport {
     if (progress < 1) this.frame = requestAnimationFrame(this.advance);
     else {
       this.animation = null;
-      this.recapture();
+      if (animation.anchored) this.hold();
+      else this.recapture();
     }
   };

malice

Commit 988fbf982ada

Commit `988fbf982ada`