bump decky-frontend-lib

This reverts commit 3ac0abc82b.

.github/workflows/build.yml

@@ -42,10 +42,10 @@ jobs:
     - name: Checkout 🧰
       uses: actions/checkout@v3
 
-    - name: Set up NodeJS 17 💎
+    - name: Set up NodeJS 18 💎
       uses: actions/setup-node@v3
       with:
-        node-version: 17
+        node-version: 18
       
     - name: Set up Python 3.10 🐍
       uses: actions/setup-python@v3
@@ -58,13 +58,17 @@ jobs:
         pip install pyinstaller
         [ -f requirements.txt ] && pip install -r requirements.txt
 
-    - name: Install NodeJS dependencies ⬇️
+    - name: Install JS dependencies ⬇️
+      working-directory: ./frontend
       run: |
-        cd frontend
-        npm i
-        npm run build
+        npm i -g pnpm
+        pnpm i --frozen-lockfile
 
-    - name: Build 🛠️
+    - name: Build JS Frontend 🛠️
+      working-directory: ./frontend
+      run: pnpm run build
+
+    - name: Build Python Backend 🛠️
       run: pyinstaller --noconfirm --onefile --name "PluginLoader" --add-data ./backend/static:/static --add-data ./backend/legacy:/legacy ./backend/*.py
         
     - name: Upload package artifact ⬆️
@@ -142,7 +146,7 @@ jobs:
           fi
         fi
         echo "vOUT: v$OUT"
-        echo ::set-output name=tag_name::v$OUT
+        echo tag_name=v$OUT >> $GITHUB_OUTPUT
 
     - name: Push tag 📤
       uses: rickstaa/action-create-tag@v1.3.2
@@ -231,7 +235,7 @@ jobs:
           fi
         fi
         printf "vOUT: v${OUT}\n"
-        echo ::set-output name=tag_name::v$OUT
+        echo tag_name=v$OUT >> $GITHUB_OUTPUT
 
     - name: Push tag 📤
       uses: rickstaa/action-create-tag@v1.3.2

backend/main.py

@@ -7,7 +7,7 @@ if hasattr(sys, '_MEIPASS'):
 from asyncio import get_event_loop, sleep
 from json import dumps, loads
 from logging import DEBUG, INFO, basicConfig, getLogger
-from os import getenv, chmod
+from os import getenv, chmod, path
 from traceback import format_exc
 
 import aiohttp_cors

frontend/package.json

@@ -41,7 +41,7 @@
     }
   },
   "dependencies": {
-    "decky-frontend-lib": "^3.1.3",
+    "decky-frontend-lib": "^3.6.0",
     "react-file-icon": "^1.2.0",
     "react-icons": "^4.4.0",
     "react-markdown": "^8.0.3",

frontend/pnpm-lock.yaml

@@ -10,7 +10,7 @@ specifiers:
   '@types/react-file-icon': ^1.0.1
   '@types/react-router': 5.1.18
   '@types/webpack': ^5.28.0
-  decky-frontend-lib: ^3.1.3
+  decky-frontend-lib: ^3.6.0
   husky: ^8.0.1
   import-sort-style-module: ^6.0.0
   inquirer: ^8.2.4
@@ -30,7 +30,7 @@ specifiers:
   typescript: ^4.7.4
 
 dependencies:
-  decky-frontend-lib: 3.1.3
+  decky-frontend-lib: 3.6.0
   react-file-icon: 1.2.0_wcqkhtmu7mswc6yz4uyexck3ty
   react-icons: 4.4.0_react@16.14.0
   react-markdown: 8.0.3_vshvapmxg47tngu7tvrsqpq55u
@@ -944,10 +944,10 @@ packages:
     dependencies:
       ms: 2.1.2
 
-  /decky-frontend-lib/3.1.3:
-    resolution: {integrity: sha512-X6DGi90VdXnyoQi8Q4jEYhvBiNQualMNwXWKwgFitdor2ktNj5xp3a4uIi1ijbnS/vdW2AGKjraTfOMXtHUNAg==}
+  /decky-frontend-lib/3.6.0:
+    resolution: {integrity: sha512-X3VbTbmW7TnBwPW0ui0xjSVoa2UsuKPwI6nFi7LY2ZzmNytCfszk+ZfJSBm2lD2fqV+btqJzr0qFnWFl+bgjEA==}
     dependencies:
-      minimist: 1.2.6
+      minimist: 1.2.7
     dev: false
 
   /decode-named-character-reference/1.0.2:
@@ -1944,8 +1944,8 @@ packages:
       brace-expansion: 1.1.11
     dev: true
 
-  /minimist/1.2.6:
-    resolution: {integrity: sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==}
+  /minimist/1.2.7:
+    resolution: {integrity: sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==}
     dev: false
 
   /mri/1.2.0:

frontend/src/components/PluginView.tsx

@@ -1,5 +1,6 @@
 import {
   ButtonItem,
+  Focusable,
   PanelSection,
   PanelSectionRow,
   joinClassNames,
@@ -10,38 +11,47 @@ import { VFC } from 'react';
 
 import { useDeckyState } from './DeckyState';
 import NotificationBadge from './NotificationBadge';
+import { useQuickAccessVisible } from './QuickAccessVisibleState';
+import TitleView from './TitleView';
 
 const PluginView: VFC = () => {
-  const { plugins, updates, activePlugin, setActivePlugin } = useDeckyState();
+  const { plugins, updates, activePlugin, setActivePlugin, closeActivePlugin } = useDeckyState();
+  const visible = useQuickAccessVisible();
 
   if (activePlugin) {
     return (
-      <div
-        className={joinClassNames(staticClasses.TabGroupPanel, scrollClasses.ScrollPanel, scrollClasses.ScrollY)}
-        style={{ height: '100%' }}
-      >
-        {activePlugin.content}
-      </div>
+      <Focusable onCancelButton={closeActivePlugin}>
+        <TitleView />
+        <div
+          className={joinClassNames(staticClasses.TabGroupPanel, scrollClasses.ScrollPanel, scrollClasses.ScrollY)}
+          style={{ height: '100%' }}
+        >
+          {(visible || activePlugin.alwaysRender) && activePlugin.content}
+        </div>
+      </Focusable>
     );
   }
   return (
-    <div className={joinClassNames(staticClasses.TabGroupPanel, scrollClasses.ScrollPanel, scrollClasses.ScrollY)}>
-      <PanelSection>
-        {plugins
-          .filter((p) => p.content)
-          .map(({ name, icon }) => (
-            <PanelSectionRow key={name}>
-              <ButtonItem layout="below" onClick={() => setActivePlugin(name)}>
-                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                  {icon}
-                  <div>{name}</div>
-                  <NotificationBadge show={updates?.has(name)} style={{ top: '-5px', right: '-5px' }} />
-                </div>
-              </ButtonItem>
-            </PanelSectionRow>
-          ))}
-      </PanelSection>
-    </div>
+    <>
+      <TitleView />
+      <div className={joinClassNames(staticClasses.TabGroupPanel, scrollClasses.ScrollPanel, scrollClasses.ScrollY)}>
+        <PanelSection>
+          {plugins
+            .filter((p) => p.content)
+            .map(({ name, icon }) => (
+              <PanelSectionRow key={name}>
+                <ButtonItem layout="below" onClick={() => setActivePlugin(name)}>
+                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                    {icon}
+                    <div>{name}</div>
+                    <NotificationBadge show={updates?.has(name)} style={{ top: '-5px', right: '-5px' }} />
+                  </div>
+                </ButtonItem>
+              </PanelSectionRow>
+            ))}
+        </PanelSection>
+      </div>
+    </>
   );
 };
 

frontend/src/components/QuickAccessVisibleState.tsx

@@ -0,0 +1,13 @@
+import { FC, createContext, useContext } 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>;
+};

frontend/src/components/Toast.tsx

@@ -32,7 +32,7 @@ const Toast: FunctionComponent<ToastProps> = ({ toast }) => {
   return (
     <div
       style={{ '--toast-duration': `${toast.nToastDurationMS}ms` } as React.CSSProperties}
-      className={toastClasses.toastEnter}
+      className={joinClassNames(toastClasses.ToastPopup, toastClasses.toastEnter)}
     >
       <div
         onClick={toast.data.onClick}

frontend/src/plugin-loader.tsx

@@ -4,9 +4,6 @@ import {
   Patch,
   QuickAccessTab,
   Router,
-  callOriginal,
-  findModuleChild,
-  replacePatch,
   showModal,
   sleep,
   staticClasses,
@@ -20,7 +17,6 @@ import { deinitFilepickerPatches, initFilepickerPatches } from './components/mod
 import PluginInstallModal from './components/modals/PluginInstallModal';
 import NotificationBadge from './components/NotificationBadge';
 import PluginView from './components/PluginView';
-import TitleView from './components/TitleView';
 import WithSuspense from './components/WithSuspense';
 import Logger from './logger';
 import { Plugin } from './plugin';
@@ -67,7 +63,6 @@ class PluginLoader extends Logger {
       title: null,
       content: (
         <DeckyStateContextProvider deckyState={this.deckyState}>
-          <TitleView />
           <PluginView />
         </DeckyStateContextProvider>
       ),
@@ -97,38 +92,6 @@ class PluginLoader extends Logger {
     initFilepickerPatches();
 
     this.updateVersion();
-
-    const self = this;
-
-    try {
-      // TODO remove all of this once Valve fixes the bug
-      const focusManager = findModuleChild((m) => {
-        if (typeof m !== 'object') return false;
-        for (let prop in m) {
-          if (m[prop]?.prototype?.TakeFocus) return m[prop];
-        }
-        return false;
-      });
-
-      this.focusWorkaroundPatch = replacePatch(focusManager.prototype, 'TakeFocus', function () {
-        // @ts-ignore
-        const classList = this.m_node?.m_element.classList;
-        if (
-          // @ts-ignore
-          (this.m_node?.m_element && classList.contains(staticClasses.TabGroupPanel)) ||
-          classList.contains('FriendsListTab') ||
-          classList.contains('FriendsTabList') ||
-          classList.contains('FriendsListAndChatsSteamDeck')
-        ) {
-          self.debug('Intercepted friends re-focus');
-          return true;
-        }
-
-        return callOriginal;
-      });
-    } catch (e) {
-      this.error('Friends focus patch failed', e);
-    }
   }
 
   public async updateVersion() {

frontend/src/plugin.ts

@@ -4,4 +4,5 @@ export interface Plugin {
   icon: JSX.Element;
   content?: JSX.Element;
   onDismount?(): void;
+  alwaysRender?: boolean;
 }

frontend/src/tabs-hook.tsx

@@ -1,6 +1,7 @@
 import { Patch, QuickAccessTab, afterPatch, sleep } from 'decky-frontend-lib';
 import { memo } from 'react';
 
+import { QuickAccessVisibleStateProvider } from './components/QuickAccessVisibleState';
 import Logger from './logger';
 
 declare global {
@@ -83,17 +84,17 @@ class TabsHook extends Logger {
             if (ret) {
               if (!newQATabRenderer) {
                 this.tabRenderer = ret.props.children[1].children.type;
-                newQATabRenderer = (...args: any) => {
+                newQATabRenderer = (...qamArgs: any[]) => {
                   const oFilter = Array.prototype.filter;
                   Array.prototype.filter = function (...args: any[]) {
                     if (isTabsArray(this)) {
-                      self.render(this);
+                      self.render(this, qamArgs[0].visible);
                     }
                     // @ts-ignore
                     return oFilter.call(this, ...args);
                   };
                   // TODO remove array hack entirely and use this instead const tabs = ret.props.children.props.children[0].props.children[1].props.children[0].props.children[0].props.tabs
-                  const ret = this.tabRenderer(...args);
+                  const ret = this.tabRenderer(...qamArgs);
                   Array.prototype.filter = oFilter;
                   return ret;
                 };
@@ -135,13 +136,13 @@ class TabsHook extends Logger {
     this.tabs = this.tabs.filter((tab) => tab.id !== id);
   }
 
-  render(existingTabs: any[]) {
+  render(existingTabs: any[], visible: boolean) {
     for (const { title, icon, content, id } of this.tabs) {
       existingTabs.push({
         key: id,
         title,
         tab: icon,
-        panel: content,
+        panel: <QuickAccessVisibleStateProvider visible={visible}>{content}</QuickAccessVisibleStateProvider>,
       });
     }
   }

frontend/src/toaster.tsx

@@ -38,23 +38,38 @@ class Toaster extends Logger {
       await sleep(2000);
     }
 
-    this.node = instance.sibling.child;
+    this.node = instance.return.return;
     let toast: any;
     let renderedToast: ReactNode = null;
-    afterPatch(this.node, 'type', (args: any[], ret: any) => {
-      const currentToast = args[0].notification;
-      if (currentToast?.decky) {
-        if (currentToast !== toast) {
-          toast = currentToast;
-          renderedToast = <Toast toast={toast} />;
-        }
-        ret.props.children = renderedToast;
-      } else {
-        toast = null;
-        renderedToast = null;
+    this.node.stateNode.render = (...args: any[]) => {
+      const ret = this.node.stateNode.__proto__.render.call(this.node.stateNode, ...args);
+      if (ret) {
+        this.instanceRetPatch = afterPatch(ret, 'type', (_: any, ret: any) => {
+          if (ret?.props?.children[1]?.children?.props) {
+            const currentToast = ret.props.children[1].children.props.notification;
+            if (currentToast?.decky) {
+              if (currentToast == toast) {
+                ret.props.children[1].children = renderedToast;
+              } else {
+                toast = currentToast;
+                renderedToast = <Toast toast={toast} />;
+                ret.props.children[1].children = renderedToast;
+              }
+            } else {
+              toast = null;
+              renderedToast = null;
+            }
+          }
+          return ret;
+        });
+        this.node.stateNode.shouldComponentUpdate = () => {
+          return false;
+        };
+        delete this.node.stateNode.render;
       }
       return ret;
-    });
+    };
+    this.node.stateNode.forceUpdate();
     this.settingsModule = findModuleChild((m) => {
       if (typeof m !== 'object') return undefined;
       for (let prop in m) {
@@ -91,7 +106,7 @@ class Toaster extends Logger {
 
   deinit() {
     this.instanceRetPatch?.unpatch();
-    this.node && delete this.node.stateNode.render;
+    this.node && delete this.node.stateNode.shouldComponentUpdate;
     this.node && this.node.stateNode.forceUpdate();
   }
 }