add select all to toogle oneClicks

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import SettingColorChooser from "renderer/components/settings/setting-color-chooser.component";
 import { SettingContainer } from "renderer/components/settings/setting-container.component";
 import { RadioItem, SettingRadioArray } from "renderer/components/settings/setting-radio-array.component";
@@ -80,6 +80,8 @@ export function SettingsPage() {
     modelsManager.isDeepLinksEnabled().then(enabled => setModelsDeepLinkEnabled(() => enabled))
   }, []);
 
+  const allDeepLinkEnabled = mapDeepLinksEnabled && playlistsDeepLinkEnabled && modelsDeepLinkEnabled;
+
   const resetColors = () => {
     configService.delete("first-color" as DefaultConfigKey);
     configService.delete("second-color" as DefaultConfigKey);
@@ -162,35 +164,26 @@ export function SettingsPage() {
         notificationService.notifySuccess({title, desc, duration: 3000});
     }
 
-    const toogleMapDeepLinks = () => {
-        const isDesactivation = mapDeepLinksEnabled;
-        mapsManager.toogleDeepLinks().then(res => {
-            if(res){ return showDeepLinkSuccess(isDesactivation); }
-            showDeepLinkError(isDesactivation);
-        }).catch(() => {
-            showDeepLinkError(isDesactivation);
-        }).finally(() => mapsManager.isDeepLinksEnabled().then(enabled => setMapDeepLinksEnabled(() => enabled)));
+    const switchDeepLink = async (manager: MapsManagerService|PlaylistsManagerService|ModelsManagerService, enable: boolean, showNotification: boolean, setter: Dispatch<SetStateAction<boolean>>) => {
+        const res = await (enable ? manager.enableDeepLink() : manager.disableDeepLink());
+        showNotification && (res ? showDeepLinkSuccess(!enable) : showDeepLinkError(!enable));
+        const isEnable = await manager.isDeepLinksEnabled()
+        setter(() => isEnable)
+        return res;
     }
 
-    const tooglePlaylistsDeepLinks = () => {
-        const isDesactivation = playlistsDeepLinkEnabled;
-        playlistsManager.toogleDeepLinks().then(res => {
-            if(res){ return showDeepLinkSuccess(isDesactivation); }
-            showDeepLinkError(isDesactivation);
-        }).catch(() => {
-            showDeepLinkError(isDesactivation);
-        }).finally(() => playlistsManager.isDeepLinksEnabled().then(enabled => setPlaylistsDeepLinkEnabled(() => enabled)));
-    }
+    const toogleMapDeepLinks = (showNotification = true) => switchDeepLink(mapsManager, !mapDeepLinksEnabled, showNotification, setMapDeepLinksEnabled);
+    const tooglePlaylistsDeepLinks = (showNotification = true) => switchDeepLink(playlistsManager, !playlistsDeepLinkEnabled, showNotification, setPlaylistsDeepLinkEnabled);
+    const toogleModelsDeepLinks = (showNotification = true) => switchDeepLink(modelsManager, !modelsDeepLinkEnabled, showNotification, setModelsDeepLinkEnabled);
+    const toogleAllDeepLinks = async () => {
+        const res = (await Promise.all([
+            switchDeepLink(mapsManager, !allDeepLinkEnabled, false, setMapDeepLinksEnabled),
+            switchDeepLink(playlistsManager, !allDeepLinkEnabled, false, setPlaylistsDeepLinkEnabled),
+            switchDeepLink(modelsManager, !allDeepLinkEnabled, false, setModelsDeepLinkEnabled)
+        ])).every(activation => activation === true);
 
-    const toogleModelsDeepLinks = () => {
-        const isDesactivation = modelsDeepLinkEnabled;
-        modelsManager.toogleDeepLinks().then(res => {
-            if(res){ return showDeepLinkSuccess(isDesactivation); }
-            showDeepLinkError(isDesactivation);
-        }).catch(() => {
-            showDeepLinkError(isDesactivation);
-        }).finally(() => modelsManager.isDeepLinksEnabled().then(enabled => setModelsDeepLinkEnabled(() => enabled)));
-    }
+        res ? showDeepLinkSuccess(allDeepLinkEnabled) : showDeepLinkError(allDeepLinkEnabled);
+    };
 
     return (
         <div className="w-full h-full flex justify-center overflow-y-scroll scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900 text-gray-800 dark:text-gray-200">
@@ -209,8 +202,8 @@ export function SettingsPage() {
 
                 <SettingContainer title="pages.settings.appearance.title" description="pages.settings.appearance.description">
                     <div className="relative w-full h-8 bg-light-main-color-1 dark:bg-main-color-1 flex justify-center rounded-md py-1">
-                        <SettingColorChooser color={firstColor} onChange={setFirstColorSetting}/>
-                        <SettingColorChooser color={secondColor} onChange={setSecondColorSetting}/>
+                        <SettingColorChooser color={firstColor} onChange={() => setFirstColorSetting}/>
+                        <SettingColorChooser color={secondColor} onChange={() => setSecondColorSetting}/>
                         <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" text="pages.settings.appearance.reset" withBar={false}/>
                         </div>
@@ -230,10 +223,30 @@ export function SettingsPage() {
                 <SettingContainer title="pages.settings.additional-content.title" description="pages.settings.additional-content.description">
 
                 <SettingContainer id="one-clicks" minorTitle="pages.settings.additional-content.deep-links.sub-title">
-                    <ul className="w-full flex flex-col gap-1.5">
-                        <li className="bg-light-main-color-1 dark:bg-main-color-1 rounded-md group-one flex justify-between items-center basis-0 py-2 px-3 cursor-pointer" onClick={toogleMapDeepLinks}>
+                    <div className="bg-light-main-color-1 dark:bg-main-color-1 rounded-md group-one flex justify-between items-center basis-0 py-2 px-3 cursor-pointer mb-1.5" onClick={toogleAllDeepLinks}>
                             <div className="flex items-center gap-2">
-                                <BsmCheckbox className="relative z-[1] h-5 w-5" onChange={toogleMapDeepLinks} checked={mapDeepLinksEnabled}/>
+                                <BsmCheckbox className="relative z-[1] h-5 w-5" onChange={toogleAllDeepLinks} checked={allDeepLinkEnabled}/>
+                                <span className="font-extrabold">{t("notifications.settings.additional-content.deep-link.select-all")}</span>
+                            </div>
+                            <div className="flex h-full gap-2">
+                                <Tippy content="BeatSaver" placement="top" className="font-bold bg-main-color-3" arrow={false} duration={[200, 0]}>
+                                    <BsmImage className="h-8 cursor-pointer" image={beatSaverIcon} onClick={e => {e.stopPropagation(); linkOpener.open("https://beatsaver.com/")}}/>
+                                </Tippy>
+                                <Tippy content="BeastSaber" placement="top" className="font-bold bg-main-color-3" arrow={false} duration={[200, 0]}>
+                                    <BsmImage className="h-8 rounded-md cursor-pointer" image={beastSaberIcon} onClick={e => {e.stopPropagation(); linkOpener.open("https://bsaber.com/")}}/>
+                                </Tippy>
+                                <Tippy content="ScoreSaber" placement="top" className="font-bold bg-main-color-3" arrow={false} duration={[200, 0]}>
+                                    <BsmImage className="h-8 cursor-pointer" image={scoreSaberIcon} onClick={e => {e.stopPropagation(); linkOpener.open("https://scoresaber.com/")}}/>
+                                </Tippy>
+                                <Tippy content="ModelSaber" placement="top" className="font-bold bg-main-color-3" arrow={false} duration={[200, 0]}>
+                                    <BsmImage className="h-8 cursor-pointer" image={modelSaberIcon} onClick={e => {e.stopPropagation(); linkOpener.open("https://modelsaber.com/")}}/>
+                                </Tippy>
+                            </div>
+                    </div>
+                    <ul className="w-full flex flex-col gap-1.5 pl-10">
+                        <li className="bg-light-main-color-1 dark:bg-main-color-1 rounded-md group-one flex justify-between items-center basis-0 py-2 px-3 cursor-pointer" onClick={() => toogleMapDeepLinks()}>
+                            <div className="flex items-center gap-2">
+                                <BsmCheckbox className="relative z-[1] h-5 w-5" onChange={() => toogleMapDeepLinks()} checked={mapDeepLinksEnabled}/>
                                 <span className="font-extrabold">{t("misc.maps")}</span>
                             </div>
                             <div className="flex h-full gap-2">
@@ -248,9 +261,9 @@ export function SettingsPage() {
                                 </Tippy>
                             </div>
                         </li>
-                        <li className="bg-light-main-color-1 dark:bg-main-color-1 rounded-md group-one flex justify-between items-center basis-0 py-2 px-3 cursor-pointer" onClick={tooglePlaylistsDeepLinks}>
+                        <li className="bg-light-main-color-1 dark:bg-main-color-1 rounded-md group-one flex justify-between items-center basis-0 py-2 px-3 cursor-pointer" onClick={() => tooglePlaylistsDeepLinks()}>
                             <div className="flex items-center gap-2">
-                                <BsmCheckbox className="relative z-[1] h-5 w-5" onChange={tooglePlaylistsDeepLinks} checked={playlistsDeepLinkEnabled}/>
+                                <BsmCheckbox className="relative z-[1] h-5 w-5" onChange={() => tooglePlaylistsDeepLinks()} checked={playlistsDeepLinkEnabled}/>
                                 <span className="font-extrabold">{t("misc.playlists")}</span>
                             </div>
                             <div className="flex h-full">
@@ -259,9 +272,9 @@ export function SettingsPage() {
                                 </Tippy>
                             </div>
                         </li>
-                        <li className="bg-light-main-color-1 dark:bg-main-color-1 rounded-md group-one flex justify-between items-center basis-0 py-2 px-3 cursor-pointer" onClick={toogleModelsDeepLinks}>
+                        <li className="bg-light-main-color-1 dark:bg-main-color-1 rounded-md group-one flex justify-between items-center basis-0 py-2 px-3 cursor-pointer" onClick={() => toogleModelsDeepLinks()}>
                             <div className="flex items-center gap-2">
-                                <BsmCheckbox className="relative z-[1] h-5 w-5" onChange={toogleModelsDeepLinks} checked={modelsDeepLinkEnabled}/>
+                                <BsmCheckbox className="relative z-[1] h-5 w-5" onChange={() => toogleModelsDeepLinks()} checked={modelsDeepLinkEnabled}/>
                                 <span className="font-extrabold">{t("misc.models")}</span>
                             </div>
                             <div className="flex h-full">
@@ -282,7 +295,7 @@ export function SettingsPage() {
                 <SettingContainer title="pages.settings.patreon.title" description="pages.settings.patreon.description">
                     <div className="flex">
                         <BsmButton className="flex w-fit rounded-md h-8 px-2 font-bold py-1 whitespace-nowrap mr-2 !text-white" iconClassName="mr-1" text="pages.settings.patreon.buttons.support" icon="patreon" color="#EC6350" withBar={false} onClick={openPatreonPage}/>
-                        <BsmButton className="flex w-fit rounded-md h-8 px-2 font-bold py-1 !text-white" withBar={false} text="pages.settings.patreon.buttons.supporters" color="#6c5ce7" onClick={toogleShowSupporters}/>
+                        <BsmButton className="flex w-fit rounded-md h-8 px-2 font-bold py-1 !text-white" withBar={false} text="pages.settings.patreon.buttons.supporters" color="#6c5ce7" onClick={() => toogleShowSupporters}/>
                     </div>
                     <SettingContainer className="mt-3" description="pages.settings.discord.description">
                         <BsmButton className="flex w-fit rounded-md h-8 px-2 font-bold py-1 !text-white" withBar={false} text="Discord" icon="discord" iconClassName="p-0.5 mr-1" color="#5865f2" onClick={openDiscord}/>

src/renderer/services/maps-manager.service.ts

@@ -166,24 +166,19 @@ export class MapsManagerService {
         this.progressBar.hide(true);
     }
 
-    public isDeepLinksEnabled(): Promise<boolean>{
-
-        return this.ipcService.send<boolean>("is-map-deep-links-enabled").then(res => (
-            res.success ? res.data : false
-        ));
-
+    public async isDeepLinksEnabled(): Promise<boolean>{
+        const res = await this.ipcService.send<boolean>("is-map-deep-links-enabled");
+        return res.success ? res.data : false;
     }
 
-    public async toogleDeepLinks(): Promise<boolean>{
-
-        const isEnabled = await this.isDeepLinksEnabled();
-        
-        const channel = isEnabled ? "unregister-maps-deep-link" : "register-maps-deep-link";
-
-        const res = await this.ipcService.send<boolean>(channel);
-
+    public async enableDeepLink(): Promise<boolean>{
+        const res = await this.ipcService.send<boolean>("register-maps-deep-link");
         return res.success ? res.data : false;
+    }
 
+    public async disableDeepLink(): Promise<boolean>{
+        const res = await this.ipcService.send<boolean>("unregister-maps-deep-link");
+        return res.success ? res.data : false;
     }
 
     public get versionLinked$(): Observable<BSVersion>{

src/renderer/services/models-manager.service.ts

@@ -21,18 +21,14 @@ export class ModelsManagerService {
         ));
     }
 
-    public async toogleDeepLinks(): Promise<boolean>{
-
-        const isEnabled = await this.isDeepLinksEnabled();
-        
-        const channel = isEnabled ? "unregister-models-deep-link" : "register-models-deep-link";
-
-        const res = await this.ipc.send<boolean>(channel);
-
+    public async enableDeepLink(): Promise<boolean>{
+        const res = await this.ipc.send<boolean>("register-models-deep-link");
         return res.success ? res.data : false;
-
     }
 
-
+    public async disableDeepLink(): Promise<boolean>{
+        const res = await this.ipc.send<boolean>("unregister-models-deep-link");
+        return res.success ? res.data : false;
+    }
 
 }

src/renderer/services/playlists-manager.service.ts

@@ -21,16 +21,14 @@ export class PlaylistsManagerService {
         ));
     }
 
-    public async toogleDeepLinks(): Promise<boolean>{
-
-        const isEnabled = await this.isDeepLinksEnabled();
-        
-        const channel = isEnabled ? "unregister-playlists-deep-link" : "register-playlists-deep-link";
-
-        const res = await this.ipc.send<boolean>(channel);
-
+    public async enableDeepLink(): Promise<boolean>{
+        const res = await this.ipc.send<boolean>("register-playlists-deep-link");
         return res.success ? res.data : false;
+    }
 
+    public async disableDeepLink(): Promise<boolean>{
+        const res = await this.ipc.send<boolean>("unregister-playlists-deep-link");
+        return res.success ? res.data : false;
     }
 
 }