2 files changed, 55 insertions, 17 deletions
diff --git a/frontend/src/components/Toast.tsx b/frontend/src/components/Toast.tsx
new file mode 100644
index 00000000..559c37c6
--- /dev/null
+++ b/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;
diff --git a/frontend/src/components/settings/pages/general/Updater.tsx b/frontend/src/components/settings/pages/general/Updater.tsx
index 106af6f3..3d137d7a 100644
--- a/frontend/src/components/settings/pages/general/Updater.tsx
+++ b/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);