feat(toaster):add support for dismissing toasts and new indicator

1 files changed, 18 insertions, 21 deletions

diff --git a/frontend/src/components/Toast.tsx b/frontend/src/components/Toast.tsx
index e40d1d22..e86e9337 100644
--- a/frontend/src/components/Toast.tsx
+++ b/frontend/src/components/Toast.tsx
@@ -3,7 +3,6 @@ import { Focusable, Navigation, findClassModule, joinClassNames } from '@decky/u
 import { FC, memo } from 'react';
 
 import Logger from '../logger';
-import TranslationHelper, { TranslationClass } from '../utils/TranslationHelper';
 
 const logger = new Logger('ToastRenderer');
 
@@ -17,6 +16,7 @@ export enum ToastLocation {
 
 interface ToastProps {
   toast: ToastData;
+  newIndicator?: boolean;
 }
 
 interface ToastRendererProps extends ToastProps {
@@ -27,7 +27,7 @@ const templateClasses = findClassModule((m) => m.ShortTemplate) || {};
 
 // These are memoized as they like to randomly rerender
 
-const GamepadUIPopupToast: FC<ToastProps> = memo(({ toast }) => {
+const GamepadUIPopupToast: FC<Omit<ToastProps, 'newIndicator'>> = memo(({ toast }) => {
   return (
     <div
       style={{ '--toast-duration': `${toast.duration}ms` } as React.CSSProperties}
@@ -46,13 +46,13 @@ const GamepadUIPopupToast: FC<ToastProps> = memo(({ toast }) => {
   );
 });
 
-const GamepadUIQAMToast: FC<ToastProps> = memo(({ toast }) => {
+const GamepadUIQAMToast: FC<ToastProps> = memo(({ toast, newIndicator }) => {
   // The fields aren't mismatched, the logic for these is just a bit weird.
   return (
     <Focusable
       onActivate={() => {
-        Navigation.CloseSideMenus();
         toast.onClick?.();
+        Navigation.CloseSideMenus();
       }}
       className={joinClassNames(
         templateClasses.StandardTemplateContainer,
@@ -65,11 +65,7 @@ const GamepadUIQAMToast: FC<ToastProps> = memo(({ toast }) => {
         <div className={joinClassNames(templateClasses.Content, toast.contentClassName || '')}>
           <div className={templateClasses.Header}>
             {toast.icon && <div className={templateClasses.Icon}>{toast.icon}</div>}
-            <div className={templateClasses.Title}>
-              {toast.header || (
-                <TranslationHelper transClass={TranslationClass.PLUGIN_LOADER} transText="decky_title" />
-              )}
-            </div>
+            {toast.title && <div className={templateClasses.Title}>{toast.title}</div>}
             {/* timestamp should always be defined by toaster */}
             {/* TODO check how valve does this */}
             {toast.timestamp && (
@@ -78,29 +74,30 @@ const GamepadUIQAMToast: FC<ToastProps> = memo(({ toast }) => {
               </div>
             )}
           </div>
-          <div className={templateClasses.StandardNotificationDescription}>
-            {toast.fullTemplateTitle || toast.title}
-          </div>
-          <div className={templateClasses.StandardNotificationSubText}>{toast.body}</div>
+          {toast.body && <div className={templateClasses.StandardNotificationDescription}>{toast.body}</div>}
+          {toast.subtext && <div className={templateClasses.StandardNotificationSubText}>{toast.subtext}</div>}
         </div>
-        {/* TODO support NewIndicator */}
-        {/* <div className={templateClasses.NewIndicator}><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"
-                viewBox="0 0 50 50" fill="none">
-                <circle fill="currentColor" cx="25" cy="25" r="25"></circle>
-            </svg></div> */}
+        {newIndicator && (
+          <div className={templateClasses.NewIndicator}>
+            <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none">
+              <circle fill="currentColor" cx="25" cy="25" r="25"></circle>
+            </svg>
+          </div>
+        )}
       </div>
     </Focusable>
   );
 });
 
-export const ToastRenderer: FC<ToastRendererProps> = memo(({ toast, location }) => {
+export const ToastRenderer: FC<ToastRendererProps> = memo(({ toast, location, newIndicator }) => {
   switch (location) {
     default:
-      logger.warn(`Toast UI not implemented for location ${location}! Falling back to GamepadUIPopupToast.`);
+      logger.warn(`Toast UI not implemented for location ${location}! Falling back to GamepadUIQAMToast.`);
+      return <GamepadUIQAMToast toast={toast} newIndicator={false} />;
     case ToastLocation.GAMEPADUI_POPUP:
       return <GamepadUIPopupToast toast={toast} />;
     case ToastLocation.GAMEPADUI_QAM:
-      return <GamepadUIQAMToast toast={toast} />;
+      return <GamepadUIQAMToast toast={toast} newIndicator={newIndicator} />;
   }
 });