diff --git a/src/timelines/TootBottomSheet.tsx b/src/timelines/TootBottomSheet.tsx index dc3a7ea..8b8ecb7 100644 --- a/src/timelines/TootBottomSheet.tsx +++ b/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)" }} > - + {pushedCount() > 0 ? : } { 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>