TootBottomSheet: basic toot switching (#6)

src/timelines/TootBottomSheet.tsx

@@ -1,4 +1,4 @@
-import { useNavigate, useParams } from "@solidjs/router";
+import { useLocation, useNavigate, useParams } from "@solidjs/router";
 import {
   createEffect,
   createRenderEffect,
@@ -17,7 +17,11 @@ import {
   Toolbar,
 } from "@suid/material";
 import { Title } from "../material/typography";
-import { Close as CloseIcon, Send } from "@suid/icons-material";
+import {
+  ArrowBack as BackIcon,
+  Close as CloseIcon,
+  Send,
+} from "@suid/icons-material";
 import { isiOS } from "../platform/host";
 import { createUnauthorizedClient, useSessions } from "../masto/clients";
 import { resolveCustomEmoji } from "../masto/toot";
@@ -41,6 +45,7 @@ function getCache(acct: string, id: string) {
 
 const TootBottomSheet: Component = (props) => {
   const params = useParams<{ acct: string; id: string }>();
+  const location = useLocation<{ tootBottomSheetPushedCount?: number }>();
   const navigate = useNavigate();
   const allSession = useSessions();
   const acctText = () => decodeURIComponent(params.acct);
@@ -62,6 +67,10 @@ const TootBottomSheet: Component = (props) => {
     return session().account;
   };
 
+  const pushedCount = () => {
+    return location.state?.tootBottomSheetPushedCount || 0;
+  };
+
   const [remoteToot, { mutate: setRemoteToot }] = createResource(
     () => [session().client, params.id] as const,
     async ([client, id]) => {
@@ -71,6 +80,13 @@ const TootBottomSheet: Component = (props) => {
 
   const toot = () => remoteToot() ?? getCache(acctText(), params.id);
 
+  createEffect(() => {
+    const tootId = toot()?.id;
+    if (!tootId) return;
+    const elementId = `toot-${tootId}`;
+    document.getElementById(elementId)?.scrollIntoView({ behavior: "smooth" });
+  });
+
   const [tootContext] = createResource(
     () => [session().client, params.id] as const,
     async ([client, id]) => {
@@ -135,6 +151,15 @@ const TootBottomSheet: Component = (props) => {
     setRemoteToot(result);
   };
 
+  const switchContext = (status: mastodon.v1.Status) => {
+    setCache(params.acct, status);
+    navigate(`/${params.acct}/${status.id}`, {
+      state: {
+        tootBottomSheetPushedCount: pushedCount() + 1,
+      },
+    });
+  };
+
   css`
     .bottom-dock {
       position: sticky;
@@ -162,7 +187,7 @@ const TootBottomSheet: Component = (props) => {
             sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
           >
             <IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
-              <CloseIcon />
+              {pushedCount() > 0 ? <BackIcon /> : <CloseIcon />}
             </IconButton>
             <Title
               class="name"
@@ -181,6 +206,7 @@ const TootBottomSheet: Component = (props) => {
             class={cards.card}
             status={item}
             actionable={false}
+            onClick={[switchContext, item]}
           ></RegularToot>
         )}
       </For>
@@ -222,6 +248,7 @@ const TootBottomSheet: Component = (props) => {
             class={cards.card}
             status={item}
             actionable={false}
+            onClick={[switchContext, item]}
           ></RegularToot>
         )}
       </For>