Add routerhook for desktop UI and a basic sidebar menu for Decky in desktop UI

1 files changed, 35 insertions, 5 deletions

diff --git a/frontend/src/plugin-loader.tsx b/frontend/src/plugin-loader.tsx
index cb1bb270..442f077e 100644
--- a/frontend/src/plugin-loader.tsx
+++ b/frontend/src/plugin-loader.tsx
@@ -1,4 +1,4 @@
-import { ToastNotification } from '@decky/api';
+import type { ToastNotification } from '@decky/api';
 import {
   ModalRoot,
   Navigation,
@@ -13,6 +13,7 @@ import {
 import { FC, lazy } from 'react';
 import { FaDownload, FaExclamationCircle, FaPlug } from 'react-icons/fa';
 
+import DeckyDesktopUI from './components/DeckyDesktopUI';
 import DeckyIcon from './components/DeckyIcon';
 import { DeckyState, DeckyStateContextProvider, UserInfo, useDeckyState } from './components/DeckyState';
 import { File, FileSelectionType } from './components/modals/filepicker';
@@ -24,13 +25,14 @@ import NotificationBadge from './components/NotificationBadge';
 import PluginView from './components/PluginView';
 import { useQuickAccessVisible } from './components/QuickAccessVisibleState';
 import WithSuspense from './components/WithSuspense';
+import { UIMode } from './enums';
 import ErrorBoundaryHook from './errorboundary-hook';
 import { FrozenPluginService } from './frozen-plugins-service';
 import { HiddenPluginsService } from './hidden-plugins-service';
 import Logger from './logger';
 import { NotificationService } from './notification-service';
 import { InstallType, Plugin, PluginLoadType } from './plugin';
-import RouterHook, { UIMode } from './router-hook';
+import RouterHook from './router-hook';
 import { deinitSteamFixes, initSteamFixes } from './steamfixes';
 import { checkForPluginUpdates } from './store';
 import TabsHook from './tabs-hook';
@@ -160,6 +162,21 @@ class PluginLoader extends Logger {
       );
     });
 
+    // needs the 1s wait or the entire app becomes drag target lol
+    sleep(1000).then(() =>
+      this.routerHook.addGlobalComponent(
+        'DeckyDesktopUI',
+        () => {
+          return (
+            <DeckyStateContextProvider deckyState={this.deckyState}>
+              <DeckyDesktopUI />
+            </DeckyStateContextProvider>
+          );
+        },
+        UIMode.Desktop,
+      ),
+    );
+
     initSteamFixes();
 
     initFilepickerPatches();
@@ -362,6 +379,7 @@ class PluginLoader extends Logger {
   public deinit() {
     this.routerHook.removeRoute('/decky/store');
     this.routerHook.removeRoute('/decky/settings');
+    this.routerHook.removeGlobalComponent('DeckyDesktopUI', UIMode.Desktop);
     deinitSteamFixes();
     deinitFilepickerPatches();
     this.routerHook.deinit();
@@ -627,8 +645,8 @@ class PluginLoader extends Logger {
     // Things will break *very* badly if plugin code touches this outside of @decky/api, so lets make that clear.
     window.__DECKY_SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_deckyLoaderAPIInit = {
       connect: (version: number, pluginName: string) => {
-        if (version < 1 || version > 2) {
-          console.warn(`Plugin ${pluginName} requested unsupported api version ${version}.`);
+        if (version < 1 || version > 3) {
+          console.warn(`Plugin ${pluginName} requested unsupported API version ${version}.`);
         }
 
         const eventListeners: listenerMap = new Map();
@@ -671,12 +689,20 @@ class PluginLoader extends Logger {
           _version: 1,
         } as any;
 
+        // adds useQuickAccessVisible
         if (version >= 2) {
           backendAPI._version = 2;
           backendAPI.useQuickAccessVisible = useQuickAccessVisible;
         }
 
-        this.debug(`${pluginName} connected to loader API.`);
+        // adds uiMode param to route patching and global component functions. no functional changes, but we should warn anyway.
+        if (version >= 3) {
+          backendAPI._version = 3;
+        }
+
+        this.debug(
+          `${pluginName} connected to loader API version ${backendAPI._version} (requested version ${version}).`,
+        );
         return backendAPI;
       },
     };
@@ -733,6 +759,10 @@ class PluginLoader extends Logger {
 
     return pluginAPI;
   }
+
+  public setDesktopMenuOpen(open: boolean) {
+    this.deckyState.setDesktopMenuOpen(open);
+  }
 }
 
 export default PluginLoader;