NotionThreadLink.tsx

import { useAtomValue } from "@effect/atom-react";
import { notionLinkForThread } from "@t3tools/client-runtime/state/notion";
import type { EnvironmentId, ScopedThreadRef, NotionThreadLink } from "@t3tools/contracts";
import { ExternalLinkIcon, PencilIcon, UnlinkIcon } from "lucide-react";

import { useLinkClickHandler } from "~/browser/useOpenLink";
import { useEnvironmentSettings } from "~/hooks/useSettings";
import { notionEnvironment } from "~/state/notion";
import { useEnvironmentQuery } from "~/state/query";
import { useAtomCommand } from "~/state/use-atom-command";
import { NotionIcon } from "../Icons";
import { MenuItem, MenuSeparator } from "../ui/menu";
import { ThreadLinkRow } from "./ThreadLinkRow";
import { openNotionPagePicker } from "./NotionPagePicker";

/** Every Notion link in the environment. Null until the server answers, or on servers without links. */
function useNotionThreadLinks(environmentId: EnvironmentId | null) {
  return useEnvironmentQuery(
    environmentId === null ? null : notionEnvironment.threadLinks({ environmentId, input: {} }),
  ).data;
}

/** The Notion page linked to the thread's tab group, if any. */
export function useThreadNotionLink(threadRef: ScopedThreadRef | null) {
  const links = useNotionThreadLinks(threadRef?.environmentId ?? null);
  return threadRef === null ? null : notionLinkForThread(links, threadRef.threadId);
}

export function useUnlinkNotionPage() {
  const unlinkThread = useAtomCommand(notionEnvironment.unlinkThread);
  return (threadRef: ScopedThreadRef) =>
    unlinkThread({
      environmentId: threadRef.environmentId,
      input: { threadId: threadRef.threadId },
    });
}

/** The thread details row for the thread's linked Notion page, showing its title when linked. */
export function NotionThreadLinkRow(props: { threadRef: ScopedThreadRef; link: NotionThreadLink }) {
  const { threadRef, link } = props;
  const notionEnabled = useEnvironmentSettings(
    threadRef.environmentId,
    (s) => s.enableNotionIntegration,
  );
  const canEdit = useAtomValue(
    notionEnvironment.linkThread.permissionAtom(threadRef.environmentId),
  );
  const openLink = useLinkClickHandler(threadRef);
  const unlink = useUnlinkNotionPage();

  return (
    <ThreadLinkRow
      watchKind="notion"
      linkUrl={link.url}
      icon={<NotionIcon className="size-4 shrink-0" />}
      label={link.title}
      accessibleLabel={`Linked Notion page: ${link.title}`}
      threadRef={threadRef}
      url={link.url}
    >
      <MenuItem
        render={<a href={link.url} target="_blank" rel="noreferrer" />}
        onClick={(event) => openLink(event, link.url)}
      >
        <ExternalLinkIcon />
        Open in Notion
      </MenuItem>
      {notionEnabled && canEdit ? (
        <MenuItem onClick={() => openNotionPagePicker(threadRef, "link")}>
          <PencilIcon />
          Change page…
        </MenuItem>
      ) : null}
      {canEdit ? (
        <>
          <MenuSeparator />
          <MenuItem onClick={() => void unlink(threadRef)}>
            <UnlinkIcon />
            Unlink page
          </MenuItem>
        </>
      ) : null}
    </ThreadLinkRow>
  );
}