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

6 files changed, 52 insertions, 35 deletions

diff --git a/frontend/package.json b/frontend/package.json
index fc45005d..846bff50 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -44,7 +44,7 @@
     }
   },
   "dependencies": {
-    "decky-frontend-lib": "3.23.1",
+    "decky-frontend-lib": "3.24.1",
     "filesize": "^10.0.7",
     "i18next": "^23.2.1",
     "i18next-http-backend": "^2.2.1",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index f007e269..f7dbe376 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -6,8 +6,8 @@ settings:
 
 dependencies:
   decky-frontend-lib:
-    specifier: 3.23.1
-    version: 3.23.1
+    specifier: 3.24.1
+    version: 3.24.1
   filesize:
     specifier: ^10.0.7
     version: 10.0.7
@@ -1482,8 +1482,8 @@ packages:
     dependencies:
       ms: 2.1.2
 
-  /decky-frontend-lib@3.23.1:
-    resolution: {integrity: sha512-6JKtSCjk5liJ+xBqOPZvPSp1HdkaQ+j/I19bGSk+cWuxSrodyduduXKJE4p4GJ/+KgFdn0yg/8tRi+DSqmBvdw==}
+  /decky-frontend-lib@3.24.1:
+    resolution: {integrity: sha512-VGxLTPetxx/pQVC+t8odTHrwQAh7uy4bO2Od2gGWSTfmUUoxtAcEtiXGyE9mKsoD6t7QNHrGvgXn78sf2i/IeQ==}
     dev: false
 
   /decode-named-character-reference@1.0.2:
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 (