Use fluent format for translations

gui/package.json

@@ -16,6 +16,9 @@
     "flatbuffers": "^22.10.26",
     "fs-extra": "^10.0.0",
     "i18next": "^22.0.6",
+    "i18next-browser-languagedetector": "^7.0.1",
+    "i18next-fluent": "^2.0.0",
+    "i18next-fluent-backend": "^0.0.3",
     "identity-obj-proxy": "^3.0.0",
     "ip-num": "^1.4.1",
     "postcss-flexbugs-fixes": "^5.0.2",

gui/scripts/convert-fluent.js

@@ -0,0 +1,108 @@
+#!/bin/node
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const fs = require('fs');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const translation = require('./translation.json');
+
+const sections = {
+  websocket: 'Websocket status',
+  tips: 'Tips',
+  'body-part': 'Body parts',
+  'skeleton-bone': 'Skeleton stuff',
+  reset: 'Tracker reset buttons',
+  'serial-detection': 'Serial detection stuff',
+  navbar: 'Navigation bar',
+  bvh: 'Bounding volume hierarchy recording',
+  overlay: 'Overlay settings',
+  tracker: {
+    status: 'Tracker status',
+    table: {
+      column: 'Tracker status columns',
+    },
+    rotation: 'Tracker rotation',
+    infos: 'Tracker information',
+    settings: 'Tracker settings',
+    'part-card': 'Tracker part card info',
+  },
+  'body-assignment-menu': 'Body assignment menu',
+  'tracker-selection-menu': 'Tracker assignment menu',
+  'mounting-selection-menu': 'Mounting menu',
+  settings: {
+    sidebar: 'Sidebar settings',
+    general: {
+      steamvr: 'SteamVR settings',
+      'tracker-mechanics': 'Tracker mechanics',
+      'fk-settings': 'FK settings',
+      'gesture-control': 'Gesture control settings (tracker tapping)',
+      interface: 'Interface settings',
+    },
+    serial: 'Serial settings',
+    osc: {
+      router: 'OSC router settings',
+      vrchat: 'OSC VRChat settings',
+    },
+  },
+  onboarding: {
+    default: 'Setup/onboarding menu',
+    'wifi-creds': 'WiFi setup',
+    'reset-tutorial': 'Mounting setup',
+    home: 'Setup start',
+    'enter-vr': 'Enter VR part of setup',
+    done: 'Setup done',
+    'connect-tracker': 'Tracker connection setup',
+    'assign-trackers': 'Tracker assignment setup',
+    'manual-mounting': 'Tracker manual mounting setup',
+    'automatic-mounting': 'Tracker automatic mounting setup',
+    'manual-proportions': 'Tracker manual proportions setup',
+    'automatic-proportions': 'Tracker automatic proportions setup',
+  },
+  home: 'Home',
+};
+
+function goTo(obj, property) {
+  const props = property.split('.');
+  if (props.length === 1) {
+    const prop = props.shift();
+    if (typeof obj[prop] === 'string') {
+      return obj[prop];
+    } else if (obj[prop] && obj[prop].default) {
+      return obj[prop].default;
+    }
+  } else {
+    const prop = props.shift();
+    if (obj[prop]) return goTo(obj[prop], props.join('.'));
+  }
+  return null;
+}
+
+function recurseObject(obj, prefix = '') {
+  const array = [];
+  let first = false;
+  for (const prop in obj) {
+    if (typeof obj[prop] === 'string') {
+      if (!first) {
+        first = true;
+        const section = goTo(sections, prefix.slice(0, -1).replace(/\0/g, '.'));
+        if (section) {
+          array.push(`\n## ${section}`);
+        }
+      }
+
+      array.push(
+        `${prefix.replace(/-/g, '_').replace(/\0/g, '-')}${prop
+          .replace(/-/g, '_')
+          .replace(/\./g, '-')} = ${obj[prop]
+          .replace(/{{/g, '{ $')
+          .replace(/}}/g, ' }')}`
+      );
+    } else {
+      array.push(...recurseObject(obj[prop], `${prefix}${prop}\0`));
+    }
+  }
+  return array;
+}
+
+fs.writeFileSync(
+  './translation.ftl',
+  recurseObject(translation).join('\n').trim()
+);

gui/src/App.tsx

@@ -165,8 +165,8 @@ function App() {
                       <TopBar></TopBar>
                       <div className="flex w-full h-full justify-center items-center p-2">
                         {websocketAPI.isFirstConnection
-                          ? t('websocket.connecting')
-                          : t('websocket.connection-lost')}
+                          ? t('websocket-connecting')
+                          : t('websocket-connection_lost')}
                       </div>
                     </>
                   )}

gui/src/components/BVHButton.tsx

@@ -26,7 +26,7 @@ export function BVHButton() {
 
   return (
     <BigButton
-      text={t(recording ? 'bvh.recording' : 'bvh.start-recording')}
+      text={t(recording ? 'bvh-recording' : 'bvh-start_recording')}
       icon={<RecordIcon width={20} />}
       onClick={toggleBVH}
     ></BigButton>

gui/src/components/Navbar.tsx

@@ -63,33 +63,33 @@ export function Navbar() {
     <div className="flex flex-col px-2 pt-2">
       <div className="flex flex-col flex-grow gap-2">
         <NavButton to="/" icon={<CubeIcon></CubeIcon>}>
-          {t('navbar.home')}
+          {t('navbar-home')}
         </NavButton>
         <NavButton
           to="/onboarding/body-proportions/auto"
           match="/onboarding/body-proportions/*"
           state={{ alonePage: true }}
           icon={<GearIcon></GearIcon>}
         >
-          {t('navbar.body-proportions')}
+          {t('navbar-body_proportions')}
         </NavButton>
         <NavButton
           to="/onboarding/trackers-assign"
           state={{ alonePage: true }}
           icon={<GearIcon></GearIcon>}
         >
-          {t('navbar.trackers-assign')}
+          {t('navbar-trackers_assign')}
         </NavButton>
         <NavButton
           to="/onboarding/mounting/auto"
           match="/onboarding/mounting/*"
           state={{ alonePage: true }}
           icon={<GearIcon></GearIcon>}
         >
-          {t('navbar.mounting')}
+          {t('navbar-mounting')}
         </NavButton>
         <NavButton to="/onboarding/home" icon={<GearIcon></GearIcon>}>
-          {t('navbar.onboarding')}
+          {t('navbar-onboarding')}
         </NavButton>
       </div>
       <NavButton
@@ -98,7 +98,7 @@ export function Navbar() {
         state={{ scrollTo: 'steamvr' }}
         icon={<GearIcon></GearIcon>}
       >
-        {t('navbar.settings')}
+        {t('navbar-settings')}
       </NavButton>
     </div>
   );

gui/src/components/SerialDetectionModal.tsx

@@ -148,25 +148,25 @@ export function SerialDetectionModal() {
               <USBIcon></USBIcon>
               <div className="flex flex-col items-center gap-2">
                 <Typography variant="main-title">
-                  {t('serial-detection.new-device.p0')}
+                  {t('serial_detection-new_device-p0')}
                 </Typography>
                 <Typography variant="section-title">
                   {isOpen?.name || 'unknown'}
                 </Typography>
                 <Typography variant="standard">
-                  {t('serial-detection.new-device.p2')}
+                  {t('serial_detection-new_device-p2')}
                 </Typography>
               </div>
             </div>
 
             <Button variant="primary" onClick={openWifi}>
-              {t('serial-detection.open-wifi')}
+              {t('serial_detection-open_wifi')}
             </Button>
             <Button variant="tiertiary" onClick={openSerial}>
-              {t('serial-detection.open-serial')}
+              {t('serial_detection-open_serial')}
             </Button>
             <Button variant="secondary" onClick={closeModal}>
-              {t('serial-detection.close')}
+              {t('serial_detection-close')}
             </Button>
           </>
         )}
@@ -178,10 +178,10 @@ export function SerialDetectionModal() {
             <div className="flex flex-col items-center gap-3">
               <BulbIcon></BulbIcon>
               <Typography variant="main-title">
-                {t('serial-detection.new-device.p0')}
+                {t('serial_detection-new_device-p0')}
               </Typography>
               <Typography variant="standard">
-                {t('serial-detection.new-device.p1')}
+                {t('serial_detection-new_device-p1')}
               </Typography>
             </div>
             <div className="flex flex-col gap-3 rounded-xl max-w-sm">
@@ -193,10 +193,10 @@ export function SerialDetectionModal() {
               variant="primary"
               disabled={!formState.isValid}
             >
-              {t('serial-detection.submit')}
+              {t('serial_detection-submit')}
             </Button>
             <Button variant="secondary" onClick={closeModal}>
-              {t('serial-detection.close')}
+              {t('serial_detection-close')}
             </Button>
           </form>
         )}

gui/src/components/commons/LangSelector.tsx

@@ -35,7 +35,7 @@ export function LangSelector({
     <Dropdown
       control={control}
       name="lang"
-      placeholder={t('settings.interface.lang.placeholder')}
+      placeholder={t('settings-interface-lang-placeholder')}
       items={languagesItems}
       direction={direction}
     ></Dropdown>

gui/src/components/home/Home.tsx

@@ -22,7 +22,7 @@ export function Home() {
     <div className="overflow-y-auto flex flex-col gap-2">
       {trackers.length === 0 && (
         <div className="flex px-5 pt-5 justify-center">
-          <Typography variant="standard">{t('home.no-trackers')}</Typography>
+          <Typography variant="standard">{t('home-no_trackers')}</Typography>
         </div>
       )}
 

gui/src/components/home/ResetButton.tsx

@@ -39,13 +39,13 @@ export function ResetButton({
   const text = useMemo(() => {
     switch (type) {
       case ResetType.Quick:
-        return t('reset.quick');
+        return t('reset-quick');
       case ResetType.Mounting:
-        return t('reset.mounting');
+        return t('reset-mounting');
       case ResetType.Full:
-        return t('reset.full');
+        return t('reset-full');
     }
-    return t('reset.full');
+    return t('reset-full');
   }, [type]);
 
   const getIcon = () => {

gui/src/components/onboarding/pages/ConnectTracker.tsx

@@ -7,7 +7,7 @@ import {
   OpenSerialRequestT,
   RpcMessage,
   SerialUpdateResponseT,
-  SetWifiRequestT
+  SetWifiRequestT,
 } from 'solarxr-protocol';
 import { useLayout } from '../../../hooks/layout';
 import { useOnboarding } from '../../../hooks/onboarding';
@@ -29,12 +29,12 @@ type ConnectionStatus =
   | 'START-CONNECTING';
 
 const statusLabelMap = {
-  ['CONNECTING']: 'onboarding.connect-tracker.connection-status.connecting',
-  ['CONNECTED']: 'onboarding.connect-tracker.connection-status.connected',
-  ['ERROR']: 'onboarding.connect-tracker.connection-status.error',
+  ['CONNECTING']: 'onboarding-connect_tracker-connection_status-connecting',
+  ['CONNECTED']: 'onboarding-connect_tracker-connection_status-connected',
+  ['ERROR']: 'onboarding-connect_tracker-connection_status-error',
   ['START-CONNECTING']:
-    'onboarding.connect-tracker.connection-status.start-connecting',
-  ['HANDSHAKE']: 'onboarding.connect-tracker.connection-status.start-handshake',
+    'onboarding-connect_tracker-connection_status-start_connecting',
+  ['HANDSHAKE']: 'onboarding-connect_tracker-connection_status-start_handshake',
 };
 
 export function ConnectTrackersPage() {
@@ -135,17 +135,17 @@ export function ConnectTrackersPage() {
         <div className="flex flex-col w-full max-w-sm">
           {!state.alonePage && (
             <ArrowLink to="/onboarding/wifi-creds">
-              {t('onboarding.connect-tracker.back')}
+              {t('onboarding-connect_tracker-back')}
             </ArrowLink>
           )}
           <Typography variant="main-title">
-            {t('onboarding.connect-tracker.title')}
+            {t('onboarding-connect_tracker-title')}
           </Typography>
           <Typography color="secondary">
-            {t('onboarding.connect-tracker.description.p0')}
+            {t('onboarding-connect_tracker-description-p0')}
           </Typography>
           <Typography color="secondary">
-            {t('onboarding.connect-tracker.description.p1')}
+            {t('onboarding-connect_tracker-description-p1')}
           </Typography>
           <div className="flex flex-col gap-2 py-5">
             {/* <ArrowLink
@@ -161,10 +161,10 @@ export function ConnectTrackersPage() {
               direction="right"
               variant={state.alonePage ? 'boxed-2' : 'boxed'}
             >
-              {t('onboarding.connect-tracker.issue.serial')}
+              {t('onboarding-connect_tracker-issue-serial')}
             </ArrowLink>
           </div>
-          <TipBox>{t('tips.find-tracker')}</TipBox>
+          <TipBox>{t('tips-find_tracker')}</TipBox>
 
           <div
             className={classNames(
@@ -180,7 +180,7 @@ export function ConnectTrackersPage() {
             </div>
             <div className="flex flex-col">
               <Typography bold>
-                {t('onboarding.connect-tracker.usb')}
+                {t('onboarding-connect_tracker-usb')}
               </Typography>
               <Typography color="secondary">
                 {t(statusLabelMap[connectionStatus])}
@@ -190,7 +190,7 @@ export function ConnectTrackersPage() {
         </div>
         <div className="flex flex-col flex-grow">
           <Typography color="secondary" bold>
-            {t('onboarding.connect-tracker.connected-trackers', {
+            {t('onboarding-connect_tracker-connected_trackers', {
               amount: connectedTrackers.length,
             })}
           </Typography>
@@ -237,19 +237,19 @@ export function ConnectTrackersPage() {
           <div className="flex flex-grow">
             {!state.alonePage && (
               <Button variant="secondary" to="/" onClick={skipSetup}>
-                {t('onboarding.skip')}
+                {t('onboarding-skip')}
               </Button>
             )}
           </div>
           <div className="flex gap-3">
             {!state.alonePage && (
               <Button variant="primary" to="/onboarding/trackers-assign">
-                {t('onboarding.connect-tracker.next')}
+                {t('onboarding-connect_tracker-next')}
               </Button>
             )}
             {state.alonePage && (
               <Button variant="primary" to="/">
-                {t('onboarding.connect-tracker.next')}
+                {t('onboarding-connect_tracker-next')}
               </Button>
             )}
           </div>