ref: new folder for react dialogs

src/dialogs/README.md

@@ -0,0 +1,3 @@
+## Dialogs
+This directory contains the code of all the different dialog menus of the userscript.  
+All of these are built using React JSX and the BytmMenu class.  

src/dialogs/index.ts

@@ -0,0 +1 @@
+export * from "./versionNotif";

src/dialogs/versionNotif.tsx

@@ -0,0 +1,49 @@
+import { host, scriptInfo } from "../constants";
+import { BytmMenu, t } from "../utils";
+import pkg from "../../package.json" assert { type: "json" };
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from "react";
+
+let verNotifDialog: BytmMenu | null = null;
+
+export type VersionNotifDialogRenderProps = {
+  latestTag: string;
+};
+
+/** Returns the dialog shown when a new version is available */
+export function getVersionNotifDialog({
+  latestTag,
+}: VersionNotifDialogRenderProps) {
+  if(!verNotifDialog) {
+    verNotifDialog = new BytmMenu({
+      id: "version-notif",
+      closeOnBgClick: false,
+      closeOnEscPress: false,
+      destroyOnClose: true,
+      renderBody: () => renderBody(latestTag),
+    });
+  }
+  return verNotifDialog!;
+}
+
+function renderBody(latestTag: string) {
+  const platformNames: Record<typeof host, string> = {
+    github: "GitHub",
+    greasyfork: "GreasyFork",
+    openuserjs: "OpenUserJS",
+  };
+
+  return (
+    <div>
+      <p>
+        {t("new_version_available", scriptInfo.name, scriptInfo.version, latestTag, platformNames[host])}
+      </p>
+      <button
+        className="bytm-btn"
+        onClick={() => window.open(pkg.updates[host])}
+      >
+        {t("update_now")}
+      </button>
+    </div>
+  );
+}

src/features/versionCheck.tsx → src/features/versionCheck.ts

@@ -1,11 +1,8 @@
-import { t } from "../translations";
 import { scriptInfo, host } from "../constants";
 import { getFeatures } from "../config";
-import { error, info, sendRequest } from "../utils";
+import { error, info, sendRequest, t } from "../utils";
+import { getVersionNotifDialog } from "../dialogs";
 import pkg from "../../package.json" assert { type: "json" };
-// import { BytmMenu } from "src/menu/new/BytmMenu";
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import React from "react";
 
 const releaseURL = "https://github.com/Sv443/BetterYTM/releases/latest";
 
@@ -41,30 +38,8 @@ export async function checkVersion() {
         openuserjs: "OpenUserJS",
       };
 
-      // const menu = new BytmMenu({
-      //   id: "version-check",
-      //   closeOnBgClick: false,
-      //   closeOnEscPress: false,
-      //   renderBody() {
-      //     return (
-      //       <div>
-      //         <p>
-      //           {t("new_version_available", scriptInfo.name, scriptInfo.version, latestTag, platformNames[host])}
-      //         </p>
-      //         <button
-      //           className="bytm-btn"
-      //           onClick={() => window.open(pkg.updates[host])}
-      //         >
-      //           {t("update_now")}
-      //         </button>
-      //       </div>
-      //     );
-      //   },
-      // });
-
-      // menu.on("close", () => menu.destroy());
-
-      // await menu.open();
+      const dialog = getVersionNotifDialog({ latestTag });
+      await dialog.open();
 
       // TODO: replace with custom dialog
       if(confirm(t("new_version_available", scriptInfo.name, scriptInfo.version, latestTag, platformNames[host])))