Simplify settings tabs (#2875)

* Simplify settings tabs

- Move Analytics to Feedback tab
- Rename Developer Settings to Developer Mode and move to Preferences tab
- Clean up Preferences tab
- Only way to see version number is by enabling Developer Mode

* Remove extra label

* Lint

* Lint

* Update locales/en/app.json

Co-authored-by: Robin <robin@robin.town>

---------

Co-authored-by: Robin <robin@robin.town>

src/settings/DeveloperSettingsTab.tsx

@@ -0,0 +1,75 @@
+/*
+Copyright 2022-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { type ChangeEvent, type FC, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+
+import { FieldRow, InputField } from "../input/Input";
+import {
+  useSetting,
+  duplicateTiles as duplicateTilesSetting,
+} from "./settings";
+import type { MatrixClient } from "matrix-js-sdk/src/client";
+
+interface Props {
+  client: MatrixClient;
+}
+
+export const DeveloperSettingsTab: FC<Props> = ({ client }) => {
+  const { t } = useTranslation();
+  const [duplicateTiles, setDuplicateTiles] = useSetting(duplicateTilesSetting);
+
+  return (
+    <>
+      <p>
+        {t("developer_mode.hostname", {
+          hostname: window.location.hostname || "unknown",
+        })}
+      </p>
+      <p>
+        {t("version", {
+          productName: import.meta.env.VITE_PRODUCT_NAME || "Element Call",
+          version: import.meta.env.VITE_APP_VERSION || "dev",
+        })}
+      </p>
+      <p>
+        {t("developer_mode.crypto_version", {
+          version: client.getCrypto()?.getVersion() || "unknown",
+        })}
+      </p>
+      <p>
+        {t("developer_mode.matrix_id", {
+          id: client.getUserId() || "unknown",
+        })}
+      </p>
+      <p>
+        {t("developer_mode.device_id", {
+          id: client.getDeviceId() || "unknown",
+        })}
+      </p>
+      <FieldRow>
+        <InputField
+          id="duplicateTiles"
+          type="number"
+          label={t("developer_mode.duplicate_tiles_label")}
+          value={duplicateTiles.toString()}
+          min={0}
+          onChange={useCallback(
+            (event: ChangeEvent<HTMLInputElement>): void => {
+              const value = event.target.valueAsNumber;
+              if (value < 0) {
+                return;
+              }
+              setDuplicateTiles(Number.isNaN(value) ? 0 : value);
+            },
+            [setDuplicateTiles],
+          )}
+        />
+      </FieldRow>
+    </>
+  );
+};