createTimeline: fix viewport and dupelication

src/masto/timelines.ts

@@ -11,114 +11,19 @@ import {
 } from "solid-js";
 import { createStore } from "solid-js/store";
 
-type TimelineFetchTips = {
-  direction?: "new" | "old";
-};
-
 type Timeline = {
   list(params: {
+    /** Return results older than this ID. */
+    readonly maxId?: string;
+    /** Return results newer than this ID. */
+    readonly sinceId?: string;
+    /** Get a list of items with ID greater than this value excluding this ID */
+    readonly minId?: string;
+    /** Maximum number of results to return per page. Defaults to 40. NOTE: Pagination is done with the Link header from the response. */
     readonly limit?: number;
   }): mastodon.Paginator<mastodon.v1.Status[], unknown>;
 };
 
-export function useTimeline(
-  timeline: Accessor<Timeline>,
-  cfg?: {
-    /**
-     * Use full refresh mode. This mode ignores paging, it will refetch the specified number
-     * of toots at every refetch().
-     */
-    fullRefresh?: number;
-  },
-) {
-  let otl: Timeline | undefined;
-  let npager: mastodon.Paginator<mastodon.v1.Status[], unknown> | undefined;
-  let opager: mastodon.Paginator<mastodon.v1.Status[], unknown> | undefined;
-  const [snapshot, { refetch }] = createResource<
-    {
-      records: mastodon.v1.Status[];
-      direction: "new" | "old" | "items";
-      tlChanged: boolean;
-    },
-    [Timeline],
-    TimelineFetchTips | undefined
-  >(
-    () => [timeline()] as const,
-    async ([tl], info) => {
-      let tlChanged = false;
-      if (otl !== tl) {
-        npager = opager = undefined;
-        otl = tl;
-        tlChanged = true;
-      }
-      const fullRefresh = cfg?.fullRefresh;
-      if (typeof fullRefresh !== "undefined") {
-        const records = await tl
-          .list({
-            limit: fullRefresh,
-          })
-          .next();
-        return {
-          direction: "items",
-          records: records.value ?? [],
-          end: records.done,
-          tlChanged,
-        };
-      }
-      const direction =
-        typeof info.refetching !== "boolean"
-          ? (info.refetching?.direction ?? "old")
-          : "old";
-      if (direction === "old") {
-        if (!opager) {
-          opager = tl.list({}).setDirection("next");
-        }
-        const next = await opager.next();
-        return {
-          direction,
-          records: next.value ?? [],
-          end: next.done,
-          tlChanged,
-        };
-      } else {
-        if (!npager) {
-          npager = tl.list({}).setDirection("prev");
-        }
-        const next = await npager.next();
-        const page = next.value ?? [];
-        return { direction, records: page, end: next.done, tlChanged };
-      }
-    },
-  );
-
-  const [store, setStore] = createStore([] as mastodon.v1.Status[]);
-
-  createEffect(() => {
-    const shot = snapshot();
-    if (!shot) return;
-    const { direction, records, tlChanged } = shot;
-    if (tlChanged) {
-      setStore(() => []);
-    }
-    if (direction === "new") {
-      setStore((x) => [...records, ...x]);
-    } else if (direction === "old") {
-      setStore((x) => [...x, ...records]);
-    } else if (direction === "items") {
-      setStore(() => records);
-    }
-  });
-
-  return [
-    store,
-    snapshot,
-    {
-      refetch,
-      mutate: setStore,
-    },
-  ] as const;
-}
-
 export function createTimelineSnapshot(
   timeline: Accessor<Timeline>,
   limit: Accessor<number>,
@@ -176,30 +81,13 @@ export function createTimelineSnapshot(
 export type TimelineFetchDirection = mastodon.Direction;
 
 export type TimelineChunk = {
-  pager: mastodon.Paginator<mastodon.v1.Status[], unknown>;
+  tl: Timeline;
   chunk: readonly mastodon.v1.Status[];
   done?: boolean;
   direction: TimelineFetchDirection;
   limit: number;
 };
 
-function checkOrCreatePager(
-  timeline: Timeline,
-  limit: number,
-  lastPager: TimelineChunk["pager"] | undefined,
-  newDirection: TimelineFetchDirection,
-) {
-  if (!lastPager) {
-    return timeline.list({  }).setDirection(newDirection);
-  } else {
-    let pager = lastPager;
-    if (pager.getDirection() !== newDirection) {
-      pager = pager.setDirection(newDirection);
-    }
-    return pager;
-  }
-}
-
 type TreeNode<T> = {
   parent?: TreeNode<T>;
   value: T;
@@ -226,6 +114,38 @@ export function createTimeline(
   const lookup = new ReactiveMap<string, TreeNode<mastodon.v1.Status>>();
   const [threads, setThreads] = createStore([] as mastodon.v1.Status["id"][]);
 
+  let vpMaxId: string | undefined, vpMinId: string | undefined;
+
+  const fetchExtendingPage = async (
+    tl: Timeline,
+    direction: TimelineFetchDirection,
+    limit: number,
+  ) => {
+    switch (direction) {
+      case "next": {
+        const page = await tl
+          .list({ limit, sinceId: vpMaxId })
+          .setDirection(direction)
+          .next();
+        if ((page.value?.length ?? 0) > 0) {
+          vpMaxId = page.value![0].id;
+        }
+        return page;
+      }
+
+      case "prev": {
+        const page = await tl
+          .list({ limit, maxId: vpMinId })
+          .setDirection(direction)
+          .next();
+        if ((page.value?.length ?? 0) > 0) {
+          vpMinId = page.value![page.value!.length - 1].id;
+        }
+        return page;
+      }
+    }
+  };
+
   const [chunk, { refetch }] = createResource(
     () => [timeline(), limit()] as const,
     async (
@@ -237,17 +157,16 @@ export function createTimeline(
     ) => {
       const direction =
         typeof info.refetching === "boolean" ? "prev" : info.refetching;
-      const rebuildTimeline = limit !== info.value?.limit;
+      const rebuildTimeline = tl !== info.value?.tl;
-      const pager = rebuildTimeline
-        ? checkOrCreatePager(tl, limit, undefined, direction)
-        : checkOrCreatePager(tl, limit, info.value?.pager, direction);
       if (rebuildTimeline) {
+        vpMaxId = undefined;
+        vpMinId = undefined;
         lookup.clear();
         setThreads([]);
       }
-      const posts = await pager.next();
+      const posts = await fetchExtendingPage(tl, direction, limit);
       return {
-        pager,
+        tl,
         chunk: posts.value ?? [],
         done: posts.done,
         direction,
@@ -261,33 +180,40 @@ export function createTimeline(
     if (!chk) {
       return;
     }
-    console.debug("fetched chunk", chk);
 
-    batch(() => {
+    const existence = [] as boolean[];
-      for (const status of chk.chunk) {
-        lookup.set(status.id, {
-          value: status,
-        });
-      }
 
-      for (const status of chk.chunk) {
+    for (const [idx, status] of chk.chunk.entries()) {
-        const node = lookup.get(status.id)!;
+      existence[idx] = !!untrack(() => lookup.get(status.id));
-        if (status.inReplyToId) {
+      lookup.set(status.id, {
-          const parent = lookup.get(status.inReplyToId);
+        value: status,
-          if (parent) {
+      });
-            const children = parent.children ?? [];
+    }
-            if (!children.find((x) => x.value.id == status.id)) {
+
-              children.push(node);
+    for (const status of chk.chunk) {
-            }
+      const node = untrack(() => lookup.get(status.id))!;
-            parent.children = children;
+      if (status.inReplyToId) {
-            node.parent = parent;
+        const parent = lookup.get(status.inReplyToId);
+        if (parent) {
+          const children = parent.children ?? [];
+          if (!children.find((x) => x.value.id == status.id)) {
+            children.push(node);
           }
+          parent.children = children;
+          node.parent = parent;
         }
       }
-      if (chk.direction === "next") {
+    }
-        setThreads((threads) => [...threads, ...chk.chunk.map((x) => x.id)]);
+
-      } else if (chk.direction === "prev") {
+    const nThreadIds = chk.chunk
-        setThreads((threads) => [...chk.chunk.map((x) => x.id), ...threads]);
+      .filter((x, i) => !existence[i])
+      .map((x) => x.id);
+
+    batch(() => {
+      if (chk.direction === "prev") {
+        setThreads((threads) => [...threads, ...nThreadIds]);
+      } else if (chk.direction === "next") {
+        setThreads((threads) => [...nThreadIds, ...threads]);
       }
 
       setThreads((threads) =>

src/timelines/Home.tsx

@@ -270,7 +270,9 @@ const Home: ParentComponent = (props) => {
         </TimeSourceProvider>
         <Suspense>
           <HeroSourceProvider value={[heroSrc, setHeroSrc]}>
-            <BottomSheet open={!!child()}>{child()}</BottomSheet>
+            <BottomSheet open={!!child()} onClose={() => navigate(-1)}>
+              {child()}
+            </BottomSheet>
           </HeroSourceProvider>
         </Suspense>
       </Scaffold>

src/timelines/MediaAttachmentGrid.tsx

@@ -66,7 +66,7 @@ const MediaAttachmentGrid: Component<{
 
   css`
     .attachments {
-      column-count: ${columnCount.toString()};
+      column-count: ${columnCount().toString()};
     }
   `;
   return (

src/timelines/PullDownToRefresh.tsx

@@ -52,7 +52,7 @@ const PullDownToRefresh: Component<{
   let lts = -1;
   let ds = 0;
   let holding = false;
-  const K = 10;
+  const K = 20;
   const updatePullDown = (ts: number) => {
     released = false;
     try {
@@ -60,8 +60,9 @@ const PullDownToRefresh: Component<{
       const dt = lts !== -1 ? ts - lts : 1 / 60;
       const vspring = holding ? 0 : K * x * dt;
       v = ds / dt - vspring;
+      const final = Math.max(Math.min(x + v * dt, stopPos()), 0);
 
-      setPullDown(Math.max(Math.min(x + v * dt, stopPos()), 0));
+      setPullDown(final);
 
       if (Math.abs(x) > 1 || Math.abs(v) > 1) {
         requestAnimationFrame(updatePullDown);
@@ -69,15 +70,6 @@ const PullDownToRefresh: Component<{
         v = 0;
         lts = -1;
       }
-
-      if (
-        !holding &&
-        untrack(pullDown) >= stopPos() &&
-        !props.loading &&
-        props.onRefresh
-      ) {
-        setTimeout(props.onRefresh, 0);
-      }
     } finally {
       ds = 0;
       released = true;
@@ -89,6 +81,11 @@ const PullDownToRefresh: Component<{
   const onWheelNotUpdated = () => {
     wheelTimeout = undefined;
     holding = false;
+
+    if (released) {
+      released = false;
+      requestAnimationFrame(updatePullDown);
+    }
   };
 
   const handleLinkedWheel = (event: WheelEvent) => {
@@ -97,11 +94,18 @@ const PullDownToRefresh: Component<{
       const d = untrack(pullDown);
       if (d > 1) event.preventDefault();
       ds = -(event.deltaY / window.devicePixelRatio / 2);
-      holding = d < stopPos();
       if (wheelTimeout) {
         clearTimeout(wheelTimeout);
       }
-      wheelTimeout = setTimeout(onWheelNotUpdated, 200);
+      if (d >= stopPos() && !props.loading) {
+        props.onRefresh?.();
+
+        holding = false;
+        wheelTimeout = undefined;
+      } else {
+        holding = true;
+        wheelTimeout = setTimeout(onWheelNotUpdated, 200);
+      }
 
       if (released) {
         released = false;
@@ -151,12 +155,8 @@ const PullDownToRefresh: Component<{
     lastTouchId = undefined;
     lastTouchScreenY = 0;
     holding = false;
-    if (
+    if (untrack(pullDown) >= stopPos() && !props.loading) {
-      untrack(indicatorOfsY) >= stopPos() &&
+      props.onRefresh?.();
-      !props.loading &&
-      props.onRefresh
-    ) {
-      setTimeout(props.onRefresh, 0);
     } else {
       if (released) {
         released = false;
@@ -203,9 +203,7 @@ const PullDownToRefresh: Component<{
       background-color: var(--tutu-color-surface);
 
       > :global(.refresh-icon) {
-        transform: rotate(
+        transform: rotate(${`${(indicatorOfsY() / 160 / 2).toString()}turn`});
-          ${`${((indicatorOfsY() / 160) * 180).toString()}deg`}
-        );
         will-change: transform;
       }
 

src/timelines/RegularToot.tsx

@@ -111,13 +111,17 @@ type TootActionGroupProps<T extends mastodon.v1.Status> = {
   onRetoot?: (value: T) => void;
   onFavourite?: (value: T) => void;
   onBookmark?: (value: T) => void;
-  onReply?: (value: T) => void;
+  onReply?: (
+    value: T,
+    event: MouseEvent & { currentTarget: HTMLButtonElement },
+  ) => void;
 };
 
 type TootCardProps = {
   status: mastodon.v1.Status;
   actionable?: boolean;
   evaluated?: boolean;
+  thread?: "top" | "bottom" | "middle";
 } & TootActionGroupProps<mastodon.v1.Status> &
   JSX.HTMLElementTags["article"];
 
@@ -125,19 +129,40 @@ function isolatedCallback(e: MouseEvent) {
   e.stopPropagation();
 }
 
+export function findRootToot(element: HTMLElement) {
+  let current: HTMLElement | null = element;
+  while (current && !current.classList.contains(tootStyle.toot)) {
+    current = current.parentElement;
+  }
+  if (!current) {
+    throw Error(
+      `the element must be placed under a element with ${tootStyle.toot}`,
+    );
+  }
+  return current;
+}
+
 function TootActionGroup<T extends mastodon.v1.Status>(
   props: TootActionGroupProps<T> & { value: T },
 ) {
+  let actGrpElement: HTMLDivElement;
   const toot = () => props.value;
   return (
-    <div class={tootStyle.tootBottomActionGrp} onClick={isolatedCallback}>
+    <div
-      <Button
+      ref={actGrpElement!}
-        class={tootStyle.tootActionWithCount}
+      class={tootStyle.tootBottomActionGrp}
-        onClick={() => props.onReply?.(toot())}
+      onClick={isolatedCallback}
-      >
+    >
-        <ReplyAll />
+      <Show when={props.onReply}>
-        <span>{toot().repliesCount}</span>
+        <Button
-      </Button>
+          class={tootStyle.tootActionWithCount}
+          onClick={[props.onReply!, props.value]}
+        >
+          <ReplyAll />
+          <span>{toot().repliesCount}</span>
+        </Button>
+      </Show>
+
       <Button
         class={tootStyle.tootActionWithCount}
         style={{
@@ -288,7 +313,7 @@ const RegularToot: Component<TootCardProps> = (props) => {
   let rootRef: HTMLElement;
   const [managed, managedActionGroup, rest] = splitProps(
     props,
-    ["status", "lang", "class", "actionable", "evaluated"],
+    ["status", "lang", "class", "actionable", "evaluated", "thread"],
     ["onRetoot", "onFavourite", "onBookmark", "onReply"],
   );
   const now = useTimeSource();
@@ -300,6 +325,42 @@ const RegularToot: Component<TootCardProps> = (props) => {
       margin-left: calc(var(--toot-avatar-size) + var(--card-pad) + 8px);
       margin-block: 8px;
     }
+
+    .thread-top,
+    .thread-mid,
+    .thread-btm {
+      position: relative;
+
+      &::before {
+        content: "";
+        position: absolute;
+        left: 36px;
+        background-color: var(--tutu-color-secondary);
+        width: 2px;
+        display: block;
+      }
+    }
+
+    .thread-mid {
+      &::before {
+        top: 0;
+        bottom: 0;
+      }
+    }
+
+    .thread-top {
+      &::before {
+        top: 16px;
+        bottom: 0;
+      }
+    }
+
+    .thread-btm {
+      &::before {
+        top: 0;
+        height: 16px;
+      }
+    }
   `;
 
   return (
@@ -308,6 +369,9 @@ const RegularToot: Component<TootCardProps> = (props) => {
         classList={{
           [tootStyle.toot]: true,
           [tootStyle.expanded]: managed.evaluated,
+          "thread-top": managed.thread === "top",
+          "thread-mid": managed.thread === "middle",
+          "thread-btm": managed.thread === "bottom",
           [managed.class || ""]: true,
         }}
         ref={rootRef!}

src/timelines/Thread.tsx

@@ -9,14 +9,19 @@ import {
 } from "solid-js";
 import CompactToot from "./CompactToot";
 import { useTimeSource } from "../platform/timesrc";
-import RegularToot from "./RegularToot";
+import RegularToot, { findRootToot } from "./RegularToot";
 import cardStyle from "../material/cards.module.css";
 import { css } from "solid-styled";
 
+type TootActionTarget = {
+  client: mastodon.rest.Client;
+  status: mastodon.v1.Status;
+};
+
 type TootActions = {
   onBoost(client: mastodon.rest.Client, status: mastodon.v1.Status): void;
   onBookmark(client: mastodon.rest.Client, status: mastodon.v1.Status): void;
-  onReply(client: mastodon.rest.Client, status: mastodon.v1.Status): void;
+  onReply(target: TootActionTarget, element: HTMLElement): void;
 };
 
 type ThreadProps = {
@@ -37,55 +42,48 @@ const Thread: Component<ThreadProps> = (props) => {
     props.onBookmark(props.client, status);
   };
 
-  const reply = (status: mastodon.v1.Status) => {
+  const reply = (
-    props.onReply(props.client, status);
+    status: mastodon.v1.Status,
+    event: MouseEvent & { currentTarget: HTMLElement },
+  ) => {
+    const element = findRootToot(event.currentTarget);
+    props.onReply({ client: props.client, status }, element);
   };
 
   css`
-    article {
+  .thread {
-      transition:
+    user-select: none;
-        margin 90ms var(--tutu-anim-curve-sharp),
+    cursor: pointer;
-        var(--tutu-transition-shadow);
+  }
-      user-select: none;
+  `
-      cursor: pointer;
-    }
-
-    .thread-line {
-      position: relative;
-      &::before {
-        content: "";
-        position: absolute;
-        left: 36px;
-        top: 16px;
-        bottom: 0;
-        background-color: var(--tutu-color-secondary);
-        width: 2px;
-        display: block;
-      }
-    }
-  `;
   return (
-    <article
+    <article ref={props.ref} class="thread">
-      ref={props.ref}
-      classList={{
-        "thread-line": props.toots.length > 1,
-      }}
-    >
       <For each={props.toots}>
-        {(status, index) => (
+        {(status, index) => {
-          <RegularToot
+          const useThread = props.toots.length > 1;
-            data-status-id={status.id}
+          const threadPosition = useThread
-            data-thread-sort={index()}
+            ? index() === 0
-            status={status}
+              ? "top"
-            class={`${cardStyle.card}`}
+              : index() === props.toots.length - 1
-            evaluated={props.isExpended(status)}
+                ? "bottom"
-            actionable={props.isExpended(status)}
+                : "middle"
-            onBookmark={(s) => bookmark(s)}
+            : undefined;
-            onRetoot={(s) => boost(s)}
+          return (
-            onReply={(s) => reply(s)}
+            <RegularToot
-            onClick={[props.onItemClick, status]}
+              data-status-id={status.id}
-          />
+              data-thread-sort={index()}
-        )}
+              status={status}
+              thread={threadPosition}
+              class={cardStyle.card}
+              evaluated={props.isExpended(status)}
+              actionable={props.isExpended(status)}
+              onBookmark={(s) => bookmark(s)}
+              onRetoot={(s) => boost(s)}
+              onReply={reply}
+              onClick={[props.onItemClick, status]}
+            />
+          );
+        }}
       </For>
     </article>
   );

src/timelines/TimelinePanel.tsx

@@ -21,7 +21,6 @@ const TimelinePanel: Component<{
   client: mastodon.rest.Client;
   name: "home" | "public";
   prefetch?: boolean;
-  fullRefetch?: number;
 
   openFullScreenToot: (
     toot: mastodon.v1.Status,
@@ -91,7 +90,7 @@ const TimelinePanel: Component<{
       <PullDownToRefresh
         linkedElement={scrollLinked()}
         loading={snapshot.loading}
-        onRefresh={() => refetchTimeline("prev")}
+        onRefresh={() => refetchTimeline("next")}
       />
       <div
         ref={(e) =>
@@ -113,27 +112,28 @@ const TimelinePanel: Component<{
         </Show>
         <For each={timeline.list}>
           {(itemId, index) => {
-            let element: HTMLElement | undefined;
             const path = timeline.getPath(itemId)!;
             const toots = path.reverse().map((x) => x.value);
 
             return (
               <Thread
-                ref={element}
                 toots={toots}
                 onBoost={onBoost}
                 onBookmark={onBookmark}
-                onReply={(client, status) =>
+                onReply={({ status }, element) =>
                   props.openFullScreenToot(status, element, true)
                 }
                 client={props.client}
                 isExpended={(status) => status.id === expandedThreadId()}
-                onItemClick={(status) => {
+                onItemClick={(status, event) => {
                   setTyping(false);
                   if (status.id !== expandedThreadId()) {
                     setExpandedThreadId((x) => (x ? undefined : status.id));
                   } else {
-                    props.openFullScreenToot(status, element);
+                    props.openFullScreenToot(
+                      status,
+                      event.currentTarget as HTMLElement,
+                    );
                   }
                 }}
               />
@@ -171,10 +171,10 @@ const TimelinePanel: Component<{
               Retry
             </Button>
           </Match>
-          <Match when={typeof props.fullRefetch === "undefined"}>
+          <Match when={true}>
             <Button
               variant="contained"
-              onClick={[refetchTimeline, "next"]}
+              onClick={[refetchTimeline, "prev"]}
               disabled={snapshot.loading}
             >
               Load More