From 229b267dee431d0e05cdf4f6f66bfdf1521b2b7b Mon Sep 17 00:00:00 2001 From: EliteAsian <29520859+EliteAsian123@users.noreply.github.com> Date: Tue, 27 Aug 2024 14:14:00 -0400 Subject: [PATCH] Settings page with the ability to change installation folder (finally!) --- src-tauri/Cargo.toml | 2 +- src-tauri/tauri.conf.json5 | 4 + src/components/Onboarding/Sidebar.tsx | 28 +++-- src/components/Onboarding/index.tsx | 62 ++++++---- src/components/Sidebar/Sidebar.module.css | 25 ++++ src/components/Sidebar/index.tsx | 8 +- .../Dialogs/ChangeDownloadLocationDialog.tsx | 33 ++++++ src/routes/Settings/Settings.module.css | 43 +++++++ src/routes/Settings/index.tsx | 112 +++++++++++++++++- 9 files changed, 275 insertions(+), 42 deletions(-) create mode 100644 src/dialogs/Dialogs/ChangeDownloadLocationDialog.tsx create mode 100644 src/routes/Settings/Settings.module.css diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml index 7a34904..f4fa510 100644 --- a/src-tauri/Cargo.toml +++ b/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", diff --git a/src-tauri/tauri.conf.json5 b/src-tauri/tauri.conf.json5 index 283b167..8727b0d 100644 --- a/src-tauri/tauri.conf.json5 +++ b/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": { diff --git a/src/components/Onboarding/Sidebar.tsx b/src/components/Onboarding/Sidebar.tsx index beecb63..cee0ca6 100644 --- a/src/components/Onboarding/Sidebar.tsx +++ b/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 = ({ onboardingStep }: Props) => { +const OnboardingSidebar: React.FC = ({ steps, stepIndex }: Props) => { return
- {/* OnboardingStep.LANGUAGE} /> */} - - - - - - + { + steps.map(i => { + switch (i) { + case OnboardingStep.INSTALL_PATH: + return + + ; + case OnboardingStep.COMPONENTS: + return + + ; + } + }) + }
diff --git a/src/components/Onboarding/index.tsx b/src/components/Onboarding/index.tsx index 4a2f4d3..65a909b 100644 --- a/src/components/Onboarding/index.tsx +++ b/src/components/Onboarding/index.tsx @@ -25,7 +25,7 @@ interface Props { const Onboarding: React.FC = (props: Props) => { const [loading, setLoading] = useState(false); - const [step, setStep] = useState(OnboardingStep.INSTALL_PATH); + const [stepIndex, setStepIndex] = useState(0); let directories = useDirectories(); const offlineStatus = useOfflineStatus(); @@ -40,6 +40,20 @@ const Onboarding: React.FC = (props: Props) => { const [profileUrls, setProfileUrls] = useState([]); + // 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
@@ -85,19 +99,21 @@ const Onboarding: React.FC = (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) => { return
{!loading &&
- +
- {step === OnboardingStep.INSTALL_PATH && + {steps[stepIndex] === OnboardingStep.INSTALL_PATH && } - {step === OnboardingStep.COMPONENTS && + {steps[stepIndex] === OnboardingStep.COMPONENTS && }
+ +
+ + + +
; }; diff --git a/src/dialogs/Dialogs/ChangeDownloadLocationDialog.tsx b/src/dialogs/Dialogs/ChangeDownloadLocationDialog.tsx new file mode 100644 index 0000000..67e8fe4 --- /dev/null +++ b/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> { + constructor(props: Record) { + super(props); + } + + getInnerContents() { + return <> +

+ In order to change the download location of your applications and setlists, everything must + first be uninstalled, and then reinstalled into the new location. Save data will not be lost. +

+ ; + } + + getTitle() { + return <>Warning; + } + + getButtons() { + return <> + + + ; + } +} diff --git a/src/routes/Settings/Settings.module.css b/src/routes/Settings/Settings.module.css new file mode 100644 index 0000000..b80e940 --- /dev/null +++ b/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; +} diff --git a/src/routes/Settings/index.tsx b/src/routes/Settings/index.tsx index 50848af..532386b 100644 --- a/src/routes/Settings/index.tsx +++ b/src/routes/Settings/index.tsx @@ -1,9 +1,113 @@ +import Box from "@app/components/Box"; +import styles from "./Settings.module.css"; +import { useEffect, useState } from "react"; +import { getName, getTauriVersion, getVersion } from "@tauri-apps/api/app"; +import { OS, getOS } from "@app/utils/os"; +import Button, { ButtonColor } from "@app/components/Button"; +import { settingsManager } from "@app/settings"; +import { createAndShowDialog } from "@app/dialogs"; +import { ChangeDownloadLocationDialog } from "@app/dialogs/Dialogs/ChangeDownloadLocationDialog"; +import { useProfileStore } from "@app/profiles/store"; +import { invoke } from "@tauri-apps/api"; +import { useDirectories } from "@app/profiles/directories"; +import { getPathForProfile } from "@app/profiles/utils"; +import { useCurrentTask } from "@app/tasks"; +import { relaunch } from "@tauri-apps/api/process"; + +interface LauncherInfo { + name: string; + version: string; + tauriVersion: string; + os: OS; +} + function Settings() { - return (<> + const [launcherInfo, setLauncherInfo] = useState(undefined); + const [loadingState, setLoadingState] = useState(undefined); + + const task = useCurrentTask(); + + useEffect(() => { + (async () => { + setLauncherInfo({ + name: await getName(), + version: `v${await getVersion()}`, + tauriVersion: await getTauriVersion(), + os: await getOS() + }); + })(); + }, []); + + const downloadLocation = settingsManager.getCache("downloadLocation"); + + return
+ {loadingState !== undefined && +
+ {loadingState} +
+ } + + +
+ File Management +
+
+ {downloadLocation} + {task !== undefined && + + } + {task === undefined && + + } +
+ + +
+ About +
+ + App: {launcherInfo?.name} {launcherInfo?.version} + + + Tauri: {launcherInfo?.tauriVersion} + + + OS: {launcherInfo?.os} + + +
; } -export default Settings; \ No newline at end of file +export default Settings;