package.json

@@ -33,7 +33,6 @@
     "@solid-primitives/event-listener": "^2.3.3",
     "@solid-primitives/i18n": "^2.1.1",
     "@solid-primitives/intersection-observer": "^2.1.6",
-    "@solid-primitives/map": "^0.4.13",
     "@solid-primitives/resize-observer": "^2.0.26",
     "@solidjs/router": "^0.14.5",
     "@suid/icons-material": "^0.8.0",

src/masto/timelines.ts

@@ -1,14 +1,5 @@
-import { ReactiveMap } from "@solid-primitives/map";
 import { type mastodon } from "masto";
-import {
-  Accessor,
-  batch,
-  catchError,
-  createEffect,
-  createResource,
-  untrack,
-  type ResourceFetcherInfo,
-} from "solid-js";
+import { Accessor, catchError, createEffect, createResource } from "solid-js";
 import { createStore } from "solid-js/store";
 
 type TimelineFetchTips = {
@@ -173,148 +164,6 @@ export function createTimelineSnapshot(
   ] as const;
 }
 
-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;
+export function createTimeline(timeline: Accessor<Timeline>) {
+  // TODO
 }

src/timelines/TimelinePanel.tsx

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

src/timelines/TootBottomSheet.tsx

@@ -62,6 +62,9 @@ const TootBottomSheet: Component = (props) => {
       }
     );
   };
+  const profile = () => {
+    return session().account;
+  };
 
   const pushedCount = () => {
     return location.state?.tootBottomSheetPushedCount || 0;