Show hostname in developer settings (#2857)

Also refactored developer settings labels into own locale section

locales/de/app.json

@@ -68,8 +68,12 @@
     "username": "Benutzername",
     "video": "Video"
   },
-  "crypto_version": "Krypto-Version:{{version}}",
-  "device_id": "Geräte-ID: {{id}}",
+  "developer_mode": {
+    "crypto_version": "Krypto-Version:{{version}}",
+    "device_id": "Geräte-ID: {{id}}",
+    "duplicate_tiles_label": "Anzahl zusätzlicher Kachelkopien pro Teilnehmer",
+    "matrix_id": "Matrix-ID: {{id}}"
+  },
   "disconnected_banner": "Die Verbindung zum Server wurde getrennt.",
   "full_screen_view_description": "<0>Übermittelte Problemberichte helfen uns, Fehler zu beheben.</0>",
   "full_screen_view_h1": "<0>Hoppla, etwas ist schiefgelaufen.</0>",
@@ -111,7 +115,6 @@
   "login_auth_links_prompt": "Noch nicht registriert?",
   "login_subheading": "Weiter zu Element",
   "login_title": "Anmelden",
-  "matrix_id": "Matrix-ID: {{id}}",
   "microphone_off": "Mikrofon aus",
   "microphone_on": "Mikrofon an",
   "mute_microphone_button_label": "Mikrofon stumm schalten",
@@ -149,7 +152,6 @@
     "developer_settings_label": "Entwicklereinstellungen",
     "developer_settings_label_description": "Zeige die Entwicklereinstellungen im Einstellungsfenster.",
     "developer_tab_title": "Entwickler",
-    "duplicate_tiles_label": "Anzahl zusätzlicher Kachelkopien pro Teilnehmer",
     "feedback_tab_body": "Falls du auf Probleme stößt oder einfach nur eine Rückmeldung geben möchtest, sende uns bitte eine kurze Beschreibung.",
     "feedback_tab_description_label": "Deine Rückmeldung",
     "feedback_tab_h4": "Rückmeldung geben",

locales/en-GB/app.json

@@ -68,8 +68,13 @@
     "username": "Username",
     "video": "Video"
   },
-  "crypto_version": "Crypto version: {{version}}",
-  "device_id": "Device ID: {{id}}",
+  "developer_mode": {
+    "crypto_version": "Crypto version: {{version}}",
+    "device_id": "Device ID: {{id}}",
+    "duplicate_tiles_label": "Number of additional tile copies per participant",
+    "hostname": "Hostname: {{hostname}}",
+    "matrix_id": "Matrix ID: {{id}}"
+  },
   "disconnected_banner": "Connectivity to the server has been lost.",
   "full_screen_view_description": "<0>Submitting debug logs will help us track down the problem.</0>",
   "full_screen_view_h1": "<0>Oops, something's gone wrong.</0>",
@@ -111,7 +116,6 @@
   "login_auth_links_prompt": "Not registered yet?",
   "login_subheading": "To continue to Element",
   "login_title": "Login",
-  "matrix_id": "Matrix ID: {{id}}",
   "microphone_off": "Microphone off",
   "microphone_on": "Microphone on",
   "mute_microphone_button_label": "Mute microphone",
@@ -149,7 +153,6 @@
     "developer_settings_label": "Developer Settings",
     "developer_settings_label_description": "Expose developer settings in the settings window.",
     "developer_tab_title": "Developer",
-    "duplicate_tiles_label": "Number of additional tile copies per participant",
     "feedback_tab_body": "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.",
     "feedback_tab_description_label": "Your feedback",
     "feedback_tab_h4": "Submit feedback",

src/settings/SettingsModal.tsx

@@ -195,6 +195,11 @@ export const SettingsModal: FC<Props> = ({
     name: t("settings.developer_tab_title"),
     content: (
       <>
+        <p>
+          {t("developer_mode.hostname", {
+            hostname: window.location.hostname || "unknown",
+          })}
+        </p>
         <p>
           {t("version", {
             productName: import.meta.env.VITE_PRODUCT_NAME || "Element Call",
@@ -202,17 +207,17 @@ export const SettingsModal: FC<Props> = ({
           })}
         </p>
         <p>
-          {t("crypto_version", {
+          {t("developer_mode.crypto_version", {
             version: client.getCrypto()?.getVersion() || "unknown",
           })}
         </p>
         <p>
-          {t("matrix_id", {
+          {t("developer_mode.matrix_id", {
             id: client.getUserId() || "unknown",
           })}
         </p>
         <p>
-          {t("device_id", {
+          {t("developer_mode.device_id", {
             id: client.getDeviceId() || "unknown",
           })}
         </p>
@@ -220,7 +225,7 @@ export const SettingsModal: FC<Props> = ({
           <InputField
             id="duplicateTiles"
             type="number"
-            label={t("settings.duplicate_tiles_label")}
+            label={t("developer_mode.duplicate_tiles_label")}
             value={duplicateTiles.toString()}
             onChange={useCallback(
               (event: ChangeEvent<HTMLInputElement>): void => {