Apply i18n to all UI components with ko/ja translations

- Add src/i18n/i18n.ts translation engine (ported from SimpleDeckyTDP)
- Add defaults/i18n/{ko,ja,template}.json with 80 translation keys
- Add defaults/i18n/language_metadata.json and steam_language_map.json
- Add scripts/build_i18n_json.sh to generate languages.json
- Apply t() to all 10 components: Content, ConfigurationSection,
  FlatpaksModal, FpsMultiplierControl, InstallationButton, NerdStuffModal,
  ProfileManagement, SmartClipboardButton, FgmodClipboardButton, UsageInstructions

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

1 files changed, 27 insertions, 26 deletions

diff --git a/src/components/ConfigurationSection.tsx b/src/components/ConfigurationSection.tsx
index 0734297..c988f9f 100644
--- a/src/components/ConfigurationSection.tsx
+++ b/src/components/ConfigurationSection.tsx
@@ -7,6 +7,7 @@ import {
   EXPERIMENTAL_PRESENT_MODE, DXVK_FRAME_RATE, DISABLE_STEAMDECK_MODE,
   MANGOHUD_WORKAROUND, DISABLE_VKBASALT, FORCE_ENABLE_VKBASALT, ENABLE_WSI, ENABLE_ZINK
 } from "../config/generatedConfigSchema";
+import t from '../i18n/i18n';
 
 interface ConfigurationSectionProps {
   config: ConfigurationData;
@@ -84,7 +85,7 @@ export function ConfigurationSection({
             color: "white"
           }}
         >
-          Config
+          {t('CONFIG_SECTION_TITLE', 'Config')}
         </div>
       </PanelSectionRow>
 
@@ -115,8 +116,8 @@ export function ConfigurationSection({
         <>
           <PanelSectionRow>
             <SliderField
-              label={`Flow Scale (${Math.round(config.flow_scale * 100)}%)`}
-              description="Lowers internal motion estimation resolution, improving performance slightly"
+              label={`${t('CONFIG_FLOW_SCALE', 'Flow Scale')} (${Math.round(config.flow_scale * 100)}%)`}
+              description={t('CONFIG_FLOW_SCALE_DESC', 'Lowers internal motion estimation resolution, improving performance slightly')}
               value={config.flow_scale}
               min={0.25}
               max={1.0}
@@ -127,8 +128,8 @@ export function ConfigurationSection({
 
           <PanelSectionRow>
             <SliderField
-              label={`Base FPS Cap${config.dxvk_frame_rate > 0 ? ` (${config.dxvk_frame_rate} FPS)` : " (Off)"}`}
-              description="Base framerate cap for DirectX games, before frame multiplier. (Requires game restart to apply)"
+              label={`${t('CONFIG_BASE_FPS_CAP', 'Base FPS Cap')}${config.dxvk_frame_rate > 0 ? ` (${config.dxvk_frame_rate} FPS)` : ` (${t('CONFIG_BASE_FPS_CAP_OFF', 'Off')})`}`}
+              description={t('CONFIG_BASE_FPS_CAP_DESC', 'Base framerate cap for DirectX games, before frame multiplier. (Requires game restart to apply)')}
               value={config.dxvk_frame_rate}
               min={0}
               max={60}
@@ -139,8 +140,8 @@ export function ConfigurationSection({
 
           <PanelSectionRow>
             <ToggleField
-              label={`Present Mode (${(config.experimental_present_mode || "fifo") === "fifo" ? "FIFO - VSync" : "Mailbox"})`}
-              description="Toggle between FIFO - VSync (default) and Mailbox presentation modes for better performance or compatibility"
+              label={`${t('CONFIG_PRESENT_MODE', 'Present Mode')} (${(config.experimental_present_mode || "fifo") === "fifo" ? t('CONFIG_PRESENT_MODE_FIFO', 'FIFO - VSync') : t('CONFIG_PRESENT_MODE_MAILBOX', 'Mailbox')})`}
+              description={t('CONFIG_PRESENT_MODE_DESC', 'Toggle between FIFO - VSync (default) and Mailbox presentation modes for better performance or compatibility')}
               checked={(config.experimental_present_mode || "fifo") === "fifo"}
               onChange={(value) => onConfigChange(EXPERIMENTAL_PRESENT_MODE, value ? "fifo" : "mailbox")}
             />
@@ -148,8 +149,8 @@ export function ConfigurationSection({
 
           <PanelSectionRow>
             <ToggleField
-              label="Performance Mode"
-              description="Uses a lighter model for FG (Recommended for most games)"
+              label={t('CONFIG_PERFORMANCE_MODE', 'Performance Mode')}
+              description={t('CONFIG_PERFORMANCE_MODE_DESC', 'Uses a lighter model for FG (Recommended for most games)')}
               checked={config.performance_mode}
               onChange={(value) => onConfigChange(PERFORMANCE_MODE, value)}
             />
@@ -157,8 +158,8 @@ export function ConfigurationSection({
 
           <PanelSectionRow>
             <ToggleField
-              label="HDR Mode"
-              description="Enables HDR mode (only for games that support HDR)"
+              label={t('CONFIG_HDR_MODE', 'HDR Mode')}
+              description={t('CONFIG_HDR_MODE_DESC', 'Enables HDR mode (only for games that support HDR)')}
               checked={config.hdr_mode}
               onChange={(value) => onConfigChange(HDR_MODE, value)}
             />
@@ -179,7 +180,7 @@ export function ConfigurationSection({
             color: "white"
           }}
         >
-          Workarounds
+          {t('CONFIG_WORKAROUNDS_TITLE', 'Workarounds')}
         </div>
       </PanelSectionRow>
 
@@ -210,8 +211,8 @@ export function ConfigurationSection({
         <>
         <PanelSectionRow>
             <ToggleField
-              label="Enable WSI"
-              description="Re-Enable Gamescope WSI Layer. Requires game restart to apply."
+              label={t('CONFIG_ENABLE_WSI', 'Enable WSI')}
+              description={t('CONFIG_ENABLE_WSI_DESC', 'Re-Enable Gamescope WSI Layer. Requires game restart to apply.')}
               checked={config.enable_wsi}
               onChange={(value) => onConfigChange(ENABLE_WSI, value)}
             />
@@ -219,8 +220,8 @@ export function ConfigurationSection({
           
           <PanelSectionRow>
             <ToggleField
-              label="Enable WOW64 for 32-bit games"
-              description="Enables PROTON_USE_WOW64=1 for 32-bit games (Use with ProtonGE to fix crashing)"
+              label={t('CONFIG_ENABLE_WOW64', 'Enable WOW64 for 32-bit games')}
+              description={t('CONFIG_ENABLE_WOW64_DESC', 'Enables PROTON_USE_WOW64=1 for 32-bit games (Use with ProtonGE to fix crashing)')}
               checked={config.enable_wow64}
               onChange={(value) => onConfigChange('enable_wow64', value)}
             />
@@ -228,8 +229,8 @@ export function ConfigurationSection({
 
           <PanelSectionRow>
             <ToggleField
-              label="Disable Steam Deck Mode"
-              description="Disables Steam Deck mode (Unlocks hidden settings in some games)"
+              label={t('CONFIG_DISABLE_STEAMDECK_MODE', 'Disable Steam Deck Mode')}
+              description={t('CONFIG_DISABLE_STEAMDECK_MODE_DESC', 'Disables Steam Deck mode (Unlocks hidden settings in some games)')}
               checked={config.disable_steamdeck_mode}
               onChange={(value) => onConfigChange(DISABLE_STEAMDECK_MODE, value)}
             />
@@ -237,8 +238,8 @@ export function ConfigurationSection({
 
           <PanelSectionRow>
             <ToggleField
-              label="MangoHud Workaround"
-              description="Enables a transparent mangohud overlay, sometimes fixes issues with 2X multiplier in game mode"
+              label={t('CONFIG_MANGOHUD_WORKAROUND', 'MangoHud Workaround')}
+              description={t('CONFIG_MANGOHUD_WORKAROUND_DESC', 'Enables a transparent mangohud overlay, sometimes fixes issues with 2X multiplier in game mode')}
               checked={config.mangohud_workaround}
               onChange={(value) => onConfigChange(MANGOHUD_WORKAROUND, value)}
             />
@@ -246,8 +247,8 @@ export function ConfigurationSection({
 
           <PanelSectionRow>
             <ToggleField
-              label="Disable vkBasalt"
-              description="Disables vkBasalt layer which can conflict with LSFG (Reshade, some Decky plugins)"
+              label={t('CONFIG_DISABLE_VKBASALT', 'Disable vkBasalt')}
+              description={t('CONFIG_DISABLE_VKBASALT_DESC', 'Disables vkBasalt layer which can conflict with LSFG (Reshade, some Decky plugins)')}
               checked={config.disable_vkbasalt}
               disabled={config.force_enable_vkbasalt}
               onChange={(value) => {
@@ -262,8 +263,8 @@ export function ConfigurationSection({
 
           <PanelSectionRow>
             <ToggleField
-              label="Force Enable vkBasalt"
-              description="Force vkBasalt to engage to fix framepacing issues in gamemode"
+              label={t('CONFIG_FORCE_ENABLE_VKBASALT', 'Force Enable vkBasalt')}
+              description={t('CONFIG_FORCE_ENABLE_VKBASALT_DESC', 'Force vkBasalt to engage to fix framepacing issues in gamemode')}
               checked={config.force_enable_vkbasalt}
               disabled={config.disable_vkbasalt}
               onChange={(value) => {
@@ -278,8 +279,8 @@ export function ConfigurationSection({
 
           <PanelSectionRow>
             <ToggleField
-              label="Enable Zink for OpenGL Games"
-              description="Use Vulkan-based OpenGL implementation for OpenGL games (may cause crashes or freezes with some games)"
+              label={t('CONFIG_ENABLE_ZINK', 'Enable Zink for OpenGL Games')}
+              description={t('CONFIG_ENABLE_ZINK_DESC', 'Use Vulkan-based OpenGL implementation for OpenGL games (may cause crashes or freezes with some games)')}
               checked={config.enable_zink}
               onChange={(value) => onConfigChange(ENABLE_ZINK, value)}
             />