tutu/src/timelines/RegularToot.tsx

import type { mastodon } from "masto";
import {
  splitProps,
  type Component,
  type JSX,
  Show,
  createRenderEffect,
} from "solid-js";
import tootStyle from "./toot.module.css";
import { formatRelative } from "date-fns";
import Img from "../material/Img.js";
import { Body2 } from "../material/typography.js";
import { css } from "solid-styled";
import {
  BookmarkAddOutlined,
  Repeat,
  ReplyAll,
  Star,
  StarOutline,
  Bookmark,
  Reply,
} from "@suid/icons-material";
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 Button from "../material/Button.js";
import MediaAttachmentGrid from "./MediaAttachmentGrid.js";

type TootContentViewProps = {
  source?: string;
  emojis?: mastodon.v1.CustomEmoji[];
} & JSX.HTMLAttributes<HTMLDivElement>;

const TootContentView: Component<TootContentViewProps> = (props) => {
  const [managed, rest] = splitProps(props, ["source", "emojis"]);
  return (
    <div
      ref={(ref) => {
        createRenderEffect(() => {
          ref.innerHTML = managed.source
            ? managed.emojis
              ? resolveCustomEmoji(managed.source, managed.emojis)
              : managed.source
            : "";
        });
      }}
      {...rest}
    ></div>
  );
};

const RetootIcon: Component<JSX.HTMLElementTags["i"]> = (props) => {
  const [managed, rest] = splitProps(props, ["class"]);
  css`
    .retoot-icon {
      padding: 0;
      display: inline-block;
      border-radius: 2px;

      > :global(svg) {
        color: green;
        font-size: 1rem;
        vertical-align: middle;
      }
    }
  `;
  return (
    <i class={["retoot-icon", managed.class].join(" ")} {...rest}>
      <Repeat />
    </i>
  );
};

const ReplyIcon: Component<JSX.HTMLElementTags["i"]> = (props) => {
  const [managed, rest] = splitProps(props, ["class"]);
  css`
    .retoot-icon {
      padding: 0;
      display: inline-block;
      border-radius: 2px;

      > :global(svg) {
        color: var(--tutu-color-primary);
        font-size: 1rem;
        vertical-align: middle;
      }
    }
  `;
  return (
    <i class={["retoot-icon", managed.class].join(" ")} {...rest}>
      <Reply />
    </i>
  );
};

type TootActionGroupProps<T extends mastodon.v1.Status> = {
  onRetoot?: (value: T) => void;
  onFavourite?: (value: T) => void;
  onBookmark?: (value: T) => void;
  onReply?: (value: T) => void;
};

type TootCardProps = {
  status: mastodon.v1.Status;
  actionable?: boolean;
  evaluated?: boolean;
} & TootActionGroupProps<mastodon.v1.Status> &
  JSX.HTMLElementTags["article"];

function isolatedCallback(e: MouseEvent) {
  e.stopPropagation();
}

function TootActionGroup<T extends mastodon.v1.Status>(
  props: TootActionGroupProps<T> & { value: T },
) {
  const toot = () => props.value;
  return (
    <div class={tootStyle.tootBottomActionGrp} onClick={isolatedCallback}>
      <Button
        class={tootStyle.tootActionWithCount}
        onClick={() => props.onReply?.(toot())}
      >
        <ReplyAll />
        <span>{toot().repliesCount}</span>
      </Button>
      <Button
        class={tootStyle.tootActionWithCount}
        style={{
          color: toot().reblogged ? "var(--tutu-color-primary)" : undefined,
        }}
        onClick={() => props.onRetoot?.(toot())}
      >
        <Repeat />
        <span>{toot().reblogsCount}</span>
      </Button>
      <Button
        class={tootStyle.tootActionWithCount}
        style={{
          color: toot().favourited ? "var(--tutu-color-primary)" : undefined,
        }}
        onClick={() => props.onFavourite?.(toot())}
      >
        {toot().favourited ? <Star /> : <StarOutline />}
        <span>{toot().favouritesCount}</span>
      </Button>
      <Button
        class={tootStyle.tootAction}
        style={{
          color: toot().bookmarked ? "var(--tutu-color-primary)" : undefined,
        }}
        onClick={() => props.onBookmark?.(toot())}
      >
        {toot().bookmarked ? <Bookmark /> : <BookmarkAddOutlined />}
      </Button>
    </div>
  );
}

function TootAuthorGroup(props: { status: mastodon.v1.Status; now: Date }) {
  const toot = () => props.status;

  return (
    <div class={tootStyle.tootAuthorGrp}>
      <Img src={toot().account.avatar} class={tootStyle.tootAvatar} />
      <div class={tootStyle.tootAuthorNameGrp}>
        <Body2
          class={tootStyle.tootAuthorNamePrimary}
          ref={(e: { innerHTML: string }) => {
            createRenderEffect(() => {
              e.innerHTML = resolveCustomEmoji(
                toot().account.displayName,
                toot().account.emojis,
              );
            });
          }}
        />
        <time datetime={toot().createdAt}>
          {formatRelative(toot().createdAt, props.now)}
        </time>
        <span>
          @{toot().account.username}@{new URL(toot().account.url).hostname}
        </span>
      </div>
    </div>
  );
}

const RegularToot: Component<TootCardProps> = (props) => {
  let rootRef: HTMLElement;
  const [managed, managedActionGroup, rest] = splitProps(
    props,
    ["status", "lang", "class", "actionable", "evaluated"],
    ["onRetoot", "onFavourite", "onBookmark", "onReply"],
  );
  const now = useTimeSource();
  const status = () => managed.status;
  const toot = () => status().reblog ?? status();

  css`
    .reply-sep {
      margin-left: calc(var(--toot-avatar-size) + var(--card-pad) + 8px);
      margin-block: 8px;
    }
  `;

  return (
    <>
      <section
        classList={{
          [tootStyle.toot]: true,
          [tootStyle.expanded]: managed.evaluated,
          [managed.class || ""]: true
        }}
        ref={rootRef!}
        lang={toot().language || managed.lang}
        {...rest}
      >
        <Show when={!!status().reblog}>
          <div class={tootStyle.tootRetootGrp}>
            <RetootIcon />
            <span>
              <Body2
                ref={(e: { innerHTML: string }) => {
                  createRenderEffect(() => {
                    e.innerHTML = resolveCustomEmoji(
                      status().account.displayName,
                      toot().emojis,
                    );
                  });
                }}
              ></Body2>{" "}
              boosted
            </span>
          </div>
        </Show>
        <TootAuthorGroup status={toot()} now={now()} />
        <TootContentView
          source={toot().content}
          emojis={toot().emojis}
          class={tootStyle.tootContent}
        />
        <Show when={toot().mediaAttachments.length > 0}>
          <MediaAttachmentGrid attachments={toot().mediaAttachments} />
        </Show>
        <Show when={managed.actionable}>
          <Divider
            class={cardStyle.cardNoPad}
            style={{ "margin-top": "8px" }}
          />
          <TootActionGroup value={toot()} {...managedActionGroup} />
        </Show>
      </section>
    </>
  );
};

export default RegularToot;