import { useNavigate, useParams } from "@solidjs/router"; import { createResource, Show, type Component } from "solid-js"; import Scaffold from "../material/Scaffold"; import TootThread from "./TootThread"; import { AppBar, IconButton, Toolbar } from "@suid/material"; import { Title } from "../material/typography"; import { Close as CloseIcon } from "@suid/icons-material"; import { isiOS } from "../platform/host"; import { createUnauthorizedClient, useSessions } from "../masto/clients"; import { resolveCustomEmoji } from "../masto/toot"; import RegularToot from "./RegularToot"; const TootBottomSheet: Component = (props) => { const params = useParams<{ acct: string; id: string }>(); const navigate = useNavigate(); const allSession = useSessions(); const session = () => { const [inputUsername, inputSite] = decodeURIComponent(params.acct).split( "@", 2, ); const authedSession = allSession().find( (x) => x.account.site === inputSite && x.account.inf?.username === inputUsername, ); return authedSession ?? { client: createUnauthorizedClient(inputSite) }; }; const [remoteToot] = createResource( () => [session().client, params.id] as const, async ([client, id]) => { return await client.v1.statuses.$select(id).fetch(); }, ); const toot = remoteToot; const tootTitle = () => { const t = toot(); if (t) { const name = resolveCustomEmoji(t.account.displayName, t.account.emojis); return `${name}'s toot`; } return "A toot"; }; return ( <Scaffold topbar={ <AppBar sx={{ backgroundColor: "var(--tutu-color-surface)", color: "var(--tutu-color-on-surface)", }} elevation={1} position="static" > <Toolbar variant="dense" sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }} > <IconButton color="inherit" onClick={[navigate, -1]} disableRipple> <CloseIcon /> </IconButton> <Title>{tootTitle}</Title> </Toolbar> </AppBar> } > <div> <Show when={toot()}> <RegularToot status={toot()!}></RegularToot> </Show> </div> </Scaffold> ); }; export default TootBottomSheet;