tutu/src/timelines/TootBottomSheet.tsx

import { useNavigate, useParams } from "@solidjs/router";
import {
  createEffect,
  createRenderEffect,
  createResource,
  For,
  Show,
  type Component,
} from "solid-js";
import Scaffold from "../material/Scaffold";
import TootThread from "./TootThread";
import {
  AppBar,
  Avatar,
  CircularProgress,
  IconButton,
  Toolbar,
} from "@suid/material";
import { Title } from "../material/typography";
import { Close as CloseIcon, Send } from "@suid/icons-material";
import { isiOS } from "../platform/host";
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";

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 navigate = useNavigate();
  const allSession = useSessions();
  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 profile = () => {
    return session().account;
  };

  const [remoteToot] = 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);

  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();
    }
  });

  const tootTitle = () => {
    const t = toot();
    if (t) {
      const name = resolveCustomEmoji(t.account.displayName, t.account.emojis);
      return `${name}'s toot`;
    }
    return "A toot";
  };

  css`
    .bottom-dock {
      position: sticky;
      bottom: 0;
    }

    .name :global(img) {
      max-height: 1em;
    }
  `;

  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
              class="name"
              ref={(e: HTMLElement) =>
                createRenderEffect(() => (e.innerHTML = tootTitle()))
              }
            ></Title>
          </Toolbar>
        </AppBar>
      }
    >
      <For each={ancestors()}>
        {(item) => (
          <RegularToot
            id={`toot-${item.id}`}
            class={cards.card}
            status={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={true}
            evaluated={true}
          ></RegularToot>
        </Show>
      </article>

      <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}
          ></RegularToot>
        )}
      </For>

      <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 ?? ""}...`}
              style={{ width: "100%", border: "none" }}
            ></textarea>
            <IconButton>
              <Send />
            </IconButton>
          </div>
        </Show>
      </div>
    </Scaffold>
  );
};

export default TootBottomSheet;