tutu/src/timelines/TimelinePanel.tsx

import {
  Component,
  For,
  onCleanup,
  createSignal,
  Show,
  untrack,
  Match,
  Switch as JsSwitch,
  ErrorBoundary,
} from "solid-js";
import { type mastodon } from "masto";
import { Button, LinearProgress } from "@suid/material";
import { createTimeline } from "../masto/timelines";
import { vibrate } from "../platform/hardware";
import PullDownToRefresh from "./PullDownToRefresh";
import TootComposer from "./TootComposer";
import Thread from "./Thread.jsx";

const TimelinePanel: Component<{
  client: mastodon.rest.Client;
  name: "home" | "public";
  prefetch?: boolean;

  openFullScreenToot: (
    toot: mastodon.v1.Status,
    srcElement?: HTMLElement,
    reply?: boolean,
  ) => void;
}> = (props) => {
  const [scrollLinked, setScrollLinked] = createSignal<HTMLElement>();

  const [timeline, snapshot, { refetch: refetchTimeline }] = createTimeline(
    () => props.client.v1.timelines[props.name],
    () => ({limit: 20}),
  );
  const [expandedThreadId, setExpandedThreadId] = createSignal<string>();
  const [typing, setTyping] = createSignal(false);

  const tlEndObserver = new IntersectionObserver(() => {
    if (untrack(() => props.prefetch) && !snapshot.loading)
      refetchTimeline("next");
  });

  onCleanup(() => tlEndObserver.disconnect());

  const onBookmark = async (
    client: mastodon.rest.Client,
    status: mastodon.v1.Status,
  ) => {
    const result = await (status.bookmarked
      ? client.v1.statuses.$select(status.id).unbookmark()
      : client.v1.statuses.$select(status.id).bookmark());
    timeline.set(result.id, result);
  };

  const onBoost = async (
    client: mastodon.rest.Client,
    status: mastodon.v1.Status,
  ) => {
    vibrate(50);
    const rootStatus = status.reblog ? status.reblog : status;
    const reblogged = rootStatus.reblogged;
    if (status.reblog) {
      status.reblog = { ...status.reblog, reblogged: !reblogged };
      timeline.set(status.id, status);
    } else {
      timeline.set(
        status.id,
        Object.assign(status, {
          reblogged: !reblogged,
        }),
      );
    }
    const result = reblogged
      ? await client.v1.statuses.$select(status.id).unreblog()
      : (await client.v1.statuses.$select(status.id).reblog()).reblog!;
    timeline.set(
      status.id,
      Object.assign(status.reblog ?? status, result.reblog),
    );
  };

  return (
    <ErrorBoundary
      fallback={(err, reset) => {
        return <p>Oops: {String(err)}</p>;
      }}
    >
      <PullDownToRefresh
        linkedElement={scrollLinked()}
        loading={snapshot.loading}
        onRefresh={() => refetchTimeline("next")}
      />
      <div
        ref={(e) =>
          setTimeout(() => {
            setScrollLinked(e.parentElement!);
          }, 0)
        }
      >
        <Show when={props.name === "home"}>
          <TootComposer
            style={{
              "--scaffold-topbar-height": "0px",
            }}
            isTyping={typing()}
            onTypingChange={setTyping}
            client={props.client}
            onSent={() => refetchTimeline("prev")}
          />
        </Show>
        <For each={timeline.list}>
          {(itemId, index) => {
            const path = timeline.getPath(itemId)!;
            const toots = path.reverse().map((x) => x.value);

            return (
              <Thread
                toots={toots}
                onBoost={onBoost}
                onBookmark={onBookmark}
                onReply={({ status }, element) =>
                  props.openFullScreenToot(status, element, true)
                }
                client={props.client}
                isExpended={(status) => status.id === expandedThreadId()}
                onItemClick={(status, event) => {
                  setTyping(false);
                  if (status.id !== expandedThreadId()) {
                    setExpandedThreadId((x) => (x ? undefined : status.id));
                  } else {
                    props.openFullScreenToot(
                      status,
                      event.currentTarget as HTMLElement,
                    );
                  }
                }}
              />
            );
          }}
        </For>
      </div>

      <div ref={(e) => tlEndObserver.observe(e)}></div>
      <Show when={snapshot.loading}>
        <div
          class="loading-line"
          style={{
            width: "100%",
          }}
        >
          <LinearProgress />
        </div>
      </Show>
      <div
        style={{
          display: "flex",
          padding: "20px 0 calc(20px + var(--safe-area-inset-bottom, 0px))",
          "align-items": "center",
          "justify-content": "center",
        }}
      >
        <JsSwitch>
          <Match when={snapshot.error}>
            <Button
              variant="contained"
              onClick={[refetchTimeline, "next"]}
              disabled={snapshot.loading}
            >
              Retry
            </Button>
          </Match>
          <Match when={true}>
            <Button
              variant="contained"
              onClick={[refetchTimeline, "prev"]}
              disabled={snapshot.loading}
            >
              Load More
            </Button>
          </Match>
        </JsSwitch>
      </div>
    </ErrorBoundary>
  );
};

export default TimelinePanel;