Mode Tab have Modes grouped in category and selections depend on Cloud build options

locales/en/messages.json

@@ -407,7 +407,6 @@
     "tabAuxiliary": {
         "message": "Modes"
     },
-
     "logActionHide": {
         "message": "Hide Log"
     },
@@ -424,7 +423,6 @@
     "serialErrorParityError": {
         "message": "Serial connection error: bad parity"
     },
-
     "serialPortOpened": {
         "message": "Serial port <span class=\"message-positive\">successfully</span> opened with ID: $1"
     },
@@ -2311,7 +2309,7 @@
         "message": "Enable controls"
     },
     "auxiliaryHelp": {
-        "message": "Configure modes here using a combination of ranges and/or links to other modes (links supported on BF 4.0 and later). Use <strong>ranges</strong> to define the switches on your transmitter and corresponding mode assignments. A receiver channel that gives a reading between a range min/max will activate the mode. Use a <strong>link</strong> to activate a mode when another mode is activated. <strong>Exceptions:</strong> ARM cannot be linked to or from another mode, modes cannot be linked to other modes that are configured with a link (chained links). Multiple ranges/links can be used to activate any mode. If there is more than one range/link defined for a mode, each of them can be set to <strong>AND</strong> or <strong>OR</strong>. A mode will be activated when:<br />- ALL <strong>AND</strong> ranges/links are active; OR<br />- at least one <strong>OR</strong> range/link is active.<br /><br />Remember to save your settings using the Save button."
+        "message": "Configure modes here using a combination of ranges and/or links to other modes. The Category arrange modes in groups, at Cloud build only groups defined in Build are enabled. At local build all groups are enabled.<br />Use <strong>ranges</strong> to define the switches on your transmitter and corresponding mode assignments. A receiver channel that gives a reading between a range min/max will activate the mode. Use a <strong>link</strong> to activate a mode when another mode is activated. Multiple ranges/links can be used to activate any mode.<br />If there is more than one range/link defined for a mode, each of them can be set to <strong>AND</strong> or <strong>OR</strong>. A mode will be activated when: ALL <strong>AND</strong> ranges/links are active; OR at least one <strong>OR</strong> range/link is active.<br /><strong>Exceptions:</strong> ARM cannot be linked to or from another mode, modes cannot be linked to other modes that are configured with a link (chained links).<br /><strong>Notice:</strong> 'Hide unused modes' need minimum one configured mode to really work.<br />Remember to save your settings using the Save button."
     },
     "auxiliaryToggleUnused": {
         "message": "Hide unused modes"
@@ -2464,7 +2462,7 @@
         "message": "Enable MSP Override mode",
         "description": "Help text to MSP OVERRIDE mode"
     },
-    "auxiliaryHelpMode_OSDDISABLE": {
+    "auxiliaryHelpMode_OSD": {
         "message": "Enable/Disable On-Screen-Display",
         "description": "Help text to OSD mode"
     },
@@ -2524,7 +2522,7 @@
         "message": "Use to toggle customized USER4. Controls arbitrary output via PINIO",
         "description": "Help text to customized USER4 mode"
     },
-    "auxiliaryHelpMode_VTXCONTROLDISABLE": {
+    "auxiliaryHelpMode_DISABLEVTXCONTROL": {
         "message": "Disable the control of VTX settings through the OSD",
         "description": "Help text to VTX CONTROL DISABLE mode"
     },

src/css/tabs/auxiliary.less

@@ -5,7 +5,7 @@
 		background-color: #ffcb18;
 		margin-bottom: 10px;
 	}
-	.toolbox {
+	.auxiliary_toolbox {
 		font-weight: bold;
         padding: 1rem 0;
         form {
@@ -230,6 +230,11 @@
 }
 @media all and (max-width: 575px) {
 	.tab-auxiliary {
+		.auxiliary_category {
+			flex-wrap: wrap;
+			width: 100%;
+			border-bottom: 0;
+		}
 		.mode {
 			flex-wrap: wrap;
             height: fit-content;

src/js/localization.js

@@ -11,14 +11,32 @@ const i18n = {};
 window.i18n = i18n;
 
 
-const languagesAvailables = ['ca', 'da', 'de', 'en', 'es', 'eu', 'fr', 'gl', 'it', 'ja', 'ko', 'nl', 'pt', 'pt_BR', 'pl', 'ru', 'uk', 'zh_CN', 'zh_TW'];
+const languagesAvailables = ['ca', 'da', 'de', 'en', 'es', 'eu', 'fr', 'gl', 'it',
+                             'ja', 'ko', 'nl', 'pt', 'pt_BR', 'pl', 'ru', 'uk', 'zh_CN', 'zh_TW'];
 
 const languageFallback = {
                             'pt': ['pt_BR', 'en'],
                             'pt_BR': ['pt', 'en'],
                             'default': ['en'],
 };
 
+// must be aligned with languagesAvailables
+const languageISOcode = ['ca-ES', 'da-DK', 'de-DE', 'en-US', 'es-ES', 'eu-ES', 'fr-FR', 'gl-ES', 'it-IT',
+                         'ja-JP', 'ko-KR', 'nl-NL', 'pt-PT', 'pt-BR', 'pl-PL', 'ru-RU', 'uk-UA', 'zh-CN', 'zh-TW'];
+
+/**
+ * Functions that return ISO Language Code Table from http://www.lingoes.net/en/translator/langcode.htm
+ * Map between languagesAvailables and languageISOcode
+ * Fallback to en-US
+ */
+function getCurrentLocaleISO() {
+    const isoCodeIndex = languagesAvailables.indexOf(i18next.language);
+    if (isoCodeIndex === -1) {
+        return 'en-US';
+    }
+    return languageISOcode[isoCodeIndex];
+}
+
 /**
  * Functions that depend on the i18n framework
  */
@@ -238,4 +256,4 @@ i18n.addResources = function(bundle) {
     i18next.addResourceBundle(lang, ns, bundle, true, true);
 };
 
-export { i18n };
+export { i18n, getCurrentLocaleISO };