2024-08-12 21:55:26 +08:00
|
|
|
import { useNavigate, useParams } from "@solidjs/router";
|
2024-08-13 15:39:05 +08:00
|
|
|
import {
|
|
|
|
createEffect,
|
|
|
|
createRenderEffect,
|
|
|
|
createResource,
|
2024-08-22 16:49:27 +08:00
|
|
|
For,
|
2024-08-13 15:39:05 +08:00
|
|
|
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-22 16:49:27 +08:00
|
|
|
import {
|
|
|
|
AppBar,
|
|
|
|
Avatar,
|
|
|
|
CircularProgress,
|
|
|
|
IconButton,
|
|
|
|
Toolbar,
|
|
|
|
} from "@suid/material";
|
2024-08-12 17:25:03 +08:00
|
|
|
import { Title } from "../material/typography";
|
2024-08-13 15:39:05 +08:00
|
|
|
import { Close as CloseIcon, Send } from "@suid/icons-material";
|
2024-08-12 21:55:26 +08:00
|
|
|
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";
|
2024-08-13 15:39:05 +08:00
|
|
|
import cards from "../material/cards.module.css";
|
|
|
|
import { css } from "solid-styled";
|
2024-09-14 13:15:11 +08:00
|
|
|
import { vibrate } from "../platform/hardware";
|
2024-08-13 14:17:33 +08:00
|
|
|
|
|
|
|
let cachedEntry: [string, mastodon.v1.Status] | undefined;
|
|
|
|
|
|
|
|
export function setCache(acct: string, status: mastodon.v1.Status) {
|
2024-08-13 15:39:05 +08:00
|
|
|
cachedEntry = [acct, status];
|
2024-08-13 14:17:33 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
function getCache(acct: string, id: string) {
|
|
|
|
if (acct === cachedEntry?.[0] && id === cachedEntry?.[1].id) {
|
2024-08-13 15:39:05 +08:00
|
|
|
return cachedEntry[1];
|
2024-08-13 14:17:33 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
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 15:39:05 +08:00
|
|
|
const acctText = () => decodeURIComponent(params.acct);
|
2024-08-12 21:55:26 +08:00
|
|
|
const session = () => {
|
2024-08-13 15:39:05 +08:00
|
|
|
const [inputUsername, inputSite] = acctText().split("@", 2);
|
2024-08-12 21:55:26 +08:00
|
|
|
const authedSession = allSession().find(
|
|
|
|
(x) =>
|
|
|
|
x.account.site === inputSite &&
|
|
|
|
x.account.inf?.username === inputUsername,
|
|
|
|
);
|
2024-08-13 15:39:05 +08:00
|
|
|
return (
|
|
|
|
authedSession ?? {
|
|
|
|
client: createUnauthorizedClient(inputSite),
|
|
|
|
account: undefined,
|
|
|
|
}
|
|
|
|
);
|
|
|
|
};
|
|
|
|
const profile = () => {
|
|
|
|
return session().account;
|
2024-08-12 21:55:26 +08:00
|
|
|
};
|
|
|
|
|
2024-09-14 13:15:11 +08:00
|
|
|
const [remoteToot, { mutate: setRemoteToot }] = createResource(
|
2024-08-12 21:55:26 +08:00
|
|
|
() => [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
|
|
|
|
2024-08-22 16:49:27 +08:00
|
|
|
const [tootContext] = 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();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
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";
|
|
|
|
};
|
|
|
|
|
2024-09-14 13:15:11 +08:00
|
|
|
const actSession = () => {
|
|
|
|
const s = session();
|
|
|
|
return s.account ? s : undefined;
|
|
|
|
};
|
|
|
|
|
|
|
|
const onBookmark = async () => {
|
|
|
|
const status = remoteToot()!;
|
|
|
|
const client = actSession()!.client;
|
|
|
|
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);
|
|
|
|
};
|
|
|
|
|
|
|
|
const onFav = async () => {
|
|
|
|
const status = remoteToot()!;
|
|
|
|
const client = actSession()!.client;
|
|
|
|
const result = await (status.favourited
|
|
|
|
? client.v1.statuses.$select(status.id).favourite()
|
|
|
|
: client.v1.statuses.$select(status.id).unfavourite());
|
|
|
|
setRemoteToot(result);
|
|
|
|
};
|
|
|
|
|
2024-08-13 15:39:05 +08:00
|
|
|
css`
|
|
|
|
.bottom-dock {
|
|
|
|
position: sticky;
|
|
|
|
bottom: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.name :global(img) {
|
|
|
|
max-height: 1em;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2024-08-12 21:55:26 +08:00
|
|
|
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>
|
2024-08-13 15:39:05 +08:00
|
|
|
<Title
|
|
|
|
class="name"
|
|
|
|
ref={(e: HTMLElement) =>
|
|
|
|
createRenderEffect(() => (e.innerHTML = tootTitle()))
|
|
|
|
}
|
|
|
|
></Title>
|
2024-08-12 21:55:26 +08:00
|
|
|
</Toolbar>
|
|
|
|
</AppBar>
|
|
|
|
}
|
|
|
|
>
|
2024-08-22 16:49:27 +08:00
|
|
|
<For each={ancestors()}>
|
|
|
|
{(item) => (
|
|
|
|
<RegularToot
|
|
|
|
id={`toot-${item.id}`}
|
|
|
|
class={cards.card}
|
|
|
|
status={item}
|
2024-09-14 13:15:11 +08:00
|
|
|
actionable={false}
|
2024-08-22 16:49:27 +08:00
|
|
|
></RegularToot>
|
|
|
|
)}
|
|
|
|
</For>
|
|
|
|
|
2024-08-13 15:39:05 +08:00
|
|
|
<article>
|
2024-08-12 21:55:26 +08:00
|
|
|
<Show when={toot()}>
|
2024-08-13 15:39:05 +08:00
|
|
|
<RegularToot
|
2024-08-22 16:49:27 +08:00
|
|
|
id={`toot-${toot()!.id}`}
|
2024-08-13 15:39:05 +08:00
|
|
|
class={cards.card}
|
2024-09-14 13:15:11 +08:00
|
|
|
style={{
|
|
|
|
"scroll-margin-top": "calc(var(--scaffold-topbar-height) + 20px)",
|
|
|
|
}}
|
2024-08-13 15:39:05 +08:00
|
|
|
status={toot()!}
|
2024-09-14 13:15:11 +08:00
|
|
|
actionable={!!actSession()}
|
2024-08-13 15:39:05 +08:00
|
|
|
evaluated={true}
|
2024-09-14 13:15:11 +08:00
|
|
|
onBookmark={onBookmark}
|
|
|
|
onRetoot={onBoost}
|
|
|
|
onFavourite={onFav}
|
2024-08-13 15:39:05 +08:00
|
|
|
></RegularToot>
|
|
|
|
</Show>
|
|
|
|
</article>
|
|
|
|
|
2024-08-22 16:49:27 +08:00
|
|
|
<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}
|
2024-09-14 13:15:11 +08:00
|
|
|
actionable={false}
|
2024-08-22 16:49:27 +08:00
|
|
|
></RegularToot>
|
|
|
|
)}
|
|
|
|
</For>
|
|
|
|
|
2024-08-13 15:39:05 +08:00
|
|
|
<div class="bottom-dock">
|
|
|
|
<Show when={profile()}>
|
|
|
|
<div style="display: flex; gap: 8px; background: var(--tutu-color-surface); padding: 8px 8px calc(var(--safe-area-inset-bottom, 0px) + 8px);">
|
|
|
|
<Avatar src={profile()!.inf?.avatar} />
|
|
|
|
<textarea
|
|
|
|
placeholder={`Reply to ${toot()?.account?.displayName ?? ""}...`}
|
2024-08-13 15:49:36 +08:00
|
|
|
style={{ width: "100%", border: "none" }}
|
2024-08-13 15:39:05 +08:00
|
|
|
></textarea>
|
|
|
|
<IconButton>
|
|
|
|
<Send />
|
|
|
|
</IconButton>
|
|
|
|
</div>
|
2024-08-12 21:55:26 +08:00
|
|
|
</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;
|