fix: allowing debrid services to be disabled

src/renderer/src/pages/settings/settings-download-sources.scss

@@ -54,8 +54,8 @@
     }
   }
 
-  &__remove_all_sources_button {
+  &__buttons-container {
     display: flex;
-    justify-content: flex-end;
+    gap: globals.$spacing-unit;
   }
 }

src/renderer/src/pages/settings/settings-download-sources.tsx

@@ -13,7 +13,7 @@ import {
   NoEntryIcon,
   PlusCircleIcon,
   SyncIcon,
-  XIcon,
+  TrashIcon,
 } from "@primer/octicons-react";
 import { AddDownloadSourceModal } from "./add-download-source-modal";
 import { useAppDispatch, useRepacks, useToast } from "@renderer/hooks";
@@ -173,7 +173,8 @@ export function SettingsDownloadSources() {
           disabled={
             !downloadSources.length ||
             isSyncingDownloadSources ||
-            isRemovingDownloadSource
+            isRemovingDownloadSource ||
+            isFetchingSources
           }
           onClick={syncDownloadSources}
         >
@@ -181,30 +182,37 @@ export function SettingsDownloadSources() {
           {t("sync_download_sources")}
         </Button>
 
-        <Button
-          type="button"
-          theme="outline"
-          onClick={() => setShowAddDownloadSourceModal(true)}
-          disabled={isSyncingDownloadSources}
-        >
-          <PlusCircleIcon />
-          {t("add_download_source")}
-        </Button>
-      </div>
-
-      {!isFetchingSources && downloadSources.length >= 2 && (
-        <div className="settings-download-sources__remove_all_sources_button">
+        <div className="settings-download-sources__buttons-container">
           <Button
             type="button"
             theme="danger"
             onClick={() => setShowConfirmationDeleteAllSourcesModal(true)}
-            disabled={isRemovingDownloadSource}
+            disabled={
+              isRemovingDownloadSource ||
+              isSyncingDownloadSources ||
+              !downloadSources.length ||
+              isFetchingSources
+            }
           >
-            <XIcon />
+            <TrashIcon />
             {t("button_delete_all_sources")}
           </Button>
+
+          <Button
+            type="button"
+            theme="outline"
+            onClick={() => setShowAddDownloadSourceModal(true)}
+            disabled={
+              isSyncingDownloadSources ||
+              isFetchingSources ||
+              isRemovingDownloadSource
+            }
+          >
+            <PlusCircleIcon />
+            {t("add_download_source")}
+          </Button>
         </div>
-      )}
+      </div>
 
       <ul className="settings-download-sources__list">
         {downloadSources.map((downloadSource) => (

src/renderer/src/pages/settings/settings-real-debrid.scss

@@ -7,12 +7,22 @@
     gap: globals.$spacing-unit;
   }
 
-  &__description {
-    margin-bottom: calc(globals.$spacing-unit * 2);
-  }
-
   &__submit-button {
     align-self: flex-end;
     width: 100%;
   }
+
+  &__description-container {
+    display: flex;
+    flex-direction: column;
+    gap: globals.$spacing-unit;
+    margin-bottom: calc(globals.$spacing-unit * 2);
+    align-items: flex-start;
+  }
+
+  &__create-account {
+    display: flex;
+    align-items: center;
+    gap: globals.$spacing-unit;
+  }
 }

src/renderer/src/pages/settings/settings-real-debrid.tsx

@@ -7,7 +7,14 @@ import "./settings-real-debrid.scss";
 import { useAppSelector, useToast } from "@renderer/hooks";
 
 import { settingsContext } from "@renderer/context";
+import { LinkExternalIcon } from "@primer/octicons-react";
 
+const realDebridReferralId = import.meta.env
+  .RENDERER_VITE_REAL_DEBRID_REFERRAL_ID;
+
+const REAL_DEBRID_URL = realDebridReferralId
+  ? `https://real-debrid.com/?id=${realDebridReferralId}`
+  : "https://real-debrid.com";
 const REAL_DEBRID_API_TOKEN_URL = "https://real-debrid.com/apitoken";
 
 export function SettingsRealDebrid() {
@@ -74,24 +81,43 @@ export function SettingsRealDebrid() {
     }
   };
 
+  const toggleRealDebrid = () => {
+    const updatedValue = !form.useRealDebrid;
+
+    setForm((prev) => ({
+      ...prev,
+      useRealDebrid: updatedValue,
+    }));
+
+    if (!updatedValue) {
+      updateUserPreferences({
+        realDebridApiToken: null,
+      });
+    }
+  };
+
   const isButtonDisabled =
     (form.useRealDebrid && !form.realDebridApiToken) || isLoading;
 
   return (
     <form className="settings-real-debrid__form" onSubmit={handleFormSubmit}>
-      <p className="settings-real-debrid__description">
-        {t("real_debrid_description")}
-      </p>
+      <div className="settings-real-debrid__description-container">
+        <p className="settings-real-debrid__description">
+          {t("real_debrid_description")}
+        </p>
+        <Link
+          to={REAL_DEBRID_URL}
+          className="settings-real-debrid__create-account"
+        >
+          <LinkExternalIcon />
+          {t("create_real_debrid_account")}
+        </Link>
+      </div>
 
       <CheckboxField
         label={t("enable_real_debrid")}
         checked={form.useRealDebrid}
-        onChange={() => {
-          setForm((prev) => ({
-            ...prev,
-            useRealDebrid: !form.useRealDebrid,
-          }));
-        }}
+        onChange={toggleRealDebrid}
       />
 
       {form.useRealDebrid && (

src/renderer/src/pages/settings/settings-torbox.scss

@@ -7,12 +7,22 @@
     gap: globals.$spacing-unit;
   }
 
-  &__description {
-    margin-bottom: calc(globals.$spacing-unit * 2);
-  }
-
   &__submit-button {
     align-self: flex-end;
     width: 100%;
   }
+
+  &__description-container {
+    display: flex;
+    flex-direction: column;
+    gap: globals.$spacing-unit;
+    margin-bottom: calc(globals.$spacing-unit * 2);
+    align-items: flex-start;
+  }
+
+  &__create-account {
+    display: flex;
+    align-items: center;
+    gap: globals.$spacing-unit;
+  }
 }

src/renderer/src/pages/settings/settings-torbox.tsx

@@ -7,7 +7,13 @@ import "./settings-torbox.scss";
 import { useAppSelector, useToast } from "@renderer/hooks";
 
 import { settingsContext } from "@renderer/context";
+import { LinkExternalIcon } from "@primer/octicons-react";
 
+const torBoxReferralCode = import.meta.env.RENDERER_VITE_TORBOX_REFERRAL_CODE;
+
+const TORBOX_URL = torBoxReferralCode
+  ? `https://torbox.app/subscription?referral=${torBoxReferralCode}`
+  : "https://torbox.app";
 const TORBOX_API_TOKEN_URL = "https://torbox.app/settings";
 
 export function SettingsTorbox() {
@@ -69,19 +75,37 @@ export function SettingsTorbox() {
   const isButtonDisabled =
     (form.useTorBox && !form.torBoxApiToken) || isLoading;
 
+  const toggleTorBox = () => {
+    const updatedValue = !form.useTorBox;
+
+    setForm((prev) => ({
+      ...prev,
+      useTorBox: updatedValue,
+    }));
+
+    if (!updatedValue) {
+      updateUserPreferences({
+        torBoxApiToken: null,
+      });
+    }
+  };
+
   return (
     <form className="settings-torbox__form" onSubmit={handleFormSubmit}>
-      <p className="settings-torbox__description">{t("torbox_description")}</p>
+      <div className="settings-torbox__description-container">
+        <p className="settings-torbox__description">
+          {t("torbox_description")}
+        </p>
+        <Link to={TORBOX_URL} className="settings-torbox__create-account">
+          <LinkExternalIcon />
+          {t("create_torbox_account")}
+        </Link>
+      </div>
 
       <CheckboxField
         label={t("enable_torbox")}
         checked={form.useTorBox}
-        onChange={() =>
-          setForm((prev) => ({
-            ...prev,
-            useTorBox: !form.useTorBox,
-          }))
-        }
+        onChange={toggleTorBox}
       />
 
       {form.useTorBox && (

src/renderer/src/vite-env.d.ts

@@ -4,6 +4,8 @@
 interface ImportMetaEnv {
   readonly RENDERER_VITE_EXTERNAL_RESOURCES_URL: string;
   readonly RENDERER_VITE_SENTRY_DSN: string;
+  readonly RENDERER_VITE_REAL_DEBRID_REFERRAL_ID: string;
+  readonly RENDERER_VITE_TORBOX_REFERRAL_CODE: string;
 }
 
 interface ImportMeta {