import { useLocation, useNavigate, useParams } from "@solidjs/router"; import { createEffect, createRenderEffect, createResource, createSignal, For, Show, type Component, } from "solid-js"; import Scaffold from "../material/Scaffold"; import { AppBar, CircularProgress, IconButton, Toolbar } from "@suid/material"; import { Title } from "../material/typography"; import { ArrowBack as BackIcon, Close as CloseIcon, } from "@suid/icons-material"; import { createUnauthorizedClient, useSessions } from "../masto/clients"; import { resolveCustomEmoji } from "../masto/toot"; import RegularToot from "./RegularToot"; import type { mastodon } from "masto"; import cards from "../material/cards.module.css"; import { css } from "solid-styled"; import { vibrate } from "../platform/hardware"; import { createTimeSource, TimeSourceProvider } from "../platform/timesrc"; import TootComposer from "./TootComposer"; import { useDocumentTitle } from "../utils"; let cachedEntry: [string, mastodon.v1.Status] | undefined; export function setCache(acct: string, status: mastodon.v1.Status) { cachedEntry = [acct, status]; } function getCache(acct: string, id: string) { if (acct === cachedEntry?.[0] && id === cachedEntry?.[1].id) { return cachedEntry[1]; } } const TootBottomSheet: Component = (props) => { const params = useParams<{ acct: string; id: string }>(); const location = useLocation<{ tootBottomSheetPushedCount?: number; tootReply?: boolean; }>(); const navigate = useNavigate(); const allSession = useSessions(); const time = createTimeSource(); const [isInTyping, setInTyping] = createSignal(false); const acctText = () => decodeURIComponent(params.acct); const session = () => { const [inputUsername, inputSite] = acctText().split("@", 2); const authedSession = allSession().find( (x) => x.account.site === inputSite && x.account.inf?.username === inputUsername, ); return ( authedSession ?? { client: createUnauthorizedClient(inputSite), account: undefined, } ); }; const pushedCount = () => { return location.state?.tootBottomSheetPushedCount || 0; }; const [remoteToot, { mutate: setRemoteToot }] = createResource( () => [session().client, params.id] as const, async ([client, id]) => { return await client.v1.statuses.$select(id).fetch(); }, ); const toot = () => remoteToot() ?? getCache(acctText(), params.id); createEffect((lastTootId?: string) => { const tootId = toot()?.id; if (!tootId || lastTootId === tootId) return tootId; const elementId = `toot-${tootId}`; document.getElementById(elementId)?.scrollIntoView({ behavior: "smooth" }); return tootId; }); createEffect(() => { if (location.state?.tootReply) { setInTyping(true); } }); const [tootContext, { refetch: refetchContext }] = createResource( () => [session().client, params.id] as const, async ([client, id]) => { return await client.v1.statuses.$select(id).context.fetch(); }, ); const ancestors = () => tootContext()?.ancestors ?? []; const descendants = () => tootContext()?.descendants ?? []; createEffect(() => { if (ancestors().length > 0) { document.querySelector(`#toot-${toot()!.id}`)?.scrollIntoView(); } }); useDocumentTitle(() => { const t = toot()?.reblog ?? toot() const name = t?.account.displayName ?? "Someone" return `${name}'s toot` }) const tootDisplayName = () => { const t = toot()?.reblog ?? toot(); if (t) { return resolveCustomEmoji(t.account.displayName, t.account.emojis); } }; const actSession = () => { const s = session(); return s.account ? s : undefined; }; const onBookmark = async () => { const status = remoteToot()!; const client = actSession()!.client; setRemoteToot( Object.assign({}, status, { bookmarked: !status.bookmarked, }), ); const result = await (status.bookmarked ? client.v1.statuses.$select(status.id).unbookmark() : client.v1.statuses.$select(status.id).bookmark()); setRemoteToot(result); }; const onBoost = async () => { const status = remoteToot()!; const client = actSession()!.client; vibrate(50); setRemoteToot( Object.assign({}, status, { reblogged: !status.reblogged, }), ); const result = await (status.reblogged ? client.v1.statuses.$select(status.id).unreblog() : client.v1.statuses.$select(status.id).reblog()); vibrate([20, 30]); setRemoteToot(result.reblog!); }; const onFav = async () => { const status = remoteToot()!; const client = actSession()!.client; setRemoteToot( Object.assign({}, status, { favourited: !status.favourited, }), ); const result = await (status.favourited ? client.v1.statuses.$select(status.id).favourite() : client.v1.statuses.$select(status.id).unfavourite()); setRemoteToot(result); }; const switchContext = (status: mastodon.v1.Status) => { if (isInTyping()) { setInTyping(false); return; } setCache(params.acct, status); navigate(`/${params.acct}/${status.id}`, { state: { tootBottomSheetPushedCount: pushedCount() + 1, }, }); }; const defaultMentions = () => { const tootAcct = remoteToot()?.reblog?.account ?? remoteToot()?.account; if (!tootAcct) { return; } const others = ancestors().map((x) => x.account); const values = [tootAcct, ...others].map((x) => `@${x.acct}`); return Array.from(new Set(values).keys()); }; css` .name :global(img) { max-height: 1em; } .name { display: grid; grid-template-columns: 1fr auto; height: calc(var(--title-size) * var(--title-line-height)); > :first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } `; 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> {pushedCount() > 0 ? <BackIcon /> : <CloseIcon />} </IconButton> <Title component="div" class="name" use:solid-styled > <span ref={(e: HTMLElement) => createRenderEffect( () => (e.innerHTML = tootDisplayName() ?? "Someone"), ) } ></span> <span>'s toot</span> </Title> </Toolbar> </AppBar> } > <TimeSourceProvider value={time}> <For each={ancestors()}> {(item) => ( <RegularToot id={`toot-${item.id}`} class={cards.card} status={item} actionable={false} onClick={[switchContext, item]} ></RegularToot> )} </For> <article> <Show when={toot()}> <RegularToot id={`toot-${toot()!.id}`} class={cards.card} style={{ "scroll-margin-top": "calc(var(--scaffold-topbar-height) + 20px)", }} status={toot()!} actionable={!!actSession()} evaluated={true} onBookmark={onBookmark} onRetoot={onBoost} onFavourite={onFav} ></RegularToot> </Show> </article> <Show when={session()!.account}> <TootComposer isTyping={isInTyping()} onTypingChange={setInTyping} mentions={defaultMentions()} profile={session().account!} replyToDisplayName={toot()?.account?.displayName || ""} client={session().client} onSent={() => refetchContext()} inReplyToId={remoteToot()?.reblog?.id ?? remoteToot()?.id} /> </Show> <Show when={tootContext.loading}> <div style={{ display: "flex", "justify-content": "center", "margin-block": "12px", }} > <CircularProgress style="width: 1.5em; height: 1.5em;" /> </div> </Show> <For each={descendants()}> {(item) => ( <RegularToot id={`toot-${item.id}`} class={cards.card} status={item} actionable={false} onClick={[switchContext, item]} ></RegularToot> )} </For> </TimeSourceProvider> <div style={{ height: "var(--safe-area-inset-bottom, 0)" }}></div> </Scaffold> ); }; export default TootBottomSheet;