From 4cf80595ad61107a4edb2041e63983329f23ccb7 Mon Sep 17 00:00:00 2001
From: AAGaming <aagaming@riseup.net>
Date: Sun, 28 Jul 2024 18:19:55 -0400
Subject: feat(toaster):add support for dismissing toasts and new indicator

---
 frontend/src/components/DeckyIcon.tsx              |  2 +-
 frontend/src/components/Toast.tsx                  | 39 ++++++++++------------
 .../components/settings/pages/testing/index.tsx    |  3 +-
 3 files changed, 21 insertions(+), 23 deletions(-)

(limited to 'frontend/src/components')

diff --git a/frontend/src/components/DeckyIcon.tsx b/frontend/src/components/DeckyIcon.tsx
index fce249e3..85cc2ad7 100644
--- a/frontend/src/components/DeckyIcon.tsx
+++ b/frontend/src/components/DeckyIcon.tsx
@@ -1,7 +1,7 @@
 import { FC, SVGAttributes } from 'react';
 
 const DeckyIcon: FC<SVGAttributes<SVGElement>> = (props) => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 456" width="512" height="456" {...props}>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 456" {...props}>
     <g>
       <path
         style={{ fill: 'none' }}
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} />;
   }
 });
 
diff --git a/frontend/src/components/settings/pages/testing/index.tsx b/frontend/src/components/settings/pages/testing/index.tsx
index 6f52afe3..8f02c207 100644
--- a/frontend/src/components/settings/pages/testing/index.tsx
+++ b/frontend/src/components/settings/pages/testing/index.tsx
@@ -91,13 +91,14 @@ export default function TestingVersionList() {
                     <DialogButton
                       style={{ height: '40px', minWidth: '60px', marginRight: '10px' }}
                       onClick={async () => {
-                        DeckyPluginLoader.toaster.toast({
+                        const downloadToast = DeckyPluginLoader.toaster.toast({
                           title: t('Testing.start_download_toast', { id: version.id }),
                           body: null,
                           icon: <FaFlask />,
                         });
                         try {
                           await downloadTestingVersion(version.id, version.head_sha);
+                          downloadToast.dismiss();
                         } catch (e) {
                           if (e instanceof Error) {
                             DeckyPluginLoader.toaster.toast({
-- 
cgit v1.2.3