TootList: support openFullScreenToot

src/timelines/TootList.tsx

@@ -18,6 +18,10 @@ import PullDownToRefresh from "./PullDownToRefresh";
 import TootComposer from "./TootComposer";
 import Thread from "./Thread.jsx";
 import { useDefaultSession } from "../masto/clients";
+import { useHeroSignal } from "../platform/anim";
+import { HERO as BOTTOM_SHEET_HERO } from "../material/BottomSheet";
+import { setCache as setTootBottomSheetCache } from "./TootBottomSheet";
+import { useNavigate } from "@solidjs/router";
 
 const TootList: Component<{
   ref?: Ref<HTMLDivElement>;
@@ -26,7 +30,9 @@ const TootList: Component<{
   onChangeToot: (id: string, value: mastodon.v1.Status) => void;
 }> = (props) => {
   const session = useDefaultSession();
+  const [, setHeroSrc] = useHeroSignal(BOTTOM_SHEET_HERO);
   const [expandedThreadId, setExpandedThreadId] = createSignal<string>();
+  const navigate = useNavigate();
 
   const onBookmark = async (
     client: mastodon.rest.Client,
@@ -65,6 +71,30 @@ const TootList: Component<{
     );
   };
 
+  const openFullScreenToot = (
+    toot: mastodon.v1.Status,
+    srcElement?: HTMLElement,
+    reply?: boolean,
+  ) => {
+    const p = session()?.account;
+    if (!p) return;
+    const inf = p.inf;
+    if (!inf) {
+      console.warn("no account info?");
+      return;
+    }
+    setHeroSrc(srcElement);
+    const acct = `${inf.username}@${p.site}`;
+    setTootBottomSheetCache(acct, toot);
+    navigate(`/${encodeURIComponent(acct)}/toot/${toot.id}`, {
+      state: reply
+        ? {
+            tootReply: true,
+          }
+        : undefined,
+    });
+  };
+
   return (
     <ErrorBoundary
       fallback={(err, reset) => {
@@ -82,14 +112,19 @@ const TootList: Component<{
                 toots={toots}
                 onBoost={onBoost}
                 onBookmark={onBookmark}
-                onReply={({ status }, element) => {}}
+                onReply={({ status }, element) =>
+                  openFullScreenToot(status, element, true)
+                }
                 client={session()?.client!}
                 isExpended={(status) => status.id === expandedThreadId()}
                 onItemClick={(status, event) => {
                   if (status.id !== expandedThreadId()) {
                     setExpandedThreadId((x) => (x ? undefined : status.id));
                   } else {
-                    // TODO: open full-screen toot
+                    openFullScreenToot(
+                      status,
+                      event.currentTarget as HTMLElement,
+                    );
                   }
                 }}
               />