Merge pull request #23 from SARDONYX-sard/feature/implement-i18n-system

Feature/implement i18n system

frontend/next.config.js

@@ -1,8 +1,8 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: true,
   distDir: "../out",
   output: "export",
+  reactStrictMode: true,
   swcMinify: true,
 };
 

frontend/src/app/layout.tsx

@@ -1,4 +1,5 @@
 import "@/app/globals.css";
+import "@/utils/translation";
 import Loading from "@/components/pages/loading";
 import React from "react";
 import dynamic from "next/dynamic";

frontend/src/app/page.tsx

@@ -1,4 +1,4 @@
-import Converter from "../components/pages/converter";
+import Converter from "@/components/pages/converter";
 
 /**
  * # Root page (URL: /).

frontend/src/components/buttons/convert_btn.tsx

@@ -1,17 +1,20 @@
 import ConvertIcon from "@mui/icons-material/Transform";
 import LoadingButton from "@mui/lab/LoadingButton";
+import { useTranslation } from "react-i18next";
 
-type Props = {
+type Props = Readonly<{
   loading: boolean;
   setLoading: (loading: boolean) => void;
-};
+}>;
 
 /**
  *
  * Icon ref
  * - https://mui.com/material-ui/material-icons/
  */
 export default function ConvertButton({ loading, setLoading }: Props) {
+  const { t } = useTranslation();
+
   return (
     <LoadingButton
       type="submit"
@@ -22,7 +25,7 @@ export default function ConvertButton({ loading, setLoading }: Props) {
       variant="contained"
       onChange={() => setLoading(true)}
     >
-      <span>{loading ? "Converting..." : "Convert"}</span>
+      <span>{loading ? t("converting-btn") : t("convert-btn")}</span>
     </LoadingButton>
   );
 }

frontend/src/components/buttons/log_file_btn.tsx

@@ -2,8 +2,11 @@ import toast from "react-hot-toast";
 import { Button } from "@mui/material";
 import { FileOpen } from "@mui/icons-material";
 import { openLogFile } from "@/tauri_cmd";
+import { useTranslation } from "react-i18next";
 
 export const LogFileButton = () => {
+  const { t } = useTranslation();
+
   return (
     <Button
       sx={{
@@ -16,7 +19,7 @@ export const LogFileButton = () => {
       type="button"
       variant="outlined"
     >
-      Open log
+      {t("open-log-btn")}
     </Button>
   );
 };

frontend/src/components/buttons/path_selector.tsx

@@ -2,14 +2,16 @@ import FolderOpenIcon from "@mui/icons-material/FolderOpen";
 import toast from "react-hot-toast";
 import { Button } from "@mui/material";
 import { openPath } from "../../tauri_cmd";
+import { useTranslation } from "react-i18next";
 
-type Props = {
+type Props = Readonly<{
   path: string;
   isDir?: boolean;
   setValue: (value: string) => void;
-};
+}>;
 
 export function SelectPathButton({ path, isDir = false, setValue }: Props) {
+  const { t } = useTranslation();
   const handleClick = async () => {
     openPath(path, setValue, isDir).catch((e) => toast.error(`${e}`));
   };
@@ -26,7 +28,7 @@ export function SelectPathButton({ path, isDir = false, setValue }: Props) {
       type="button"
       variant="outlined"
     >
-      Select
+      {t("select-btn")}
     </Button>
   );
 }

frontend/src/components/buttons/remove_oar_btn.tsx

@@ -1,24 +1,19 @@
-import { removeOarDir } from "@/tauri_cmd";
-import toast from "react-hot-toast";
-import DeleteIcon from "@mui/icons-material/Delete";
 import Button from "@mui/material/Button";
+import DeleteIcon from "@mui/icons-material/Delete";
 import Tooltip from "@mui/material/Tooltip";
+import toast from "react-hot-toast";
+import { removeOarDir } from "@/tauri_cmd";
+import { useTranslation } from "react-i18next";
 
 type Props = {
   darPath: string;
   oarPath: string;
 };
 
 export const RemoveOarBtn = ({ darPath, oarPath }: Props) => {
+  const { t } = useTranslation();
   return (
-    <Tooltip
-      title={
-        <p>
-          Find and delete OAR dir from &quot;DAR(src) Directory*&quot; or
-          &quot;OAR(dist) Directory&quot;.
-        </p>
-      }
-    >
+    <Tooltip title={<p>{t("remove-oar-tooltip")}</p>}>
       <Button
         type="button"
         sx={{
@@ -30,19 +25,19 @@ export const RemoveOarBtn = ({ darPath, oarPath }: Props) => {
         onClick={async () => {
           try {
             await removeOarDir(darPath);
-            toast.success("Removed OAR directory.");
+            toast.success(t("remove-oar-success"));
           } catch (_) {
             try {
               await removeOarDir(oarPath);
-              toast.success("Removed OAR directory.");
+              toast.success(t("remove-oar-success"));
             } catch (e) {
               toast.error(`${e}`);
             }
           }
         }}
         startIcon={<DeleteIcon />}
       >
-        Remove OAR
+        {t("remove-oar-btn")}
       </Button>
     </Tooltip>
   );

frontend/src/components/buttons/unhide_dar_btn.tsx

@@ -3,20 +3,17 @@ import Button from "@mui/material/Button";
 import { restoreDarDir } from "@/tauri_cmd";
 import toast from "react-hot-toast";
 import VisibilityIcon from "@mui/icons-material/Visibility";
+import { useTranslation } from "react-i18next";
 
 type Props = {
   path: string;
 };
 
 export const UnhideDarBtn = ({ path }: Props) => {
+  const { t } = useTranslation();
+
   return (
-    <Tooltip
-      title={
-        <p>
-          Unhide the directory hidden by &quot;Hide DAR&quot;.(For MO2 user)
-        </p>
-      }
-    >
+    <Tooltip title={<p>{t("unhide-dar-btn-tooltip")}</p>}>
       <Button
         type="button"
         sx={{
@@ -34,7 +31,7 @@ export const UnhideDarBtn = ({ path }: Props) => {
         }}
         startIcon={<VisibilityIcon />}
       >
-        Unhide DAR
+        {t("unhide-dar-btn")}
       </Button>
     </Tooltip>
   );