first attempt of createTimeline in TimelinePanel

- known bug: the paging is failed

src/timelines/TimelinePanel.tsx

@@ -10,19 +10,16 @@ import {
   ErrorBoundary,
 } from "solid-js";
 import { type mastodon } from "masto";
-import {
-  Button,
-  LinearProgress,
-} from "@suid/material";
-import TootThread from "./TootThread.js";
-import { useTimeline } from "../masto/timelines";
+import { Button, LinearProgress } from "@suid/material";
+import { createTimeline } from "../masto/timelines";
 import { vibrate } from "../platform/hardware";
 import PullDownToRefresh from "./PullDownToRefresh";
 import TootComposer from "./TootComposer";
+import Thread from "./Thread.jsx";
 
 const TimelinePanel: Component<{
   client: mastodon.rest.Client;
-  name: "home" | "public" | "trends";
+  name: "home" | "public";
   prefetch?: boolean;
   fullRefetch?: number;
 
@@ -33,70 +30,56 @@ const TimelinePanel: Component<{
   ) => void;
 }> = (props) => {
   const [scrollLinked, setScrollLinked] = createSignal<HTMLElement>();
-  const [
-    timeline,
-    snapshot,
-    { refetch: refetchTimeline, mutate: mutateTimeline },
-  ] = useTimeline(
-    () =>
-      props.name !== "trends"
-        ? props.client.v1.timelines[props.name]
-        : props.client.v1.trends.statuses,
-    { fullRefresh: props.fullRefetch },
+
+  const [timeline, snapshot, { refetch: refetchTimeline }] = createTimeline(
+    () => props.client.v1.timelines[props.name],
+    () => 20,
   );
   const [expandedThreadId, setExpandedThreadId] = createSignal<string>();
   const [typing, setTyping] = createSignal(false);
 
   const tlEndObserver = new IntersectionObserver(() => {
     if (untrack(() => props.prefetch) && !snapshot.loading)
-      refetchTimeline({ direction: "old" });
+      refetchTimeline("next");
   });
 
   onCleanup(() => tlEndObserver.disconnect());
 
   const onBookmark = async (
-    index: number,
     client: mastodon.rest.Client,
     status: mastodon.v1.Status,
   ) => {
     const result = await (status.bookmarked
       ? client.v1.statuses.$select(status.id).unbookmark()
       : client.v1.statuses.$select(status.id).bookmark());
-    mutateTimeline((o) => {
-      o[index] = result;
-      return o;
-    });
+    timeline.set(result.id, result);
   };
 
   const onBoost = async (
-    index: number,
     client: mastodon.rest.Client,
     status: mastodon.v1.Status,
   ) => {
-    const reblogged = status.reblog
-      ? status.reblog.reblogged
-      : status.reblogged;
     vibrate(50);
-    mutateTimeline(index, (x) => {
-      if (x.reblog) {
-        x.reblog = { ...x.reblog, reblogged: !reblogged };
-        return Object.assign({}, x);
-      } else {
-        return Object.assign({}, x, {
+    const rootStatus = status.reblog ? status.reblog : status;
+    const reblogged = rootStatus.reblogged;
+    if (status.reblog) {
+      status.reblog = { ...status.reblog, reblogged: !reblogged };
+      timeline.set(status.id, status);
+    } else {
+      timeline.set(
+        status.id,
+        Object.assign(status, {
           reblogged: !reblogged,
-        });
-      }
-    });
+        }),
+      );
+    }
     const result = reblogged
       ? await client.v1.statuses.$select(status.id).unreblog()
       : (await client.v1.statuses.$select(status.id).reblog()).reblog!;
-    mutateTimeline((o) => {
-      Object.assign(o[index].reblog ?? o[index], {
-        reblogged: result.reblogged,
-        reblogsCount: result.reblogsCount,
-      });
-      return o;
-    });
+    timeline.set(
+      status.id,
+      Object.assign(status.reblog ?? status, result.reblog),
+    );
   };
 
   return (
@@ -108,7 +91,7 @@ const TimelinePanel: Component<{
       <PullDownToRefresh
         linkedElement={scrollLinked()}
         loading={snapshot.loading}
-        onRefresh={() => refetchTimeline({ direction: "new" })}
+        onRefresh={() => refetchTimeline("prev")}
       />
       <div
         ref={(e) =>
@@ -125,29 +108,32 @@ const TimelinePanel: Component<{
             isTyping={typing()}
             onTypingChange={setTyping}
             client={props.client}
-            onSent={() => refetchTimeline({ direction: "new" })}
+            onSent={() => refetchTimeline("prev")}
           />
         </Show>
-        <For each={timeline}>
-          {(item, index) => {
+        <For each={timeline.list}>
+          {(itemId, index) => {
             let element: HTMLElement | undefined;
+            const path = timeline.getPath(itemId)!;
+            const toots = path.reverse().map((x) => x.value);
+
             return (
-              <TootThread
+              <Thread
                 ref={element}
-                status={item}
-                onBoost={(...args) => onBoost(index(), ...args)}
-                onBookmark={(...args) => onBookmark(index(), ...args)}
+                toots={toots}
+                onBoost={onBoost}
+                onBookmark={onBookmark}
                 onReply={(client, status) =>
                   props.openFullScreenToot(status, element, true)
                 }
                 client={props.client}
-                expanded={item.id === expandedThreadId() ? 1 : 0}
-                onExpandChange={(x) => {
-                  setTyping(false)
-                  if (item.id !== expandedThreadId()) {
-                    setExpandedThreadId((x) => (x ? undefined : item.id));
-                  } else if (x === 2) {
-                    props.openFullScreenToot(item, element);
+                isExpended={(status) => status.id === expandedThreadId()}
+                onItemClick={(status) => {
+                  setTyping(false);
+                  if (status.id !== expandedThreadId()) {
+                    setExpandedThreadId((x) => (x ? undefined : status.id));
+                  } else {
+                    props.openFullScreenToot(status, element);
                   }
                 }}
               />
@@ -179,7 +165,7 @@ const TimelinePanel: Component<{
           <Match when={snapshot.error}>
             <Button
               variant="contained"
-              onClick={[refetchTimeline, "old"]}
+              onClick={[refetchTimeline, "next"]}
               disabled={snapshot.loading}
             >
               Retry
@@ -188,7 +174,7 @@ const TimelinePanel: Component<{
           <Match when={typeof props.fullRefetch === "undefined"}>
             <Button
               variant="contained"
-              onClick={[refetchTimeline, "old"]}
+              onClick={[refetchTimeline, "next"]}
               disabled={snapshot.loading}
             >
               Load More
@@ -200,4 +186,4 @@ const TimelinePanel: Component<{
   );
 };
 
-export default TimelinePanel
+export default TimelinePanel;