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/SettingsModal.tsx

@@ -5,16 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ChangeEvent, type FC, useCallback, useState } from "react";
-import { Trans, useTranslation } from "react-i18next";
+import { type FC, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { type MatrixClient } from "matrix-js-sdk/src/matrix";
-import { Root as Form, Text } from "@vector-im/compound-web";
+import { Root as Form } from "@vector-im/compound-web";
 
 import { Modal } from "../Modal";
 import styles from "./SettingsModal.module.css";
 import { type Tab, TabContainer } from "../tabs/Tabs";
-import { FieldRow, InputField } from "../input/Input";
-import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 import { ProfileSettingsTab } from "./ProfileSettingsTab";
 import { FeedbackSettingsTab } from "./FeedbackSettingsTab";
 import {
@@ -24,15 +22,14 @@ import {
 import { widget } from "../widget";
 import {
   useSetting,
-  developerSettingsTab as developerSettingsTabSetting,
-  duplicateTiles as duplicateTilesSetting,
-  useOptInAnalytics,
   soundEffectVolumeSetting,
+  developerSettingsTab,
 } from "./settings";
 import { isFirefox } from "../Platform";
 import { PreferencesSettingsTab } from "./PreferencesSettingsTab";
 import { Slider } from "../Slider";
 import { DeviceSelection } from "./DeviceSelection";
+import { DeveloperSettingsTab } from "./DeveloperSettingsTab";
 
 type SettingsTab =
   | "audio"
@@ -64,28 +61,13 @@ export const SettingsModal: FC<Props> = ({
 }) => {
   const { t } = useTranslation();
 
-  const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
-  const [developerSettingsTab, setDeveloperSettingsTab] = useSetting(
-    developerSettingsTabSetting,
-  );
-  const [duplicateTiles, setDuplicateTiles] = useSetting(duplicateTilesSetting);
-
-  const optInDescription = (
-    <Text size="sm">
-      <Trans i18nKey="settings.opt_in_description">
-        <AnalyticsNotice />
-        <br />
-        You may withdraw consent by unchecking this box. If you are currently in
-        a call, this setting will take effect at the end of the call.
-      </Trans>
-    </Text>
-  );
-
   const devices = useMediaDevices();
   useMediaDeviceNames(devices, open);
   const [soundVolume, setSoundVolume] = useSetting(soundEffectVolumeSetting);
   const [soundVolumeRaw, setSoundVolumeRaw] = useState(soundVolume);
 
+  const [showDeveloperSettingsTab] = useSetting(developerSettingsTab);
+
   const audioTab: Tab<SettingsTab> = {
     key: "audio",
     name: t("common.audio"),
@@ -151,104 +133,16 @@ export const SettingsModal: FC<Props> = ({
     content: <FeedbackSettingsTab roomId={roomId} />,
   };
 
-  const moreTab: Tab<SettingsTab> = {
-    key: "more",
-    name: t("settings.more_tab_title"),
-    content: (
-      <>
-        <h4>{t("settings.developer_tab_title")}</h4>
-        <p>
-          {t("version", {
-            productName: import.meta.env.VITE_PRODUCT_NAME || "Element Call",
-            version: import.meta.env.VITE_APP_VERSION || "dev",
-          })}
-        </p>
-        <FieldRow>
-          <InputField
-            id="developerSettingsTab"
-            type="checkbox"
-            checked={developerSettingsTab}
-            label={t("settings.developer_settings_label")}
-            description={t("settings.developer_settings_label_description")}
-            onChange={(event: ChangeEvent<HTMLInputElement>): void =>
-              setDeveloperSettingsTab(event.target.checked)
-            }
-          />
-        </FieldRow>
-        <h4>{t("common.analytics")}</h4>
-        <FieldRow>
-          <InputField
-            id="optInAnalytics"
-            type="checkbox"
-            checked={optInAnalytics ?? undefined}
-            description={optInDescription}
-            onChange={(event: ChangeEvent<HTMLInputElement>): void => {
-              setOptInAnalytics?.(event.target.checked);
-            }}
-          />
-        </FieldRow>
-      </>
-    ),
-  };
-
   const developerTab: Tab<SettingsTab> = {
     key: "developer",
     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",
-            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>
-      </>
-    ),
+    content: <DeveloperSettingsTab client={client} />,
   };
 
   const tabs = [audioTab, videoTab];
   if (widget === null) tabs.push(profileTab);
-  tabs.push(preferencesTab, feedbackTab, moreTab);
-  if (developerSettingsTab) tabs.push(developerTab);
+  tabs.push(preferencesTab, feedbackTab);
+  if (showDeveloperSettingsTab) tabs.push(developerTab);
 
   return (
     <Modal