Merge branch 'master' into qol/dont-reinstall-all-mods-by-default

src/renderer/components/nav-bar/nav-bar-items/shared-nav-bar-item.component.tsx

@@ -1,28 +1,20 @@
 import { Link } from "react-router-dom";
 import { BsmIcon } from "renderer/components/svgs/bsm-icon.component";
-import { useObservable } from "renderer/hooks/use-observable.hook";
 import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
-import { PageStateService } from "renderer/services/page-state.service";
-import { NavBarItem } from "./nav-bar-item.component";
-import { useService } from "renderer/hooks/use-service.hook";
 import Tippy from "@tippyjs/react";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
 
 export function SharedNavBarItem() {
-    const pageState = useService(PageStateService);
 
     const t = useTranslation();
-    const route = useObservable(() => pageState.route$);
     const color = useThemeColor("first-color");
 
     return (
-        <NavBarItem isActive={route === "/shared"}>
             <Tippy content={t("nav-bar.shared.tooltip")} className="font-bold !bg-neutral-900" placement="right-end" arrow={false} duration={[100, 0]} animation="shift-away-subtle">
                 <Link to="shared" className="w-full flex items-center justify-start content-center max-w-full h-[30px]">
                     <BsmIcon className="w-[19px] h-[19px] mr-[5px] shrink-0 brightness-125" icon="link" style={{ color }} />
                     <span className="dark:text-gray-200 text-gray-800 font-bold tracking-wide">{t("nav-bar.shared.text")}</span>
                 </Link>
             </Tippy>
-        </NavBarItem>
     );
 }

src/renderer/components/nav-bar/nav-bar.component.tsx

@@ -14,10 +14,13 @@ import { useService } from "renderer/hooks/use-service.hook";
 import { distinctUntilChanged } from "rxjs";
 import equal from "fast-deep-equal";
 import { BsDownloaderService } from "renderer/services/bs-version-download/bs-downloader.service";
+import { PageStateService } from "renderer/services/page-state.service";
+import { NavBarItem } from "./nav-bar-items/nav-bar-item.component";
 
 export function NavBar() {
     const versionManager = useService(BSVersionManagerService);
     const versionDownloader = useService(BsDownloaderService);
+    const pageState = useService(PageStateService);
 
     const downloadingVersion = useObservable(() => versionDownloader.downloadingVersion$.pipe(distinctUntilChanged(equal)));
     const installedVersions = useObservable(() => versionManager.installedVersions$);
@@ -25,6 +28,9 @@ export function NavBar() {
     const color = useThemeColor("first-color");
     const t = useTranslation();
 
+
+    const route = useObservable(() => pageState.route$);
+
     function listVersions(){
         const versions = Array.isArray(installedVersions) ? [...installedVersions] : [];
 
@@ -38,26 +44,30 @@ export function NavBar() {
     return (
         <nav id="nav-bar" className="z-10 flex flex-col h-full max-h-full items-center p-1">
             <BsManagerIcon className="relative aspect-square w-16 h-16 mb-3" />
-            <ol id="versions" className="w-fit max-w-[150px] relative left-[2px] grow overflow-y-hidden scrollbar-track-transparent scrollbar-default hover:overflow-y-scroll">
-                <SharedNavBarItem />
+            <ol id="versions" className="w-fit max-w-[150px] relative left-[2px] grow overflow-y-hidden scrollbar-default hover:overflow-y-scroll">
+                <NavBarItem isActive={route === "/shared"}>
+                    <SharedNavBarItem />
+                </NavBarItem>
                 <NavBarSpliter />
                 {listVersions().map(version => (
                     <BsVersionItem key={JSON.stringify(version)} version={version} />
                 ))}
             </ol>
             <NavBarSpliter />
-            <div className="w-full pb-2 flex flex-col items-center content-center justify-start gap-1">
+            <NavBarItem isActive={["/blah","/"].includes(route)}>
                 <Tippy placement="right" content={t("nav-bar.add-version")} className="!bg-neutral-900" arrow={false}>
                     <Link className="rounded-md w-9 h-9 flex justify-center items-center hover:bg-light-main-color-3 dark:hover:bg-main-color-3" to="blah">
                         <BsmIcon icon="add" className="text-blue-500 h-[34px]" style={{ color }} />
                     </Link>
                 </Tippy>
-                <Tippy placement="right" content={t("nav-bar.settings")} className="!bg-neutral-900" arrow={false}>
+            </NavBarItem>
+            <NavBarItem isActive={route === "/settings"}>
+            <Tippy placement="right" content={t("nav-bar.settings")} className="!bg-neutral-900" arrow={false}>
                     <Link className="rounded-md w-9 h-9 flex justify-center items-center hover:bg-light-main-color-3 dark:hover:bg-main-color-3" to="settings">
                         <BsmIcon icon="settings" className="text-blue-500 h-7" style={{ color }} />
                     </Link>
                 </Tippy>
-            </div>
+            </NavBarItem>
         </nav>
     );
 }

src/renderer/components/version-viewer/slides/mods/mods-slide.component.tsx

@@ -114,7 +114,7 @@ export function ModsSlide({ version, onDisclamerDecline }: { version: BSVersion;
         }
 
         return promise().then(([available, installed]) => {
-            const defaultMods = configService.get<string[]>("default_mods" as DefaultConfigKey);
+            const defaultMods = installed?.length ? [] : configService.get<string[]>("default_mods" as DefaultConfigKey);
             setModsAvailable(() => modsToCategoryMap(available));
             setModsSelected(() => available.filter(m => m.required || defaultMods.some(d => m.name.toLowerCase() === d.toLowerCase()) || installed.some(i => m.name === i.name)));
             setModsInstalled(() => modsToCategoryMap(installed));

src/renderer/index.css

@@ -79,10 +79,21 @@
 }
 
 .scrollbar-default {
-    /* scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900 */
-    @apply scrollbar-thin;
-    @apply scrollbar-thumb-rounded-full;
-    @apply scrollbar-thumb-neutral-900;
+
+
+    &::-webkit-scrollbar {
+        width: 4px;
+        height: 4px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: rgb(23 23 23 / var(--tw-bg-opacity));
+        border-radius: 999px;
+      }
 }
 
 .tippy-box[data-theme~='default'] {

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

@@ -113,7 +113,10 @@ export function SettingsPage() {
     };
 
     const loadInstallationFolder = () => {
-        steamDownloader.getInstallationFolder().then(res => setInstallationFolder(res));
+        steamDownloader.getInstallationFolder().then(res => {
+            console.log("AAAAA", res);
+            setInstallationFolder(res);
+        });
     };
 
     const loadDownloadersSession = () => {

src/renderer/windows/OneClick/OneClickDownloadPlaylist.tsx

@@ -62,7 +62,7 @@ export default function OneClickDownloadPlaylist() {
                 <TitleBar template="oneclick-download-playlist.html" />
                 <BsmImage className="mt-2 aspect-square w-1/2 object-cover rounded-md shadow-black shadow-lg" placeholder={defaultImage} image={playlistImage()} errorImage={defaultImage} />
                 <h1 className="mt-4 overflow-hidden font-bold italic text-xl text-gray-200 tracking-wide w-full text-center whitespace-nowrap text-ellipsis px-2">{playlistInfos?.playlistTitle}</h1>
-                <div className="w-full py-3 flex items-center justify-center max-w-full overflow-x-scroll overflow-y-hidden scrollbar scrollbar-thin scrollbar-track-transparent scrollbar-thumb-neutral-900" ref={mapsContainer}>
+                <div className="w-full py-3 flex items-center justify-center max-w-full overflow-x-scroll overflow-y-hidden scrollbar-default" ref={mapsContainer}>
                     <div className="flex justify-start items-start gap-2.5">{downloadedMaps?.map(map => map?.coverUrl &&
                         <motion.img layout="position" key={map.hash} className="block aspect-square w-14 object-cover rounded-md shadow-black shadow-md" src={map?.coverUrl} initial={{ scale: 0 }} animate={{ scale: 1 }} whileHover={{ rotate: 5 }} />
                     )}</div>