Merge branch 'main' into feat/macos-test

package.json

@@ -40,6 +40,7 @@
     "@reduxjs/toolkit": "^2.2.3",
     "@vanilla-extract/css": "^1.14.2",
     "@vanilla-extract/recipes": "^0.5.2",
+    "iso-639-1": "3.1.2",
     "aria2": "^4.1.2",
     "auto-launch": "^5.0.6",
     "axios": "^1.6.8",

src/locales/en/translation.json

@@ -149,6 +149,7 @@
     "launch_with_system": "Launch Hydra on system start-up",
     "general": "General",
     "behavior": "Behavior",
+    "language": "Language",
     "real_debrid_api_token": "API Token",
     "enable_real_debrid": "Enable Real-Debrid",
     "real_debrid_description": "Real-Debrid is an unrestricted downloader that allows you to download files instantly and at the best of your Internet speed.",

src/locales/es/translation.json

@@ -149,6 +149,7 @@
     "launch_with_system": "Iniciar Hydra al inicio del sistema",
     "general": "General",
     "behavior": "Otros",
+    "language": "Idioma",
     "real_debrid_api_token": "Token API",
     "enable_real_debrid": "Activar Real-Debrid",
     "real_debrid_description": "Real-Debrid es un descargador sin restricciones que te permite descargar archivos instantáneamente con la máxima velocidad de tu internet.",

src/locales/fr/translation.json

@@ -109,7 +109,8 @@
     "enable_download_notifications": "Quand un téléchargement est terminé",
     "enable_repack_list_notifications": "Quand un nouveau repack est ajouté",
     "telemetry": "Télémétrie",
-    "telemetry_description": "Activer les statistiques d'utilisation anonymes"
+    "telemetry_description": "Activer les statistiques d'utilisation anonymes",
+    "language": "Langue"
   },
   "notifications": {
     "download_complete": "Téléchargement terminé",

src/locales/pl/translation.json

@@ -142,6 +142,7 @@
     "launch_with_system": "Uruchom Hydra przy starcie systemu",
     "general": "Ogólne",
     "behavior": "Zachowania",
+    "language": "Język",
     "enable_real_debrid": "Włącz Real-Debrid",
     "real_debrid_api_token_hint": "Możesz uzyskać swój klucz API <0>tutaj</0>",
     "save_changes": "Zapisz zmiany"

src/locales/pt/translation.json

@@ -145,6 +145,7 @@
     "launch_with_system": "Iniciar o Hydra junto com o sistema",
     "general": "Geral",
     "behavior": "Comportamento",
+    "language": "Idioma",
     "real_debrid_api_token": "Token de API",
     "enable_real_debrid": "Habilitar Real-Debrid",
     "real_debrid_api_token_hint": "Você pode obter seu token de API <0>aqui</0>",

src/renderer/src/components/index.ts

@@ -8,4 +8,5 @@ export * from "./sidebar/sidebar";
 export * from "./text-field/text-field";
 export * from "./checkbox-field/checkbox-field";
 export * from "./link/link";
+export * from "./select/select";
 export * from "./toast/toast";

src/renderer/src/components/select/select.css.ts

@@ -0,0 +1,61 @@
+import { SPACING_UNIT, vars } from "../../theme.css";
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+
+export const select = recipe({
+  base: {
+    display: "inline-flex",
+    transition: "all ease 0.2s",
+    width: "fit-content",
+    alignItems: "center",
+    borderRadius: "8px",
+    border: `1px solid ${vars.color.border}`,
+    height: "40px",
+    minHeight: "40px",
+  },
+  variants: {
+    focused: {
+      true: {
+        borderColor: "#DADBE1",
+      },
+      false: {
+        ":hover": {
+          borderColor: "rgba(255, 255, 255, 0.5)",
+        },
+      },
+    },
+    theme: {
+      primary: {
+        backgroundColor: vars.color.darkBackground,
+      },
+      dark: {
+        backgroundColor: vars.color.background,
+      },
+    },
+  },
+});
+
+export const option = style({
+  backgroundColor: vars.color.darkBackground,
+  borderRight: "4px solid",
+  borderColor: "transparent",
+  borderRadius: "8px",
+  width: "fit-content",
+  height: "100%",
+  outline: "none",
+  color: "#DADBE1",
+  cursor: "default",
+  fontFamily: "inherit",
+  fontSize: vars.size.body,
+  textOverflow: "ellipsis",
+  padding: `${SPACING_UNIT}px`,
+  ":focus": {
+    cursor: "text",
+  },
+});
+
+export const label = style({
+  marginBottom: `${SPACING_UNIT}px`,
+  display: "block",
+  color: vars.color.body,
+});

src/renderer/src/components/select/select.tsx

@@ -0,0 +1,51 @@
+import { useId, useState } from "react";
+import type { RecipeVariants } from "@vanilla-extract/recipes";
+import * as styles from "./select.css";
+
+export interface SelectProps
+  extends React.DetailedHTMLProps<
+    React.SelectHTMLAttributes<HTMLSelectElement>,
+    HTMLSelectElement
+  > {
+  theme?: NonNullable<RecipeVariants<typeof styles.select>>["theme"];
+  label?: string;
+  options?: { key: string; value: string; label: string }[];
+}
+
+export function Select({
+  value,
+  label,
+  options = [{ key: "-", value: value?.toString() || "-", label: "-" }],
+  theme = "primary",
+  onChange,
+}: SelectProps) {
+  const [isFocused, setIsFocused] = useState(false);
+  const id = useId();
+
+  return (
+    <div style={{ flex: 1 }}>
+      {label && (
+        <label htmlFor={id} className={styles.label}>
+          {label}
+        </label>
+      )}
+
+      <div className={styles.select({ focused: isFocused, theme })}>
+        <select
+          id={id}
+          value={value}
+          className={styles.option}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+          onChange={onChange}
+        >
+          {options.map((option) => (
+            <option key={option.key} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+}

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

@@ -1,12 +1,21 @@
 import { useEffect, useState } from "react";
+import ISO6391 from "iso-639-1";
 
-import { TextField, Button, CheckboxField } from "@renderer/components";
+import { TextField, Button, CheckboxField, Select } from "@renderer/components";
 import { useTranslation } from "react-i18next";
-
 import * as styles from "./settings-general.css";
 import type { UserPreferences } from "@types";
 import { useAppSelector } from "@renderer/hooks";
 
+import { changeLanguage } from "i18next";
+import * as languageResources from "@locales";
+import { orderBy } from "lodash-es";
+
+interface LanguageOption {
+  option: string;
+  nativeName: string;
+}
+
 export interface SettingsGeneralProps {
   updateUserPreferences: (values: Partial<UserPreferences>) => void;
 }
@@ -14,6 +23,8 @@ export interface SettingsGeneralProps {
 export function SettingsGeneral({
   updateUserPreferences,
 }: SettingsGeneralProps) {
+  const { t } = useTranslation("settings");
+
   const userPreferences = useAppSelector(
     (state) => state.userPreferences.value
   );
@@ -22,28 +33,45 @@ export function SettingsGeneral({
     downloadsPath: "",
     downloadNotificationsEnabled: false,
     repackUpdatesNotificationsEnabled: false,
+    language: "",
   });
 
+  const [languageOptions, setLanguageOptions] = useState<LanguageOption[]>([]);
+
+  const [defaultDownloadsPath, setDefaultDownloadsPath] = useState("");
+
   useEffect(() => {
-    if (userPreferences) {
-      const {
-        downloadsPath,
-        downloadNotificationsEnabled,
-        repackUpdatesNotificationsEnabled,
-      } = userPreferences;
-
-      window.electron.getDefaultDownloadsPath().then((defaultDownloadsPath) => {
-        setForm((prev) => ({
-          ...prev,
-          downloadsPath: downloadsPath ?? defaultDownloadsPath,
-          downloadNotificationsEnabled,
-          repackUpdatesNotificationsEnabled,
-        }));
-      });
+    async function fetchdefaultDownloadsPath() {
+      setDefaultDownloadsPath(await window.electron.getDefaultDownloadsPath());
     }
-  }, [userPreferences]);
 
-  const { t } = useTranslation("settings");
+    fetchdefaultDownloadsPath();
+
+    setLanguageOptions(
+      orderBy(
+        Object.keys(languageResources).map((language) => {
+          return {
+            nativeName: ISO6391.getNativeName(language),
+            option: language,
+          };
+        }),
+        ["nativeName"],
+        "asc"
+      )
+    );
+  }, []);
+
+  useEffect(updateFormWithUserPreferences, [
+    userPreferences,
+    defaultDownloadsPath,
+  ]);
+
+  const handleLanguageChange = (event) => {
+    const value = event.target.value;
+
+    handleChange({ language: value });
+    changeLanguage(value);
+  };
 
   const handleChange = (values: Partial<typeof form>) => {
     setForm((prev) => ({ ...prev, ...values }));
@@ -59,10 +87,25 @@ export function SettingsGeneral({
     if (filePaths && filePaths.length > 0) {
       const path = filePaths[0];
       handleChange({ downloadsPath: path });
-      updateUserPreferences({ downloadsPath: path });
     }
   };
 
+  function updateFormWithUserPreferences() {
+    if (userPreferences) {
+      const parsedLanguage = userPreferences.language.split("-")[0];
+
+      setForm((prev) => ({
+        ...prev,
+        downloadsPath: userPreferences.downloadsPath ?? defaultDownloadsPath,
+        downloadNotificationsEnabled:
+          userPreferences.downloadNotificationsEnabled,
+        repackUpdatesNotificationsEnabled:
+          userPreferences.repackUpdatesNotificationsEnabled,
+        language: parsedLanguage,
+      }));
+    }
+  }
+
   return (
     <>
       <div className={styles.downloadsPathField}>
@@ -82,8 +125,21 @@ export function SettingsGeneral({
         </Button>
       </div>
 
-      <h3>{t("notifications")}</h3>
+      <h3>{t("language")}</h3>
+      <>
+        <Select
+          value={form.language}
+          onChange={handleLanguageChange}
+          options={languageOptions.map((language) => ({
+            key: language.option,
+            value: language.option,
+            label: language.nativeName,
+          }))}
+        />
+      </>
 
+      <h3>{t("notifications")}</h3>
+      <>
         <CheckboxField
           label={t("enable_download_notifications")}
           checked={form.downloadNotificationsEnabled}
@@ -105,5 +161,6 @@ export function SettingsGeneral({
           }
         />
       </>
+    </>
   );
 }

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

@@ -15,7 +15,11 @@ export function Settings() {
 
   const dispatch = useAppDispatch();
 
-  const categories = [t("general"), t("behavior"), "Real-Debrid"];
+  const categories = [
+    { name: t("general"), component: SettingsGeneral },
+    { name: t("behavior"), component: SettingsBehavior },
+    { name: "Real-Debrid", component: SettingsRealDebrid },
+  ];
 
   const [currentCategoryIndex, setCurrentCategoryIndex] = useState(0);
 
@@ -29,20 +33,9 @@ export function Settings() {
   };
 
   const renderCategory = () => {
-    if (currentCategoryIndex === 0) {
+    const CategoryComponent = categories[currentCategoryIndex].component;
     return (
-        <SettingsGeneral updateUserPreferences={handleUpdateUserPreferences} />
-      );
-    }
-
-    if (currentCategoryIndex === 1) {
-      return (
-        <SettingsBehavior updateUserPreferences={handleUpdateUserPreferences} />
-      );
-    }
-
-    return (
-      <SettingsRealDebrid updateUserPreferences={handleUpdateUserPreferences} />
+      <CategoryComponent updateUserPreferences={handleUpdateUserPreferences} />
     );
   };
 
@@ -52,16 +45,16 @@ export function Settings() {
         <section className={styles.settingsCategories}>
           {categories.map((category, index) => (
             <Button
-              key={category}
+              key={category.name}
               theme={currentCategoryIndex === index ? "primary" : "outline"}
               onClick={() => setCurrentCategoryIndex(index)}
             >
-              {category}
+              {category.name}
             </Button>
           ))}
         </section>
 
-        <h2>{categories[currentCategoryIndex]}</h2>
+        <h2>{categories[currentCategoryIndex].name}</h2>
         {renderCategory()}
       </div>
     </section>

yarn.lock

@@ -4037,6 +4037,11 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
+iso-639-1@3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/iso-639-1/-/iso-639-1-3.1.2.tgz#86a53dcce056e0d856b17c022eb059eb16a35426"
+  integrity sha512-Le7BRl3Jt9URvaiEHJCDEdvPZCfhiQoXnFgLAWNRhzFMwRFdWO7/5tLRQbiPzE394I9xd7KdRCM7S6qdOhwG5A==
+
 iterator.prototype@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/iterator.prototype/-/iterator.prototype-1.1.2.tgz#5e29c8924f01916cb9335f1ff80619dcff22b0c0"
@@ -5483,16 +5488,7 @@ stat-mode@^1.0.0:
   resolved "https://registry.yarnpkg.com/stat-mode/-/stat-mode-1.0.0.tgz#68b55cb61ea639ff57136f36b216a291800d1465"
   integrity sha512-jH9EhtKIjuXZ2cWxmXS8ZP80XyC3iasQxMDV8jzhNJpfDb7VbQLVW4Wvsxz9QZvzV+G4YoSfBUVKDOyxLzi/sg==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -5563,14 +5559,7 @@ string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -6139,16 +6128,7 @@ word-wrap@^1.2.5:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
-wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==