Replace content script notifications

package.json

@@ -85,7 +85,6 @@
     "lodash-es": "^4.17.21",
     "marked": "^4.0.3",
     "mustache": "^4.2.0",
-    "notifyjs-browser": "^0.4.2",
     "nunjucks": "^3.2.3",
     "object-hash": "^2.2.0",
     "one-mutation": "^2.0.0",
@@ -104,6 +103,7 @@
     "react-beautiful-dnd": "^13.1.0",
     "react-bootstrap": "^1.6.1",
     "react-dom": "^17.0.2",
+    "react-hot-toast": "^2.1.1",
     "react-hotkeys": "^2.0.0",
     "react-json-tree": "^0.15.0",
     "react-outside-click-handler": "^1.3.0",

src/background/contextMenus.ts

@@ -94,20 +94,19 @@ async function dispatchMenu(
     });
     void showNotification(target, {
       message: "Ran content menu item action",
-      className: "success",
+      type: "success",
     });
   } catch (error) {
     if (hasCancelRootCause(error)) {
       void showNotification(target, {
         message: "The action was cancelled",
-        className: "info",
       });
     } else {
       const message = `Error handling context menu action: ${getErrorMessage(
         error
       )}`;
       reportError(new Error(message));
-      void showNotification(target, { message, className: "error" });
+      void showNotification(target, { message, type: "error" });
     }
   }
 }

src/contentScript.ts

@@ -27,14 +27,14 @@ import registerBuiltinBlocks from "@/blocks/registerBuiltinBlocks";
 import registerContribBlocks from "@/contrib/registerContribBlocks";
 import { handleNavigate } from "@/contentScript/lifecycle";
 import "@/messaging/external";
-import "@/vendors/notify";
 import { markReady, updateTabInfo } from "@/contentScript/context";
 import { initTelemetry } from "@/telemetry/events";
 import { markTabAsReady, whoAmI } from "@/background/messenger/api";
 import { showConnectionLost } from "@/contentScript/connection";
 import { isConnectionError } from "@/errors";
 import { ENSURE_CONTENT_SCRIPT_READY } from "@/messaging/constants";
 import { addListenerForUpdateSelectedElement } from "@/devTools/getSelectedElement";
+import { initToaster } from "@/contentScript/notify";
 
 const PIXIEBRIX_SYMBOL = Symbol.for("pixiebrix-content-script");
 const uuid = uuidv4();
@@ -63,6 +63,7 @@ declare global {
 async function init(): Promise<void> {
   addListenerForUpdateSelectedElement();
   initTelemetry();
+  initToaster();
 
   const sender = await whoAmI();
 

src/contentScript/connection.ts

@@ -15,37 +15,19 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { NotificationCallbacks } from "@/contentScript/notify";
+import { hideNotification, showNotification } from "@/contentScript/notify";
 
-let _hooks: NotificationCallbacks = null;
+const id = "connection-lost";
 
 export function showConnectionLost(): void {
-  if (_hooks) {
-    // Don't show connection notification if it's already being displayed
-    return null;
-  }
-
-  const element = $.notify(
-    "Connection to PixieBrix lost. Please reload the page",
-    {
-      autoHide: false,
-      clickToHide: false,
-      className: "error",
-    }
-  );
-
-  const $element = $(element);
-
-  _hooks = {
-    hide: () => {
-      $element.trigger("notify-hide");
-    },
-  };
+  showNotification({
+    id,
+    message: "Connection to PixieBrix lost. Please reload the page",
+    type: "error",
+    duration: Number.POSITIVE_INFINITY,
+  });
 }
 
 export function hideConnectionLost(): void {
-  if (_hooks) {
-    _hooks.hide();
-    _hooks = null;
-  }
+  hideNotification(id);
 }