refactor: solid notifications (@Miodec) (#7576)

Brr

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: 3 people

frontend/__tests__/components/common/AsyncContent.spec.tsx

@@ -10,13 +10,13 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 import AsyncContent, {
   Props,
 } from "../../../src/ts/components/common/AsyncContent";
-import * as Notifications from "../../../src/ts/elements/notifications";
+import * as Notifications from "../../../src/ts/stores/notifications";
 
 describe("AsyncContent", () => {
-  const addNotificationMock = vi.spyOn(Notifications, "add");
+  const notifyErrorMock = vi.spyOn(Notifications, "showErrorNotification");
 
   beforeEach(() => {
-    addNotificationMock.mockClear();
+    notifyErrorMock.mockClear();
   });
 
   describe("with single query", () => {
@@ -55,30 +55,30 @@ describe("AsyncContent", () => {
     });
 
     it("renders default error message on fail", async () => {
-      renderWithQuery({ result: new Error("Test error") });
+      const error = new Error("Test error");
+      renderWithQuery({ result: error });
 
       await waitFor(() => {
         expect(screen.getByText(/An error occurred/)).toBeInTheDocument();
       });
-      expect(addNotificationMock).toHaveBeenCalledWith(
-        "An error occurred: Test error",
-        -1,
-      );
+      expect(notifyErrorMock).toHaveBeenCalledWith("An error occurred", {
+        error,
+      });
     });
 
     it("renders custom error message on fail", async () => {
+      const error = new Error("Test error");
       renderWithQuery(
-        { result: new Error("Test error") },
+        { result: error },
         { errorMessage: "Custom error message" },
       );
 
       await waitFor(() => {
         expect(screen.getByText(/Custom error message/)).toBeInTheDocument();
       });
-      expect(addNotificationMock).toHaveBeenCalledWith(
-        "Custom error message: Test error",
-        -1,
-      );
+      expect(notifyErrorMock).toHaveBeenCalledWith("Custom error message", {
+        error,
+      });
     });
 
     it("ignores error on fail if ignoreError is set", async () => {
@@ -89,7 +89,7 @@ describe("AsyncContent", () => {
       await waitFor(() => {
         expect(screen.getByText(/no data/)).toBeInTheDocument();
       });
-      expect(addNotificationMock).not.toHaveBeenCalled();
+      expect(notifyErrorMock).not.toHaveBeenCalled();
     });
 
     it("renders on pending if alwaysShowContent", async () => {
@@ -111,18 +111,18 @@ describe("AsyncContent", () => {
     });
 
     it("renders on fail if alwaysShowContent", async () => {
+      const error = new Error("Test error");
       renderWithQuery(
-        { result: new Error("Test error") },
+        { result: error },
         { errorMessage: "Custom error message" },
       );
 
       await waitFor(() => {
         expect(screen.getByText(/Custom error message/)).toBeInTheDocument();
       });
-      expect(addNotificationMock).toHaveBeenCalledWith(
-        "Custom error message: Test error",
-        -1,
-      );
+      expect(notifyErrorMock).toHaveBeenCalledWith("Custom error message", {
+        error,
+      });
     });
 
     function renderWithQuery(
@@ -216,30 +216,30 @@ describe("AsyncContent", () => {
     });
 
     it("renders default error message on fail", async () => {
-      renderWithQuery({ first: "data", second: new Error("Test error") });
+      const error = new Error("Test error");
+      renderWithQuery({ first: "data", second: error });
 
       await waitFor(() => {
         expect(screen.getByText(/An error occurred/)).toBeInTheDocument();
       });
-      expect(addNotificationMock).toHaveBeenCalledWith(
-        "An error occurred: Test error",
-        -1,
-      );
+      expect(notifyErrorMock).toHaveBeenCalledWith("An error occurred", {
+        error,
+      });
     });
 
     it("renders custom error message on fail", async () => {
+      const firstError = new Error("First error");
       renderWithQuery(
-        { first: new Error("First error"), second: new Error("Second error") },
+        { first: firstError, second: new Error("Second error") },
         { errorMessage: "Custom error message" },
       );
 
       await waitFor(() => {
         expect(screen.getByText(/Custom error message/)).toBeInTheDocument();
       });
-      expect(addNotificationMock).toHaveBeenCalledWith(
-        "Custom error message: First error",
-        -1,
-      );
+      expect(notifyErrorMock).toHaveBeenCalledWith("Custom error message", {
+        error: firstError,
+      });
     });
 
     it("ignores error on fail if ignoreError is set", async () => {
@@ -252,7 +252,7 @@ describe("AsyncContent", () => {
         expect(screen.getByText(/no data/)).toBeInTheDocument();
       });
 
-      expect(addNotificationMock).not.toHaveBeenCalled();
+      expect(notifyErrorMock).not.toHaveBeenCalled();
     });
 
     it("renders on pending if alwaysShowContent", async () => {
@@ -287,18 +287,18 @@ describe("AsyncContent", () => {
     });
 
     it("renders on fail if alwaysShowContent", async () => {
+      const error = new Error("Test error");
       renderWithQuery(
-        { first: "data", second: new Error("Test error") },
+        { first: "data", second: error },
         { errorMessage: "Custom error message" },
       );
 
       await waitFor(() => {
         expect(screen.getByText(/Custom error message/)).toBeInTheDocument();
       });
-      expect(addNotificationMock).toHaveBeenCalledWith(
-        "Custom error message: Test error",
-        -1,
-      );
+      expect(notifyErrorMock).toHaveBeenCalledWith("Custom error message", {
+        error,
+      });
     });
 
     function renderWithQuery(

frontend/__tests__/components/core/Theme.spec.tsx

@@ -4,9 +4,9 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 
 import { Theme } from "../../../src/ts/components/core/Theme";
 import { ThemeWithName } from "../../../src/ts/constants/themes";
-import * as Notifications from "../../../src/ts/elements/notifications";
 import * as Loader from "../../../src/ts/signals/loader-bar";
 import * as ThemeSignal from "../../../src/ts/signals/theme";
+import * as Notifications from "../../../src/ts/stores/notifications";
 
 vi.mock("../../../src/ts/constants/themes", () => ({
   themes: {
@@ -24,7 +24,7 @@ describe("Theme component", () => {
   const themeSignalMock = vi.spyOn(ThemeSignal, "getTheme");
   const loaderShowMock = vi.spyOn(Loader, "showLoaderBar");
   const loaderHideMock = vi.spyOn(Loader, "hideLoaderBar");
-  const notificationAddMock = vi.spyOn(Notifications, "add");
+  const notificationAddMock = vi.spyOn(Notifications, "showNoticeNotification");
 
   beforeEach(() => {
     vi.useFakeTimers();
@@ -99,7 +99,7 @@ describe("Theme component", () => {
     expect(loaderShowMock).toHaveBeenCalledOnce();
     fireEvent.error(css);
     expect(loaderHideMock).toHaveBeenCalledOnce();
-    expect(notificationAddMock).toHaveBeenCalledWith("Failed to load theme", 0);
+    expect(notificationAddMock).toHaveBeenCalledWith("Failed to load theme");
   });
 
   it("renders favicon", () => {

frontend/__tests__/controllers/preset-controller.spec.ts

@@ -3,7 +3,7 @@ import * as PresetController from "../../src/ts/controllers/preset-controller";
 import { Preset } from "@monkeytype/schemas/presets";
 import * as DB from "../../src/ts/db";
 import * as UpdateConfig from "../../src/ts/config";
-import * as Notifications from "../../src/ts/elements/notifications";
+import * as Notifications from "../../src/ts/stores/notifications";
 import * as TestLogic from "../../src/ts/test/test-logic";
 import * as TagController from "../../src/ts/controllers/tag-controller";
 
@@ -25,7 +25,10 @@ describe("PresetController", () => {
       UpdateConfig,
       "getConfigChanges",
     );
-    const notificationAddMock = vi.spyOn(Notifications, "add");
+    const notificationAddMock = vi.spyOn(
+      Notifications,
+      "showSuccessNotification",
+    );
     const testRestartMock = vi.spyOn(TestLogic, "restart");
     const tagControllerClearMock = vi.spyOn(TagController, "clear");
     const tagControllerSetMock = vi.spyOn(TagController, "set");
@@ -61,8 +64,8 @@ describe("PresetController", () => {
       expect(configApplyMock).toHaveBeenCalledWith(preset.config);
       expect(tagControllerClearMock).toHaveBeenCalled();
       expect(testRestartMock).toHaveBeenCalled();
-      expect(notificationAddMock).toHaveBeenCalledWith("Preset applied", 1, {
-        duration: 2,
+      expect(notificationAddMock).toHaveBeenCalledWith("Preset applied", {
+        durationMs: 2000,
       });
       expect(configSaveFullConfigMock).toHaveBeenCalled();
     });
@@ -121,8 +124,8 @@ describe("PresetController", () => {
         punctuation: true,
       });
       expect(testRestartMock).toHaveBeenCalled();
-      expect(notificationAddMock).toHaveBeenCalledWith("Preset applied", 1, {
-        duration: 2,
+      expect(notificationAddMock).toHaveBeenCalledWith("Preset applied", {
+        durationMs: 2000,
       });
       expect(configSaveFullConfigMock).toHaveBeenCalled();
     });

frontend/__tests__/root/config.spec.ts

@@ -10,7 +10,7 @@ import * as FunboxValidation from "../../src/ts/test/funbox/funbox-validation";
 import * as ConfigValidation from "../../src/ts/config-validation";
 import * as ConfigEvent from "../../src/ts/observables/config-event";
 import * as ApeConfig from "../../src/ts/ape/config";
-import * as Notifications from "../../src/ts/elements/notifications";
+import * as Notifications from "../../src/ts/stores/notifications";
 const { replaceConfig, getConfig } = Config.__testing;
 
 describe("Config", () => {
@@ -31,7 +31,10 @@ describe("Config", () => {
     );
     const dispatchConfigEventMock = vi.spyOn(ConfigEvent, "dispatch");
     const dbSaveConfigMock = vi.spyOn(ApeConfig, "saveConfig");
-    const notificationAddMock = vi.spyOn(Notifications, "add");
+    const notificationAddMock = vi.spyOn(
+      Notifications,
+      "showNoticeNotification",
+    );
     const miscReloadAfterMock = vi.spyOn(Misc, "reloadAfter");
     const miscTriggerResizeMock = vi.spyOn(Misc, "triggerResize");
 
@@ -89,7 +92,6 @@ describe("Config", () => {
       //THEN
       expect(notificationAddMock).toHaveBeenCalledWith(
         "No quit funbox is active. Please finish the test.",
-        0,
         {
           important: true,
         },
@@ -269,7 +271,6 @@ describe("Config", () => {
       //THEN
       expect(notificationAddMock).toHaveBeenCalledWith(
         "Ad settings changed. Refreshing...",
-        0,
       );
       expect(miscReloadAfterMock).toHaveBeenCalledWith(3);
     });