feat: updating settings general

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-field/select-field";
 export * from "./toast/toast";

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

@@ -0,0 +1,58 @@
+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`,
+});
+
+export const label = style({
+  marginBottom: `${SPACING_UNIT}px`,
+  display: "block",
+  color: vars.color.body,
+});

src/renderer/src/components/select-field/select-field.tsx

@@ -0,0 +1,51 @@
+import { useId, useState } from "react";
+import type { RecipeVariants } from "@vanilla-extract/recipes";
+import * as styles from "./select-field.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 SelectField({
+  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,26 @@
 import { useEffect, useState } from "react";
+import ISO6391 from "iso-639-1";
 
-import { TextField, Button, CheckboxField } from "@renderer/components";
+import {
+  TextField,
+  Button,
+  CheckboxField,
+  SelectField,
+} 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 +28,8 @@ export interface SettingsGeneralProps {
 export function SettingsGeneral({
   updateUserPreferences,
 }: SettingsGeneralProps) {
+  const { t } = useTranslation("settings");
+
   const userPreferences = useAppSelector(
     (state) => state.userPreferences.value
   );
@@ -22,28 +38,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 +92,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 +130,40 @@ export function SettingsGeneral({
         </Button>
       </div>
 
+      <SelectField
+        label={t("language")}
+        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,
+            })
+          }
+        />
+      </>
     </>
   );
 }