Merge pull request #1 from Ultreon/error-toasts

Error toasts

package.json

@@ -11,24 +11,25 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-toastify": "^9.1.3"
   },
   "devDependencies": {
+    "@tauri-apps/api": "^1.5.1",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
-    "@tauri-apps/api": "^1.5.1",
     "@vitejs/plugin-react": "^4.2.0",
+    "autoprefixer": "^10.0.1",
     "eslint": "^8.53.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",
-    "typescript": "^5.2.2",
-    "autoprefixer": "^10.0.1",
     "postcss": "^8",
     "react-icons": "^4.12.0",
     "react-router-dom": "^6.19.0",
     "tailwindcss": "^3.3.0",
+    "typescript": "^5.2.2",
     "vite": "^5.0.0"
   }
 }

src-tauri/src/main.rs

@@ -3,13 +3,16 @@
 
 extern crate msgbox;
 
-use tauri::{AppHandle, generate_handler, State, Window};
-use profiles::Profiles;
-use tauri::api::dialog::blocking::FileDialogBuilder;
 use std::fs::{File, OpenOptions};
 use std::path::Path;
 use std::process::exit;
+
 use serde_json::from_reader;
+use tauri::{AppHandle, generate_handler, State, Window};
+use tauri::api::dialog::blocking::FileDialogBuilder;
+
+use profiles::Profiles;
+
 use crate::profiles::Profile;
 use crate::sdk::{SDKInfo, SDKList};
 use crate::util::Error;

src/App.tsx

@@ -1,9 +1,12 @@
-import { MouseEvent, ReactElement, useEffect, useState } from 'react';
+import {MouseEvent, ReactElement, useEffect, useState} from 'react';
 import './App.css';
-import { invoke } from '@tauri-apps/api'
-import { listen } from '@tauri-apps/api/event'
-import { FaBars, FaX } from 'react-icons/fa6';
-import { PROFILES, Profile, load } from './Profiles';
+import {invoke} from '@tauri-apps/api'
+import {listen} from '@tauri-apps/api/event'
+import {FaBars, FaX} from 'react-icons/fa6';
+import {load, Profile, PROFILES} from './Profiles';
+import {toast} from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import ToastComponent from "./CustomToast.tsx";
 
 let selectedProfile: Profile | null = null;
 
@@ -12,7 +15,8 @@ document.oncontextmenu = e => {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-let onprogress = (_payload: DownloadInfo) => {};
+let onprogress = (_payload: DownloadInfo) => {
+};
 
 listen('downloadProgress', (progress) => {
   onprogress(progress.payload as DownloadInfo)
@@ -32,7 +36,7 @@ function MenuButton() {
 
   return (
     <button className="TitleButton Icon Begin" onClick={() => ToggleMenu()} type="button">
-      <FaBars />
+      <FaBars/>
     </button>
   );
 }
@@ -44,7 +48,7 @@ function CloseButton() {
 
   return (
     <button className="TitleButton Icon End" onClick={Close} type="button">
-      <FaX />
+      <FaX/>
     </button>
   );
 }
@@ -62,11 +66,11 @@ function TitleButtonsOther() {
     <div>
       <div className="TitleButtonsOther" data-tauri-drag-region>
         <div className='TitleButtonGroup Begin'>
-          <MenuButton />
+          <MenuButton/>
           {ImportButton()}
         </div>
-        <TitleBarText />
-        <CloseButton />
+        <TitleBarText/>
+        <CloseButton/>
       </div>
     </div>
   );
@@ -99,8 +103,20 @@ function PlayButton() {
 
     RevalidatePlayState(null);
     try {
-      await invoke("launch", { profile: PROF })
+      await invoke("launch", {profile: PROF})
     } catch (e) {
+      if (typeof(e) === "string") {
+        toast.error((
+          // @ts-ignore
+          <>
+            <b>Failed to launch!</b><br/>{e.toString()}
+          </>
+        ), {
+          position: toast.POSITION.TOP_RIGHT,
+          closeOnClick: true,
+          theme: "dark"
+        });
+      }
       console.log("Launch failed:", e);
     }
     RevalidatePlayState(PROF);
@@ -124,14 +140,14 @@ function BottomPanel() {
   return (
     <div>
       <div className="BottomPanel">
-        <PlayButton />
+        <PlayButton/>
       </div>
     </div>
   );
 }
 
 function ProfileEntry(element: Profile): ReactElement {
-  const { name } = element;
+  const {name} = element;
 
   function SelectProfile(event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) {
     const elem = event.currentTarget
@@ -149,7 +165,7 @@ function ProfileEntry(element: Profile): ReactElement {
   );
 }
 
-function Hello(list: ReactElement<HTMLDivElement>, modal: ReactElement<HTMLDivElement>, progress: ReactElement<HTMLDivElement>) {
+function Content(list: ReactElement<HTMLDivElement>, modal: ReactElement<HTMLDivElement>, progress: ReactElement<HTMLDivElement>) {
   return (
     <div>
       <div>
@@ -168,6 +184,7 @@ function Hello(list: ReactElement<HTMLDivElement>, modal: ReactElement<HTMLDivEl
       </div>
       {progress}
       {BottomPanel()}
+      <ToastComponent/>
     </div>
   );
 }
@@ -214,7 +231,8 @@ export default function App() {
       }
     };
 
-    loadProfiles().then(() => {});
+    loadProfiles().then(() => {
+    });
   }, []);
 
   useEffect(() => {
@@ -235,7 +253,7 @@ export default function App() {
   async function importProfile(name: string) {
     try {
       console.log("Attempting to import profile:" + name);
-      const profile: Profile = await invoke("import", { name: name }) as Profile
+      const profile: Profile = await invoke("import", {name: name}) as Profile
       if (profile.game === 'error') {
         console.log("Importing cancelled");
         return;
@@ -256,7 +274,7 @@ export default function App() {
   const MODAL = (
     <div id="InputModalBG" className='ModalBackground'>
       <div id="InputModal" className='Modal'>
-        <input type='text' className='textInput' />
+        <input type='text' className='textInput'/>
         <div className='ButtonGroup'>
           <button type='button' onClick={() => hideModal()}>Cancel</button>
           <button type='button' onClick={() => submitProfileInput(importProfile)}>Import</button>
@@ -265,37 +283,29 @@ export default function App() {
     </div>
   )
 
-  useEffect(() => {
-
-  }, []);
-
   useEffect(() => {
     onprogress = (payload: DownloadInfo) => {
       setProgress(payload);
     };
-    // window.setDLProgress = function (downloaded: number, total: number, downloading: boolean, status: string = "") {
-    //   const info = new DownloadInfo();
-    //   info.downloaded = downloaded;
-    //   info.total = total;
-    //   info.downloading = downloading;
-    //   info.status = status;
-    //   setProgress(info)
-    // }
   }, []);
 
   const PROGRESS = (
     <div className={progress.downloading ? 'ProgressBar Shown' : 'ProgressBar'}>
-      <div id="MainProgressBar" className='ProgressBarInner' style={{width: (progress.percent) + "%"}} />
+      <div id="MainProgressBar" className='ProgressBarInner' style={{width: (progress.percent) + "%"}}/>
       <div id="MainProgressStatus" className='ProgressStatus'>
         {progress.status}
       </div>
     </div>
   )
 
   return (
-    <>{TitleBar()}{Hello(LIST, MODAL, PROGRESS)}</>
+    <>
+      {TitleBar()}
+      {Content(LIST, MODAL, PROGRESS)}
+    </>
   );
 }
+
 function RevalidatePlayState(selectedProfile: Profile | null) {
   const elem = document.getElementById("PlayButton");
   if (selectedProfile == null) {

src/CustomToast.tsx

@@ -0,0 +1,13 @@
+import {ToastContainer} from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import './custom-toast.css'; // Import your custom styles
+
+const ToastComponent = () => {
+    return (
+        <div>
+            <ToastContainer />
+        </div>
+    );
+};
+
+export default ToastComponent;

src/custom-toast.css

@@ -0,0 +1,44 @@
+/* Example styles for the notification container */
+.Toastify__toast-container {
+    width: 320px;
+}
+
+/* Example styles for the notification */
+.Toastify__toast {
+    background-color: #000a;
+    backdrop-filter: blur(24px);
+    color: #fffa;
+    font-size: 16px;
+}
+
+.Toastify__toast-container--top-right {
+    top: calc(1em + 56px);
+}
+
+.Toastify__close-button {
+    width: 24px;
+    height: 24px;
+    padding: 4px 6px;
+    background: #000;
+}
+
+.Toastify__close-button:hover {
+    background: #f30;
+    color: white;
+}
+
+* {
+    --toastify-color-success: #0c0a;
+    --toastify-color-progress-success: #0c0a;
+    --toastify-icon-color-success: #0c0a;
+    --toastify-color-info: #07ca;
+    --toastify-color-progress-info: #07ca;
+    --toastify-icon-color-info: #07ca;
+    --toastify-color-error: #f30a;
+    --toastify-color-progress-error: #f30a;
+    --toastify-icon-color-error: #f30a;
+    --toastify-color-warning: #fa0a;
+    --toastify-color-progress-warning: #fa0a;
+    --toastify-icon-color-warning: #fa0a;
+    --toastify-z-index: 50;
+}