fix #35: the actions don't update the status

src/masto/timelines.ts

@@ -18,9 +18,9 @@ type Timeline<T extends mastodon.DefaultPaginationParams> = {
 
 type TimelineParamsOf<T> = T extends Timeline<infer P> ? P : never;
 
-function createControlsForLookup(
-  lookup: ReactiveMap<string, TreeNode<mastodon.v1.Status>>,
-) {
+export type ThreadNode = TreeNode<mastodon.v1.Status>;
+
+function createControlsForLookup(lookup: ReactiveMap<string, ThreadNode>) {
   return {
     get(id: string) {
       return lookup.get(id);
@@ -37,7 +37,7 @@ function createControlsForLookup(
     set(id: string, value: mastodon.v1.Status) {
       const node = untrack(() => lookup.get(id));
       if (!node) return;
-      lookup.set(id, {...node, value});
+      lookup.set(id, { ...node, value });
     },
   };
 }
@@ -45,7 +45,7 @@ function createControlsForLookup(
 export function createTimelineControlsForArray(
   status: () => mastodon.v1.Status[] | undefined,
 ): TimelineControls {
-  const lookup = new ReactiveMap<string, TreeNode<mastodon.v1.Status>>();
+  const lookup = new ReactiveMap<string, ThreadNode>();
 
   const [threads, setThreads] = createStore([] as mastodon.v1.Status["id"][]);
 
@@ -55,22 +55,24 @@ export function createTimelineControlsForArray(
     });
     if (!nls) return;
 
-    setThreads([]);
-    lookup.clear();
+    batch(() => {
+      setThreads([]);
+      lookup.clear();
 
-    const existence = [] as boolean[];
+      for (const status of nls) {
+        lookup.set(status.id, {
+          value: status,
+        });
+      }
+    });
 
-    for (const [idx, status] of nls.entries()) {
-      existence[idx] = !!untrack(() => lookup.get(status.id));
-      lookup.set(status.id, {
-        value: status,
-      });
-    }
+    untrack(() => {
+      for (const status of nls) {
+        const node = lookup.get(status.id)!;
+        const parent = status.inReplyToId
+          ? lookup.get(status.inReplyToId)
+          : undefined;
 
-    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)) {
@@ -80,12 +82,13 @@ export function createTimelineControlsForArray(
           node.parent = parent;
         }
       }
-    }
+    });
 
-    const newThreads = nls
-      .filter((x, i) => !existence[i])
-      .map((x) => x.id)
-      .filter((id) => (lookup.get(id)!.children?.length ?? 0) === 0);
+    const newThreads = untrack(() =>
+      nls
+        .map((x) => x.id)
+        .filter((id) => (lookup.get(id)!.children?.length ?? 0) === 0),
+    );
 
     setThreads(newThreads);
   });
@@ -269,32 +272,34 @@ export function createTimeline<
       return;
     }
 
-    if (chk.rebuilt) {
-      lookup.clear();
-      setThreads([]);
-    }
-
     const existence = [] as boolean[];
 
-    for (const [idx, status] of chk.chunk.entries()) {
-      existence[idx] = !!untrack(() => lookup.get(status.id));
-      lookup.set(status.id, {
-        value: status,
-      });
-    }
+    batch(() => {
+      if (chk.rebuilt) {
+        lookup.clear();
+        setThreads([]);
+      }
+
+      for (const [idx, status] of chk.chunk.entries()) {
+        existence[idx] = !!untrack(() => lookup.get(status.id));
+        lookup.set(status.id, {
+          value: status,
+        });
+      }
+    });
 
     for (const status of chk.chunk) {
       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 parent = untrack(() =>
+        status.inReplyToId ? lookup.get(status.inReplyToId) : undefined,
+      );
+      if (parent) {
+        const children = parent.children ?? [];
+        if (!children.find((x) => x.value.id == status.id)) {
+          children.push(node);
         }
+        parent.children = children;
+        node.parent = parent;
       }
     }
 

src/timelines/Thread.tsx

@@ -1,90 +0,0 @@
-import type { mastodon } from "masto";
-import { Index, type Component, type Ref } from "solid-js";
-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(target: TootActionTarget, element: HTMLElement): void;
-  onFavourite(status: mastodon.v1.Status): void
-};
-
-type ThreadProps = {
-  ref?: Ref<HTMLElement>;
-  client: mastodon.rest.Client;
-  toots: readonly mastodon.v1.Status[];
-  isExpended: (status: mastodon.v1.Status) => boolean;
-
-  onItemClick(status: mastodon.v1.Status, event: MouseEvent): void;
-} & TootActions;
-
-const Thread: Component<ThreadProps> = (props) => {
-  const boost = (status: mastodon.v1.Status) => {
-    props.onBoost(props.client, status);
-  };
-
-  const bookmark = (status: mastodon.v1.Status) => {
-    props.onBookmark(props.client, status);
-  };
-
-  const reply = (
-    status: mastodon.v1.Status,
-    event: MouseEvent & { currentTarget: HTMLElement },
-  ) => {
-    const element = findRootToot(event.currentTarget);
-    props.onReply({ client: props.client, status }, element);
-  };
-
-  const threading = () => props.toots.length > 1;
-
-  const posThread = (index: number) => {
-    if (!threading()) return;
-
-    if (index === 0) {
-      return "top";
-    } else if (index === props.toots.length - 1) {
-      return "bottom";
-    }
-    return "middle";
-  };
-
-  css`
-    .thread {
-      user-select: none;
-      cursor: pointer;
-    }
-  `;
-  return (
-    <article ref={props.ref} class="thread" aria-setsize={props.toots.length}>
-      <Index each={props.toots}>
-        {(status, index) => {
-          return (
-            <RegularToot
-              data-status-id={status().id}
-              data-thread-sort={index}
-              status={status()}
-              thread={posThread(index)}
-              class={cardStyle.card}
-              evaluated={props.isExpended(status())}
-              actionable={props.isExpended(status())}
-              onBookmark={(s) => bookmark(s)}
-              onRetoot={(s) => boost(s)}
-              onFavourite={props.onFavourite}
-              onReply={reply}
-              onClick={[props.onItemClick, status()]}
-            />
-          );
-        }}
-      </Index>
-    </article>
-  );
-};
-
-export default Thread;

src/timelines/TootBottomSheet.tsx

@@ -58,9 +58,10 @@ const TootBottomSheet: Component = (props) => {
     },
   );
 
-  const toot = () => catchError(remoteToot, (error) => {
-    console.error(error)
-  }) ?? getCache(acctText(), params.id);
+  const toot = () =>
+    catchError(remoteToot, (error) => {
+      console.error(error);
+    }) ?? getCache(acctText(), params.id);
 
   createEffect((lastTootId?: string) => {
     const tootId = toot()?.id;

src/timelines/TootList.tsx

@@ -5,22 +5,38 @@ import {
   ErrorBoundary,
   type Ref,
   createSelector,
+  Index,
+  createMemo,
 } from "solid-js";
 import { type mastodon } from "masto";
 import { vibrate } from "../platform/hardware";
-import Thread from "./Thread.jsx";
 import { useDefaultSession } from "../masto/clients";
 import { useHeroSource } from "../platform/anim";
 import { HERO as BOTTOM_SHEET_HERO } from "../material/BottomSheet";
 import { setCache as setTootBottomSheetCache } from "./TootBottomSheet";
 import { useNavigate } from "@solidjs/router";
-import { findElementActionable } from "./RegularToot";
+import RegularToot, {
+  findElementActionable,
+  findRootToot,
+} from "./RegularToot";
+import cardStyle from "../material/cards.module.css";
+import type { ReactiveMap } from "@solid-primitives/map";
+import type { ThreadNode } from "../masto/timelines";
+
+function positionTootInThread(index: number, threadLength: number) {
+  if (index === 0) {
+    return "top";
+  } else if (index === threadLength - 1) {
+    return "bottom";
+  }
+  return "middle";
+}
 
 const TootList: Component<{
   ref?: Ref<HTMLDivElement>;
   id?: string;
   threads: readonly string[];
-  onUnknownThread: (id: string) => { value: mastodon.v1.Status }[] | undefined;
+  onUnknownThread: (id: string) => ThreadNode[] | undefined;
   onChangeToot: (id: string, value: mastodon.v1.Status) => void;
 }> = (props) => {
   const session = useDefaultSession();
@@ -28,20 +44,20 @@ const TootList: Component<{
   const [expandedThreadId, setExpandedThreadId] = createSignal<string>();
   const navigate = useNavigate();
 
-  const onBookmark = async (
-    client: mastodon.rest.Client,
-    status: mastodon.v1.Status,
-  ) => {
+  const onBookmark = async (status: mastodon.v1.Status) => {
+    const client = session()?.client;
+    if (!client) return;
+
     const result = await (status.bookmarked
       ? client.v1.statuses.$select(status.id).unbookmark()
       : client.v1.statuses.$select(status.id).bookmark());
     props.onChangeToot(result.id, result);
   };
 
-  const toggleBoost = async (
-    client: mastodon.rest.Client,
-    status: mastodon.v1.Status,
-  ) => {
+  const toggleBoost = async (status: mastodon.v1.Status) => {
+    const client = session()?.client;
+    if (!client) return;
+
     vibrate(50);
     const rootStatus = status.reblog ? status.reblog : status;
     const reblogged = rootStatus.reblogged;
@@ -57,7 +73,7 @@ const TootList: Component<{
       });
     }
 
-    const result = reblogged
+    /* const result = reblogged
       ? await client.v1.statuses.$select(status.id).unreblog()
       : (await client.v1.statuses.$select(status.id).reblog()).reblog!;
 
@@ -68,13 +84,15 @@ const TootList: Component<{
       });
     } else {
       props.onChangeToot(status.id, result);
-    }
+    } */
   };
 
   const toggleFavourite = async (status: mastodon.v1.Status) => {
     const client = session()?.client;
     if (!client) return;
     const ovalue = status.favourited;
+    props.onChangeToot(status.id, { ...status, favourited: !ovalue });
+
     const result = ovalue
       ? await client.v1.statuses.$select(status.id).unfavourite()
       : await client.v1.statuses.$select(status.id).favourite();
@@ -110,8 +128,11 @@ const TootList: Component<{
 
   const onItemClick = (
     status: mastodon.v1.Status,
-    event: MouseEvent & { target: HTMLElement; currentTarget: HTMLElement },
+    event: MouseEvent & { target: EventTarget; currentTarget: HTMLElement },
   ) => {
+    if (!(event.target instanceof HTMLElement)) {
+      throw new Error("target is not an element");
+    }
     const actionableElement = findElementActionable(
       event.target,
       event.currentTarget,
@@ -153,20 +174,14 @@ const TootList: Component<{
   const checkIsExpended = (status: mastodon.v1.Status) =>
     checkIsExpendedId(status.id);
 
-  const onReply = (
-    { status }: { status: mastodon.v1.Status },
-    element: HTMLElement,
+  const reply = (
+    status: mastodon.v1.Status,
+    event: { currentTarget: HTMLElement },
   ) => {
+    const element = findRootToot(event.currentTarget);
     openFullScreenToot(status, element, true);
   };
 
-  const getPath = (itemId: string) => {
-    return props
-      .onUnknownThread(itemId)!
-      .reverse()
-      .map((x) => x.value);
-  };
-
   return (
     <ErrorBoundary
       fallback={(err, reset) => {
@@ -174,22 +189,46 @@ const TootList: Component<{
       }}
     >
       <div ref={props.ref} id={props.id} class="toot-list">
-        <For each={props.threads}>
-          {(itemId) => {
+        <Index each={props.threads}>
+          {(threadId, threadIdx) => {
+            const thread = createMemo(() =>
+              props.onUnknownThread(threadId())?.reverse(),
+            );
+
+            const threadLength = () => thread()?.length ?? 0;
+
             return (
-              <Thread
-                toots={getPath(itemId)}
-                onBoost={toggleBoost}
-                onBookmark={onBookmark}
-                onReply={onReply}
-                onFavourite={toggleFavourite}
-                client={session()?.client!}
-                isExpended={checkIsExpended}
-                onItemClick={onItemClick}
-              />
+              <Index each={thread()}>
+                {(threadNode, index) => {
+                  const status = () => threadNode().value;
+
+                  return (
+                    <RegularToot
+                      data-status-id={status().id}
+                      data-thread={threadIdx}
+                      data-thread-len={threadLength()}
+                      data-thread-sort={index}
+                      status={status()}
+                      thread={
+                        threadLength() > 1
+                          ? positionTootInThread(index, threadLength())
+                          : undefined
+                      }
+                      class={cardStyle.card}
+                      evaluated={checkIsExpended(status())}
+                      actionable={checkIsExpended(status())}
+                      onBookmark={onBookmark}
+                      onRetoot={toggleBoost}
+                      onFavourite={toggleFavourite}
+                      onReply={reply}
+                      onClick={[onItemClick, status()]}
+                    />
+                  );
+                }}
+              </Index>
             );
           }}
-        </For>
+        </Index>
       </div>
     </ErrorBoundary>
   );

src/timelines/TrendTimelinePanel.tsx

@@ -1,18 +1,14 @@
 import {
   Component,
-  For,
   createSignal,
   Match,
   Switch as JsSwitch,
   ErrorBoundary,
-  createSelector,
 } from "solid-js";
 import { type mastodon } from "masto";
 import { Button } from "@suid/material";
 import { createTimelineSnapshot } from "../masto/timelines.js";
-import { vibrate } from "../platform/hardware.js";
 import PullDownToRefresh from "./PullDownToRefresh.jsx";
-import Thread from "./Thread.jsx";
 import TootList from "./TootList.jsx";
 
 const TrendTimelinePanel: Component<{
@@ -25,11 +21,10 @@ const TrendTimelinePanel: Component<{
   ) => void;
 }> = (props) => {
   const [scrollLinked, setScrollLinked] = createSignal<HTMLElement>();
-  const [timeline, snapshot, { refetch: refetchTimeline }] =
-    createTimelineSnapshot(
-      () => props.client.v1.trends.statuses,
-      () => ({ limit: 120 }),
-    );
+  const [tl, snapshot, { refetch: refetchTimeline }] = createTimelineSnapshot(
+    () => props.client.v1.trends.statuses,
+    () => ({ limit: 120 }),
+  );
 
   return (
     <ErrorBoundary
@@ -50,9 +45,9 @@ const TrendTimelinePanel: Component<{
         }
       >
         <TootList
-          threads={timeline.list}
-          onUnknownThread={timeline.getPath}
-          onChangeToot={timeline.set}
+          threads={tl.list}
+          onUnknownThread={tl.getPath}
+          onChangeToot={tl.set}
         />
       </div>
       <div

src/timelines/toot.module.css

@@ -6,6 +6,12 @@
   position: relative;
   contain: content;
 
+  &:not(.expanded) {
+    user-select: none;
+    cursor: pointer;
+  }
+
+
   &.toot {
     /* fix composition ordering: I think the css module processor should aware the overriding and behaves, but no */
     transition: