2024-08-12 21:55:26 +08:00
|
|
|
import { useNavigate, useParams } from "@solidjs/router";
|
2024-08-13 14:17:33 +08:00
|
|
|
import { createEffect, createResource, Show, type Component } from "solid-js";
|
2024-08-12 17:25:03 +08:00
|
|
|
import Scaffold from "../material/Scaffold";
|
|
|
|
import TootThread from "./TootThread";
|
2024-08-12 21:55:26 +08:00
|
|
|
import { AppBar, IconButton, Toolbar } from "@suid/material";
|
2024-08-12 17:25:03 +08:00
|
|
|
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-08-13 14:17:33 +08:00
|
|
|
import type { mastodon } from "masto";
|
|
|
|
|
|
|
|
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]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
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();
|
2024-08-13 14:17:33 +08:00
|
|
|
const acctText = () => decodeURIComponent(params.acct)
|
2024-08-12 21:55:26 +08:00
|
|
|
const session = () => {
|
2024-08-13 14:17:33 +08:00
|
|
|
const [inputUsername, inputSite] = acctText().split(
|
2024-08-12 21:55:26 +08:00
|
|
|
"@",
|
|
|
|
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();
|
|
|
|
},
|
|
|
|
);
|
|
|
|
|
2024-08-13 14:17:33 +08:00
|
|
|
const toot = () => remoteToot() ?? getCache(acctText(), params.id);
|
2024-08-12 21:55:26 +08:00
|
|
|
|
|
|
|
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;
|