Add api for showing toast notifications

frontend/src/components/Toast.tsx

@@ -0,0 +1,54 @@
+import { ToastData, findModule, joinClassNames } from 'decky-frontend-lib';
+import { FunctionComponent } from 'react';
+
+interface ToastProps {
+  toast: {
+    data: ToastData;
+    nToastDurationMS: number;
+  };
+}
+
+const toastClasses = findModule((mod) => {
+  if (typeof mod !== 'object') return false;
+
+  if (mod.ToastPlaceholder) {
+    return true;
+  }
+
+  return false;
+});
+
+const templateClasses = findModule((mod) => {
+  if (typeof mod !== 'object') return false;
+
+  if (mod.ShortTemplate) {
+    return true;
+  }
+
+  return false;
+});
+
+const Toast: FunctionComponent<ToastProps> = ({ toast }) => {
+  return (
+    <div
+      style={{ '--toast-duration': `${toast.nToastDurationMS}ms` } as React.CSSProperties}
+      className={joinClassNames(toastClasses.ToastPopup, toastClasses.toastEnter)}
+    >
+      <div
+        onClick={toast.data.onClick}
+        className={joinClassNames(templateClasses.ShortTemplate, toast.data.className || '')}
+      >
+        {toast.data.logo && <div className={templateClasses.StandardLogoDimensions}>{toast.data.logo}</div>}
+        <div className={joinClassNames(templateClasses.Content, toast.data.contentClassName || '')}>
+          <div className={templateClasses.Header}>
+            {toast.data.icon && <div className={templateClasses.Icon}>{toast.data.icon}</div>}
+            <div className={templateClasses.Title}>{toast.data.title}</div>
+          </div>
+          <div className={templateClasses.Body}>{toast.data.body}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Toast;

frontend/src/components/settings/pages/general/Updater.tsx

@@ -2,23 +2,7 @@ import { DialogButton, Field, ProgressBarWithInfo, Spinner } from 'decky-fronten
 import { useEffect, useState } from 'react';
 import { FaArrowDown } from 'react-icons/fa';
 
-import { callUpdaterMethod, finishUpdate } from '../../../../updater';
-
-interface VerInfo {
-  current: string;
-  remote: {
-    assets: {
-      browser_download_url: string;
-      created_at: string;
-    }[];
-    name: string;
-    body: string;
-    prerelease: boolean;
-    published_at: string;
-    tag_name: string;
-  } | null;
-  updatable: boolean;
-}
+import { VerInfo, callUpdaterMethod, finishUpdate } from '../../../../updater';
 
 export default function UpdaterSettings() {
   const [versionInfo, setVersionInfo] = useState<VerInfo | null>(null);

frontend/src/index.tsx

@@ -1,3 +1,5 @@
+import { sleep } from 'decky-frontend-lib';
+
 import PluginLoader from './plugin-loader';
 import { DeckyUpdater } from './updater';
 
@@ -12,6 +14,7 @@ declare global {
   }
 }
 (async () => {
+  await sleep(1000);
   window.deckyAuthToken = await fetch('http://127.0.0.1:1337/auth/token').then((r) => r.text());
 
   window.DeckyPluginLoader?.dismountAll();

frontend/src/plugin-loader.tsx

@@ -12,6 +12,8 @@ import Logger from './logger';
 import { Plugin } from './plugin';
 import RouterHook from './router-hook';
 import TabsHook from './tabs-hook';
+import Toaster from './toaster';
+import { VerInfo, callUpdaterMethod } from './updater';
 
 declare global {
   interface Window {}
@@ -22,6 +24,7 @@ class PluginLoader extends Logger {
   private tabsHook: TabsHook = new TabsHook();
   // private windowHook: WindowHook = new WindowHook();
   private routerHook: RouterHook = new RouterHook();
+  private toaster: Toaster = new Toaster();
   private deckyState: DeckyState = new DeckyState();
 
   private reloadLock: boolean = false;
@@ -54,6 +57,16 @@ class PluginLoader extends Logger {
     });
   }
 
+  public async notifyUpdates() {
+    const versionInfo = (await callUpdaterMethod('get_version')).result as VerInfo;
+    if (versionInfo?.remote && versionInfo?.remote?.tag_name != versionInfo?.current) {
+      this.toaster.toast({
+        title: 'Decky',
+        body: `Update to ${versionInfo?.remote?.tag_name} availiable!`,
+      });
+    }
+  }
+
   public addPluginInstallPrompt(artifact: string, version: string, request_id: string, hash: string) {
     showModal(
       <PluginInstallModal
@@ -189,6 +202,7 @@ class PluginLoader extends Logger {
   createPluginAPI(pluginName: string) {
     return {
       routerHook: this.routerHook,
+      toaster: this.toaster,
       callServerMethod: this.callServerMethod,
       async callPluginMethod(methodName: string, args = {}) {
         const response = await fetch(`http://127.0.0.1:1337/plugins/${pluginName}/methods/${methodName}`, {

frontend/src/toaster.tsx

@@ -0,0 +1,93 @@
+import { ToastData, afterPatch, findInReactTree, findModuleChild, sleep, unpatch } from 'decky-frontend-lib';
+
+import Toast from './components/Toast';
+import Logger from './logger';
+
+declare global {
+  interface Window {
+    __TOASTER_INSTANCE: any;
+    NotificationStore: any;
+  }
+}
+
+class Toaster extends Logger {
+  private instanceRet: any;
+  private node: any;
+  private settingsModule: any;
+
+  constructor() {
+    super('Toaster');
+
+    window.__TOASTER_INSTANCE?.deinit?.();
+    window.__TOASTER_INSTANCE = this;
+    this.init();
+  }
+
+  async init() {
+    this.settingsModule = findModuleChild((m) => {
+      if (typeof m !== 'object') return undefined;
+      for (let prop in m) {
+        if (typeof m[prop]?.settings?.bDisableToastsInGame !== 'undefined') return m[prop];
+      }
+    });
+
+    let instance: any;
+    while (true) {
+      instance = findInReactTree(
+        (document.getElementById('root') as any)._reactRootContainer._internalRoot.current,
+        (x) => x?.memoizedProps?.className?.startsWith('toastmanager_ToastPlaceholder'),
+      );
+      if (instance) break;
+      this.debug('finding instance');
+      await sleep(2000);
+    }
+
+    this.node = instance.return.return;
+    this.node.stateNode.render = (...args: any[]) => {
+      const ret = this.node.stateNode.__proto__.render.call(this.node.stateNode, ...args);
+      if (ret) {
+        this.instanceRet = ret;
+        afterPatch(ret, 'type', (_: any, ret: any) => {
+          if (ret?.props?.children[1]?.children?.props?.notification?.decky) {
+            const toast = ret.props.children[1].children.props.notification;
+            ret.props.children[1].children.type = () => <Toast toast={toast} />;
+          }
+          return ret;
+        });
+      }
+      return ret;
+    };
+    this.node.stateNode.forceUpdate();
+    this.log('Initialized');
+  }
+
+  toast(toast: ToastData) {
+    const settings = this.settingsModule.settings;
+    let toastData = {
+      nNotificationID: window.NotificationStore.m_nNextTestNotificationID++,
+      rtCreated: Date.now(),
+      eType: 15,
+      nToastDurationMS: toast.duration || 5e3,
+      data: toast,
+      decky: true,
+    };
+    // @ts-ignore
+    toastData.data.appid = () => 0;
+    if (
+      (settings.bDisableAllToasts && !toast.critical) ||
+      (settings.bDisableToastsInGame && !toast.critical && window.NotificationStore.BIsUserInGame())
+    )
+      return;
+    window.NotificationStore.m_rgNotificationToasts.push(toastData);
+    window.NotificationStore.DispatchNextToast();
+    window.NotificationStore.m_rgNotificationToasts.pop();
+  }
+
+  deinit() {
+    unpatch(this.instanceRet, 'type');
+    delete this.node.stateNode.render;
+    this.node.stateNode.forceUpdate();
+  }
+}
+
+export default Toaster;

frontend/src/updater.ts

@@ -11,6 +11,22 @@ export interface DeckyUpdater {
   finish: () => void;
 }
 
+export interface VerInfo {
+  current: string;
+  remote: {
+    assets: {
+      browser_download_url: string;
+      created_at: string;
+    }[];
+    name: string;
+    body: string;
+    prerelease: boolean;
+    published_at: string;
+    tag_name: string;
+  } | null;
+  updatable: boolean;
+}
+
 export async function callUpdaterMethod(methodName: string, args = {}) {
   const response = await fetch(`http://127.0.0.1:1337/updater/${methodName}`, {
     method: 'POST',