Show hostname in developer settings (#2857)

Also refactored developer settings labels into own locale section

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 => {