Thread: removed

src/timelines/TootList.tsx

@@ -5,16 +5,30 @@ 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";
+
+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>;
@@ -28,20 +42,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;
@@ -110,8 +124,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,13 +170,6 @@ const TootList: Component<{
   const checkIsExpended = (status: mastodon.v1.Status) =>
     checkIsExpendedId(status.id);
 
-  const onReply = (
-    { status }: { status: mastodon.v1.Status },
-    element: HTMLElement,
-  ) => {
-    openFullScreenToot(status, element, true);
-  };
-
   const getPath = (itemId: string) => {
     return props
       .onUnknownThread(itemId)!
@@ -176,17 +186,33 @@ const TootList: Component<{
       <div ref={props.ref} id={props.id} class="toot-list">
         <For each={props.threads}>
           {(itemId) => {
+            const toots = createMemo(() => getPath(itemId));
             return (
-              <Thread
-                toots={getPath(itemId)}
-                onBoost={toggleBoost}
-                onBookmark={onBookmark}
-                onReply={onReply}
-                onFavourite={toggleFavourite}
-                client={session()?.client!}
-                isExpended={checkIsExpended}
-                onItemClick={onItemClick}
-              />
+              <Index each={toots()}>
+                {(status, index) => (
+                  <RegularToot
+                    data-status-id={status().id}
+                    data-thread-sort={index}
+                    status={status()}
+                    thread={
+                      toots().length > 1
+                        ? positionTootInThread(index, toots().length)
+                        : undefined
+                    }
+                    class={cardStyle.card}
+                    evaluated={checkIsExpended(status())}
+                    actionable={checkIsExpended(status())}
+                    onBookmark={onBookmark}
+                    onRetoot={toggleBoost}
+                    onFavourite={toggleFavourite}
+                    onReply={(status, event) => {
+                      const element = findRootToot(event.currentTarget);
+                      openFullScreenToot(status, element, true);
+                    }}
+                    onClick={[onItemClick, status()]}
+                  />
+                )}
+              </Index>
             );
           }}
         </For>