tutu/src/timelines/TootBottomSheet.tsx

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;