{Trend,}TimelinePanel: use TootList

src/timelines/TootList.tsx

@@ -1,24 +1,16 @@
 import {
   Component,
   For,
-  onCleanup,
   createSignal,
-  Show,
-  untrack,
-  Match,
-  Switch as JsSwitch,
   ErrorBoundary,
   type Ref,
+  createSelector,
 } from "solid-js";
 import { type mastodon } from "masto";
-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";
 import { useDefaultSession } from "../masto/clients";
-import { useHeroSignal } from "../platform/anim";
+import { useHeroSignal, useHeroSource } from "../platform/anim";
 import { HERO as BOTTOM_SHEET_HERO } from "../material/BottomSheet";
 import { setCache as setTootBottomSheetCache } from "./TootBottomSheet";
 import { useNavigate } from "@solidjs/router";
@@ -30,7 +22,7 @@ const TootList: Component<{
   onChangeToot: (id: string, value: mastodon.v1.Status) => void;
 }> = (props) => {
   const session = useDefaultSession();
-  const [, setHeroSrc] = useHeroSignal(BOTTOM_SHEET_HERO);
+  const heroSrc = useHeroSource();
   const [expandedThreadId, setExpandedThreadId] = createSignal<string>();
   const navigate = useNavigate();
 
@@ -83,7 +75,10 @@ const TootList: Component<{
       console.warn("no account info?");
       return;
     }
-    setHeroSrc(srcElement);
+    if (heroSrc) {
+      heroSrc[1]((x) => ({ ...x, [BOTTOM_SHEET_HERO]: srcElement }));
+    }
+
     const acct = `${inf.username}@${p.site}`;
     setTootBottomSheetCache(acct, toot);
     navigate(`/${encodeURIComponent(acct)}/toot/${toot.id}`, {
@@ -95,6 +90,26 @@ const TootList: Component<{
     });
   };
 
+  const onItemClick = (status: mastodon.v1.Status, event: MouseEvent) => {
+    if (status.id !== expandedThreadId()) {
+      setExpandedThreadId((x) => (x ? undefined : status.id));
+    } else {
+      openFullScreenToot(status, event.currentTarget as HTMLElement);
+    }
+  };
+
+  const checkIsExpendedId = createSelector(expandedThreadId);
+
+  const checkIsExpended = (status: mastodon.v1.Status) =>
+    checkIsExpendedId(status.id);
+
+  const onReply = (
+    { status }: { status: mastodon.v1.Status },
+    element: HTMLElement,
+  ) => {
+    openFullScreenToot(status, element, true);
+  };
+
   return (
     <ErrorBoundary
       fallback={(err, reset) => {
@@ -112,21 +127,10 @@ const TootList: Component<{
                 toots={toots}
                 onBoost={onBoost}
                 onBookmark={onBookmark}
-                onReply={({ status }, element) =>
-                  openFullScreenToot(status, element, true)
-                }
+                onReply={onReply}
                 client={session()?.client!}
-                isExpended={(status) => status.id === expandedThreadId()}
-                onItemClick={(status, event) => {
-                  if (status.id !== expandedThreadId()) {
-                    setExpandedThreadId((x) => (x ? undefined : status.id));
-                  } else {
-                    openFullScreenToot(
-                      status,
-                      event.currentTarget as HTMLElement,
-                    );
-                  }
-                }}
+                isExpended={checkIsExpended}
+                onItemClick={onItemClick}
               />
             );
           }}