@finsemble/finsemble-ui 7.3.9 → 7.3.10

package/react/components/notifications/components/notificationsCenter/components/NotificationsCenterWindow.js

@@ -0,0 +1,304 @@
+import React, { useEffect, useRef, useState } from "react";
+import useNotifications, { moveToToolbarMonitor } from "../../../../../hooks/useNotifications";
+import ConditionalWrapper from "../../../../shared/ConditionalWrapper";
+import { CSSTransition } from "react-transition-group";
+import { NotificationsContext } from "../../../notificationsContext";
+import Drawer from "./Drawer";
+import { FEAGlobals } from "../../../../../../common";
+import { addDockedClasses, dockToToolbarRight, removeDockedClasses, setOpaqueClassName, setUndockedPosition, saveNotificationsCenterWindowState, } from "../NotificationCenterUtils";
+import NotificationDetailsView from "../components/NotificationDetailsView";
+import { NotificationCenterMainView } from "./NotificationCenterMainView";
+import { SelectionMode, ViewMode } from "../../../constants";
+import { defaultNotificationCenterControls } from "../NotificationsCenter";
+export const NotificationsCenterWindow = (props) => {
+    /**
+     * References set up to access state inside async callbacks
+     */
+    const applicationState = useRef(null);
+    const uiStateRef = useRef();
+    /**
+     * State Variables
+     */
+    const [isInitialized, setIsInitialized] = useState(false);
+    const [isCorrectMonitor, setIsCorrectMonitor] = useState(false);
+    const [isBoundsSet, setIsBoundsSet] = useState(false);
+    const [isWindowShowing, setIsWindowShowing] = useState(false);
+    const [reloadMuteFilters, setReloadMuteFilters] = useState(true);
+    const [timerId, setTimerId] = useState(null);
+    const config = props.getNotificationConfig();
+    const [uiState, _setUIState] = props.getUIState();
+    const setUIState = (value) => {
+        uiStateRef.current = value;
+        _setUIState(value);
+    };
+    const { notifications, addNotification } = useNotifications(props.params);
+    /**
+     * Setting up context
+     */
+    const dcp = props.controls ? props.controls : defaultNotificationCenterControls;
+    const [drawerControlProps, setDrawerControlProps] = useState(dcp);
+    const [viewMode, setViewMode] = useState(ViewMode.CARD);
+    const [searchString, setSearchString] = useState("");
+    const [filteredNotifications, setFilteredNotifications] = useState([...notifications]);
+    const [selectionMode, setSelectionMode] = useState(SelectionMode.NO_SELECTION);
+    const [muteFilters, setMuteFilters] = useState([]);
+    const [isSelectAll, setSelectAll] = useState(false);
+    const [checkedNotifications, setCheckedNotifications] = useState([]);
+    const [selectedNotification, setSelectedNotification] = useState(null);
+    const notificationsContextValues = {
+        viewMode,
+        setViewMode,
+        selectionMode,
+        setSelectionMode,
+        drawerControlProps,
+        setDrawerControlProps,
+        selectedNotification,
+        setSelectedNotification,
+        searchString,
+        setSearchString,
+        filteredNotifications,
+        checkedNotifications,
+        setCheckedNotifications,
+        setFilteredNotifications,
+        muteFilters,
+        setMuteFilters,
+        isSelectAll,
+        setSelectAll,
+    };
+    const toggleDockingStatus = () => {
+        var _a;
+        const isDocked = !((_a = uiStateRef.current) === null || _a === void 0 ? void 0 : _a.isDocked);
+        setUIState(Object.assign(Object.assign({}, uiState), { isDocked }));
+    };
+    /**
+     * CSS Housekeeping / initialisation
+     */
+    useEffect(() => {
+        document.body.classList.add("notifications-center-body");
+        /**
+         * If the window is set to transparent, move the content off-screen via CSS
+         * so that it slides in from the correct positions.
+         *
+         * Sliding in and out is handled by CSS animation using the CSSTransition React element
+         */
+        setOpaqueClassName(config.isTransparent);
+        return () => {
+            document.body.classList.remove("notifications-center-body");
+        };
+    }, []);
+    /**
+     * props.getUIState() gets an async value, wait for a value to be returned
+     * from the Notification Service
+     */
+    useEffect(() => {
+        if (!isInitialized && typeof uiState.showCenter !== "undefined") {
+            /**
+             * Actual values have been returned, the component will now be rendered for the first time
+             * and can now be interacted with
+             */
+            setIsInitialized(true);
+        }
+        uiStateRef.current = uiState;
+    }, [uiState]);
+    /**
+     * Showing the Center is split into 3 steps:
+     * 1. Position it on the correct monitor
+     * 2. Resize the window correctly
+     * 3. Display the window.
+     *
+     * This hook positions the window on the correct monitor. It also hides the window and resets the state
+     *
+     * This hook is activated if the user is toggling the show center button or
+     * is toggling the docking button. When toggling the docking, the window will
+     * be shown already.
+     */
+    useEffect(() => {
+        if (isInitialized) {
+            // The user is toggling the show/hide button
+            if (uiState.showCenter) {
+                if (timerId) {
+                    // We're trying to show the window, remove any delayed timers that are going to hide it.
+                    clearTimeout(timerId);
+                    setTimerId(null);
+                }
+                // The user is toggling the docked/undocked button
+                if (uiState.isDocked) {
+                    addDockedClasses();
+                    if (!isCorrectMonitor) {
+                        // Move it to the correct monitor while hidden to prevent flicker
+                        moveToToolbarMonitor().then(() => {
+                            setIsCorrectMonitor(true);
+                        });
+                    }
+                }
+                else {
+                    /**
+                     * No need to move the monitor when undocked, setting the
+                     * bounds will set the correct monitor
+                     */
+                    removeDockedClasses();
+                    setIsCorrectMonitor(true);
+                }
+                /**
+                 * Set the docked center to be always on top
+                 */
+                FEAGlobals.FSBL.Clients.WindowClient.setAlwaysOnTop(uiState.isDocked);
+            }
+            else {
+                /**
+                 * We're trying to hide the window.
+                 * If the window is transparent the center takes 500ms to slide in and out of the page.
+                 * Wait 500ms before hiding the window and resetting the state
+                 */
+                setTimerId(setTimeout(() => {
+                    FEAGlobals.finsembleWindow.hide();
+                    setIsWindowShowing(false);
+                    setIsCorrectMonitor(false);
+                    setIsBoundsSet(false);
+                }, config.isTransparent && uiState.isDocked ? 500 : 0));
+            }
+            saveNotificationsCenterWindowState(Object.assign(Object.assign({}, uiStateRef.current), { isDocked: uiState.isDocked }));
+        }
+    }, [isInitialized, uiState.showCenter, uiState.isDocked, isCorrectMonitor]);
+    /**
+     * This hook set the window bounds
+     *
+     * This effect is triggered when showing the window for the first time or the user is
+     * toggling the docking state. When toggling the docking, the window will
+     * be showing already.
+     *
+     * The window is on the correct monitor. Let's set the correct position.
+     *
+     * Note: Not technically the correct monitor when undocked but calling setBounds will
+     * correct the monitor from the saved bounds.
+     */
+    useEffect(() => {
+        if (isInitialized && isCorrectMonitor && uiState.showCenter) {
+            if (uiState.isDocked) {
+                dockToToolbarRight().then(() => {
+                    setIsBoundsSet(true);
+                });
+            }
+            else {
+                setUndockedPosition(uiState).then(() => {
+                    setIsBoundsSet(true);
+                });
+            }
+        }
+    }, [isInitialized, isCorrectMonitor, uiState]);
+    /**
+     * This hook shows the window and brings it to the front.
+     *
+     * This effect is run when showing the window.
+     * The values are initialized, the monitor is correct, the window position is correct.
+     * Show the window and bring it to front.
+     */
+    useEffect(() => {
+        if (isInitialized && isCorrectMonitor && isBoundsSet && uiState.showCenter) {
+            if (!isWindowShowing) {
+                FEAGlobals.finsembleWindow.show().then(() => {
+                    setIsWindowShowing(true);
+                    FEAGlobals.finsembleWindow.bringToFront();
+                });
+            }
+            else {
+                /**
+                 * If window is already showing just bring it to front
+                 * (avoids bug where window keeps getting kicked down)
+                 */
+                FEAGlobals.finsembleWindow.bringToFront();
+            }
+        }
+    }, [isInitialized, isCorrectMonitor, isBoundsSet, uiState.showCenter]);
+    /**
+     * Prevent the window from closing. Hide the window if the user tries to close it.
+     */
+    useEffect(() => {
+        const subscriptionId = FEAGlobals.FSBL.Clients.RouterClient.subscribe("Finsemble.Application.State", (err, response) => {
+            applicationState.current = response.data.state;
+        });
+        const hide = (event) => {
+            const publishValue = Object.assign({}, uiStateRef.current);
+            publishValue.showCenter = false;
+            setUIState(publishValue);
+            if ((applicationState === null || applicationState === void 0 ? void 0 : applicationState.current) !== "closing") {
+                try {
+                    event.cancel();
+                }
+                catch (error) {
+                    FEAGlobals.FSBL.Clients.Logger.system.error("Error cancelling the window close event", error);
+                }
+            }
+        };
+        FEAGlobals.finsembleWindow.addEventListener("close-requested", hide);
+        return () => {
+            FEAGlobals.FSBL.Clients.RouterClient.unsubscribe(subscriptionId);
+            FEAGlobals.finsembleWindow.removeEventListener("close-requested", hide);
+        };
+    }, []);
+    /**
+     * If the window bounds have changed, store the new position or force it back to docked position
+     * Bounds can change by manual resizing or when Windows Taskbar + Finsemble Toolbar docking changes
+     */
+    useEffect(() => {
+        const boundsChangeListener = (event) => {
+            var _a, _b;
+            if (((_a = uiStateRef.current) === null || _a === void 0 ? void 0 : _a.showCenter) && ((_b = uiStateRef.current) === null || _b === void 0 ? void 0 : _b.isDocked)) {
+                // If the center is docked, force it to resize
+                dockToToolbarRight();
+            }
+            else {
+                const value = Object.assign(Object.assign({}, uiStateRef.current), { position: {
+                        top: event.data.top,
+                        left: event.data.left,
+                        height: event.data.height,
+                        width: event.data.width,
+                    } });
+                setUIState(value);
+                saveNotificationsCenterWindowState(value);
+            }
+        };
+        FEAGlobals.finsembleWindow.addEventListener("bounds-change-end", boundsChangeListener);
+        return () => {
+            FEAGlobals.finsembleWindow.removeEventListener("bounds-change-end", boundsChangeListener);
+        };
+    }, []);
+    useEffect(() => {
+        setFilteredNotifications([...notifications]);
+    }, [notifications]);
+    // Sets the select all status from user selecting notifications individually
+    useEffect(() => {
+        if (notifications.length > 0 && checkedNotifications.length === notifications.length) {
+            setSelectAll(true);
+        }
+    }, [checkedNotifications, notifications]);
+    useEffect(() => {
+        function listenMuteStateChanged(error) {
+            if (error) {
+                console.error("FinsembleNotificationsMuteStateChannel: ", error);
+                FEAGlobals.FSBL.Clients.Logger.system.error("FinsembleNotificationsMuteStateChannel: ", error);
+            }
+            else {
+                setReloadMuteFilters(true);
+            }
+        }
+        FEAGlobals.FSBL.Clients.RouterClient.addListener("FinsembleNotificationsMuteStateChannel", listenMuteStateChanged);
+        return () => {
+            FEAGlobals.FSBL.Clients.RouterClient.removeListener("FinsembleNotificationsMuteStateChannel", listenMuteStateChanged);
+        };
+    }, []);
+    // Sets the current active mute filters
+    useEffect(() => {
+        async function loadMuteFilter() {
+            return await FEAGlobals.FSBL.Clients.NotificationClient.getMuteFilters();
+        }
+        loadMuteFilter().then((loadedMuteFilters) => {
+            setMuteFilters(loadedMuteFilters);
+            setReloadMuteFilters(false);
+        });
+    }, [reloadMuteFilters]);
+    return (React.createElement(ConditionalWrapper, { condition: config.isTransparent && uiState.isDocked, wrapper: (children) => (React.createElement(CSSTransition, { in: uiState.showCenter, timeout: 500, classNames: "drawer", unmountOnExit: true },
+            React.createElement(React.Fragment, null, children))) }, isInitialized && (React.createElement(NotificationsContext.Provider, { value: notificationsContextValues },
+        React.createElement(Drawer, null, selectedNotification ? (React.createElement(NotificationDetailsView, { notification: selectedNotification })) : (React.createElement(NotificationCenterMainView, { addNotification: addNotification, viewMode: viewMode, notificationCard: props.notificationCard, notificationHeaderRow: props.notificationHeaderRow, notificationListRow: props.notificationListRow, isDocked: uiState.isDocked, toggleDocking: toggleDockingStatus, notifications: notifications, defaultParams: props.params, config: config })))))));
+};
+//# sourceMappingURL=NotificationsCenterWindow.js.map

package/react/components/notifications/components/notificationsCenter/components/NotificationsCenterWindow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationsCenterWindow.js","sourceRoot":"","sources":["../../../../../../../../src/ui/components/notifications/components/notificationsCenter/components/NotificationsCenterWindow.tsx"],"names":[],"mappings":"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"}

package/react/components/notifications/components/notificationsToasts/NotificationsToasts.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { INotificationToastsProps } from "../../types";
-import "../../../../assets/css/notificationsCenter.css";
+import "../../css/notifications-toasts.css";
 export declare const NotificationsToasts: React.FunctionComponent<INotificationToastsProps>;
+//# sourceMappingURL=NotificationsToasts.d.ts.map

package/react/components/notifications/components/notificationsToasts/NotificationsToasts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationsToasts.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/notifications/components/notificationsToasts/NotificationsToasts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAS5E,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,oCAAoC,CAAC;AAmG5C,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,iBAAiB,CAAC,wBAAwB,CAsKjF,CAAC"}

package/react/components/notifications/components/notificationsToasts/NotificationsToasts.js

@@ -1,8 +1,12 @@
-import React, { useEffect, useRef, useState } from "react";
-import useNotifications, { useNotificationUI, moveToToolbarMonitor, getNotificationConfig, getOS, } from "../../../../hooks/useNotifications";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import useNotifications, { useNotificationUI, moveToToolbarMonitor, getNotificationConfig, } from "../../../../hooks/useNotifications";
+import { useTitle } from "../../../../hooks";
 import { NotificationCardShell } from "../shared/NotificationCardShell";
 import { CSSTransition } from "react-transition-group";
-import "../../../../assets/css/notificationsCenter.css";
+import "../../css/notifications-toasts.css";
+import { FEAGlobals } from "../../../../../common";
+import { getNotificationsPreferences } from "../../../userPreferences/components/content/notificationViews/notificationViewsUtils";
+import { setOpaqueClassName } from "../notificationsCenter/NotificationCenterUtils";
 const ToastCard = (props) => {
     const { notification, informationalNotificationTimeout, removeFunction, isActiveFunction, actionableTimeoutEnabled } = props;
     const notificationRef = useRef(notification);
@@ -10,36 +14,46 @@ const ToastCard = (props) => {
     const [showNotification] = useState(isActiveFunction(notification));
     const [timeoutId, setTimeoutId] = useState();
     useEffect(() => {
-        return () => {
-            if (timeoutId) {
-                clearInterval(timeoutId);
-            }
-        };
-    }, []);
-    useEffect(() => {
+        var _a;
         if (timeoutId) {
-            clearInterval(timeoutId);
+            clearTimeout(timeoutId);
         }
-        if (!notification.actions || notification.actions.length == 0 || actionableTimeoutEnabled) {
-            // Is an informational notification or timeout enabled actionable notifications
-            let timeoutLength;
-            if (informationalNotificationTimeout !== false) {
-                // Convert to milliseconds
-                timeoutLength = informationalNotificationTimeout * 1000;
-                if (notification.timeout && Number.isInteger(notification.timeout)) {
-                    timeoutLength = notification.timeout;
-                }
-            }
-            if (timeoutLength) {
-                setTimeoutId(setTimeout(() => {
-                    setSlideIn(false);
-                }, timeoutLength));
-            }
+        let timeoutLength;
+        // Timeout on the notification takes precedence
+        if (notification.timeout && Number.isInteger(notification.timeout)) {
+            timeoutLength = notification.timeout;
+        }
+        /**
+         * If timeout length is not already set and there informational timeout from the config exists
+         * AND it's an informational notification or the config indicates actionable notifications should timeout
+         */
+        if (!timeoutLength &&
+            informationalNotificationTimeout !== false &&
+            (!notification.actions || notification.actions.length == 0 || actionableTimeoutEnabled)) {
+            // Convert to milliseconds
+            timeoutLength = informationalNotificationTimeout * 1000;
+        }
+        let timeout;
+        if (timeoutLength) {
+            timeout = setTimeout(() => {
+                setSlideIn(false);
+            }, timeoutLength);
+            // Allow node based mocha tests to exit without waiting for timeouts to complete
+            (_a = timeout.unref) === null || _a === void 0 ? void 0 : _a.call(timeout);
+            setTimeoutId(timeout);
         }
         if (!isActiveFunction(notificationRef.current)) {
             removeFunction(notification);
         }
         setSlideIn(isActiveFunction(notification));
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        return () => {
+            if (timeout) {
+                clearTimeout(timeout);
+            }
+        };
     }, [notification]);
     const onExited = () => {
         removeFunction(notification);
@@ -50,25 +64,49 @@ const ToastCard = (props) => {
             React.createElement(Card, { notification: notification, uiContext: "toasts", removeNotification: () => {
                     setSlideIn(false);
                 } }),
-            React.createElement("div", { className: "divider" }, "\u00A0")))));
+            React.createElement("div", { className: "divider" })))));
 };
 export const NotificationsToasts = (props) => {
-    const { notifications, notificationIsActive, setOpaqueClassName, removeNotification, activeNotifications } = useNotifications({ config: { notificationsHistory: { options: { sentAfter: "startup" } } } });
-    const notificationsRef = useRef(notifications);
+    var _a;
+    const { notifications, notificationIsActive, removeNotification, activeNotifications } = useNotifications({
+        config: { notificationsHistory: { options: { sentAfter: "startup" } } },
+    });
+    const config = getNotificationConfig();
+    const [isInitialized, setIsInitialized] = useState(false);
+    const [isCorrectMonitor, setIsCorrectMonitor] = useState(false);
+    const [isBoundsSet, setIsBoundsSet] = useState(false);
+    const [isWindowShowing, setIsWindowShowing] = useState(false);
     const [uiState] = useNotificationUI();
     const isNotificationActive = (notification) => {
-        const notificationCenterNotActive = !uiState.showCenter || uiState.poppedOut;
+        const notificationCenterNotActive = !uiState.showCenter || !uiState.isDocked;
         return notificationIsActive(notification) && notificationCenterNotActive;
     };
-    const config = getNotificationConfig();
-    const [isMac] = useState(getOS() === "Mac");
     const [informationalTimeout, setInformationalTimeout] = useState(false);
     const [actionableTimeoutEnabled, setActionableTimeoutEnabled] = useState(true);
+    useTitle((_a = props.title) !== null && _a !== void 0 ? _a : "Notification");
+    /**
+     * Get initial config
+     */
+    useEffect(() => {
+        document.body.classList.add("notifications-toasts-body");
+        setOpaqueClassName(!!config.isTransparent);
+        getNotificationsPreferences().then((preferences) => {
+            setInformationalTimeout(preferences.informationalNotificationToastPeriodSeconds);
+            setActionableTimeoutEnabled(preferences.toastTimeoutOnActionableNotifications);
+            setIsInitialized(true);
+        });
+        return () => {
+            document.body.classList.remove("notifications-toasts-body");
+        };
+    }, []);
+    /**
+     * Listen for changing config
+     */
     useEffect(() => {
         async function listenForPreferenceChange(error, response) {
             if (error) {
-                console.error("FinsembleUserPreferencesChannel: ", error);
-                FSBL.Clients.Logger.system.error("FinsembleUserPreferencesChannel: ", error);
+                console.error("Error getting preference change: ", error);
+                FEAGlobals.FSBL.Clients.Logger.system.error("Error getting preference change: ", error);
             }
             else {
                 const { data } = response;
@@ -83,83 +121,86 @@ export const NotificationsToasts = (props) => {
                 }
             }
         }
-        FSBL.Clients.RouterClient.addListener("FinsembleUserPreferencesChannel", listenForPreferenceChange);
+        FEAGlobals.FSBL.Clients.RouterClient.addListener("FinsembleUserPreferencesChannel", listenForPreferenceChange);
         return () => {
-            FSBL.Clients.RouterClient.removeListener("FinsembleUserPreferencesChannel", listenForPreferenceChange);
+            FEAGlobals.FSBL.Clients.RouterClient.removeListener("FinsembleUserPreferencesChannel", listenForPreferenceChange);
         };
     }, []);
+    /**
+     * Window level hook to move the window to the correct screen
+     * Monitor does not change position while toasts are showing. Only corrects position when no toasts show
+     */
     useEffect(() => {
-        const transparencySupported = config.isTransparent;
-        setOpaqueClassName(!transparencySupported);
-        if (transparencySupported) {
-            finsembleWindow.show();
+        if (!isCorrectMonitor && activeNotifications(notifications).length > 0) {
+            moveToToolbarMonitor().then(() => {
+                setIsCorrectMonitor(true);
+            });
         }
-        async function getNotificationsPreferences() {
-            return await FSBL.Clients.NotificationClient.getPreferences();
+    }, [notifications]);
+    /**
+     * Window level hook to resize the window
+     *
+     * Window is on the correct screen and some notifications should be rendered
+     * on the page. Resize the window to fit the content
+     */
+    useLayoutEffect(() => {
+        const resizeWindow = async () => {
+            var _a, _b;
+            const rect = document.getElementsByTagName("body")[0].getBoundingClientRect();
+            const { err, data } = await FEAGlobals.FSBL.Clients.LauncherClient.getMonitorInfo({ monitor: "mine" });
+            if (err || !data) {
+                FEAGlobals.FSBL.Clients.Logger.system.error("Error getting monitor info: ", err);
+                console.error("Error getting monitor info: ", err);
+                return;
+            }
+            const { data: bounds } = await FEAGlobals.finsembleWindow.getBounds();
+            const width = ((_a = bounds === null || bounds === void 0 ? void 0 : bounds.right) !== null && _a !== void 0 ? _a : 0) - ((_b = bounds === null || bounds === void 0 ? void 0 : bounds.left) !== null && _b !== void 0 ? _b : 0);
+            // Does not exceed monitor height
+            const height = Math.min(Math.round(rect === null || rect === void 0 ? void 0 : rect.height) + 16, data["availableRect"]["height"]);
+            await FEAGlobals.finsembleWindow.setBounds({
+                bounds: {
+                    top: data["availableRect"]["top"],
+                    left: data["availableRect"]["right"] - width,
+                    height: height,
+                    width: width,
+                },
+            });
+            setIsBoundsSet(true);
+        };
+        if (isCorrectMonitor && activeNotifications(notifications).length > 0) {
+            resizeWindow();
         }
-        getNotificationsPreferences().then((preferences) => {
-            setInformationalTimeout(preferences.informationalNotificationToastPeriodSeconds);
-        });
-    }, []);
+    }, [isCorrectMonitor, notifications]);
+    /**
+     * Window Level Hook to show and hide the window.
+     * The window position and size manipulations have been completed show / hide it.
+     */
     useEffect(() => {
-        moveToToolbarMonitor().then(async () => {
-            var _a, _b, _c;
-            let forceHide = false;
-            if (activeNotifications(notifications).length === 0 &&
-                activeNotifications(notificationsRef.current).length === 0) {
-                // Bug fix: Toasts flash when inActive components (partially caused by allowing notifications to animate out)
-                forceHide = true;
+        if (!isWindowShowing) {
+            /**
+             * IF the window is not showing
+             * AND the window has been moved to the correct monitor
+             * AND The correct initial bounds have been set (prevents flashing)
+             * AND there are some notifications
+             * THEN show the window
+             */
+            if (isCorrectMonitor && isBoundsSet && activeNotifications(notifications).length > 0) {
+                setIsWindowShowing(true);
+                FEAGlobals.finsembleWindow.show();
             }
-            notificationsRef.current = notifications;
-            const rect = (_a = document.getElementById("notifications-toasts")) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            if (notifications.length === 0 || forceHide) {
-                if (config.isTransparent && !isMac) {
-                    const roundedRect = {
-                        x: Math.round(rect === null || rect === void 0 ? void 0 : rect.x),
-                        y: Math.round(rect === null || rect === void 0 ? void 0 : rect.y),
-                        width: 1,
-                        height: 1,
-                    };
-                    finsembleWindow.setShape([roundedRect]);
-                }
-                finsembleWindow.hide();
-            }
-            else {
-                finsembleWindow.bringToFront();
-                if (config.isTransparent && !isMac) {
-                    const roundedRect = {
-                        x: Math.round(rect === null || rect === void 0 ? void 0 : rect.x),
-                        y: Math.round(rect === null || rect === void 0 ? void 0 : rect.y),
-                        width: Math.round(rect === null || rect === void 0 ? void 0 : rect.width),
-                        height: Math.round(rect === null || rect === void 0 ? void 0 : rect.height),
-                    };
-                    await finsembleWindow.show();
-                    finsembleWindow.setShape([roundedRect]);
-                }
-                else {
-                    const { err, data } = await FSBL.Clients.LauncherClient.getMonitorInfo({ monitor: "mine" });
-                    if (err || !data) {
-                        console.error(err);
-                        FSBL.Clients.Logger.system.error(err);
-                        return;
-                    }
-                    const { data: bounds } = await finsembleWindow.getBounds();
-                    const width = ((_b = bounds === null || bounds === void 0 ? void 0 : bounds.right) !== null && _b !== void 0 ? _b : 0) - ((_c = bounds === null || bounds === void 0 ? void 0 : bounds.left) !== null && _c !== void 0 ? _c : 0);
-                    const height = Math.round(rect === null || rect === void 0 ? void 0 : rect.height) + 6;
-                    await finsembleWindow.setBounds({
-                        bounds: {
-                            top: data["availableRect"]["top"],
-                            left: data["availableRect"]["right"] - width,
-                            height: height + 10,
-                            width: width,
-                        },
-                    });
-                    // show the window after it bounds has been calculated
-                    await finsembleWindow.show();
-                }
+        }
+        else {
+            // Hide the window if it is showing and there are 0 notifications in the list
+            if (activeNotifications(notifications).length === 0) {
+                FEAGlobals.finsembleWindow.hide();
+                setIsWindowShowing(false);
+                setIsCorrectMonitor(false);
+                setIsBoundsSet(false);
             }
-        });
-    }, [notifications]);
-    return (React.createElement("div", null, notifications.map((notification) => (React.createElement(ToastCard, Object.assign({ key: `toast-card-${notification.id}`, notification: notification, informationalNotificationTimeout: informationalTimeout, actionableTimeoutEnabled: actionableTimeoutEnabled, removeFunction: removeNotification, isActiveFunction: isNotificationActive }, props))))));
+        }
+    }, [isCorrectMonitor, isBoundsSet, notifications]);
+    return (React.createElement("div", null, isInitialized &&
+        isCorrectMonitor &&
+        notifications.map((notification) => (React.createElement(ToastCard, Object.assign({ key: `toast-card-${notification.id}`, notification: notification, informationalNotificationTimeout: informationalTimeout, actionableTimeoutEnabled: actionableTimeoutEnabled, removeFunction: removeNotification, isActiveFunction: isNotificationActive }, props))))));
 };
 //# sourceMappingURL=NotificationsToasts.js.map