{Trend,}TimelinePanel: use TootList

src/masto/timelines.ts

@@ -20,52 +20,77 @@ type TimelineParamsOf<T> = T extends Timeline<infer P> ? P : never;
 export function createTimelineSnapshot<
   T extends Timeline<mastodon.DefaultPaginationParams>,
 >(timeline: Accessor<T>, limit: Accessor<number>) {
+  const lookup = new ReactiveMap<string, TreeNode<mastodon.v1.Status>>();
   const [shot, { refetch }] = createResource(
     () => [timeline(), limit()] as const,
     async ([tl, limit]) => {
       const ls = await tl.list({ limit }).next();
-      return ls.value?.map((x) => [x]) ?? [];
+      return ls.value;
     },
   );
 
-  const [snapshot, setSnapshot] = createStore([] as mastodon.v1.Status[][]);
+  const [threads, setThreads] = createStore([] as mastodon.v1.Status["id"][]);
 
   createEffect(() => {
     const nls = catchError(shot, (e) => console.error(e));
     if (!nls) return;
-    const ols = Array.from(snapshot);
-    // The algorithm below assumes the snapshot is not changing
-    for (let i = 0; i < nls.length; i++) {
-      if (i >= ols.length) {
-        setSnapshot(i, nls[i]);
-      } else {
-        if (nls[i].length !== ols[i].length) {
-          setSnapshot(i, nls[i]);
-        } else {
-          const oth = ols[i],
-            nth = nls[i];
-          for (let j = 0; j < oth.length; j++) {
-            const ost = oth[j],
-              nst = nth[j];
-            for (const key of Object.keys(
-              nst,
-            ) as unknown as (keyof mastodon.v1.Status)[]) {
-              if (ost[key] !== nst[key]) {
-                setSnapshot(i, j, key, nst[key]);
-              }
-            }
+
+    setThreads([]);
+    lookup.clear();
+
+    const existence = [] as boolean[];
+
+    for (const [idx, status] of nls.entries()) {
+      existence[idx] = !!untrack(() => lookup.get(status.id));
+      lookup.set(status.id, {
+        value: status,
+      });
+    }
+
+    for (const status of nls) {
+      const node = untrack(() => 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;
         }
       }
     }
+
+    const newThreads = nls
+      .filter((x, i) => !existence[i])
+      .map((x) => x.id)
+      .filter((id) => (lookup.get(id)!.children?.length ?? 0) === 0);
+
+    setThreads(newThreads);
   });
 
   return [
-    snapshot,
+    {
+      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);
+      },
+    },
     shot,
     {
       refetch,
-      mutate: setSnapshot,
     },
   ] as const;
 }
@@ -100,10 +125,9 @@ function collectPath<T>(node: TreeNode<T>) {
   return path;
 }
 
-function createTimelineChunk<T extends Timeline<mastodon.DefaultPaginationParams>>(
-  timeline: Accessor<T>,
-  params: Accessor<TimelineParamsOf<T>>,
-) {
+function createTimelineChunk<
+  T extends Timeline<mastodon.DefaultPaginationParams>,
+>(timeline: Accessor<T>, params: Accessor<TimelineParamsOf<T>>) {
   let vpMaxId: string | undefined, vpMinId: string | undefined;
 
   const fetchExtendingPage = async (