preview 10/21/2022 fixes (#234)

* initial fixes: everything working except toasts and patch notes

* tabshook changes, disable toaster for now

* prettier

* oops

* implement custom toaster because I am tired of Valve's shit

also fix QAM not injecting sometimes

* remove extra logging

* add findSP, fix patch notes, fix vscode screwup

* fix patch notes

* show error when plugin frontends fail to load

* add get_tab_lambda

* add css and has_element helpers to Tab

* small modals fixup

* Don't forceUpdate QuickAccess on stable

* add routes prop used to get tabs component

* add more dev utils to DFL global

1 files changed, 11 insertions, 16 deletions

diff --git a/frontend/src/components/Toast.tsx b/frontend/src/components/Toast.tsx
index 01a436d7..e7a220c2 100644
--- a/frontend/src/components/Toast.tsx
+++ b/frontend/src/components/Toast.tsx
@@ -2,13 +2,10 @@ import { ToastData, findModule, joinClassNames } from 'decky-frontend-lib';
 import { FunctionComponent } from 'react';
 
 interface ToastProps {
-  toast: {
-    data: ToastData;
-    nToastDurationMS: number;
-  };
+  toast: ToastData;
 }
 
-const toastClasses = findModule((mod) => {
+export const toastClasses = findModule((mod) => {
   if (typeof mod !== 'object') return false;
 
   if (mod.ToastPlaceholder) {
@@ -30,21 +27,19 @@ const templateClasses = findModule((mod) => {
 
 const Toast: FunctionComponent<ToastProps> = ({ toast }) => {
   return (
-    <div
-      style={{ '--toast-duration': `${toast.nToastDurationMS}ms` } as React.CSSProperties}
-      className={toastClasses.toastEnter}
-    >
+    <div className={toastClasses.ToastPopup}>
       <div
-        onClick={toast.data.onClick}
-        className={joinClassNames(templateClasses.ShortTemplate, toast.data.className || '')}
+        style={{ '--toast-duration': `${toast.duration}ms` } as React.CSSProperties}
+        onClick={toast.onClick}
+        className={joinClassNames(templateClasses.ShortTemplate, toast.className || '')}
       >
-        {toast.data.logo && <div className={templateClasses.StandardLogoDimensions}>{toast.data.logo}</div>}
-        <div className={joinClassNames(templateClasses.Content, toast.data.contentClassName || '')}>
+        {toast.logo && <div className={templateClasses.StandardLogoDimensions}>{toast.logo}</div>}
+        <div className={joinClassNames(templateClasses.Content, toast.contentClassName || '')}>
           <div className={templateClasses.Header}>
-            {toast.data.icon && <div className={templateClasses.Icon}>{toast.data.icon}</div>}
-            <div className={templateClasses.Title}>{toast.data.title}</div>
+            {toast.icon && <div className={templateClasses.Icon}>{toast.icon}</div>}
+            <div className={templateClasses.Title}>{toast.title}</div>
           </div>
-          <div className={templateClasses.Body}>{toast.data.body}</div>
+          <div className={templateClasses.Body}>{toast.body}</div>
         </div>
       </div>
     </div>