Hide connection quality indicators behind a developer setting

Calls are an environment with high cognitive load, so it's important that we keep extra UI elements like these to a minimum and stick to what's been explicitly designed. I assume that this was here as a developer feature to diagnose reliability of the back end components, which is perfectly fine, so I've kept it behind a developer setting rather than fully removing it.

src/settings/SettingsModal.tsx

@@ -34,6 +34,7 @@ import {
   useShowInspector,
   useOptInAnalytics,
   useDeveloperSettingsTab,
+  useShowConnectionStats,
 } from "./useSetting";
 import { FieldRow, InputField } from "../input/Input";
 import { Button } from "../button";
@@ -59,6 +60,8 @@ export const SettingsModal = (props: Props) => {
   const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
   const [developerSettingsTab, setDeveloperSettingsTab] =
     useDeveloperSettingsTab();
+  const [showConnectionStats, setShowConnectionStats] =
+    useShowConnectionStats();
 
   const downloadDebugLog = useDownloadDebugLog();
 
@@ -233,6 +236,18 @@ export const SettingsModal = (props: Props) => {
                 }
               />
             </FieldRow>
+            <FieldRow>
+              <InputField
+                id="showConnectionStats"
+                name="connection-stats"
+                label={t("Show connection stats")}
+                type="checkbox"
+                checked={showConnectionStats}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setShowConnectionStats(e.target.checked)
+                }
+              />
+            </FieldRow>
             <FieldRow>
               <Button onPress={downloadDebugLog}>
                 {t("Download debug logs")}

src/settings/useSetting.ts

@@ -101,6 +101,9 @@ export const useOptInAnalytics = (): DisableableSetting<boolean | null> => {
 export const useDeveloperSettingsTab = () =>
   useSetting("developer-settings-tab", false);
 
+export const useShowConnectionStats = () =>
+  useSetting("show-connection-stats", false);
+
 export const useDefaultDevices = () =>
   useSetting("defaultDevices", {
     audioinput: "",