Merge branch 'main' into feat/macos-test

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,28 +125,42 @@ export function SettingsGeneral({
         </Button>
       </div>
 
+      <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}
+          onChange={() =>
+            handleChange({
+              downloadNotificationsEnabled: !form.downloadNotificationsEnabled,
+            })
+          }
+        />
 
-      <CheckboxField
-        label={t("enable_download_notifications")}
-        checked={form.downloadNotificationsEnabled}
-        onChange={() =>
-          handleChange({
-            downloadNotificationsEnabled: !form.downloadNotificationsEnabled,
-          })
-        }
-      />
-
-      <CheckboxField
-        label={t("enable_repack_list_notifications")}
-        checked={form.repackUpdatesNotificationsEnabled}
-        onChange={() =>
-          handleChange({
-            repackUpdatesNotificationsEnabled:
-              !form.repackUpdatesNotificationsEnabled,
-          })
-        }
-      />
+        <CheckboxField
+          label={t("enable_repack_list_notifications")}
+          checked={form.repackUpdatesNotificationsEnabled}
+          onChange={() =>
+            handleChange({
+              repackUpdatesNotificationsEnabled:
+                !form.repackUpdatesNotificationsEnabled,
+            })
+          }
+        />
+      </>
     </>
   );
 }

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) {
-      return (
-        <SettingsGeneral updateUserPreferences={handleUpdateUserPreferences} />
-      );
-    }
-
-    if (currentCategoryIndex === 1) {
-      return (
-        <SettingsBehavior updateUserPreferences={handleUpdateUserPreferences} />
-      );
-    }
-
+    const CategoryComponent = categories[currentCategoryIndex].component;
     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>