fix: Adjust tabs and toaster hooks to work on react 18, also half-fix Valve Internal

4 files changed, 47 insertions, 30 deletions

diff --git a/frontend/src/developer.tsx b/frontend/src/developer.tsx
index 8bd09812..fef29a0e 100644
--- a/frontend/src/developer.tsx
+++ b/frontend/src/developer.tsx
@@ -9,32 +9,40 @@ const logger = new Logger('DeveloperMode');
 
 let removeSettingsObserver: () => void = () => {};
 
-export async function setShowValveInternal(show: boolean) {
-  let settingsMod: any;
-  while (!settingsMod) {
-    settingsMod = findModuleChild((m) => {
-      if (typeof m !== 'object') return undefined;
-      for (let prop in m) {
-        if (typeof m[prop]?.settings?.bIsValveEmail !== 'undefined') return m[prop];
-      }
-    });
-    if (!settingsMod) {
-      logger.debug('[ValveInternal] waiting for settingsMod');
-      await sleep(1000);
-    }
+declare global {
+  interface Window {
+    settingsStore: any;
   }
+}
 
+export async function setShowValveInternal(show: boolean) {
   if (show) {
-    removeSettingsObserver = settingsMod[
-      Object.getOwnPropertySymbols(settingsMod).find((x) => x.toString() == 'Symbol(mobx administration)') as any
-    ].observe((e: any) => {
-      e.newValue.bIsValveEmail = true;
-    });
-    settingsMod.m_Settings.bIsValveEmail = true;
+    const mobx =
+      window.settingsStore[
+        Object.getOwnPropertySymbols(window.settingsStore).find(
+          (x) => x.toString() == 'Symbol(mobx administration)',
+        ) as any
+      ];
+
+    if (mobx.observe_) {
+      // New style, currently broken
+      logger.log('Valve internal not yet supported on this build.');
+      // removeSettingsObserver = mobx.observe_(mobx, [(e: any) => {
+      //   console.log("got e", e)
+      //   e.newValue.bIsValveEmail = true;
+      // }]);
+    } else if (mobx.observe) {
+      // Old style
+      removeSettingsObserver = mobx.observe((e: any) => {
+        e.newValue.bIsValveEmail = true;
+      });
+    }
+
+    window.settingsStore.m_Settings.bIsValveEmail = true;
     logger.log('Enabled Valve Internal menu');
   } else {
     removeSettingsObserver();
-    settingsMod.m_Settings.bIsValveEmail = false;
+    window.settingsStore.m_Settings.bIsValveEmail = false;
     logger.log('Disabled Valve Internal menu');
   }
 }
diff --git a/frontend/src/tabs-hook.old.tsx b/frontend/src/tabs-hook.old.tsx
index 5b511596..982f6f09 100644
--- a/frontend/src/tabs-hook.old.tsx
+++ b/frontend/src/tabs-hook.old.tsx
@@ -1,5 +1,5 @@
 // TabsHook for versions before the Desktop merge
-import { Patch, afterPatch, sleep } from 'decky-frontend-lib';
+import { Patch, afterPatch, getReactRoot, sleep } from 'decky-frontend-lib';
 import { memo } from 'react';
 
 import NewTabsHook from './tabs-hook';
@@ -35,7 +35,7 @@ class TabsHook extends NewTabsHook {
 
   init() {
     const self = this;
-    const tree = (document.getElementById('root') as any)._reactRootContainer._internalRoot.current;
+    const tree = getReactRoot(document.getElementById('root') as any);
     let scrollRoot: any;
     async function findScrollRoot(currentNode: any, iters: number): Promise<any> {
       if (iters >= 30) {
diff --git a/frontend/src/tabs-hook.tsx b/frontend/src/tabs-hook.tsx
index 72437701..56ff8f10 100644
--- a/frontend/src/tabs-hook.tsx
+++ b/frontend/src/tabs-hook.tsx
@@ -1,5 +1,5 @@
 // TabsHook for versions after the Desktop merge
-import { Patch, QuickAccessTab, afterPatch, findInReactTree, sleep } from 'decky-frontend-lib';
+import { Patch, QuickAccessTab, afterPatch, findInReactTree, getReactRoot, sleep } from 'decky-frontend-lib';
 
 import { QuickAccessVisibleStateProvider } from './components/QuickAccessVisibleState';
 import Logger from './logger';
@@ -32,11 +32,11 @@ class TabsHook extends Logger {
   }
 
   init() {
-    const tree = (document.getElementById('root') as any)._reactRootContainer._internalRoot.current;
+    const tree = getReactRoot(document.getElementById('root') as any);
     let qAMRoot: any;
     const findQAMRoot = (currentNode: any, iters: number): any => {
-      if (iters >= 65) {
-        // currently 45
+      if (iters >= 80) {
+        // currently 67
         return null;
       }
       if (
diff --git a/frontend/src/toaster.tsx b/frontend/src/toaster.tsx
index 7ef4a447..0db8889a 100644
--- a/frontend/src/toaster.tsx
+++ b/frontend/src/toaster.tsx
@@ -1,4 +1,13 @@
-import { Module, Patch, ToastData, afterPatch, findInReactTree, findModuleChild, sleep } from 'decky-frontend-lib';
+import {
+  Module,
+  Patch,
+  ToastData,
+  afterPatch,
+  findInReactTree,
+  findModuleChild,
+  getReactRoot,
+  sleep,
+} from 'decky-frontend-lib';
 import { ReactNode } from 'react';
 
 import Toast from './components/Toast';
@@ -38,10 +47,10 @@ class Toaster extends Logger {
     //   </DeckyToasterStateContextProvider>
     // ));
     let instance: any;
-    const tree = (document.getElementById('root') as any)._reactRootContainer._internalRoot.current;
+    const tree = getReactRoot(document.getElementById('root') as any);
     const findToasterRoot = (currentNode: any, iters: number): any => {
-      if (iters >= 65) {
-        // currently 65
+      if (iters >= 80) {
+        // currently 66
         return null;
       }
       if (