Merge branch 'main' into feat/unzip-behavior-option

src/renderer/src/components/sidebar/sidebar-profile.scss

@@ -85,5 +85,6 @@
     white-space: nowrap;
     width: 100%;
     text-align: left;
+    line-height: 1.15;
   }
 }

src/renderer/src/hooks/use-date.ts

@@ -1,7 +1,6 @@
 import { formatDate, getDateLocale } from "@shared";
 import { format, formatDistance, subMilliseconds } from "date-fns";
 import type { FormatDistanceOptions } from "date-fns";
-import { enUS } from "date-fns/locale";
 import { useTranslation } from "react-i18next";
 
 export function useDate() {
@@ -41,10 +40,10 @@ export function useDate() {
     },
 
     formatDateTime: (date: number | Date | string): string => {
-      const locale = getDateLocale(language);
       return format(
         date,
-        locale == enUS ? "MM/dd/yyyy - HH:mm" : "dd/MM/yyyy HH:mm"
+        language == "en" ? "MM-dd-yyyy - hh:mm a" : "dd/MM/yyyy HH:mm",
+        { locale: getDateLocale(language) }
       );
     },
 

src/renderer/src/hooks/use-feature.ts

@@ -2,7 +2,7 @@ import { useEffect, useState, useCallback } from "react";
 
 enum Feature {
   CheckDownloadWritePermission = "CHECK_DOWNLOAD_WRITE_PERMISSION",
-  Torbox = "TORBOX",
+  TorBox = "TORBOX",
   Nimbus = "NIMBUS",
   NimbusPreview = "NIMBUS_PREVIEW",
 }

src/renderer/src/pages/downloads/download-group.scss

@@ -73,8 +73,11 @@
     min-height: 140px;
     max-height: 140px;
     position: relative;
-  }
 
+    &--hydra {
+      box-shadow: 0px 0px 16px 0px rgba(12, 241, 202, 0.15);
+    }
+  }
   &__cover {
     width: 280px;
     min-width: 280px;
@@ -145,4 +148,14 @@
     padding: 8px;
     min-height: unset;
   }
+
+  &__hydra-gradient {
+    background: linear-gradient(90deg, #01483c 0%, #0cf1ca 50%, #01483c 100%);
+    box-shadow: 0px 0px 8px 0px rgba(12, 241, 202, 0.15);
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    height: 2px;
+    z-index: 1;
+  }
 }

src/renderer/src/pages/downloads/download-group.tsx

@@ -1,4 +1,5 @@
 import { useNavigate } from "react-router-dom";
+import cn from "classnames";
 
 import type { GameShop, LibraryGame, SeedingStatus } from "@types";
 
@@ -32,8 +33,6 @@ import {
   XCircleIcon,
 } from "@primer/octicons-react";
 
-import torBoxLogo from "@renderer/assets/icons/torbox.webp";
-
 export interface DownloadGroupProps {
   library: LibraryGame[];
   title: string;
@@ -310,7 +309,13 @@ export function DownloadGroup({
       <ul className="download-group__downloads">
         {library.map((game) => {
           return (
-            <li key={game.id} className="download-group__item">
+            <li
+              key={game.id}
+              className={cn("download-group__item", {
+                "download-group__item--hydra":
+                  game.download?.downloader === Downloader.Hydra,
+              })}
+            >
               <div className="download-group__cover">
                 <div className="download-group__cover-backdrop">
                   <img
@@ -320,20 +325,7 @@ export function DownloadGroup({
                   />
 
                   <div className="download-group__cover-content">
-                    {game.download?.downloader === Downloader.TorBox ? (
-                      <Badge>
-                        <img
-                          src={torBoxLogo}
-                          alt="TorBox"
-                          style={{ width: 13 }}
-                        />
-                        <span>TorBox</span>
-                      </Badge>
-                    ) : (
-                      <Badge>
-                        {DOWNLOADER_NAME[game.download!.downloader]}
-                      </Badge>
-                    )}
+                    <Badge>{DOWNLOADER_NAME[game.download!.downloader]}</Badge>
                   </div>
                 </div>
               </div>
@@ -376,18 +368,7 @@ export function DownloadGroup({
               </div>
 
               {game.download?.downloader === Downloader.Hydra && (
-                <div
-                  style={{
-                    background:
-                      "linear-gradient(90deg, #01483C 0%, #0CF1CA 50%, #01483C 100%)",
-                    boxShadow: "0px 0px 8px 0px rgba(12, 241, 202, 0.15)",
-                    width: "100%",
-                    position: "absolute",
-                    bottom: 0,
-                    height: 2,
-                    zIndex: 1,
-                  }}
-                />
+                <div className="download-group__hydra-gradient" />
               )}
             </li>
           );

src/renderer/src/pages/game-details/modals/download-settings-modal.tsx

@@ -96,14 +96,14 @@ export function DownloadSettingsModal({
         return Downloader.Hydra;
       }
 
-      if (availableDownloaders.includes(Downloader.TorBox)) {
-        return Downloader.TorBox;
-      }
-
       if (availableDownloaders.includes(Downloader.RealDebrid)) {
         return Downloader.RealDebrid;
       }
 
+      if (availableDownloaders.includes(Downloader.TorBox)) {
+        return Downloader.TorBox;
+      }
+
       return availableDownloaders[0];
     },
     []

src/renderer/src/pages/game-details/modals/game-options-modal.tsx

@@ -362,7 +362,7 @@ export function GameOptionsModal({
 
           <div className="game-options-modal__downloads">
             <div className="game-options-modal__header">
-              <h2>{t("downloads_secion_title")}</h2>
+              <h2>{t("downloads_section_title")}</h2>
               <h4 className="game-options-modal__header-description">
                 {t("downloads_section_description")}
               </h4>

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

@@ -16,7 +16,7 @@ const TORBOX_URL = torBoxReferralCode
   : "https://torbox.app";
 const TORBOX_API_TOKEN_URL = "https://torbox.app/settings";
 
-export function SettingsTorbox() {
+export function SettingsTorBox() {
   const userPreferences = useAppSelector(
     (state) => state.userPreferences.value
   );

src/renderer/src/pages/settings/settings.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from "react-i18next";
 import { SettingsRealDebrid } from "./settings-real-debrid";
 import { SettingsGeneral } from "./settings-general";
 import { SettingsBehavior } from "./settings-behavior";
-import torBoxLogo from "@renderer/assets/icons/torbox.webp";
 import { SettingsDownloadSources } from "./settings-download-sources";
 import {
   SettingsContextConsumer,
@@ -14,7 +13,7 @@ import { useFeature, useUserDetails } from "@renderer/hooks";
 import { useMemo } from "react";
 import "./settings.scss";
 import { SettingsAppearance } from "./aparence/settings-appearance";
-import { SettingsTorbox } from "./settings-torbox";
+import { SettingsTorBox } from "./settings-torbox";
 
 export default function Settings() {
   const { t } = useTranslation("settings");
@@ -23,7 +22,7 @@ export default function Settings() {
 
   const { isFeatureEnabled, Feature } = useFeature();
 
-  const isTorboxEnabled = isFeatureEnabled(Feature.Torbox);
+  const isTorBoxEnabled = isFeatureEnabled(Feature.TorBox);
 
   const categories = useMemo(() => {
     const categories = [
@@ -34,19 +33,10 @@ export default function Settings() {
         tabLabel: t("appearance"),
         contentTitle: t("appearance"),
       },
-      ...(isTorboxEnabled
+      ...(isTorBoxEnabled
         ? [
             {
-              tabLabel: (
-                <>
-                  <img
-                    src={torBoxLogo}
-                    alt="TorBox"
-                    style={{ width: 13, height: 13 }}
-                  />{" "}
-                  Torbox
-                </>
-              ),
+              tabLabel: "TorBox",
               contentTitle: "TorBox",
             },
           ]
@@ -60,7 +50,7 @@ export default function Settings() {
         { tabLabel: t("account"), contentTitle: t("account") },
       ];
     return categories;
-  }, [userDetails, t, isTorboxEnabled]);
+  }, [userDetails, t, isTorBoxEnabled]);
 
   return (
     <SettingsContextProvider>
@@ -84,7 +74,7 @@ export default function Settings() {
             }
 
             if (currentCategoryIndex === 4) {
-              return <SettingsTorbox />;
+              return <SettingsTorBox />;
             }
 
             if (currentCategoryIndex === 5) {