first attempt of createTimeline in TimelinePanel

- known bug: the paging is failed

src/masto/timelines.ts

@@ -1,5 +1,14 @@
+import { ReactiveMap } from "@solid-primitives/map";
 import { type mastodon } from "masto";
-import { Accessor, catchError, createEffect, createResource } from "solid-js";
+import {
+  Accessor,
+  batch,
+  catchError,
+  createEffect,
+  createResource,
+  untrack,
+  type ResourceFetcherInfo,
+} from "solid-js";
 import { createStore } from "solid-js/store";
 
 type TimelineFetchTips = {
@@ -164,6 +173,148 @@ export function createTimelineSnapshot(
   ] as const;
 }
 
-export function createTimeline(timeline: Accessor<Timeline>) {
-  // TODO
+export type TimelineFetchDirection = mastodon.Direction;
+
+export type TimelineChunk = {
+  pager: mastodon.Paginator<mastodon.v1.Status[], unknown>;
+  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;
+  children?: TreeNode<T>[];
+};
+
+/** Collect the path of a node for the root.
+ * The first element is the node itself, the last element is the root.
+ */
+function collectPath<T>(node: TreeNode<T>) {
+  const path = [node] as TreeNode<T>[];
+  let current = node;
+  while (current.parent) {
+    path.push(current.parent);
+    current = current.parent;
+  }
+  return path;
+}
+
+export function createTimeline(
+  timeline: Accessor<Timeline>,
+  limit: Accessor<number>,
+) {
+  const lookup = new ReactiveMap<string, TreeNode<mastodon.v1.Status>>();
+  const [threads, setThreads] = createStore([] as mastodon.v1.Status["id"][]);
+
+  const [chunk, { refetch }] = createResource(
+    () => [timeline(), limit()] as const,
+    async (
+      [tl, limit],
+      info: ResourceFetcherInfo<
+        Readonly<TimelineChunk>,
+        TimelineFetchDirection
+      >,
+    ) => {
+      const direction =
+        typeof info.refetching === "boolean" ? "prev" : info.refetching;
+      const rebuildTimeline = limit !== info.value?.limit;
+      const pager = rebuildTimeline
+        ? checkOrCreatePager(tl, limit, undefined, direction)
+        : checkOrCreatePager(tl, limit, info.value?.pager, direction);
+      if (rebuildTimeline) {
+        lookup.clear();
+        setThreads([]);
+      }
+      const posts = await pager.next();
+      return {
+        pager,
+        chunk: posts.value ?? [],
+        done: posts.done,
+        direction,
+        limit,
+      };
+    },
+  );
+
+  createEffect(() => {
+    const chk = catchError(chunk, (e) => console.error(e));
+    if (!chk) {
+      return;
+    }
+    console.debug("fetched chunk", chk);
+
+    batch(() => {
+      for (const status of chk.chunk) {
+        lookup.set(status.id, {
+          value: status,
+        });
+      }
+
+      for (const status of chk.chunk) {
+        const node = lookup.get(status.id)!;
+        if (status.inReplyToId) {
+          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") {
+        setThreads((threads) => [...chk.chunk.map((x) => x.id), ...threads]);
+      }
+
+      setThreads((threads) =>
+        threads.filter((id) => (lookup.get(id)!.children?.length ?? 0) === 0),
+      );
+    });
+  });
+
+  return [
+    {
+      list: threads,
+      get(id: string) {
+        return lookup.get(id);
+      },
+      getPath(id: string) {
+        const node = lookup.get(id);
+        if (!node) return;
+        return collectPath(node);
+      },
+      set(id: string, value: mastodon.v1.Status) {
+        const node = untrack(() => lookup.get(id));
+        if (!node) return;
+        node.value = value;
+        lookup.set(id, node);
+      },
+    },
+    chunk,
+    { refetch },
+  ] as const;
 }