Settings page with the ability to change installation folder (finally!)

src-tauri/Cargo.toml

@@ -15,7 +15,7 @@ tauri-build = { version = "1.5.0", features = [] }
 [dependencies]
 log = "^0.4"
 tauri-plugin-log = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
-tauri = { version = "1.5.2", features = [ "shell-open",
+tauri = { version = "1.5.2", features = [ "process-relaunch", "shell-open",
     "fs-read-file",
     "fs-read-dir",
     "fs-create-dir",

src-tauri/tauri.conf.json5

@@ -46,6 +46,10 @@
         "readFile": true,
         "writeFile": true,
         "scope": [ "$APPCONFIG", "$APPCONFIG/*" ]
+      },
+      "process": {
+        // Required for changing the download location
+        "relaunch": true
       }
     },
     "bundle": {

src/components/Onboarding/Sidebar.tsx

@@ -4,22 +4,28 @@ import styles from "./Onboarding.module.css";
 import { DriveIcon, QueueIcon } from "@app/assets/Icons";
 
 interface Props {
-    onboardingStep: OnboardingStep;
+    steps: OnboardingStep[],
+    stepIndex: number;
 }
 
-const OnboardingSidebar: React.FC<Props> = ({ onboardingStep }: Props) => {
+const OnboardingSidebar: React.FC<Props> = ({ steps, stepIndex }: Props) => {
     return <div className={styles.sidebar}>
         <div className={styles.sidebarTop}>
             <div className={styles.navigation}>
-                {/* <StepIndicator text="Language"
-                    activeStep={onboardingStep === OnboardingStep.LANGUAGE}
-                    completedStep={onboardingStep > OnboardingStep.LANGUAGE} /> */}
-                <StepIndicator activeStep={onboardingStep === OnboardingStep.INSTALL_PATH}>
-                    <DriveIcon width={20} height={20} />
-                </StepIndicator>
-                <StepIndicator activeStep={onboardingStep === OnboardingStep.COMPONENTS}>
-                    <QueueIcon width={20} height={20} />
-                </StepIndicator>
+                {
+                    steps.map(i => {
+                        switch (i) {
+                            case OnboardingStep.INSTALL_PATH:
+                                return <StepIndicator activeStep={steps[stepIndex] === OnboardingStep.INSTALL_PATH} key={i}>
+                                    <DriveIcon width={20} height={20} />
+                                </StepIndicator>;
+                            case OnboardingStep.COMPONENTS:
+                                return <StepIndicator activeStep={steps[stepIndex] === OnboardingStep.COMPONENTS} key={i}>
+                                    <QueueIcon width={20} height={20} />
+                                </StepIndicator>;
+                        }
+                    })
+                }
             </div>
         </div>
         <div className={styles.sidebarBottom}>

src/components/Onboarding/index.tsx

@@ -25,7 +25,7 @@ interface Props {
 
 const Onboarding: React.FC<Props> = (props: Props) => {
     const [loading, setLoading] = useState<boolean>(false);
-    const [step, setStep] = useState<OnboardingStep>(OnboardingStep.INSTALL_PATH);
+    const [stepIndex, setStepIndex] = useState<number>(0);
 
     let directories = useDirectories();
     const offlineStatus = useOfflineStatus();
@@ -40,6 +40,20 @@ const Onboarding: React.FC<Props> = (props: Props) => {
 
     const [profileUrls, setProfileUrls] = useState<string[]>([]);
 
+    // If the user is attempting to change the install path, they would have active profiles
+    const hasActiveProfiles = settingsManager.getCache("activeProfiles").length > 0;
+    let steps: OnboardingStep[];
+    if (!hasActiveProfiles) {
+        steps = [
+            OnboardingStep.INSTALL_PATH,
+            OnboardingStep.COMPONENTS
+        ];
+    } else {
+        steps = [
+            OnboardingStep.INSTALL_PATH
+        ];
+    }
+
     if (offlineStatus.isOffline) {
         return <main className={styles.mainContainer}>
             <div className={styles.center}>
@@ -85,19 +99,21 @@ const Onboarding: React.FC<Props> = (props: Props) => {
             // Ignore
         }
 
-        for (const url of profileUrls) {
-            const uuid = await useProfileStore.getState().activateProfile(url);
-            if (uuid === undefined) {
-                continue;
-            }
+        if (!hasActiveProfiles) {
+            for (const url of profileUrls) {
+                const uuid = await useProfileStore.getState().activateProfile(url);
+                if (uuid === undefined) {
+                    continue;
+                }
 
-            const activeProfile = useProfileStore.getState().getProfileByUUID(uuid);
-            if (activeProfile === undefined) {
-                continue;
-            }
+                const activeProfile = useProfileStore.getState().getProfileByUUID(uuid);
+                if (activeProfile === undefined) {
+                    continue;
+                }
 
-            const path = await getPathForProfile(directories, activeProfile);
-            await downloadAndInstall(activeProfile, path);
+                const path = await getPathForProfile(directories, activeProfile);
+                await downloadAndInstall(activeProfile, path);
+            }
         }
 
         props.setOnboarding(false);
@@ -106,38 +122,34 @@ const Onboarding: React.FC<Props> = (props: Props) => {
     return <main className={styles.mainContainer}>
         {!loading &&
             <div className={styles.container}>
-                <OnboardingSidebar onboardingStep={step} />
+                <OnboardingSidebar steps={steps} stepIndex={stepIndex} />
                 <div className={styles.content}>
                     <div className={styles.contentContainer}>
                         <div className={styles.stepContainer}>
-                            {step === OnboardingStep.INSTALL_PATH &&
+                            {steps[stepIndex] === OnboardingStep.INSTALL_PATH &&
                                 <InstallFolderPage
                                     downloadLocation={downloadLocation}
                                     downloadEmpty={downloadEmpty}
                                     askForFolder={askForFolder} />
                             }
-                            {step === OnboardingStep.COMPONENTS &&
+                            {steps[stepIndex] === OnboardingStep.COMPONENTS &&
                                 <ComponentsPage profileUrls={profileUrls} setProfileUrls={setProfileUrls} />
                             }
                         </div>
                         <div className={styles.stepNavigation}>
                             <div className={styles.stepNavigationButtons}>
                                 <Button color={ButtonColor.DARK} border onClick={() => {
-                                    if (step > OnboardingStep.INSTALL_PATH) {
-                                        setStep(step - 1);
+                                    if (stepIndex > 0) {
+                                        setStepIndex(stepIndex - 1);
                                     }
                                 }}>
                                     Back
                                 </Button>
                                 <Button color={ButtonColor.GREEN} border onClick={() => {
-                                    switch (step) {
-                                        case OnboardingStep.INSTALL_PATH:
-                                            if (downloadEmpty) {
-                                                setStep(step + 1);
-                                            }
-                                            break;
-                                        case OnboardingStep.COMPONENTS:
-                                            finish();
+                                    if (stepIndex === steps.length - 1) {
+                                        finish();
+                                    } else {
+                                        setStepIndex(stepIndex + 1);
                                     }
                                 }}>
                                     Next

src/components/Sidebar/Sidebar.module.css

@@ -82,3 +82,28 @@
     font-weight: 800;
     text-transform: uppercase;
 }
+
+.settingsButton {
+    width: 38px;
+    height: 38px;
+    padding: 10px;
+
+    background: transparent;
+    color: #B8BDD6;
+    border-radius: 8px;
+    transition: background 0.1s;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.settingsButton[aria-current="page"], .settingsButton:hover {
+    background: #0D0F23;
+    color: #D4D9EE;
+}
+
+.settingsButton > svg {
+    width: 20px;
+    height: 20px;
+}

src/components/Sidebar/index.tsx

@@ -6,7 +6,7 @@ import QueueStore from "@app/tasks/queue";
 import { useOfflineStatus } from "@app/hooks/useOfflineStatus";
 import useMarketIndex from "@app/hooks/useMarketIndex";
 import { settingsManager } from "@app/settings";
-import { HomeIcon, QueueIcon, MarketplaceIcon } from "@app/assets/Icons";
+import { HomeIcon, QueueIcon, MarketplaceIcon, SettingsIcon } from "@app/assets/Icons";
 
 const Sidebar: React.FC = () => {
     const offlineStatus = useOfflineStatus();
@@ -52,6 +52,12 @@ const Sidebar: React.FC = () => {
         </div>
 
         <ProfilesList isOffline={offlineStatus.isOffline} />
+
+        <div className={styles.footer}>
+            <NavLink to="/settings" className={styles.settingsButton}>
+                <SettingsIcon />
+            </NavLink>
+        </div>
     </div>;
 };
 

src/dialogs/Dialogs/ChangeDownloadLocationDialog.tsx

@@ -0,0 +1,33 @@
+import Button, { ButtonColor } from "@app/components/Button";
+import { BaseDialog } from "./BaseDialog";
+import { closeDialog } from "..";
+
+export class ChangeDownloadLocationDialog extends BaseDialog<Record<string, never>> {
+    constructor(props: Record<string, unknown>) {
+        super(props);
+    }
+
+    getInnerContents() {
+        return <>
+            <p>
+                In order to change the download location of your applications and setlists, <strong>everything must
+                first be uninstalled, and then reinstalled into the new location.</strong> Save data will not be lost.
+            </p>
+        </>;
+    }
+
+    getTitle() {
+        return <>Warning</>;
+    }
+
+    getButtons() {
+        return <>
+            <Button color={ButtonColor.LIGHT} rounded onClick={() => closeDialog()}>
+                Cancel
+            </Button>
+            <Button color={ButtonColor.RED} rounded onClick={() => closeDialog("continue")}>
+                Continue
+            </Button>
+        </>;
+    }
+}

src/routes/Settings/Settings.module.css

@@ -0,0 +1,43 @@
+.mainContainer {
+    display: flex;
+    flex-flow: column;
+    padding: 16px;
+    gap: 16px;
+}
+
+.downloadLocation {
+    display: flex;
+    gap: 8px;
+    margin-top: 12px;
+
+    align-items: center;
+}
+
+.downloadLocation > span {
+    font-size: 16px;
+    flex: 1 0 0;
+
+    border: 1px solid #E3E4E7;
+    padding: 16px;
+    border-radius: 12px;
+}
+
+.loadingScreen {
+    position: fixed;
+    inset: 0;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    background: var(--sideBarBackground);
+
+    color: #FFF;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+
+    z-index: 10000;
+}