tutu/src/timelines/RegularToot.tsx

import type { mastodon } from "masto";
import {
  splitProps,
  type Component,
  type JSX,
  Show,
  createSignal,
  type Setter,
  createContext,
  useContext,
} from "solid-js";
import { Body2 } from "~material/typography.js";
import { useTimeSource } from "~platform/timesrc.js";
import { resolveCustomEmoji } from "../masto/toot.js";
import { Divider } from "@suid/material";
import cardStyle from "~material/cards.module.css";
import MediaAttachmentGrid from "./toots/MediaAttachmentGrid.jsx";
import { makeAcctText, useDefaultSession } from "../masto/clients";
import TootContent from "./toots/TootContent";
import BoostIcon from "./toots/BoostIcon";
import PreviewCard from "./toots/PreviewCard";
import TootPoll from "./toots/TootPoll";
import TootActionGroup from "./toots/TootActionGroup.js";
import TootAuthorGroup from "./toots/TootAuthorGroup.js";
import "./RegularToot.css";

export type TootEnv = {
  boost: (value: mastodon.v1.Status) => void;
  favourite: (value: mastodon.v1.Status) => void;
  bookmark: (value: mastodon.v1.Status) => void;
  reply?: (
    value: mastodon.v1.Status,
    event: MouseEvent & { currentTarget: HTMLButtonElement },
  ) => void;
  vote: (
    status: mastodon.v1.Status,
    votes: readonly number[],
  ) => void | Promise<void>;
};

const TootEnvContext = /* @__PURE__ */ createContext<TootEnv>();

export const TootEnvProvider = TootEnvContext.Provider;

export function useTootEnv() {
  const env = useContext(TootEnvContext);
  if (!env) {
    throw new TypeError(
      "environment not found, use TootEnvProvider to provide",
    );
  }
  return env;
}

type RegularTootProps = {
  status: mastodon.v1.Status;
  actionable?: boolean;
  evaluated?: boolean;
  thread?: "top" | "bottom" | "middle";
} & JSX.HTMLElementTags["article"];

export function findRootToot(element: HTMLElement) {
  let current: HTMLElement | null = element;
  while (current && !current.classList.contains("RegularToot")) {
    current = current.parentElement;
  }
  if (!current) {
    throw Error(`the element must be placed under a element with .RegularToot`);
  }
  return current;
}

/**
 * find bottom-to-top the element with `data-action`.
 */
export function findElementActionable(
  element: HTMLElement,
  top: HTMLElement,
): HTMLElement | undefined {
  let current = element;
  while (!current.dataset.action) {
    if (!current.parentElement || current.parentElement === top) {
      return undefined;
    }
    current = current.parentElement;
  }
  return current;
}

function onToggleReveal(setValue: Setter<boolean>, event: Event) {
  event.stopPropagation();
  setValue((x) => !x);
}

/**
 * Component for a toot.
 *
 * If the session involved is not the first session, you must wrap
 * this component under a `<DefaultSessionProvier />` with correct
 * session.
 *
 * This component requires be under `<TootEnvProvider />`.
 *
 * **Handling Clicks**
 * There are multiple actions supported in the component. Some handlers
 * are passed in, some should be handled as the click event.
 *
 * For those handler directly passed in, see the props starts with "on".
 * We are moving to the new method below.
 *
 * The following actions are handled by the click event:
 * - `[data-action="acct"]`: open the profile page of a account
 *   - `[data-acct-id]` is the account id for the client
 *   - `[data-client]` is the client perferred
 *   - `[href]` is the url of the account
 *
 * Handling the click event for this component, you should use
 * {@link findElementActionable} to find out if the click event has
 * additional intent. If the event's target is any from
 * the subtree of any "actionable" element, the function returns the element.
 *
 * You can extract the intent from the attributes of the "actionable" element.
 * The action type is the dataset's `action`.
 */
const RegularToot: Component<RegularTootProps> = (oprops) => {
  let rootRef: HTMLElement;
  const [props, rest] = splitProps(oprops, [
    "status",
    "lang",
    "class",
    "actionable",
    "evaluated",
    "thread",
  ]);
  const now = useTimeSource();
  const status = () => props.status;
  const toot = () => status().reblog ?? status();
  const session = useDefaultSession();
  const [reveal, setReveal] = createSignal(false);

  return (
    <>
      <article
        classList={{
          RegularToot: true,
          expanded: props.evaluated,
          "thread-top": props.thread === "top",
          "thread-mid": props.thread === "middle",
          "thread-btm": props.thread === "bottom",
          [props.class || ""]: true,
        }}
        ref={rootRef!}
        lang={toot().language || props.lang}
        {...rest}
      >
        <Show when={!!status().reblog}>
          <div class="retoot-grp">
            <BoostIcon />
            <Body2
              innerHTML={resolveCustomEmoji(
                status().account.displayName,
                toot().emojis,
              )}
            ></Body2>
            <span>boosts</span>
          </div>
        </Show>
        <TootAuthorGroup
          status={toot()}
          now={now()}
          data-action="acct"
          data-client={session() ? makeAcctText(session()!) : undefined}
          data-acct-id={toot().account.id}
        />
        <TootContent
          source={toot().content}
          emojis={toot().emojis}
          mentions={toot().mentions}
          class={cardStyle.cardNoPad}
          sensitive={toot().sensitive}
          spoilerText={toot().spoilerText}
          reveal={reveal()}
          onToggleReveal={[onToggleReveal, setReveal]}
        />
        <Show
          when={
            toot().card && (!toot().sensitive || (toot().sensitive && reveal()))
          }
        >
          <PreviewCard src={toot().card!} />
        </Show>
        <Show when={toot().mediaAttachments.length > 0}>
          <MediaAttachmentGrid
            attachments={toot().mediaAttachments}
            sensitive={toot().sensitive}
          />
        </Show>
        <Show when={toot().poll}>
          <TootPoll value={toot().poll!} status={toot()} />
        </Show>
        <Show when={props.actionable}>
          <Divider
            class={cardStyle.cardNoPad}
            style={{ "margin-top": "8px" }}
          />
          <TootActionGroup value={toot()} class={cardStyle.cardGutSkip} />
        </Show>
      </article>
    </>
  );
};

export default RegularToot;