add setting to change default installations location

src/renderer/pages/settings-page.component.tsx

@@ -4,21 +4,29 @@ import { SettingContainer } from "renderer/components/settings/setting-container
 import { RadioItem, SettingRadioArray } from "renderer/components/settings/setting-radio-array.component";
 import { BsmButton } from "renderer/components/shared/bsm-button.component";
 import { DefaultConfigKey } from "renderer/config/default-configuration.config";
+import { BsDownloaderService } from "renderer/services/bs-downloader.service";
 import { ConfigurationService } from "renderer/services/configuration.service"
+import { IpcService } from "renderer/services/ipc.service";
+import { ModalExitCode, ModalService, ModalType } from "renderer/services/modale.service";
 
 export function SettingsPage() {
 
   const configService = ConfigurationService.getInstance();
+  const ipcService = IpcService.getInstance();
+  const modalService = ModalService.getInsance();
+  const downloaderService = BsDownloaderService.getInstance();
 
   const [firstColor, setFirstColor] = useState("#fff");
   const [secondColor, setSecondColor] = useState("#fff");
-
   const[themeIdSelected, setThemeIdSelected]= useState(0);
+  const [installationFolder, setInstallationFolder] = useState(null);
 
   useEffect(() => {
     const [fColorObs, sColorObs] = [configService.watch("first-color"), configService.watch("second-color")];
     const fColorSub = fColorObs.subscribe(color => setFirstColor(color));
     const sColorSub = sColorObs.subscribe(color => setSecondColor(color));
+
+    loadInstallationFolder();
   
     return () => {
       configService.stopWatch("first-color" as DefaultConfigKey, fColorObs);
@@ -39,17 +47,34 @@ export function SettingsPage() {
     configService.delete("second-color" as DefaultConfigKey);
   }
 
+  const loadInstallationFolder = () => {
+    downloaderService.getInstallationFolder().then(res => setInstallationFolder(res));
+  }
+
   const setFirstColorSetting = (hex: string) => configService.set("first-color", hex);
   const setSecondColorSetting = (hex: string) => configService.set("second-color", hex);
 
+  const setDefaultInstallationFolder = () => {
+    modalService.openModal(ModalType.INSTALLATION_FOLDER).then(async res => {
+      if(res.exitCode !== ModalExitCode.COMPLETED){ return; }
+      
+      const fileChooserRes = await ipcService.send<{canceled: boolean, filePaths: string[]}>("choose-folder");
 
+      if(fileChooserRes.success && !fileChooserRes.data.canceled && fileChooserRes.data.filePaths?.length){
+        downloaderService.setInstallationFolder(fileChooserRes.data.filePaths[0]).then(res => {
+          if(res.success){ setInstallationFolder(res.data); }
+        });
+      }
+
+    })
+  }
 
   return (
     <div className="w-full flex justify-center px-40 pt-10 text-gray-200">
 
-      <div className="w-fit">
+      <div className="w-fit max-w-full">
 
-        <SettingContainer title="Steam Logout" description="If you logout of your Steam account, you must reconect for download a new BS instance">
+        <SettingContainer title="Steam" description="If you logout of your Steam account, you must reconect for download a new BS instance">
           <BsmButton className="bg-red-500 w-fit px-3 py-[2px] rounded-md hover:brightness-75" withBar={false} text="Logout of Steam"/>
         </SettingContainer>
 
@@ -57,15 +82,22 @@ export function SettingsPage() {
           <div className="relative w-full h-8 bg-main-color-1 flex justify-center rounded-md py-1">
             <SettingColorChooser color={firstColor} onChange={setFirstColorSetting}/>
             <SettingColorChooser color={secondColor} onChange={setSecondColorSetting}/>
-            <div className="absolute right-[6px] top-0 h-full flex items-center">
-              <BsmButton onClick={resetColors} className=" px-2 font-bold italic text-sm rounded-md" text="Reset" withBar={false}/>
+            <div className="absolute right-2 top-0 h-full flex items-center">
+              <BsmButton onClick={resetColors} className="px-2 font-bold italic text-sm rounded-md hover:bg-main-color-3" text="Reset" withBar={false}/>
             </div>
           </div>
-          <SettingContainer minorTitle="Theme" className="mt-3">
+          <SettingContainer minorTitle="Theme (WIP)" className="mt-3">
             <SettingRadioArray items={themeItem} selectedItem={themeIdSelected} onItemSelected={(id) => setThemeIdSelected(id)}/>
           </SettingContainer>
         </SettingContainer>
 
+        <SettingContainer title="Installation Folder" description="Change the default installation directory for Beat Saber instances.">
+        <div className="relative flex items-center justify-between w-full h-8 bg-main-color-1 rounded-md pl-2 py-1">
+          <span className="block text-ellipsis overflow-hidden min-w-0" title={installationFolder}>{installationFolder}</span>
+          <BsmButton onClick={setDefaultInstallationFolder} className="shrink-0 whitespace-nowrap mr-2 px-2 font-bold italic text-sm rounded-md hover:bg-main-color-3" text="Choose Folder" withBar={false}/>
+        </div>
+        </SettingContainer>
+
       </div>