Some better namespaced text.

backend/locales/en/BranchSelect.json

@@ -1,3 +1,5 @@
 {
-  "update_channel_label": "Update Channel"
+  "update_channel":{
+    "label": "Update Channel"
+  }
 }

backend/locales/en/DeveloperIndex.json

@@ -1,7 +1,11 @@
 {
-  "valve_internal_label": "Enable Valve Internal",
+  "valve_internal":{
-  "valve_internal_desc1": "Enables the Valve internal developer menu.",
+    "label": "Enable Valve Internal",
-  "valve_internal_desc2": "Do not touch anything in this menu unless you know what it does.",
+    "desc1": "Enables the Valve internal developer menu.",
-  "react_devtools_label": "Enable React DevTools",
+    "desc2": "Do not touch anything in this menu unless you know what it does."
-  "react_devtools_desc": "Enables connection to a computer running React DevTools. Changing this setting will reload Steam. Set the IP address before enabling."
+  },
+  "react_devtools":{
+    "label": "Enable React DevTools",
+    "desc": "Enables connection to a computer running React DevTools. Changing this setting will reload Steam. Set the IP address before enabling."
+  }
 }

backend/locales/en/PluginInstallModal.json

@@ -1,7 +1,8 @@
 {
-    "install_title": "Install {{artifact}}",
+    "install":{
-    "install_desc": "Are you sure you want to install {{artifact}} {{version}}?",
+        "title": "Install {{artifact}}",
-    "install_button_idle": "Install",
+        "desc": "Are you sure you want to install {{artifact}} {{version}}?",
-    "install_button_processing": "Installing"
+        "button_idle": "Install",
-
+        "button_processing": "Installing"
+    }
 }

backend/locales/en/RemoteDebugging.json

@@ -1,4 +1,6 @@
 {
-  "remote_cef_label": "Allow Remote CEF Debugging",
+  "remote_cef":{
-  "remote_cef_desc": "Allow unauthenticated access to the CEF debugger to anyone in your network"
+    "label": "Allow Remote CEF Debugging",
+    "desc": "Allow unauthenticated access to the CEF debugger to anyone in your network"
+  }
 }

backend/locales/en/SettingsGeneralIndex.json

@@ -1,6 +1,10 @@
 {
-  "developer_mode_label": "Developer mode",
+  "developer_mode":{
-  "developer_mode_desc": "Enables Decky's developer settings.",
+    "label": "Developer mode",
-  "manual_plugin_label": "Manual plugin install",
+    "desc": "Enables Decky's developer settings."
-  "manual_plugin_install_button": "Install"
+  },
+  "manual_plugin":{
+    "label": "Manual plugin install",
+    "button": "Install"
+  }
 }

backend/locales/en/Store.json

@@ -1,19 +1,28 @@
 {
-    "store_tabs_title": "Browse",
+    "store_tabs":{
-    "store_tabs_about": "About",
+        "title": "Browse",
+        "about": "About",
 
-    "store_tabs_alph_desc": "Alphabetical (A to Z)",
+        "alph_desc": "Alphabetical (A to Z)",
-    "store_tabs_alph_asce": "Alphabetical (Z to A)",
+        "alph_asce": "Alphabetical (Z to A)"
-
+    },
-    "store_sort_label": "Sort",
+    "store_sort":{
-    "store_sort_label_def": "Last Updated (Newest)",
+        "label": "Sort",
-    "store_filter_label": "Filter",
+        "label_def": "Last Updated (Newest)"
-    "store_fiter_label_def": "All",
+    },
+    "store_filter":{
+        "label": "Filter",
+        "label_def": "All"
+    },
     "store_search_label": "Search",
 
     "store_testing_cta": "Please consider testing new plugins to help the Decky Loader team!",
-    "store_contrib_label": "Contributing",
+    "store_contrib":{
-    "store_contrib_desc": "If you would like to contribute to the Decky Plugin Store, check the SteamDeckHomebrew/decky-plugin-template repository on GitHub. Information on development and distribution is available in the README.",
+        "label": "Contributing",
-    "store_source_label": "Source Code",
+        "desc": "If you would like to contribute to the Decky Plugin Store, check the SteamDeckHomebrew/decky-plugin-template repository on GitHub. Information on development and distribution is available in the README."
-    "store_source_desc": "All plugin source code is available on SteamDeckHomebrew/decky-plugin-database repository on GitHub."
+    },
+    "store_source":{
+        "label": "Source Code",
+        "desc": "All plugin source code is available on SteamDeckHomebrew/decky-plugin-database repository on GitHub."
+    }
 }

backend/locales/en/Updater.json

@@ -2,13 +2,14 @@
   "no_patch_notes_desc": "no patch notes for this version",
   "decky_updates": "Decky Updates",
 
-  "updates_label": "Updates",
+  "updates":{
-  "updates_cur_version": "Current version: {{ver}}",
+    "label": "Updates",
-  "updates_lat_version": "Latest version: {{ver}}",
+    "cur_version": "Current version: {{ver}}",
-
+    "lat_version": "Latest version: {{ver}}",
-  "updates_checking": "'Checking",
+    "checking": "'Checking",
-  "updates_check_button": "Check For Updates",
+    "check_button": "Check For Updates",
-  "updates_install_button": "Install Update",
+    "install_button": "Install Update",
-  "updates_reloading": "Reloading",
+    "reloading": "Reloading",
-  "updates_updating": "Updating"
+    "updating": "Updating"
+  }
 }

backend/locales/en/plugin-loader.json

@@ -4,7 +4,9 @@
   "decky_update_available": "Update to {{tag_name}} available!",
   "plugin_update_one": "Updates available for 1 plugin!",
   "plugin_update_other": "Updates available for {{number}} plugins!",
-  "plugin_uninstall": "Are you sure you want to uninstall {{name}}?",
+  "plugin_uninstall_title":"Uninstall {{name}}",
+  "plugin_uninstall_desc": "Are you sure you want to uninstall {{name}}?",
+  "plugin_uninstall_button": "Uninstall",
   "plugin_load_error": "Error loading plugin {{name}}",
   "plugin_load_error_toast": "Error loading {{name}}",
   "error": "Error",

backend/locales/it/BranchSelect.json

@@ -1,3 +1,5 @@
 {
-  "update_channel_label": "Canale di aggiornamento"
+  "update_channel":{
+    "label": "Canale di aggiornamento"
+  }
 }

backend/locales/it/DeveloperIndex.json

@@ -1,7 +1,11 @@
 {
-  "valve_internal_label": "Abilita Menu Sviluppatore",
+  "valve_internal":{
-  "valve_internal_desc1": "Abilita il menu interno di sviluppo di Valve.",
+    "label": "Abilita Menu Sviluppatore",
-  "valve_internal_desc2": "Non toccare nulla in questo menu se non sai quello che fa.",
+    "desc1": "Abilita il menu interno di sviluppo di Valve.",
-  "react_devtools_label": "Abilita i DevTools di React",
+    "desc2": "Non toccare nulla in questo menu se non sai quello che fa."
-  "react_devtools_desc": "Abilita la connessione ad un computer che esegue i DevTools di React. Cambiando questa impostazione ricaricherà Steam. Imposta l'indirizzo IP prima di abilitarlo."
+  },
+  "react_devtools":{
+    "label": "Abilita i DevTools di React",
+    "desc": "Abilita la connessione ad un computer che esegue i DevTools di React. Cambiando questa impostazione ricaricherà Steam. Imposta l'indirizzo IP prima di abilitarlo."
+  }
 }

backend/locales/it/PluginInstallModal.json

@@ -1,7 +1,8 @@
 {
-    "install_title": "Installa {{artifact}}",
+    "install":{
-    "install_desc": "Sei sicuro di voler installare {{artifact}} {{version}}?",
+        "title": "Installa {{artifact}}",
-    "install_button_idle": "Installa",
+        "desc": "Sei sicuro di voler installare {{artifact}} {{version}}?",
-    "install_button_processing": "Installando"
+        "button_idle": "Installa",
-
+        "button_processing": "Installando"
+    }
 }

backend/locales/it/RemoteDebugging.json

@@ -1,4 +1,6 @@
 {
-  "remote_cef_label": "Permetti il debug remoto di CEF",
+  "remote_cef":{
-  "remote_cef_desc": "Permetti l'accesso non autenticato a chiunque sulla tua rete locale al debugger di CEF."
+    "label": "Permetti il debug remoto di CEF",
+    "desc": "Permetti l'accesso non autenticato a chiunque sulla tua rete locale al debugger di CEF."
+  }
 }

backend/locales/it/SettingsGeneralIndex.json

@@ -1,6 +1,10 @@
 {
-  "developer_mode_label": "Modalità sviluppatore",
+  "developer_mode":{
-  "developer_mode_desc": "Abilità le impostazioni di sviluppo di Decky.",
+    "label": "Modalità sviluppatore",
-  "manual_plugin_label": "Installazione manuale plugins",
+    "desc": "Abilità le impostazioni di sviluppo di Decky."
-  "manual_plugin_install_button": "Installa"
+  },
+  "manual_plugin":{
+    "label": "Installazione manuale plugins",
+    "button": "Installa"
+  }
 }

backend/locales/it/Store.json

@@ -1,19 +1,29 @@
 {
-    "store_tabs_title": "Naviga",
+    "store_tabs":{
-    "store_tabs_about": "About",
+        "title": "Naviga",
+        "about": "About",
 
-    "store_tabs_alph_desc": "Alfabetico (A a Z)",
+        "alph_desc": "Alfabetico (A a Z)",
-    "store_tabs_alph_asce": "Alfabetico (Z a A)",
+        "alph_asce": "Alfabetico (Z a A)"
+    },
 
-    "store_sort_label": "Ordina",
+    "store_sort":{
-    "store_sort_label_def": "Ultimo aggiornato (Più recente)",
+        "label": "Ordina",
-    "store_filter_label": "Filtra",
+        "label_def": "Ultimo aggiornato (Più recente)"
-    "store_fiter_label_def": "Tutto",
+    },
+    "store_filter":{
+        "label": "Filtra",
+        "label_def": "Tutto"
+    },
     "store_search_label": "Cerca",
 
     "store_testing_cta": "Valuta la possibilità di testare nuovi plugin per aiutare il team di Decky Loader!",
-    "store_contrib_label": "Contribuisci",
+    "store_contrib":{
-    "store_contrib_desc": "Se desideri contribuire allo store di Decky, puoi trovare un template caricato su GitHub all'indirizzo SteamDeckHomebrew/decky-plugin-template. Informazioni riguardo sviluppo e distribuzione sono disponibili nel README.",
+        "label": "Contribuisci",
-    "store_source_label": "Codice Sorgente",
+        "desc": "Se desideri contribuire allo store di Decky, puoi trovare un template caricato su GitHub all'indirizzo SteamDeckHomebrew/decky-plugin-template. Informazioni riguardo sviluppo e distribuzione sono disponibili nel README."
-    "store_source_desc": "Tutto il codice sorgente dei plugin è disponibile su GitHub all'indirizzo SteamDeckHomebrew/decky-plugin-database"
+    },
+    "store_source":{
+        "label": "Codice Sorgente",
+        "desc": "Tutto il codice sorgente dei plugin è disponibile su GitHub all'indirizzo SteamDeckHomebrew/decky-plugin-database"
+    }
 }

backend/locales/it/Updater.json

@@ -2,13 +2,14 @@
   "no_patch_notes_desc": "nessuna patch notes per questa versione",
   "decky_updates": "Aggiornamenti di Decky",
 
-  "updates_label": "Aggiornamenti",
+  "updates":{
-  "updates_cur_version": "Versione attuale: {{ver}}",
+    "label": "Aggiornamenti",
-  "updates_lat_version": "Ultima versione: {{ver}}",
+    "cur_version": "Versione attuale: {{ver}}",
-
+    "lat_version": "Ultima versione: {{ver}}",
-  "updates_checking": "Controllando",
+    "checking": "Controllando",
-  "updates_check_button": "Cerca aggiornamenti",
+    "check_button": "Cerca aggiornamenti",
-  "updates_install_button": "Installa aggiornamento",
+    "install_button": "Installa aggiornamento",
-  "updates_reloading": "Ricaricando",
+    "reloading": "Ricaricando",
-  "updates_updating": "Aggiornando"
+    "updating": "Aggiornando"
+  }
 }

backend/locales/it/plugin-loader.json

@@ -4,7 +4,9 @@
   "decky_update_available": "Disponibile aggiornamento a {{tag_name}}!",
   "plugin_update_one": "Aggiornamento disponibile per un plugin!",
   "plugin_update_other": "Aggiornamento disponibile per {{number}} plugins!",
-  "plugin_uninstall": "Rimuovo {{name}}?",
+  "plugin_uninstall_title":"Rimozione di {{name}}",
+  "plugin_uninstall_desc": "Rimuovo {{name}}?",
+  "plugin_uninstall_button": "Rimuovi",
   "plugin_load_error": "Errore caricando il plugin {{name}}",
   "plugin_load_error_toast": "Errore caricando {{name}}",
   "error": "Errore",

frontend/index.d.ts

@@ -1,2 +1,2 @@
 declare module '*.png';
-declare module '*.jpg';
+declare module '*.jpg';

frontend/package.json

@@ -43,8 +43,9 @@
   },
   "dependencies": {
     "decky-frontend-lib": "^3.18.10",
-    "i18next": "^22.0.6",
+    "i18next": "^22.4.9",
     "i18next-http-backend": "^2.1.1",
+    "i18next-browser-languagedetector": "^7.0.1",
     "react-file-icon": "^1.2.0",
     "react-i18next": "^12.0.0",
     "react-icons": "^4.4.0",

frontend/pnpm-lock.yaml

@@ -13,7 +13,8 @@ specifiers:
   '@types/webpack': ^5.28.0
   decky-frontend-lib: ^3.18.10
   husky: ^8.0.1
-  i18next: ^22.0.6
+  i18next: ^22.4.9
+  i18next-browser-languagedetector: ^7.0.1
   i18next-http-backend: ^2.1.1
   import-sort-style-module: ^6.0.0
   inquirer: ^8.2.4
@@ -35,10 +36,11 @@ specifiers:
 
 dependencies:
   decky-frontend-lib: 3.18.10
-  i18next: 22.0.6
+  i18next: 22.4.9
+  i18next-browser-languagedetector: 7.0.1
   i18next-http-backend: 2.1.1
   react-file-icon: 1.2.0_wcqkhtmu7mswc6yz4uyexck3ty
-  react-i18next: 12.0.0_l5i64r2igudm3ypjcze5pllh6e
+  react-i18next: 12.0.0_goxgninut6ie3oe2kpsp3ellgm
   react-icons: 4.4.0_react@16.14.0
   react-markdown: 8.0.3_vshvapmxg47tngu7tvrsqpq55u
   remark-gfm: 3.0.1
@@ -237,6 +239,13 @@ packages:
       regenerator-runtime: 0.13.11
     dev: false
 
+  /@babel/runtime/7.20.13:
+    resolution: {integrity: sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.13.11
+    dev: false
+
   /@babel/template/7.18.6:
     resolution: {integrity: sha512-JoDWzPe+wgBsTTgdnIma3iHNFC7YVJoPssVBDjiHfNlyt4YcunDtcDOUmfVDfCK5MfdsaIoX9PkijPhjH3nYUw==}
     engines: {node: '>=6.9.0'}
@@ -1297,6 +1306,12 @@ packages:
     hasBin: true
     dev: true
 
+  /i18next-browser-languagedetector/7.0.1:
+    resolution: {integrity: sha512-Pa5kFwaczXJAeHE56CHG2aWzFBMJNUNghf0Pm4SwSrEMps/PTKqW90EYWlIvhuYStf3Sn1K0vw+gH3+TLdkH1g==}
+    dependencies:
+      '@babel/runtime': 7.20.1
+    dev: false
+
   /i18next-http-backend/2.1.1:
     resolution: {integrity: sha512-jByfUCDVgQ8+/Wens7queQhYYvMcGTW/lR4IJJNEDDXnmqjLrwi8ubXKpmp76/JIWEZHffNdWqnxFJcTVGeaOw==}
     dependencies:
@@ -1305,10 +1320,10 @@ packages:
       - encoding
     dev: false
 
-  /i18next/22.0.6:
+  /i18next/22.4.9:
-    resolution: {integrity: sha512-RlreNGoPIdDP4QG+qSA9PxZKGwlzmcozbI9ObI6+OyUa/Rp0EjZZA9ubyBjw887zVNZsC+7FI3sXX8oiTzAfig==}
+    resolution: {integrity: sha512-8gWMmUz460KJDQp/ob3MNUX84cVuDRY9PLFPnV8d+Qezz/6dkjxwOaH70xjrCNDO+JrUL25iXfAIN9wUkInNZw==}
     dependencies:
-      '@babel/runtime': 7.20.1
+      '@babel/runtime': 7.20.13
     dev: false
 
   /iconv-lite/0.4.24:
@@ -2196,7 +2211,7 @@ packages:
       tinycolor2: 1.4.2
     dev: false
 
-  /react-i18next/12.0.0_l5i64r2igudm3ypjcze5pllh6e:
+  /react-i18next/12.0.0_goxgninut6ie3oe2kpsp3ellgm:
     resolution: {integrity: sha512-/O7N6aIEAl1FaWZBNvhdIo9itvF/MO/nRKr9pYqRc9LhuC1u21SlfwpiYQqvaeNSEW3g3qUXLREOWMt+gxrWbg==}
     peerDependencies:
       i18next: '>= 19.0.0'
@@ -2211,7 +2226,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.20.1
       html-parse-stringify: 3.0.1
-      i18next: 22.0.6
+      i18next: 22.4.9
       react: 16.14.0
       react-dom: 16.14.0_react@16.14.0
     dev: false

frontend/src/components/modals/PluginInstallModal.tsx

@@ -29,13 +29,13 @@ const PluginInstallModal: FC<PluginInstallModalProps> = ({ artifact, version, ha
       onCancel={async () => {
         await onCancel();
       }}
-      strTitle={t('install_title', artifact)}
+      strTitle={t('install.title', artifact)}
-      strOKButtonText={loading ? t('install_button_processing') : t('install_button_idle')}
+      strOKButtonText={loading ? t('install.button_processing') : t('install.button_idle')}
     >
       {hash == 'False' ? (
         <h3 style={{ color: 'red' }}>!!!!NO HASH PROVIDED!!!!</h3>
       ) : (
-        t('install_desc', artifact, version)
+        t('install.desc', artifact, version)
       )}
     </ConfirmModal>
   );

frontend/src/components/settings/pages/developer/index.tsx

@@ -16,10 +16,10 @@ export default function DeveloperSettings() {
   return (
     <>
       <Field
-        label={t('label_valve_internal')}
+        label={t('valve_internal.label')}
         description={
           <span style={{ whiteSpace: 'pre-line' }}>
-            {t('valve_internal_desc1')} <span style={{ color: 'red' }}>{t('valve_internal_desc2')}</span>
+            {t('valve_internal.desc1')} <span style={{ color: 'red' }}>{t('valve_internal.desc2')}</span>
           </span>
         }
         icon={<FaSteamSymbol style={{ display: 'block' }} />}
@@ -56,10 +56,10 @@ export default function DeveloperSettings() {
         }
       >
         <Field
-          label={t('react_devtools_label')}
+          label={t('react_devtools.label')}
           description={
             <>
-              <span style={{ whiteSpace: 'pre-line' }}>{t('react_devtools_desc')}</span>
+              <span style={{ whiteSpace: 'pre-line' }}>{t('react_devtools.desc')}</span>
               <div ref={textRef}>
                 <TextField label={'IP'} value={reactDevtoolsIP} onChange={(e) => setReactDevtoolsIP(e?.target.value)} />
               </div>

frontend/src/components/settings/pages/general/BranchSelect.tsx

@@ -21,7 +21,7 @@ const BranchSelect: FunctionComponent<{}> = () => {
   return (
     // Returns numerical values from 0 to 2 (with current branch setup as of 8/28/22)
     // 0 being stable, 1 being pre-release and 2 being nightly
-    <Field label={t('update_channel_label')}>
+    <Field label={t('update_channel.label')}>
       <Dropdown
         rgOptions={Object.values(UpdateBranch)
           .filter((branch) => typeof branch == 'string')

frontend/src/components/settings/pages/general/RemoteDebugging.tsx

@@ -10,8 +10,8 @@ export default function RemoteDebuggingSettings() {
 
   return (
     <Field
-      label={t('remote_cef_label')}
+      label={t('remote_cef.label')}
-      description={<span style={{ whiteSpace: 'pre-line' }}>{t('remote_cef_desc')}</span>}
+      description={<span style={{ whiteSpace: 'pre-line' }}>{t('remote_cef.desc')}</span>}
       icon={<FaBug style={{ display: 'block' }} />}
     >
       <Toggle

frontend/src/components/settings/pages/general/Updater.tsx

@@ -97,11 +97,11 @@ export default function UpdaterSettings() {
       <Field
         onOptionsActionDescription={versionInfo?.all ? 'Patch Notes' : undefined}
         onOptionsButton={versionInfo?.all ? showPatchNotes : undefined}
-        label={t('updates_label')}
+        label={t('updates.label')}
         description={
           versionInfo && (
-            <span style={{ whiteSpace: 'pre-line' }}>{`${t('updates_cur_version', versionInfo.current)}\n${
+            <span style={{ whiteSpace: 'pre-line' }}>{`${t('updates.cur_version', { ver: versionInfo.current })}\n${
-              versionInfo.updatable ? t('updates_lat_version', versionInfo.remote?.tag_name) : ''
+              versionInfo.updatable ? t('updates.lat_version', { ver: versionInfo.remote?.tag_name }) : ''
             }`}</span>
           )
         }
@@ -131,10 +131,10 @@ export default function UpdaterSettings() {
             }
           >
             {checkingForUpdates
-              ? t('updates_checking')
+              ? t('updates.checking')
               : !versionInfo?.remote || versionInfo?.remote?.tag_name == versionInfo?.current
-              ? t('updates_check_button')
+              ? t('updates.check_button')
-              : t('updates_install_button')}
+              : t('updates.install_button')}
           </DialogButton>
         ) : (
           <ProgressBarWithInfo
@@ -142,7 +142,7 @@ export default function UpdaterSettings() {
             bottomSeparator="none"
             nProgress={updateProgress}
             indeterminate={reloading}
-            sOperationText={reloading ? t('updates_reloading') : t('updates_updating')}
+            sOperationText={reloading ? t('updates.reloading') : t('updates.updating')}
           />
         )}
       </Field>

frontend/src/components/settings/pages/general/index.tsx

@@ -26,8 +26,8 @@ export default function GeneralSettings({
       <StoreSelect />
       <RemoteDebuggingSettings />
       <Field
-        label={t('developer_mode_label')}
+        label={t('developer_mode.label')}
-        description={<span style={{ whiteSpace: 'pre-line' }}>{t('developer_mode_desc')}</span>}
+        description={<span style={{ whiteSpace: 'pre-line' }}>{t('developer_mode.desc')}</span>}
         icon={<FaTools style={{ display: 'block' }} />}
       >
         <Toggle
@@ -38,12 +38,12 @@ export default function GeneralSettings({
         />
       </Field>
       <Field
-        label={t('manual_plugin_label')}
+        label={t('manual_plugin.label')}
         description={<TextField label={'URL'} value={pluginURL} onChange={(e) => setPluginURL(e?.target.value)} />}
         icon={<FaShapes style={{ display: 'block' }} />}
       >
         <DialogButton disabled={pluginURL.length == 0} onClick={() => installFromURL(pluginURL)}>
-          {t('manual_plugin_install_button')}
+          {t('manual_plugin.button')}
         </DialogButton>
       </Field>
     </div>

frontend/src/components/store/Store.tsx

@@ -63,7 +63,7 @@ const StorePage: FC<{}> = () => {
                 renderTabAddon: () => <span className={TabCount}>{data.length}</span>,
               },
               {
-                title: t('store_tabs_about'),
+                title: t('store_tabs.about'),
                 content: <AboutTab />,
                 id: 'about',
               },
@@ -78,8 +78,8 @@ const StorePage: FC<{}> = () => {
 const BrowseTab: FC<{ children: { data: StorePlugin[] } }> = (data) => {
   const sortOptions = useMemo(
     (): DropdownOption[] => [
-      { data: 1, label: t('store_tabs_alph_desc') },
+      { data: 1, label: t('store_tabs.alph_desc') },
-      { data: 2, label: t('store_tabs_alph_asce') },
+      { data: 2, label: t('store_tabs.alph_asce') },
     ],
     [],
   );
@@ -108,11 +108,11 @@ const BrowseTab: FC<{ children: { data: StorePlugin[] } }> = (data) => {
               width: '47.5%',
             }}
           >
-            <span className="DialogLabel">{t("store_sort_label")}</span>
+            <span className="DialogLabel">{t("store_sort.label")}</span>
             <Dropdown
-              menuLabel={t("store_sort_label") as string}
+              menuLabel={t("store_sort.label") as string}
               rgOptions={sortOptions}
-              strDefaultLabel={t("store_sort_label_def") as string}
+              strDefaultLabel={t("store_sort.label_def") as string}
               selectedOption={selectedSort}
               onChange={(e) => setSort(e.data)}
             />
@@ -125,11 +125,11 @@ const BrowseTab: FC<{ children: { data: StorePlugin[] } }> = (data) => {
               marginLeft: 'auto',
             }}
           >
-            <span className="DialogLabel">{t("store_filter_label")}</span>
+            <span className="DialogLabel">{t("store_filter.label")}</span>
             <Dropdown
-              menuLabel={t("store_filter_label")}
+              menuLabel={t("store_filter.label")}
               rgOptions={filterOptions}
-              strDefaultLabel={t("store_fiter_label_def")}
+              strDefaultLabel={t("store_filter.label_def")}
               selectedOption={selectedFilter}
               onChange={(e) => setFilter(e.data)}
             />
@@ -139,7 +139,7 @@ const BrowseTab: FC<{ children: { data: StorePlugin[] } }> = (data) => {
       <div style={{ justifyContent: 'center', display: 'flex' }}>
         <Focusable style={{ display: 'flex', alignItems: 'center', width: '96%' }}>
           <div style={{ width: '100%' }}>
-            <TextField label={t("store_search_label")} value={searchFieldValue} onChange={(e) => setSearchValue(e.target.value)} />
+            <TextField label={t("store_search.label")} value={searchFieldValue} onChange={(e) => setSearchValue(e.target.value)} />
           </div>
         </Focusable>
       </div>
@@ -154,11 +154,11 @@ const BrowseTab: FC<{ children: { data: StorePlugin[] } }> = (data) => {
               maxWidth: '100%',
             }}
           >
-            <span className="DialogLabel">{t('store_sort_label')}</span>
+            <span className="DialogLabel">{t('store_sort.label')}</span>
             <Dropdown
-              menuLabel={t('store_sort_label') as string}
+              menuLabel={t('store_sort.label') as string}
               rgOptions={sortOptions}
-              strDefaultLabel={t('store_sort_label_def') as string}
+              strDefaultLabel={t('store_sort.label_def') as string}
               selectedOption={selectedSort}
               onChange={(e) => setSort(e.data)}
             />
@@ -169,7 +169,7 @@ const BrowseTab: FC<{ children: { data: StorePlugin[] } }> = (data) => {
         <Focusable style={{ display: 'flex', alignItems: 'center', width: '96%' }}>
           <div style={{ width: '100%' }}>
             <TextField
-              label={t('store_search_label')}
+              label={t('store_search.label')}
               value={searchFieldValue}
               onChange={(e) => setSearchValue(e.target.value)}
             />
@@ -234,10 +234,10 @@ const AboutTab: FC<{}> = () => {
           deckbrew.xyz/testing
         </a>
       </span>
-      <span className="deckyStoreAboutHeader">{t('store_contrib_label')}</span>
+      <span className="deckyStoreAboutHeader">{t('store_contrib.label')}</span>
-      <span>{t('store_contrib_desc')}</span>
+      <span>{t('store_contrib.desc')}</span>
-      <span className="deckyStoreAboutHeader">{t('store_source_label')}</span>
+      <span className="deckyStoreAboutHeader">{t('store_source.label')}</span>
-      <span>{t('store_source_desc')}</span>
+      <span>{t('store_source.desc')}</span>
     </div>
   );
 };

frontend/src/i18n.ts

@@ -1,46 +1,23 @@
-import i18next from 'i18next';
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
 import Backend from 'i18next-http-backend';
 import { initReactI18next } from 'react-i18next';
 
-i18next
+i18n
   .use(Backend)
+  .use(LanguageDetector)
   .use(initReactI18next)
   .init({
-    backend: {
+    load: 'languageOnly',
-      // path where resources get loaded from, or a function
-      // returning a path:
-      // function(lngs, namespaces) { return customPath; }
-      // the returned path will interpolate lng, ns if provided like giving a static path
-      // the function might return a promise
-      // returning falsy will abort the download
-      //
-      // If allowMultiLoading is false, lngs and namespaces will have only one element each,
-      // If allowMultiLoading is true, lngs and namespaces can have multiple elements
-      loadPath: 'https://steamloopback.host:1337/locales/{{lng}}/{{ns}}.json',
-
-      // your backend server supports multiloading
-      // /locales/resources.json?lng=de+en&ns=ns1+ns2
-      // Adapter is needed to enable MultiLoading https://github.com/i18next/i18next-multiload-backend-adapter
-      // Returned JSON structure in this case is
-      // {
-      //  lang : {
-      //   namespaceA: {},
-      //   namespaceB: {},
-      //   ...etc
-      //  }
-      // }
-      allowMultiLoading: false, // set loadPath: '/locales/resources.json?lng={{lng}}&ns={{ns}}' to adapt to multiLoading
-
-      reloadInterval: false, // can be used to reload resources in a specific interval (useful in server environments)
-    },
     debug: true,
     fallbackLng: 'en',
-    fallbackNS: 'Common',
     lng: 'en',
     interpolation: {
       escapeValue: false,
     },
-    load: 'languageOnly',
+    backend: {
+      loadPath: 'http://127.0.0.1:1337/locales/{{lng}}/{{ns}}.json',
+    },
   });
 
-export default i18next;
+export default i18n;

frontend/src/plugin-loader.tsx

@@ -154,10 +154,10 @@ class PluginLoader extends Logger {
         onCancel={() => {
           // do nothing
         }}
-        strTitle={`Uninstall ${name}`}
+        strTitle={t('plugin_uninstall_title', name)}
-        strOKButtonText={'Uninstall'}
+        strOKButtonText={t('plugin_uninstall_button')}
       >
-        {t('plugin_uninstall', name)}
+        {t('plugin_uninstall_desc', name)}
       </ConfirmModal>,
     );
   }