Working backend, automatically swtich languages with steam and language fixes.

frontend/src/components/settings/index.tsx

@@ -37,5 +37,5 @@ export default function SettingsPage() {
       route: '/decky/settings/developer',
     });
 
-  return <SidebarNavigation title={t('SettingsIndex.settings_navbar') as string} showTitle pages={pages} />;
+  return <SidebarNavigation title={t('SettingsIndex.navbar_settings') as string} showTitle pages={pages} />;
 }

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

@@ -11,15 +11,16 @@ export default function DeveloperSettings() {
   const [reactDevtoolsEnabled, setReactDevtoolsEnabled] = useSetting<boolean>('developer.rdt.enabled', false);
   const [reactDevtoolsIP, setReactDevtoolsIP] = useSetting<string>('developer.rdt.ip', '');
   const textRef = useRef<HTMLDivElement>(null);
-  const { t } = useTranslation('DeveloperIndex');
+  const { t } = useTranslation();
 
   return (
     <>
       <Field
-        label={t('valve_internal.label')}
+        label={t('DeveloperIndex.valve_internal.label')}
         description={
           <span style={{ whiteSpace: 'pre-line' }}>
-            {t('valve_internal.desc1')} <span style={{ color: 'red' }}>{t('valve_internal.desc2')}</span>
+            {t('DeveloperIndex.valve_internal.desc1')}{' '}
+            <span style={{ color: 'red' }}>{t('DeveloperIndex.valve_internal.desc2')}</span>
           </span>
         }
         icon={<FaSteamSymbol style={{ display: 'block' }} />}
@@ -56,10 +57,10 @@ export default function DeveloperSettings() {
         }
       >
         <Field
-          label={t('react_devtools.label')}
+          label={t('DeveloperIndex.react_devtools.label')}
           description={
             <>
-              <span style={{ whiteSpace: 'pre-line' }}>{t('react_devtools.desc')}</span>
+              <span style={{ whiteSpace: 'pre-line' }}>{t('DeveloperIndex.react_devtools.desc')}</span>
               <div ref={textRef}>
                 <TextField label={'IP'} value={reactDevtoolsIP} onChange={(e) => setReactDevtoolsIP(e?.target.value)} />
               </div>

frontend/src/i18n.ts

@@ -1,31 +0,0 @@
-import i18n from 'i18next';
-import LanguageDetector from 'i18next-browser-languagedetector';
-import Backend from 'i18next-http-backend';
-import { initReactI18next } from 'react-i18next';
-
-i18n
-  .use(Backend)
-  .use(LanguageDetector)
-  .use(initReactI18next)
-  .init({
-    load: 'languageOnly',
-    debug: true,
-    fallbackLng: 'en',
-    lng: 'it',
-    interpolation: {
-      escapeValue: false,
-    },
-    backend: {
-      loadPath: 'http://127.0.0.1:1337/locales/{{lng}}.json',
-      requestOptions: {
-        // used for fetch
-        credentials: 'include',
-        cache: 'no-cache',
-      },
-      customHeaders: {
-        Authentication: window.deckyAuthToken,
-      },
-    },
-  });
-
-export default i18n;

frontend/src/index.tsx

@@ -1,6 +1,8 @@
-import './i18n';
-
 import { Navigation, Router, sleep } from 'decky-frontend-lib';
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import Backend from 'i18next-http-backend';
+import { initReactI18next } from 'react-i18next';
 
 import PluginLoader from './plugin-loader';
 import { DeckyUpdater } from './updater';
@@ -38,9 +40,34 @@ declare global {
 (async () => {
   window.deckyAuthToken = await fetch('http://127.0.0.1:1337/auth/token').then((r) => r.text());
 
+  i18n
+    .use(Backend)
+    .use(LanguageDetector)
+    .use(initReactI18next)
+    .init({
+      load: 'languageOnly',
+      detection: {
+        order: ['querystring', 'navigator'],
+        lookupQuerystring: 'lng',
+      },
+      debug: true,
+      fallbackLng: 'en',
+      interpolation: {
+        escapeValue: false,
+      },
+      backend: {
+        loadPath: 'http://127.0.0.1:1337/locales/{{lng}}.json',
+        customHeaders: {
+          Authentication: window.deckyAuthToken,
+        },
+        requestOptions: {
+          credentials: 'include',
+        },
+      },
+    });
+
   window.DeckyPluginLoader?.dismountAll();
   window.DeckyPluginLoader?.deinit();
-
   window.DeckyPluginLoader = new PluginLoader();
   window.DeckyPluginLoader.init();
   window.importDeckyPlugin = function (name: string, version: string) {
@@ -63,3 +90,5 @@ declare global {
 
   setTimeout(() => window.syncDeckyPlugins(), 5000);
 })();
+
+export default i18n;