preview 10/21/2022 fixes (#234)

* initial fixes: everything working except toasts and patch notes

* tabshook changes, disable toaster for now

* prettier

* oops

* implement custom toaster because I am tired of Valve's shit

also fix QAM not injecting sometimes

* remove extra logging

* add findSP, fix patch notes, fix vscode screwup

* fix patch notes

* show error when plugin frontends fail to load

* add get_tab_lambda

* add css and has_element helpers to Tab

* small modals fixup

* Don't forceUpdate QuickAccess on stable

* add routes prop used to get tabs component

* add more dev utils to DFL global

1 files changed, 21 insertions, 7 deletions

diff --git a/frontend/src/components/QuickAccessVisibleState.tsx b/frontend/src/components/QuickAccessVisibleState.tsx
index b5ee3b98..4df7e1a1 100644
--- a/frontend/src/components/QuickAccessVisibleState.tsx
+++ b/frontend/src/components/QuickAccessVisibleState.tsx
@@ -1,13 +1,27 @@
-import { FC, createContext, useContext } from 'react';
+import { FC, createContext, useContext, useEffect, useRef, useState } from 'react';
 
 const QuickAccessVisibleState = createContext<boolean>(true);
 
 export const useQuickAccessVisible = () => useContext(QuickAccessVisibleState);
 
-interface Props {
-  visible: boolean;
-}
-
-export const QuickAccessVisibleStateProvider: FC<Props> = ({ children, visible }) => {
-  return <QuickAccessVisibleState.Provider value={visible}>{children}</QuickAccessVisibleState.Provider>;
+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>
+  );
 };