[feature] translate + simplify code

src/renderer/components/modal/basic-modal.component.tsx

@@ -28,10 +28,10 @@ export const BasicModal: ModalComponent<BasicModalOptions["buttons"][0]["id"], B
     }
 
     return (
-        <form className="text-gray-800 dark:text-gray-200">
+        <form className="text-gray-900 dark:text-white">
             <h1 className="text-3xl uppercase tracking-wide w-full text-center">{t(title)}</h1>
             <BsmImage className="mx-auto h-24" image={image} />
-            { body && <p className="max-w-sm w-full">{t(body)}</p> }
+            { body && <p className="w-full">{t(body)}</p> }
             <div className={cn("grid gap-2 mt-4")} style={{ gridAutoFlow: buttonsLayout, ...(buttonsLayout === "row" ? { gridTemplateRows: `repeat(${buttons.length}, 1fr)` } : { gridTemplateColumns: `repeat(${buttons.length}, 1fr)` }) }}>
                 {buttons.map(button => (
                     <BsmButton key={button.id} typeColor={button.type} className="h-8 rounded-md text-center flex justify-center items-center" onClick={() => handleClick(button)} withBar={false} text={button.text} />

src/renderer/components/settings/setting-toogle-switch-grid.component.tsx

@@ -5,7 +5,6 @@ type Item = {
     desc?: string;
     checked?: boolean;
     onChange?: (isChecked: boolean) => void;
-    middleWare?: (newState: boolean) => boolean|Promise<boolean>;
 };
 
 type Props = {
@@ -26,7 +25,7 @@ export function SettingToogleSwitchGrid({ items }: Props) {
                         <h2 className="font-bold">{item.text}</h2>
                         <p className="text-sm text-gray-600 dark:text-gray-400">{item.desc}</p>
                     </div>
-                    <ToogleSwitch checked={item.checked} className="shrink-0 h-7 w-12" onChange={checked => handleItemChange(item, checked)} middleWare={item.middleWare}/>
+                    <ToogleSwitch checked={item.checked} className="shrink-0 h-7 w-12" onChange={checked => handleItemChange(item, checked)}/>
                 </div>
             ))}
         </div>

src/renderer/components/shared/toogle-switch.component.tsx

@@ -1,10 +1,8 @@
-import { useEffect, useMemo, useState } from "react"
+import { useMemo } from "react"
 import { getCorrectTextColor } from "renderer/helpers/correct-text-color";
 import { cn } from "renderer/helpers/css-class.helpers";
 import { useConstant } from "renderer/hooks/use-constant.hook";
 import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
-import { noop } from "shared/helpers/function.helpers";
-import { isPromise } from "shared/helpers/promise.helpers";
 
 type Props = {
     checked?: boolean;
@@ -17,13 +15,11 @@ type Props = {
     }
     bgColor?: string;
     onChange?: (isChecked: boolean) => void;
-    middleWare?: (newState: boolean) => boolean|Promise<boolean>;
 }
 
-export function ToogleSwitch({ checked, className, classNames, bgColor, onChange, middleWare }: Props) {
+export function ToogleSwitch({ checked, className, classNames, bgColor, onChange }: Props) {
 
     const uuid = useConstant(() => crypto.randomUUID());
-    const [isChecked, setIsChecked] = useState(!!checked);
     const { firstColor } = useThemeColor();
     const backgroundColor = useMemo(() => bgColor ?? firstColor, [bgColor, firstColor]);
     const dotColor = useMemo(() => {
@@ -33,47 +29,17 @@ export function ToogleSwitch({ checked, className, classNames, bgColor, onChange
         return getCorrectTextColor(dotColor)
     }, [dotColor]);
 
-    useEffect(() => {
-        setIsChecked(checked);
-    }, [checked]);
-
     const handleCheckboxChange = () => {
-        if (middleWare) {
-            setIsChecked(prev => {
-                const newState = !prev;
-                const result = middleWare(newState);
-                if (isPromise(result)) {
-                    result.then(shouldChange => {
-                        if (shouldChange) {
-                            setIsChecked(() => {
-                                onChange?.(newState);
-                                return newState;
-                            });
-                        }
-                    }).catch(noop);
-                } else if (result) {
-                    setIsChecked(() => {
-                        onChange?.(newState);
-                        return newState;
-                    });
-                }
-                return prev;
-            });
-        } else {
-            setIsChecked(prev => {
-                onChange?.(!prev);
-                return !prev;
-            });
-        }
+        onChange?.(!checked);
     }
 
     return (
         <label className={cn("flex cursor-pointer select-none items-center h-8 w-14", className, classNames?.container)} htmlFor={uuid}>
-            <div className='relative size-full rounded-full p-1 bg-neutral-500 transition-colors duration-200' style={{ backgroundColor: isChecked && backgroundColor }}>
+            <div className='relative size-full rounded-full p-1 bg-neutral-500 transition-colors duration-200' style={{ backgroundColor: checked && backgroundColor }}>
                 <input
                     id={uuid}
                     type='checkbox'
-                    checked={isChecked}
+                    checked={checked}
                     onChange={handleCheckboxChange}
                     className='sr-only peer'
                 />
@@ -81,7 +47,7 @@ export function ToogleSwitch({ checked, className, classNames, bgColor, onChange
                     className={cn("dot top-0 left-0 flex h-full aspect-square items-center justify-center rounded-full transition duration-200 peer-checked:translate-x-full", classNames?.dot)}
                     style={{ backgroundColor:  dotColor }}
                 >
-                    {isChecked && <span className="text-current" style={{ color: textColor }}>
+                    {checked && <span className="text-current" style={{ color: textColor }}>
                         <svg
                             width='11'
                             height='8'
@@ -96,7 +62,7 @@ export function ToogleSwitch({ checked, className, classNames, bgColor, onChange
                             />
                         </svg>
                     </span>}
-                    {!isChecked && <span className="text-current" style={{ color: textColor }}>
+                    {!checked && <span className="text-current" style={{ color: textColor }}>
                         <svg
                             className='h-4 w-4 stroke-current'
                             fill='black'

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

@@ -112,7 +112,7 @@ export function SettingsPage() {
         playlistsManager.isDeepLinksEnabled().then(enabled => setPlaylistsDeepLinkEnabled(() => enabled));
         modelsManager.isDeepLinksEnabled().then(enabled => setModelsDeepLinkEnabled(() => enabled));
 
-        staticConfig.get("disable-hadware-acceleration").then(disabled =>setHardwareAccelerationEnabled(() => disabled === false));
+        staticConfig.get("disable-hadware-acceleration").then(disabled =>setHardwareAccelerationEnabled(() => disabled !== true));
         staticConfig.get("use-symlinks").then(useSymlinks => setUseSymlink(() => useSymlinks));
     }, []);
 
@@ -230,37 +230,30 @@ export function SettingsPage() {
         });
     };
 
-    const onAboutToChangeHardwareAcceleration = async (enabled: boolean): Promise<boolean> => {
-        if(enabled === hardwareAccelerationEnabled){ return false; }
+    const onChangeHardwareAcceleration = async (newHardwareAccelerationEnabled: boolean) => {
+        if(newHardwareAccelerationEnabled === hardwareAccelerationEnabled){ return; }
 
         const res = await modalService.openModal(BasicModal, { data: {
-            title: "Restart Needed",
-            body: "Changing hardware acceleration setting will quit and re-launch BSManager. Are you sure you want to do this?",
+            title: "pages.settings.advanced.hardware-acceleration.modal.title",
+            body: "pages.settings.advanced.hardware-acceleration.modal.body",
             image: BeatConflict,
             buttons: [
-                { id: "cancel", text: "Cancel", type: "cancel", isCancel: true },
-                { id: "confirm", text: "Yes I'm sure", type: "error" }
+                { id: "cancel", text: "misc.cancel", type: "cancel", isCancel: true },
+                { id: "confirm", text: "pages.settings.advanced.hardware-acceleration.modal.confirm-btn", type: "error" }
             ]
         }});
 
-        if(res.exitCode !== ModalExitCode.COMPLETED || res.data !== "confirm"){
-            return false;
-        }
+        if(res.exitCode !== ModalExitCode.COMPLETED || res.data !== "confirm"){ return; }
 
-
-        return true;
-    };
-
-    const onChangeHardwareAcceleration = async (enabled: boolean) => {
-
-        const { error } = await tryit(() => staticConfig.set("disable-hadware-acceleration", !enabled));
+        const { error } = await tryit(() => staticConfig.set("disable-hadware-acceleration", !newHardwareAccelerationEnabled));
 
         if(error){
-            notificationService.notifyError({ title: "notifications.types.error", desc: "An error occur, unable to disable hardware acceleration" });
-            return;
+            notificationService.notifyError({ title: "notifications.types.error", desc: "pages.settings.advanced.hardware-acceleration.error-notification.message" });
+            setHardwareAccelerationEnabled(() => !newHardwareAccelerationEnabled);
+                return;
         }
 
-        setHardwareAccelerationEnabled(() => enabled);
+        setHardwareAccelerationEnabled(() => newHardwareAccelerationEnabled);
 
         if(!progressBarService.require()){
             return;
@@ -269,36 +262,32 @@ export function SettingsPage() {
         await lastValueFrom(ipcService.sendV2("restart-app"));
     };
 
-    const onAboutToChangeUseSymlinks = async (newUseSymlink: boolean): Promise<boolean> => {
-        if(newUseSymlink === useSymlink){ return false; }
-        if(!newUseSymlink){ return true; } // If we are disabling symlinks, no need to inform about admin rights
+    const onChangeUseSymlinks = async (newUseSymlink: boolean) => {
 
-        const res = await modalService.openModal(BasicModal, { data: {
-            title: "Permission Needed",
-            body: "In order to create symlinks, BSManager will need to run as administrator or your system will need to have developer mode enabled. Are you sure you want to do this?",
-            image: BeatConflict,
-            buttons: [
-                { id: "cancel", text: "Cancel", type: "cancel", isCancel: true },
-                { id: "confirm", text: "Yes I'm sure", type: "error" }
-            ]
-        }});
+        if(newUseSymlink === useSymlink){ return; }
 
-        if(res.exitCode !== ModalExitCode.COMPLETED || res.data !== "confirm"){
-            return false;
+        if(newUseSymlink){
+            const res = await modalService.openModal(BasicModal, { data: {
+                title: "pages.settings.advanced.use-symlinks.modal.title",
+                body: "pages.settings.advanced.use-symlinks.modal.body",
+                image: BeatConflict,
+                buttons: [
+                    { id: "cancel", text: "misc.cancel", type: "cancel", isCancel: true },
+                    { id: "confirm", text: "pages.settings.advanced.use-symlinks.modal.confirm-btn", type: "error" }
+                ]
+            }});
+
+            if(res.exitCode !== ModalExitCode.COMPLETED || res.data !== "confirm"){ return; }
         }
 
-        return true;
-    }
-
-    const onChangeUseSymlinks = async (useSymlink: boolean) => {
-        const { error } = await tryit(() => staticConfig.set("use-symlinks", useSymlink));
+        const { error } = await tryit(() => staticConfig.set("use-symlinks", newUseSymlink));
 
         if(error){
-            notificationService.notifyError({ title: "notifications.types.error", desc: "An error occur, unable to change symlinks settings" });
+            notificationService.notifyError({ title: "notifications.types.error", desc: "pages.settings.advanced.use-symlinks.error-notification.message" });
             return;
         }
 
-        setUseSymlink(() => useSymlink);
+        setUseSymlink(() => newUseSymlink);
     }
 
     const toogleShowSupporters = () => {
@@ -583,10 +572,10 @@ export function SettingsPage() {
                     </SettingContainer>
                 </SettingContainer>
 
-                <SettingContainer title="Advanced" description="Changes these stettings only if your are sure of what you are doing">
+                <SettingContainer title="pages.settings.advanced.title" description="pages.settings.advanced.description">
                     <SettingToogleSwitchGrid items={[
-                        { checked: hardwareAccelerationEnabled, text: "Hadware Acceleration", desc: "Enable Hardware Acceleration to use your GPU and improve BSManager's performance. Turn this off if you're experiencing frame drops.", middleWare: onAboutToChangeHardwareAcceleration, onChange: onChangeHardwareAcceleration },
-                        { checked: useSymlink, text: "Use Symlinks", desc: "Use Symlinks instead of Junctions to link folders. Turn this on only if you really need it.", middleWare: onAboutToChangeUseSymlinks, onChange: onChangeUseSymlinks },
+                        { checked: hardwareAccelerationEnabled, text: t("pages.settings.advanced.hardware-acceleration.title"), desc: t("pages.settings.advanced.hardware-acceleration.description"), onChange: onChangeHardwareAcceleration },
+                        { checked: useSymlink, text: t("pages.settings.advanced.use-symlinks.title"), desc: t("pages.settings.advanced.use-symlinks.description"), onChange: onChangeUseSymlinks },
                     ]}/>
                 </SettingContainer>