From e35e895d8a29481035c246d50daba2cb83be49c9 Mon Sep 17 00:00:00 2001
From: RileyTheFox <jacobchambers@hotmail.co.uk>
Date: Mon, 26 Aug 2024 04:21:59 +0100
Subject: [PATCH 1/3] Warning dialog for selecting old versions

---
 src/dialogs/Dialogs/OldVersionDialog.tsx | 33 ++++++++++++++++++++++++
 src/routes/AppProfile/AppSettings.tsx    | 19 +++++++++++---
 2 files changed, 49 insertions(+), 3 deletions(-)
 create mode 100644 src/dialogs/Dialogs/OldVersionDialog.tsx

diff --git a/src/dialogs/Dialogs/OldVersionDialog.tsx b/src/dialogs/Dialogs/OldVersionDialog.tsx
new file mode 100644
index 0000000..107389f
--- /dev/null
+++ b/src/dialogs/Dialogs/OldVersionDialog.tsx
@@ -0,0 +1,33 @@
+import Button, { ButtonColor } from "@app/components/Button";
+import { BaseDialog } from "./BaseDialog";
+import { closeDialog } from "..";
+
+export class OldVersionDialog extends BaseDialog<Record<string, never>> {
+    constructor(props: Record<string, unknown>) {
+        super(props);
+    }
+
+    getInnerContents() {
+        return <>
+            <p>
+                <strong>You are trying to select an old version of YARG!</strong>
+                &#32;These versions may be missing features, contain bugs and potentially corrupt your game data. Use at your own risk!
+            </p>
+        </>;
+    }
+
+    getTitle() {
+        return <>Old Application Version</>;
+    }
+
+    getButtons() {
+        return <>
+            <Button color={ButtonColor.RED} rounded onClick={() => closeDialog("cancel")}>
+                Cancel
+            </Button>
+            <Button color={ButtonColor.GREEN} rounded onClick={() => closeDialog("okay")}>
+                Okay
+            </Button>
+        </>;
+    }
+}
diff --git a/src/routes/AppProfile/AppSettings.tsx b/src/routes/AppProfile/AppSettings.tsx
index 9a10ca2..6341f4a 100644
--- a/src/routes/AppProfile/AppSettings.tsx
+++ b/src/routes/AppProfile/AppSettings.tsx
@@ -8,8 +8,9 @@ import InputBox from "@app/components/InputBox";
 import * as Tabs from "@radix-ui/react-tabs";
 import { useOfflineStatus } from "@app/hooks/useOfflineStatus";
 import { useQuery } from "@tanstack/react-query";
-import { showErrorDialog } from "@app/dialogs";
+import { createAndShowDialog, showErrorDialog } from "@app/dialogs";
 import { distanceFromToday } from "@app/utils/timeFormat";
+import { OldVersionDialog } from "@app/dialogs/Dialogs/OldVersionDialog";
 
 interface VersionListProps {
     activeProfile: ActiveProfile,
@@ -29,6 +30,18 @@ const VersionListComp: React.FC<VersionListProps> = ({ activeProfile, selectedVe
                 .then(res => res.json())
     });
 
+    const selectVersion = async (uuid: string, index: number) => {
+        if(index != 0) {
+            const versionDialogOutput = await createAndShowDialog(OldVersionDialog);
+
+            if (versionDialogOutput === "okay") {
+                setSelectedVersion(uuid);
+            }   
+        } else {
+            setSelectedVersion(uuid);
+        }
+    };
+
     if (versionListQuery.isLoading) {
         return <span className={styles.centered}>
             Loading...
@@ -61,11 +74,11 @@ const VersionListComp: React.FC<VersionListProps> = ({ activeProfile, selectedVe
                 <div>Recommended</div>
             </div>
             {
-                versionList.map(i =>
+                versionList.map((i, index) =>
                     <div
                         data-state={selectedVersion === i.uuid ? "active" : "inactive"}
                         key={i.uuid}
-                        onClick={() => setSelectedVersion(i.uuid)}>
+                        onClick={() => selectVersion(i.uuid, index)}>
 
                         <header>{i.tag}</header>
                         <div>{distanceFromToday(i.release)}</div>

From 01c26c2c707cbf0e3daf3975bcfaa56647dba060 Mon Sep 17 00:00:00 2001
From: RileyTheFox <jacobchambers@hotmail.co.uk>
Date: Mon, 26 Aug 2024 04:26:47 +0100
Subject: [PATCH 2/3] Add version tag next to Latest Release

---
 src/routes/AppProfile/AppSettings.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/AppProfile/AppSettings.tsx b/src/routes/AppProfile/AppSettings.tsx
index 6341f4a..ec0003e 100644
--- a/src/routes/AppProfile/AppSettings.tsx
+++ b/src/routes/AppProfile/AppSettings.tsx
@@ -70,7 +70,7 @@ const VersionListComp: React.FC<VersionListProps> = ({ activeProfile, selectedVe
                 data-state={selectedVersion === undefined ? "active" : "inactive"}
                 onClick={() => setSelectedVersion(undefined)}>
 
-                <header>Latest Release</header>
+                <header>Latest Release ({versionList.length > 0 ? versionList[0].tag : ""})</header>
                 <div>Recommended</div>
             </div>
             {

From 9f8721990269d7a3fe23d9e29cf1bba37492bbf7 Mon Sep 17 00:00:00 2001
From: RileyTheFox <jacobchambers@hotmail.co.uk>
Date: Mon, 26 Aug 2024 15:15:10 +0100
Subject: [PATCH 3/3] Address review comments

---
 src/dialogs/Dialogs/OldVersionDialog.tsx | 2 +-
 src/routes/AppProfile/AppSettings.tsx    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/dialogs/Dialogs/OldVersionDialog.tsx b/src/dialogs/Dialogs/OldVersionDialog.tsx
index 107389f..6cc407e 100644
--- a/src/dialogs/Dialogs/OldVersionDialog.tsx
+++ b/src/dialogs/Dialogs/OldVersionDialog.tsx
@@ -10,7 +10,7 @@ export class OldVersionDialog extends BaseDialog<Record<string, never>> {
     getInnerContents() {
         return <>
             <p>
-                <strong>You are trying to select an old version of YARG!</strong>
+                <strong>You are trying to select an old version of this application!</strong>
                 &#32;These versions may be missing features, contain bugs and potentially corrupt your game data. Use at your own risk!
             </p>
         </>;
diff --git a/src/routes/AppProfile/AppSettings.tsx b/src/routes/AppProfile/AppSettings.tsx
index ec0003e..3d73378 100644
--- a/src/routes/AppProfile/AppSettings.tsx
+++ b/src/routes/AppProfile/AppSettings.tsx
@@ -31,7 +31,7 @@ const VersionListComp: React.FC<VersionListProps> = ({ activeProfile, selectedVe
     });
 
     const selectVersion = async (uuid: string, index: number) => {
-        if(index != 0) {
+        if (index !== 0) {
             const versionDialogOutput = await createAndShowDialog(OldVersionDialog);
 
             if (versionDialogOutput === "okay") {
@@ -78,7 +78,7 @@ const VersionListComp: React.FC<VersionListProps> = ({ activeProfile, selectedVe
                     <div
                         data-state={selectedVersion === i.uuid ? "active" : "inactive"}
                         key={i.uuid}
-                        onClick={() => selectVersion(i.uuid, index)}>
+                        onClick={async () => await selectVersion(i.uuid, index)}>
 
                         <header>{i.tag}</header>
                         <div>{distanceFromToday(i.release)}</div>