[qol] dont reinstall all mods by default (not finnished)

src/renderer/components/shared/bsm-button.component.tsx

@@ -6,7 +6,7 @@ import { useClickOutside } from "renderer/hooks/use-click-outside.hook";
 import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
 import { getCorrectTextColor } from "renderer/helpers/correct-text-color";
 
-type BsmButtonType = "primary" | "secondary" | "success" | "cancel" | "error" | "none";
+export type BsmButtonType = "primary" | "secondary" | "success" | "cancel" | "error" | "none";
 
 type Props = {
     className?: string;

src/renderer/components/shared/bsm-dropdown-button.component.tsx

@@ -1,9 +1,10 @@
 import { forwardRef, LegacyRef, useImperativeHandle, useRef, useState } from "react";
 import { BsmIconType, BsmIcon } from "../svgs/bsm-icon.component";
-import { BsmButton } from "./bsm-button.component";
+import { BsmButton, BsmButtonType } from "./bsm-button.component";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
 import { AnimatePresence } from "framer-motion";
 import { useClickOutside } from "renderer/hooks/use-click-outside.hook";
+import { cn } from "renderer/helpers/css-class.helpers";
 
 export interface DropDownItem {
     text: string;
@@ -11,8 +12,17 @@ export interface DropDownItem {
     onClick?: () => void;
 }
 
+type ClassNames = {
+    mainContainer?: string;
+    button?: string;
+    itemsContainer?: string;
+    iconClassName?: string;
+}
+
 type Props = {
     className?: string;
+    classNames?: ClassNames;
+    buttonColor?: BsmButtonType;
     items?: DropDownItem[];
     align?: "left" | "right" | "center";
     withBar?: boolean;
@@ -24,7 +34,7 @@ type Props = {
     textClassName?: string;
 };
 
-export const BsmDropdownButton = forwardRef(({ className, items, align, withBar = true, icon = "settings", buttonClassName, menuTranslationY, children, text, textClassName }: Props, fowardRed) => {
+export const BsmDropdownButton = forwardRef(({ className, classNames, buttonColor, items, align, withBar = true, icon = "settings", buttonClassName, menuTranslationY, children, text, textClassName }: Props, fowardRed) => {
     const [expanded, setExpanded] = useState(false);
     const t = useTranslation();
     const ref = useRef(fowardRed);
@@ -63,9 +73,9 @@ export const BsmDropdownButton = forwardRef(({ className, items, align, withBar
     })();
 
     return (
-        <div ref={ref as unknown as LegacyRef<HTMLDivElement>} className={className}>
-            <BsmButton onClick={() => setExpanded(!expanded)} className={buttonClassName ?? defaultButtonClassName} icon={icon} active={expanded} textClassName={textClassName} onClickOutside={handleClickOutside} withBar={withBar} text={text} />
-            <div className={`py-1 w-fit absolute cursor-pointer top-[calc(100%-4px)] rounded-md bg-inherit text-sm text-gray-800 dark:text-gray-200 shadow-md shadow-black transition-[scale] duration-150 ease-in-out ${alignClass}`} style={{ scale: expanded ? "1" : "0", translate: `0 ${menuTranslationY}` }}>
+        <div ref={ref as unknown as LegacyRef<HTMLDivElement>} className={cn(className, classNames?.mainContainer)}>
+            <BsmButton onClick={() => setExpanded(!expanded)} className={cn(buttonClassName ?? defaultButtonClassName, classNames?.button)} icon={icon} active={expanded} textClassName={textClassName} onClickOutside={handleClickOutside} withBar={withBar} text={text} typeColor={buttonColor} iconClassName={classNames?.iconClassName}/>
+            <div className={cn(`py-1 w-fit absolute cursor-pointer top-[calc(100%-4px)] rounded-md bg-inherit text-sm text-gray-800 dark:text-gray-200 shadow-md shadow-black transition-[scale] duration-150 ease-in-out ${alignClass}`, classNames?.itemsContainer)} style={{ scale: expanded ? "1" : "0", translate: `0 ${menuTranslationY}` }}>
                 {items?.map(
                     i =>
                         i && (

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

@@ -12,7 +12,7 @@ import { useService } from "renderer/hooks/use-service.hook";
 type Props = { modsMap: Map<string, Mod[]>; installed: Map<string, Mod[]>; modsSelected: Mod[]; onModChange: (selected: boolean, mod: Mod) => void; moreInfoMod?: Mod; onWantInfos: (mod: Mod) => void };
 
 export function ModsGrid({ modsMap, installed, modsSelected, onModChange, moreInfoMod, onWantInfos }: Props) {
-    
+
     const pageState = useService(PageStateService);
     const modsManager = useService(BsModsManagerService);
 
@@ -61,8 +61,8 @@ export function ModsGrid({ modsMap, installed, modsSelected, onModChange, moreIn
     return (
         modsMap && (
             <div className="grid gap-y-1 grid-cols-[40px_min-content_min-content_min-content_1fr_min-content] bg-light-main-color-2 dark:bg-main-color-2 text-main-color-1 dark:text-light-main-color-1">
-                <span className="absolute z-10 top-0 w-full h-8 bg-inherit" />
-                <span className="z-10 sticky flex items-center justify-end top-0 bg-inherit border-b-2 border-main-color-1">
+                <span className="absolute z-10 top-0 w-full h-8 bg-inherit rounded-tl-md" />
+                <span className="z-10 sticky flex items-center justify-end top-0 bg-inherit border-b-2 border-main-color-1 rounded-tl-md">
                     <BsmButton className="rounded-full h-6 w-6 p-[2px]" withBar={false} icon="search" onClick={handleToogleFilter} />
                 </span>
                 <span className="z-10 sticky top-0 flex items-center bg-inherit border-main-color-1 border-b-2 h-8 px-1 whitespace-nowrap">{filterEnabled ? <motion.input autoFocus className="bg-main-color-1 rounded-md h-6 px-2" initial={{ width: 0 }} animate={{ width: "250px" }} transition={{ ease: "easeInOut", duration: 0.15 }} onChange={e => handleInput(e.target.value)} /> : <span className="w-full text-center">{t("pages.version-viewer.mods.mods-grid.header-bar.name")}</span>}</span>

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

@@ -35,6 +35,7 @@ export function ModsSlide({ version, onDisclamerDecline }: { version: BSVersion;
     const [modsInstalled, setModsInstalled] = useState(null as Map<string, Mod[]>);
     const [modsSelected, setModsSelected] = useState([] as Mod[]);
     const [moreInfoMod, setMoreInfoMod] = useState(null as Mod);
+    const [reinstallAllMods, setReinstallAllMods] = useState(false);
     const isOnline = useObservable(() => os.isOnline$);
     const installing = useObservable(() => modsManager.isInstalling$);
 
@@ -80,6 +81,7 @@ export function ModsSlide({ version, onDisclamerDecline }: { version: BSVersion;
         if (installing) {
             return;
         }
+
         const modsToInstall = modsSelected.filter(mod => {
             const corespondingMod = modsAvailable.get(mod.category).find(availabeMod => availabeMod._id === mod._id);
             const installedMod = modsInstalled.get(mod.category)?.find(installedMod => installedMod.name === mod.name);
@@ -186,13 +188,17 @@ export function ModsSlide({ version, onDisclamerDecline }: { version: BSVersion;
         }
         return (
             <>
-                <div className="grow overflow-scroll w-full min-h-0 scrollbar-thin scrollbar-thumb-neutral-900 scrollbar-thumb-rounded-full">
+                <div className="grow overflow-y-scroll w-full min-h-0 scrollbar-default p-0 m-0">
                     <ModsGrid modsMap={modsAvailable} installed={modsInstalled} modsSelected={modsSelected} onModChange={handleModChange} moreInfoMod={moreInfoMod} onWantInfos={handleMoreInfo} />
                 </div>
-                <div className="h-10 shrink-0 flex items-center justify-between px-3">
+                <div className="shrink-0 flex items-center justify-between px-3 py-2">
                     <BsmButton className="text-center rounded-md px-2 py-[2px]" text="pages.version-viewer.mods.buttons.more-infos" typeColor="cancel" withBar={false} disabled={!moreInfoMod} onClick={handleOpenMoreInfo} style={{ width: downloadWith }} />
-                    <div ref={downloadRef}>
-                        <BsmButton className="text-center rounded-md px-2 py-[2px]" text="pages.version-viewer.mods.buttons.install-or-update" withBar={false} disabled={installing} typeColor="primary" onClick={installMods} />
+                    <div ref={downloadRef} className="flex h-8 justify-center items-center gap-px overflow-hidden rounded-md">
+                        <div className="grow h-full w-36 relative">
+                            <BsmButton className="absolute top-0 left-0 flex items-center justify-center px-1 size-full transition-transform duration-200 ease-in-out" text="Install or update" typeColor="primary" withBar={false} onClick={installMods} style={{ transform: reinstallAllMods ? "translateY(-100%)" : "" }} />
+                            <BsmButton className="absolute top-full left-0 flex items-center justify-center px-1 size-full transition-transform duration-200 ease-in-out" text="Reinstall all" typeColor="primary" withBar={false} onClick={installMods} style={{ transform: reinstallAllMods ? "translateY(-100%)" : "" }}/>
+                        </div>
+                        <BsmButton className="flex items-center justify-center shrink-0 h-full" icon="chevron-top" typeColor="primary" withBar={false} onClick={() => setReinstallAllMods(prev => !prev)}/>
                     </div>
                 </div>
             </>
@@ -201,7 +207,7 @@ export function ModsSlide({ version, onDisclamerDecline }: { version: BSVersion;
 
     return (
         <div ref={ref} className="shrink-0 w-full h-full px-8 pb-7 flex justify-center">
-            <div className="relative flex flex-col grow-0 bg-light-main-color-2 dark:bg-main-color-2 h-full w-full rounded-md shadow-black shadow-center overflow-hidden">{renderContent()}</div>
+            <div className="relative flex flex-col grow-0 bg-light-main-color-2 dark:bg-main-color-2 size-full rounded-md shadow-black shadow-center overflow-hidden">{renderContent()}</div>
         </div>
     );
 }