tutu/src/timelines/TootBottomSheet.tsx

import { useParams } from "@solidjs/router";
import { catchError, createResource, Show, type Component } from "solid-js";
import Scaffold from "~material/Scaffold";
import { CircularProgress } from "@suid/material";
import { Title } from "~material/typography";
import { useSessionForAcctStr } from "../masto/clients";
import { resolveCustomEmoji } from "../masto/toot";
import RegularToot, {
  createDefaultTootEnv,
  findElementActionable,
  TootEnvProvider,
} from "./RegularToot";
import cards from "~material/cards.module.css";
import { css } from "solid-styled";
import { createTimeSource, TimeSourceProvider } from "~platform/timesrc";
import TootComposer from "./TootComposer";
import { useDocumentTitle } from "../utils";
import { createTimelineControlsForArray } from "../masto/timelines";
import TootList from "./TootList";
import "./TootBottomSheet.css";
import { useNavigator } from "~platform/StackedRouter";
import BackButton from "~platform/BackButton";
import ItemSelectionProvider, {
  createSingluarItemSelection,
} from "./toots/ItemSelectionProvider";
import AppTopBar from "~material/AppTopBar";
import { fetchStatus } from "../masto/statuses";
import { type Account } from "../accounts/stores";

const TootBottomSheet: Component = (props) => {
  const params = useParams<{ acct: string; id: string }>();
  const { push } = useNavigator();
  const time = createTimeSource();
  const acctText = () => decodeURIComponent(params.acct);
  const session = useSessionForAcctStr(acctText);
  const [, selectionState] = createSingluarItemSelection();

  const [remoteToot, { mutate: setRemoteToot }] =
    fetchStatus.cachedAndRevalidate(
      () => [session().account, params.id] as const,
    );

  const toot = () =>
    catchError(remoteToot, (error) => {
      console.error(error);
    });

  const [tootContextErrorUncaught, { refetch: refetchContext }] =
    createResource(
      () => [session().client, toot()?.reblog?.id ?? params.id] as const,
      async ([client, id]) => {
        return await client.v1.statuses.$select(id).context.fetch();
      },
    );

  const tootContext = () =>
    catchError(tootContextErrorUncaught, (error) => {
      console.error(error);
    });

  const ancestors = createTimelineControlsForArray(
    () => tootContext()?.ancestors,
  );
  const descendants = createTimelineControlsForArray(
    () => tootContext()?.descendants,
  );

  useDocumentTitle(() => {
    const t = toot()?.reblog ?? toot();
    const name = t?.account.displayName ?? "Someone";
    return `${name}'s toot`;
  });

  const tootDisplayName = () => {
    const t = toot()?.reblog ?? toot();
    if (t) {
      return resolveCustomEmoji(t.account.displayName, t.account.emojis);
    }
  };

  const actSession = () => {
    const s = session();
    return s.account ? s : undefined;
  };

  const mainTootEnv = createDefaultTootEnv(
    () => actSession()?.client,
    (_, status) => setRemoteToot(status),
  );

  const defaultMentions = () => {
    const tootAcct = remoteToot()?.reblog?.account ?? remoteToot()?.account;
    if (!tootAcct) {
      return;
    }

    const others = ancestors.list.map((x) => ancestors.get(x)!.value.account);

    const values = [tootAcct, ...others].map((x) => `@${x.acct}`);
    return Array.from(new Set(values).keys());
  };

  const handleMainTootClick = (
    event: MouseEvent & { currentTarget: HTMLElement },
  ) => {
    const actionableElement = findElementActionable(
      event.target as HTMLElement,
      event.currentTarget,
    );

    if (actionableElement) {
      if (actionableElement.dataset.action === "acct") {
        event.stopPropagation();

        const target = actionableElement as HTMLAnchorElement;

        const acct = encodeURIComponent(
          target.dataset.client || `@${new URL(target.href).origin}`,
        );

        push(`/${acct}/profile/${target.dataset.acctId}`);

        return;
      } else {
        console.warn("unknown action", actionableElement.dataset.rel);
      }
    }
  };

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

    .name {
      display: grid;
      grid-template-columns: 1fr auto;
      height: calc(var(--title-size) * var(--title-line-height));

      > :first-child {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  `;

  return (
    <Scaffold
      topbar={
        <AppTopBar
          style={{
            "background-color": "var(--tutu-color-surface)",
            color: "var(--tutu-color-on-surface)",
          }}
        >
          <BackButton color="inherit" />
          <Title component="div" class="name" use:solid-styled>
            <span innerHTML={tootDisplayName() ?? "Someone"}></span>
            <span>'s toot</span>
          </Title>
        </AppTopBar>
      }
      class="TootBottomSheet"
    >
      <div class="Scrollable">
        <TimeSourceProvider value={time}>
          <ItemSelectionProvider value={selectionState}>
            <TootList
              threads={ancestors.list}
              onUnknownThread={ancestors.getPath}
              onChangeToot={ancestors.set}
            />

            <article>
              <Show when={toot()}>
                <TootEnvProvider value={mainTootEnv}>
                  <RegularToot
                    id={`toot-${toot()!.id}`}
                    class={cards.card}
                    style={{
                      "scroll-margin-top":
                        "calc(var(--scaffold-topbar-height) + 20px)",
                      cursor: "auto",
                      "user-select": "auto",
                    }}
                    status={toot()!}
                    actionable={!!actSession()}
                    evaluated={true}
                    onClick={handleMainTootClick}
                  ></RegularToot>
                </TootEnvProvider>
              </Show>
            </article>

            <Show when={(session().account as Account).inf}>
              <TootComposer
                mentions={defaultMentions()}
                profile={(session().account! as Account).inf}
                replyToDisplayName={toot()?.account?.displayName || ""}
                client={session().client}
                onSent={() => refetchContext()}
                inReplyToId={remoteToot()?.reblog?.id ?? remoteToot()?.id}
              />
            </Show>

            <Show when={tootContextErrorUncaught.loading}>
              <div class="progress-line">
                <CircularProgress style="width: 1.5em; height: 1.5em;" />
              </div>
            </Show>

            <TootList
              threads={descendants.list}
              onUnknownThread={descendants.getPath}
              onChangeToot={descendants.set}
            />
          </ItemSelectionProvider>
        </TimeSourceProvider>
      </div>
    </Scaffold>
  );
};

export default TootBottomSheet;