tutu/src/timelines/TootBottomSheet.tsx

81 lines
2.3 KiB
TypeScript
Raw Normal View History

2024-08-12 21:55:26 +08:00
import { useNavigate, useParams } from "@solidjs/router";
import { createResource, Show, type Component } from "solid-js";
import Scaffold from "../material/Scaffold";
import TootThread from "./TootThread";
2024-08-12 21:55:26 +08:00
import { AppBar, IconButton, Toolbar } from "@suid/material";
import { Title } from "../material/typography";
2024-08-12 21:55:26 +08:00
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";
2024-07-14 20:28:44 +08:00
const TootBottomSheet: Component = (props) => {
2024-08-12 21:55:26 +08:00
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>
);
2024-08-05 15:33:00 +08:00
};
2024-07-14 20:28:44 +08:00
2024-08-05 15:33:00 +08:00
export default TootBottomSheet;