Refactor settings to use observables

Also removing some unused settings along the way.

src/settings/SettingsModal.tsx

@@ -29,12 +29,6 @@ import OverflowIcon from "../icons/Overflow.svg?react";
 import UserIcon from "../icons/User.svg?react";
 import FeedbackIcon from "../icons/Feedback.svg?react";
 import { SelectInput } from "../input/SelectInput";
-import {
-  useOptInAnalytics,
-  useDeveloperSettingsTab,
-  useShowConnectionStats,
-  isFirefox,
-} from "./useSetting";
 import { FieldRow, InputField } from "../input/Input";
 import { Body, Caption } from "../typography/Typography";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
@@ -46,6 +40,12 @@ import {
   useMediaDeviceNames,
 } from "../livekit/MediaDevicesContext";
 import { widget } from "../widget";
+import {
+  useSetting,
+  optInAnalytics as optInAnalyticsSetting,
+  developerSettingsTab as developerSettingsTabSetting,
+  isFirefox,
+} from "./settings";
 
 type SettingsTab =
   | "audio"
@@ -76,11 +76,10 @@ export const SettingsModal: FC<Props> = ({
 }) => {
   const { t } = useTranslation();
 
-  const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
-  const [developerSettingsTab, setDeveloperSettingsTab] =
-    useDeveloperSettingsTab();
-  const [showConnectionStats, setShowConnectionStats] =
-    useShowConnectionStats();
+  const [optInAnalytics, setOptInAnalytics] = useSetting(optInAnalyticsSetting);
+  const [developerSettingsTab, setDeveloperSettingsTab] = useSetting(
+    developerSettingsTabSetting,
+  );
 
   // Generate a `SelectInput` with a list of devices for a given device kind.
   const generateDeviceSelection = (
@@ -245,18 +244,6 @@ export const SettingsModal: FC<Props> = ({
           })}
         </Body>
       </FieldRow>
-      <FieldRow>
-        <InputField
-          id="showConnectionStats"
-          name="connection-stats"
-          label={t("settings.show_connection_stats_label")}
-          type="checkbox"
-          checked={showConnectionStats}
-          onChange={(e: ChangeEvent<HTMLInputElement>): void =>
-            setShowConnectionStats(e.target.checked)
-          }
-        />
-      </FieldRow>
     </TabItem>
   );