malice

public

Star0

Fork 0

Watch0

52 commits 2 branches 0 tags 0 releases4.4 MiB

Commit `1b586ca05859`

tarball

atagen <boss@atagen.co>2026-10-25 02:38 UTC

3 files changed+135-26

timeline: anchor history and smoothly follow arriving messages

Modified file: web/src/App.svelte+28 additions−23 deletions@@ -70,6 +70,7 @@
   import { discardPending, pendingByRoom, queueSend, resetPending, retryPending } from './lib/pending';
   import type { PendingMessage } from './lib/pending';
   import { insideOpenFence } from './lib/markdown';
+  import { TimelineViewport } from './lib/timeline-viewport';
   import { markMentions } from './lib/composer-marks';
   import { mentionQueryAt, mentionsFromHtml, rankPeople, resolveMentions } from './lib/mentions';
   import type { Mention, MentionQuery } from './lib/mentions';
@@ -119,6 +120,7 @@
   let drafts: Record<string, string> = {};
   let stickToBottom = true;
   let timelineEl: HTMLElement | null = null;
+  let timelineViewport: TimelineViewport | null = null;
   let composerEl: HTMLTextAreaElement | null = null;
   let marksEl: HTMLDivElement | null = null;
   $: composerMarks = markMentions(
@@ -604,40 +606,42 @@
   }
 
   function scrollToBottom(): void {
-    if (timelineEl) timelineEl.scrollTop = timelineEl.scrollHeight;
+    if (timelineViewport?.element === timelineEl) timelineViewport.scrollToBottom();
+    else if (timelineEl) timelineEl.scrollTop = timelineEl.scrollHeight;
   }
 
-  let userScrollUntil = 0;
-  let draggingScrollbar = false;
-  let paginationAnchor: { roomId: string; top: number; height: number } | null = null;
-
   function noteUserScroll(): void {
-    userScrollUntil = performance.now() + 300;
+    timelineViewport?.releaseScroll();
   }
 
   function onTimelineKey(e: KeyboardEvent): void {
     if (['ArrowUp', 'ArrowDown', 'PageUp', 'PageDown', 'Home', 'End', ' '].includes(e.key)) noteUserScroll();
   }
 
-  function onTimelinePointer(e: PointerEvent): void {
-    if (e.target === timelineEl) draggingScrollbar = true;
-  }
-
   function onTimelineScroll(): void {
     if (!timelineEl) return;
+    if (timelineViewport?.consumeScroll()) return;
     const gap = timelineEl.scrollHeight - timelineEl.scrollTop - timelineEl.clientHeight;
-    if (gap < 80) stickToBottom = true;
-    else if (draggingScrollbar || performance.now() < userScrollUntil) stickToBottom = false;
+    stickToBottom = gap < 2;
+    timelineViewport?.capture();
     if (timelineEl.scrollTop < 80 && !hasStart && !paginateBusy) void paginate();
   }
 
   function pinTimeline(node: HTMLElement) {
+    const viewport = new TimelineViewport(node.parentElement!, $selectedRoomId);
+    timelineViewport = viewport;
     const observer = new ResizeObserver(() => {
-      if (stickToBottom) scrollToBottom();
+      if (timelineViewport !== viewport || viewport.roomId !== $selectedRoomId) return;
+      if (stickToBottom) viewport.scrollToBottom(true);
+      else viewport.restore();
     });
     observer.observe(node);
     if (node.parentElement) observer.observe(node.parentElement);
-    return { destroy: () => observer.disconnect() };
+    return { destroy: () => {
+      observer.disconnect();
+      viewport.releaseScroll();
+      if (timelineViewport === viewport) timelineViewport = null;
+    } };
   }
 
   $: void trackTimeline($selectedRoomId, items);
@@ -645,10 +649,9 @@
     if (!roomId || list.length === 0) return;
     if (roomId !== $selectedRoomId) return;
     await tick();
-    if (paginationAnchor?.roomId === roomId && timelineEl && !stickToBottom) {
-      timelineEl.scrollTop = paginationAnchor.top + timelineEl.scrollHeight - paginationAnchor.height;
-      paginationAnchor = null;
-    } else if (stickToBottom) scrollToBottom();
+    if (roomId !== $selectedRoomId || timelineViewport?.roomId !== roomId) return;
+    if (stickToBottom) timelineViewport.scrollToBottom(true);
+    else timelineViewport.restore();
     queueReadReceipt();
   }
 
@@ -1037,6 +1040,7 @@
       return;
     }
     stickToBottom = false;
+    timelineViewport?.releaseScroll();
     el.scrollIntoView({ block: 'center', behavior: 'smooth' });
     el.classList.remove('flash');
     void el.offsetWidth;
@@ -1059,10 +1063,12 @@
 
   $: void trackPending($selectedRoomId, pendingItems);
   async function trackPending(roomId: string | null, list: PendingMessage[]): Promise<void> {
-    if (!roomId || list.length === 0) return;
+    if (!roomId) return;
     if (roomId !== $selectedRoomId) return;
     await tick();
-    if (stickToBottom) scrollToBottom();
+    if (roomId !== $selectedRoomId || timelineViewport?.roomId !== roomId) return;
+    if (stickToBottom) timelineViewport.scrollToBottom(true);
+    else timelineViewport.restore();
   }
 
   let commandQuery: string | null = null;
@@ -1152,6 +1158,7 @@
   }
 
   function onComposerKey(ev: KeyboardEvent): void {
+    if (ev.isComposing) return;
     if (emoteQuery && emoteCandidates.length > 0) {
       if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
         ev.preventDefault();
@@ -1278,7 +1285,6 @@
   async function paginate(): Promise<void> {
     const roomId = $selectedRoomId;
     if (!roomId || paginateBusy) return;
-    if (timelineEl && !stickToBottom) paginationAnchor = { roomId, top: timelineEl.scrollTop, height: timelineEl.scrollHeight };
     paginateBusy = true;
     try {
       await paginateRoom(roomId);
@@ -1773,7 +1779,6 @@
 <svelte:window
   on:keydown={onKeydown}
   on:pointerdown={closeRoomMenuOutside}
-  on:pointerup={() => (draggingScrollbar = false)}
 />
 
 {#if !booted}
@@ -2356,7 +2361,7 @@
           on:wheel={noteUserScroll}
           on:touchmove={noteUserScroll}
           on:keydown={onTimelineKey}
-          on:pointerdown={onTimelinePointer}
+          on:pointerdown={noteUserScroll}
           aria-label={`Messages in ${selectedRoom.name}`}
         >
           <div class="timeline-inner" use:pinTimeline>

Modified file: web/src/app.css+7 additions−3 deletions@@ -659,6 +659,7 @@ input, textarea { font: inherit; }
 .timeline {
   flex: 1;
   overflow-y: auto;
+  overflow-anchor: none;
   padding: 8px 14px 10px;
   min-height: 0;
 }
@@ -818,17 +819,20 @@ input, textarea { font: inherit; }
 .composer-field > textarea {
   resize: none;
   background: transparent;
-  color: var(--text);
+  color: transparent;
+  caret-color: var(--text);
+  min-width: 0;
+  width: 100%;
   outline: none;
   overflow-y: auto;
 }
 .composer-marks {
   pointer-events: none;
-  color: transparent;
+  color: var(--text);
   overflow: hidden;
 }
 .composer-marks mark {
-  color: transparent;
+  color: inherit;
   background: color-mix(in srgb, var(--accent) 26%, transparent);
   border-radius: var(--r-sm);
   box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent);

Added file: web/src/lib/timeline-viewport.ts+100 additions@@ -0,0 +1,100 @@
+interface MessageAnchor {
+  itemId: string | undefined;
+  eventId: string | undefined;
+  offset: number;
+}
+
+export class TimelineViewport {
+  private anchors: MessageAnchor[] = [];
+  private top = 0;
+  private scrollTarget: number | null = null;
+  private frame: number | null = null;
+  private animation: { from: number; to: number; start: number } | null = null;
+  private initialized = false;
+
+  constructor(readonly element: HTMLElement, readonly roomId: string | null) {
+    this.capture();
+  }
+
+  capture(): void {
+    const bounds = this.element.getBoundingClientRect();
+    const top = bounds.top + this.element.clientTop;
+    const bottom = top + this.element.clientHeight;
+    this.anchors = [];
+    this.top = this.element.scrollTop;
+    for (const row of this.element.querySelectorAll<HTMLElement>('[data-item]')) {
+      const rect = row.getBoundingClientRect();
+      if (rect.bottom <= top) continue;
+      if (rect.top >= bottom) break;
+      this.anchors.push({ itemId: row.dataset.item, eventId: row.dataset.event, offset: rect.top - top });
+      if (this.anchors.length === 3) break;
+    }
+  }
+
+  restore(): void {
+    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);
+      this.capture();
+      return;
+    }
+    this.setTop(this.top);
+    this.capture();
+  }
+
+  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;
+    this.initialized = true;
+    if (!animate) {
+      this.releaseScroll();
+      this.setTop(target);
+      this.capture();
+      return;
+    }
+    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);
+  }
+
+  consumeScroll(): boolean {
+    const target = this.scrollTarget;
+    this.scrollTarget = null;
+    if (target !== null && Math.abs(this.element.scrollTop - target) < 1) return true;
+    this.releaseScroll();
+    return false;
+  }
+
+  releaseScroll(): void {
+    if (this.frame !== null) cancelAnimationFrame(this.frame);
+    this.frame = null;
+    this.animation = null;
+    this.scrollTarget = null;
+  }
+
+  private advance = (now: number): void => {
+    this.frame = null;
+    const animation = this.animation;
+    if (!animation) return;
+    const progress = Math.min(1, (now - animation.start) / 220);
+    const eased = 1 - (1 - progress) ** 3;
+    this.setTop(animation.from + (animation.to - animation.from) * eased);
+    if (progress < 1) this.frame = requestAnimationFrame(this.advance);
+    else {
+      this.animation = null;
+      this.capture();
+    }
+  };
+
+  private setTop(top: number): void {
+    if (Math.abs(this.element.scrollTop - top) < 0.5) return;
+    this.element.scrollTop = top;
+    this.scrollTarget = this.element.scrollTop;
+  }
+}

malice

Commit 1b586ca05859

Commit `1b586ca05859`