DiscourseFloatingMenu.tsx

import React from "react";
import ReactDOM from "react-dom";
import { OnloadArgs } from "roamjs-components/types";
import {
  Popover,
  Menu,
  MenuItem,
  Button,
  Intent,
  Position,
  PopoverInteractionKind,
} from "@blueprintjs/core";
import { FeedbackWidget } from "./BirdEatsBugs";
import { render as renderSettings } from "~/components/settings/Settings";
import posthog from "posthog-js";
import { type SettingsSnapshot } from "./settings/utils/accessors";
import { PERSONAL_KEYS } from "./settings/utils/settingKeys";

type DiscourseFloatingMenuProps = {
  // CSS placement class
  position: "top-left" | "top-right" | "bottom-left" | "bottom-right";
  theme: string; // e.g., "bp3-light" | "bp3-dark"
  buttonTheme?: string; // e.g., "bp3-light" | "bp3-dark"
  onloadArgs?: OnloadArgs;
};

const ANCHOR_ID = "dg-floating-menu-anchor";

export const DiscourseFloatingMenu = (props: DiscourseFloatingMenuProps) => (
  <div
    id="discourse-floating-menu"
    className={`${props.position} ${props.theme}`}
  >
    <Popover
      autoFocus={false}
      content={
        <Menu>
          <MenuItem
            text="Send feedback"
            icon="send-message"
            onClick={() => {
              posthog.capture("Floating Menu: Feedback Clicked");
              try {
                (window.birdeatsbug as FeedbackWidget | undefined)?.trigger?.();
              } catch (error) {
                console.error("Failed to trigger feedback widget:", error);
              }
            }}
          />
          <MenuItem
            text="Docs"
            icon="book"
            onClick={() => posthog.capture("Floating Menu: Docs Clicked")}
            href="https://discoursegraphs.com/docs/roam"
            rel="noopener noreferrer"
            target="_blank"
          />
          <MenuItem
            text="Community"
            icon="social-media"
            onClick={() => posthog.capture("Floating Menu: Community Clicked")}
            href="https://join.slack.com/t/discoursegraphs/shared_invite/zt-37xklatti-cpEjgPQC0YyKYQWPNgAkEg"
            rel="noopener noreferrer"
            target="_blank"
          />
          <MenuItem
            text="Settings"
            icon="cog"
            onClick={() => {
              posthog.capture("Floating Menu: Settings Clicked");
              renderSettings({ onloadArgs: props.onloadArgs! });
            }}
            rel="noopener noreferrer"
            target="_blank"
          />
        </Menu>
      }
      onOpened={() => {
        posthog.capture("Floating Menu: Opened");
      }}
      onClosed={() => {
        document.getElementById("dg-floating-menu-button")?.blur();
      }}
      position={Position.TOP}
      className="bp3-popover-content-sizing"
      interactionKind={PopoverInteractionKind.CLICK}
      shouldReturnFocusOnClose={true}
      boundary="viewport"
      modifiers={{
        arrow: {
          enabled: false,
        },
        offset: {
          enabled: true,
          offset: "-70, 15",
        },
      }}
    >
      <Button
        intent={Intent.PRIMARY}
        id="dg-floating-menu-button"
        aria-label="Open Discourse Graphs menu"
        className={props.buttonTheme}
      />
    </Popover>
  </div>
);

export const hideDiscourseFloatingMenu = () => {
  const anchor = document.getElementById(ANCHOR_ID);
  anchor?.classList.add("hidden");
};

export const showDiscourseFloatingMenu = () => {
  const anchor = document.getElementById(ANCHOR_ID);
  anchor?.classList.remove("hidden");
};

export const installDiscourseFloatingMenu = (
  onLoadArgs: OnloadArgs,
  snapshot: SettingsSnapshot,
) => {
  let floatingMenuAnchor = document.getElementById(ANCHOR_ID);
  if (!floatingMenuAnchor) {
    floatingMenuAnchor = document.createElement("div");
    floatingMenuAnchor.id = ANCHOR_ID;
    document.getElementById("app")?.appendChild(floatingMenuAnchor);
  }
  if (snapshot.personalSettings[PERSONAL_KEYS.hideFeedbackButton]) {
    floatingMenuAnchor.classList.add("hidden");
  }
  // eslint-disable-next-line react/no-deprecated
  ReactDOM.render(
    <DiscourseFloatingMenu
      position="bottom-right"
      theme="bp3-light"
      buttonTheme="bp3-light"
      onloadArgs={onLoadArgs}
    />,
    floatingMenuAnchor,
  );
};

export const removeDiscourseFloatingMenu = () => {
  const anchor = document.getElementById(ANCHOR_ID);
  if (anchor) {
    try {
      // eslint-disable-next-line react/no-deprecated
      ReactDOM.unmountComponentAtNode(anchor);
    } catch (e) {
      // no-op: unmount best-effort
    }
    anchor.remove();
  }
};