Allow B button to close active plugin and return to menu. (#218)

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 ⬆️

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/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.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/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();
   }
 }