2 files changed, 26 insertions, 34 deletions
diff --git a/frontend/src/components/QuickAccessVisibleState.tsx b/frontend/src/components/QuickAccessVisibleState.tsx
index 4df7e1a1..09babe84 100644
--- a/frontend/src/components/QuickAccessVisibleState.tsx
+++ b/frontend/src/components/QuickAccessVisibleState.tsx
@@ -1,27 +1,21 @@
-import { FC, createContext, useContext, useEffect, useRef, useState } from 'react';
+import { FC, createContext, useContext, useState } from 'react';
 
 const QuickAccessVisibleState = createContext<boolean>(true);
 
 export const useQuickAccessVisible = () => useContext(QuickAccessVisibleState);
 
-export const QuickAccessVisibleStateProvider: FC<{}> = ({ children }) => {
-  const divRef = useRef<HTMLDivElement>(null);
-  const [visible, setVisible] = useState<boolean>(false);
-  useEffect(() => {
-    const doc: Document | void | null = divRef?.current?.ownerDocument;
-    if (!doc) return;
-    setVisible(doc.visibilityState == 'visible');
-    const onChange = (e: Event) => {
-      setVisible(doc.visibilityState == 'visible');
-    };
-    doc.addEventListener('visibilitychange', onChange);
-    return () => {
-      doc.removeEventListener('visibilitychange', onChange);
-    };
-  }, [divRef]);
-  return (
-    <div ref={divRef}>
-      <QuickAccessVisibleState.Provider value={visible}>{children}</QuickAccessVisibleState.Provider>
-    </div>
-  );
+export const QuickAccessVisibleStateProvider: FC<{ initial: boolean; setter: ((val: boolean) => {}[]) | never[] }> = ({
+  children,
+  initial,
+  setter,
+}) => {
+  const [visible, setVisible] = useState<boolean>(initial);
+  const [prev, setPrev] = useState<boolean>(initial);
+  // hack to use an array as a "pointer" to pass the setter up the tree
+  setter[0] = setVisible;
+  if (initial != prev) {
+    setPrev(initial);
+    setVisible(initial);
+  }
+  return <QuickAccessVisibleState.Provider value={visible}>{children}</QuickAccessVisibleState.Provider>;
 };
diff --git a/frontend/src/components/Toast.tsx b/frontend/src/components/Toast.tsx
index e7a220c2..78fb60aa 100644
--- a/frontend/src/components/Toast.tsx
+++ b/frontend/src/components/Toast.tsx
@@ -27,20 +27,18 @@ const templateClasses = findModule((mod) => {
 
 const Toast: FunctionComponent<ToastProps> = ({ toast }) => {
   return (
-    <div className={toastClasses.ToastPopup}>
-      <div
-        style={{ '--toast-duration': `${toast.duration}ms` } as React.CSSProperties}
-        onClick={toast.onClick}
-        className={joinClassNames(templateClasses.ShortTemplate, toast.className || '')}
-      >
-        {toast.logo && <div className={templateClasses.StandardLogoDimensions}>{toast.logo}</div>}
-        <div className={joinClassNames(templateClasses.Content, toast.contentClassName || '')}>
-          <div className={templateClasses.Header}>
-            {toast.icon && <div className={templateClasses.Icon}>{toast.icon}</div>}
-            <div className={templateClasses.Title}>{toast.title}</div>
-          </div>
-          <div className={templateClasses.Body}>{toast.body}</div>
+    <div
+      style={{ '--toast-duration': `${toast.duration}ms` } as React.CSSProperties}
+      onClick={toast.onClick}
+      className={joinClassNames(templateClasses.ShortTemplate, toast.className || '')}
+    >
+      {toast.logo && <div className={templateClasses.StandardLogoDimensions}>{toast.logo}</div>}
+      <div className={joinClassNames(templateClasses.Content, toast.contentClassName || '')}>
+        <div className={templateClasses.Header}>
+          {toast.icon && <div className={templateClasses.Icon}>{toast.icon}</div>}
+          <div className={templateClasses.Title}>{toast.title}</div>
         </div>
+        <div className={templateClasses.Body}>{toast.body}</div>
       </div>
     </div>
   );