Update: i18n support for Settings

src/components/forms/UploadImage/UploadImage.tsx

@@ -1,4 +1,5 @@
 import { ImageSquare, Spinner, UploadSimple } from "@phosphor-icons/react";
+import { useTranslation } from "react-i18next";
 import { Button } from "../../ui/button";
 import {
   Form,
@@ -15,6 +16,7 @@ import { useUploadImage } from "./useUploadImageForm";
 export const UploadImage = () => {
   const { form, picture, onSubmit, isSubmitting, fileName, displayUrl } =
     useUploadImage();
+  const { t } = useTranslation();
 
   return (
     <Form {...form}>
@@ -28,7 +30,7 @@ export const UploadImage = () => {
                 <div className="flex items-center gap-4">
                   <div className="h-28">
                     <FormLabel className="block text-lg mb-2 mr-2">
-                      Upload Image
+                      {t("pages.settings.backgroundImage.upload.name")}
                     </FormLabel>
                     <FormControl>
                       <div className="relative w-80 h-10">
@@ -49,7 +51,9 @@ export const UploadImage = () => {
                           {picture ? (
                             <span className="truncate">{fileName}</span>
                           ) : (
-                            "Please select a file"
+                            t(
+                              "pages.settings.backgroundImage.upload.pleaseSelectAFile",
+                            )
                           )}
                           {displayUrl ? (
                             <img
@@ -63,14 +67,14 @@ export const UploadImage = () => {
                         </Button>
                       </div>
                     </FormControl>
-                    <FormDescription className="mt-2">
-                      The file will only be saved on your device
-                    </FormDescription>
                     <FormMessage />
+                    <FormDescription className="my-2">
+                      {t("pages.settings.backgroundImage.upload.description")}
+                    </FormDescription>
                   </div>
                   <div className="h-28 flex items-center">
                     <Button type="submit" disabled={!picture || isSubmitting}>
-                      Confirm
+                      {t("pages.settings.backgroundImage.upload.confirm")}
                       {isSubmitting ? (
                         <Spinner className="ml-1 animate-spin" />
                       ) : (

src/components/forms/UploadImage/useUploadImageForm.ts

@@ -2,23 +2,27 @@ import { useBackgroundImage } from "@/hooks/useBgImage";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 import { z } from "zod";
 
-const formSchema = z.object({
-  picture: z
-    .instanceof(File, { message: "Please select a file" })
-    .refine((file) => ["image/jpeg", "image/png"].includes(file.type), {
-      message: "Please select JPEG or PNG format images",
-    }),
-});
-
 //　画像アップロードカスタムフック
 export const useUploadImage = () => {
+  const { t } = useTranslation();
   const [displayUrl, setDisplayUrl] = useState<string | null>(null);
   const [fileName, setFilename] = useState<string>("");
   const [isSubmitting, setIsSubmitting] = useState(false);
   const { saveBackgroundImage } = useBackgroundImage();
 
+  const formSchema = z.object({
+    picture: z
+      .instanceof(File, {
+        message: t("pages.settings.backgroundImage.upload.errors.notSelected"),
+      })
+      .refine((file) => ["image/jpeg", "image/png"].includes(file.type), {
+        message: t("pages.settings.backgroundImage.upload.errors.format"),
+      }),
+  });
+
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {

src/i18n/en.json

@@ -14,7 +14,8 @@
     "totalMemory": "Total Memory",
     "memoryCount": "Memory Count",
     "memoryClockSpeed": "Memory Clock",
-    "clock": "Clock"
+    "clock": "Clock",
+    "reset": "Reset"
   },
 
   "pages": {
@@ -29,17 +30,40 @@
       "general": {
         "name": "General",
         "language": "Language",
-        "theme": "Theme",
+        "colorMode": {
+          "name": "Color Mode",
+          "light": "Light",
+          "dark": "Dark"
+        },
         "hardwareType": "Hardware Type"
       },
       "customTheme": {
         "name": "Custom Theme",
         "preview": "Preview",
         "lineColor": "line Color",
-        "graphStyle": "Graph Style"
+        "graphStyle": {
+          "name": "Graph Style",
+          "lineGraphBorder": "Graph Border",
+          "lineGraphFill": "Graph Fill",
+          "lineGraphMix": "Graph Mix",
+          "lineGraphShowLegend": "Legend",
+          "lineGraphShowScale": "Scale",
+          "size": "Graph Size"
+        }
       },
       "backgroundImage": {
-        "name": "Background Image"
+        "name": "Background Image",
+        "upload": {
+          "name": "Upload",
+          "pleaseSelectAFile": "Please select a file",
+          "errors": {
+            "format": "Please select an image in JPEG or PNG format",
+            "notSelected": "Please select a file"
+          },
+          "confirm": "Confirm",
+          "description": "The file will only be saved on your device"
+        },
+        "opacity": "Opacity"
       }
     }
   }

src/i18n/ja.json

@@ -14,7 +14,8 @@
     "totalMemory": "合計メモリ",
     "memoryCount": "メモリ枚数",
     "memoryClockSpeed": "メモリクロック数",
-    "clock": "クロック数"
+    "clock": "クロック数",
+    "reset": "リセット"
   },
 
   "pages": {
@@ -29,17 +30,40 @@
       "general": {
         "name": "一般",
         "language": "言語",
-        "theme": "カラーモード",
+        "colorMode": {
+          "name": "カラーモード",
+          "light": "ライト",
+          "dark": "ダーク"
+        },
         "hardwareType": "ハードウェア種別"
       },
       "customTheme": {
         "name": "カスタマイズ",
         "preview": "プレビュー",
         "lineColor": "グラフの色",
-        "graphStyle": "カスタムグラフ"
+        "graphStyle": {
+          "name": "グラフスタイル",
+          "lineGraphBorder": "グラフの枠線",
+          "lineGraphFill": "グラフ下部の塗りつぶし",
+          "lineGraphMix": "グラフの混合",
+          "lineGraphShowLegend": "凡例の表示",
+          "lineGraphShowScale": "スケールの表示",
+          "size": "グラフのサイズ"
+        }
       },
       "backgroundImage": {
-        "name": "壁紙"
+        "name": "壁紙",
+        "upload": {
+          "name": "画像をアップロード",
+          "pleaseSelectAFile": "ファイルを選択してください",
+          "errors": {
+            "format": "JPEGまたはPNG形式の画像を選択してください",
+            "notSelected": "ファイルを選択してください"
+          },
+          "confirm": "確認",
+          "description": "アップロードしたファイルはこのデバイスにのみ保存されます"
+        },
+        "opacity": "透過率"
       }
     }
   }

src/lib/i18n.ts

@@ -12,17 +12,12 @@ const resources = {
   },
 };
 
-i18n
-  .use(initReactI18next) // passes i18n down to react-i18next
-  .init({
-    resources,
-    lng: "en", // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
-    // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
-    // if you're using a language detector, do not define the lng option
-
-    interpolation: {
-      escapeValue: false, // react already safes from xss
-    },
-  });
+i18n.use(initReactI18next).init({
+  resources,
+  lng: "ja",
+  interpolation: {
+    escapeValue: false,
+  },
+});
 
 export default i18n;

src/template/Settings.tsx

@@ -25,6 +25,7 @@ import { useTranslation } from "react-i18next";
 
 const SettingGraphType = () => {
   const { settings, toggleDisplayTarget } = useSettingsAtom();
+  const { t } = useTranslation();
   const selectedGraphTypes = settings.displayTargets;
 
   const toggleGraphType = async (type: ChartDataType) => {
@@ -34,7 +35,7 @@ const SettingGraphType = () => {
   return (
     <div className="flex items-center space-x-4 py-6">
       <Label htmlFor="graphType" className="text-lg self-start">
-        Hardware Type
+        {t("pages.settings.general.hardwareType")}
       </Label>
       <div>
         <label className="flex items-center space-x-2">
@@ -68,6 +69,7 @@ const SettingGraphType = () => {
 
 const SettingColorMode = () => {
   const { settings, updateSettingAtom } = useSettingsAtom();
+  const { t } = useTranslation();
 
   const toggleDarkMode = async (mode: "light" | "dark") => {
     await updateSettingAtom("theme", mode);
@@ -76,15 +78,19 @@ const SettingColorMode = () => {
   return (
     <div className="flex items-center space-x-4 py-6">
       <Label htmlFor="darkMode" className="text-lg">
-        Color Mode
+        {t("pages.settings.general.colorMode.name")}
       </Label>
       <Select value={settings.theme} onValueChange={toggleDarkMode}>
         <SelectTrigger className="w-[180px]">
           <SelectValue placeholder="Theme" />
         </SelectTrigger>
         <SelectContent>
-          <SelectItem value="light">Light</SelectItem>
-          <SelectItem value="dark">Dark</SelectItem>
+          <SelectItem value="light">
+            {t("pages.settings.general.colorMode.light")}
+          </SelectItem>
+          <SelectItem value="dark">
+            {t("pages.settings.general.colorMode.dark")}
+          </SelectItem>
         </SelectContent>
       </Select>
     </div>
@@ -93,6 +99,8 @@ const SettingColorMode = () => {
 
 const SettingLineChartSize = () => {
   const { settings, updateSettingAtom } = useSettingsAtom();
+  const { t } = useTranslation();
+
   const sizeIndex = sizeOptions.indexOf(
     settings.graphSize as SettingTypes["graphSize"],
   );
@@ -103,7 +111,9 @@ const SettingLineChartSize = () => {
 
   return (
     <div className="py-6 w-full">
-      <Label className="block text-lg mb-2">Line Chart Size</Label>
+      <Label className="block text-lg mb-2">
+        {t("pages.settings.customTheme.graphStyle.size")}
+      </Label>
       <Slider
         min={0}
         max={sizeOptions.length - 1}
@@ -127,6 +137,7 @@ const SettingLineChartSize = () => {
 
 const SettingBackGroundOpacity = () => {
   const { settings, updateSettingAtom } = useSettingsAtom();
+  const { t } = useTranslation();
 
   const changeBackGroundOpacity = async (value: number[]) => {
     await updateSettingAtom("backgroundImgOpacity", value[0]);
@@ -135,7 +146,9 @@ const SettingBackGroundOpacity = () => {
   return (
     settings.selectedBackgroundImg && (
       <>
-        <Label className="block text-lg mb-2">Opacity</Label>
+        <Label className="block text-lg mb-2">
+          {t("pages.settings.backgroundImage.opacity")}
+        </Label>
         <Slider
           min={0}
           max={100}
@@ -150,10 +163,8 @@ const SettingBackGroundOpacity = () => {
 };
 
 const SettingGraphSwitch = ({
-  label,
   type,
 }: {
-  label: string;
   type:
     | "lineGraphBorder"
     | "lineGraphFill"
@@ -162,6 +173,7 @@ const SettingGraphSwitch = ({
     | "lineGraphShowScale";
 }) => {
   const { settings, updateSettingAtom } = useSettingsAtom();
+  const { t } = useTranslation();
 
   const SettingGraphSwitch = async (value: boolean) => {
     await updateSettingAtom(type, value);
@@ -173,7 +185,7 @@ const SettingGraphSwitch = ({
         <div className="w-full flex flex-row items-center justify-between rounded-lg border p-4 border-zinc-800 dark:border-gray-100">
           <div className="space-y-0.5">
             <Label htmlFor={type} className="text-lg">
-              {label}
+              {t(`pages.settings.customTheme.graphStyle.${type}`)}
             </Label>
           </div>
 
@@ -218,6 +230,7 @@ const SettingColorInput = ({
 
 const SettingColorReset = () => {
   const { updateLineGraphColorAtom } = useSettingsAtom();
+  const { t } = useTranslation();
 
   const updateGraphColor = async () => {
     await Promise.all(
@@ -234,7 +247,7 @@ const SettingColorReset = () => {
       variant="secondary"
       size="lg"
     >
-      Reset
+      {t("shared.reset")}
     </Button>
   );
 };
@@ -258,22 +271,13 @@ const Settings = () => {
         <div className="xl:grid xl:grid-cols-6 gap-12 p-4 items-start">
           <div className="col-span-2 py-2">
             <h4 className="text-xl font-bold">
-              {t("pages.settings.customTheme.graphStyle")}
+              {t("pages.settings.customTheme.graphStyle.name")}
             </h4>
-            <SettingGraphSwitch
-              label="Line Chart Border"
-              type="lineGraphBorder"
-            />
-            <SettingGraphSwitch label="Line Chart Fill" type="lineGraphFill" />
-            <SettingGraphSwitch label="Line Chart Mix" type="lineGraphMix" />
-            <SettingGraphSwitch
-              label="Line Chart Legend"
-              type="lineGraphShowLegend"
-            />
-            <SettingGraphSwitch
-              label="Line Chart Show Scale"
-              type="lineGraphShowScale"
-            />
+            <SettingGraphSwitch type="lineGraphBorder" />
+            <SettingGraphSwitch type="lineGraphFill" />
+            <SettingGraphSwitch type="lineGraphMix" />
+            <SettingGraphSwitch type="lineGraphShowLegend" />
+            <SettingGraphSwitch type="lineGraphShowScale" />
             <SettingLineChartSize />
           </div>
           <div className="col-span-1 py-2">