Harden settings types (#33311)

* Harden settings types

* Fix types

* Update apps/web/src/emojipicker/recent.ts

Co-authored-by: Will Hunt <2072976+Half-Shot@users.noreply.github.com>

* Fix suggestion

---------

Co-authored-by: Will Hunt <2072976+Half-Shot@users.noreply.github.com>

Author: t3chguy

apps/web/src/@types/media_preview.ts

@@ -25,9 +25,9 @@ export interface MediaPreviewConfig extends Record<string, unknown> {
     /**
      * Media preview setting for thumbnails of media in rooms.
      */
-    media_previews: MediaPreviewValue;
+    media_previews?: MediaPreviewValue;
     /**
      * Media preview settings for avatars of rooms we have been invited to.
      */
-    invite_avatars: MediaPreviewValue.On | MediaPreviewValue.Off;
+    invite_avatars?: MediaPreviewValue.On | MediaPreviewValue.Off;
 }

apps/web/src/LegacyCallHandler.tsx

@@ -725,7 +725,7 @@ export default class LegacyCallHandler extends TypedEventEmitter<LegacyCallHandl
         );
 
         finished.then(([allow]) => {
-            SettingsStore.setValue("fallbackICEServerAllowed", null, SettingLevel.DEVICE, allow);
+            SettingsStore.setValue("fallbackICEServerAllowed", null, SettingLevel.DEVICE, allow ?? null);
         });
     }
 

apps/web/src/Notifier.ts

@@ -142,6 +142,16 @@ interface EmittedEvents {
     [NotifierEvent.NotificationHiddenChange]: (hidden: boolean) => void;
 }
 
+/**
+ * Type representing a notification sound setting
+ */
+export type NotificationSound = {
+    url: string;
+    name?: string;
+    type?: string;
+    size?: number;
+};
+
 class NotifierClass extends TypedEventEmitter<keyof EmittedEvents, EmittedEvents> {
     private notifsByRoom: Record<string, Notification[]> = {};
 
@@ -223,12 +233,7 @@ class NotifierClass extends TypedEventEmitter<keyof EmittedEvents, EmittedEvents
         }
     }
 
-    public getSoundForRoom(roomId: string): {
-        url: string;
-        name: string;
-        type: string;
-        size: number;
-    } | null {
+    public getSoundForRoom(roomId: string): NotificationSound | null {
         // We do no caching here because the SDK caches setting
         // and the browser will cache the sound.
         const content = SettingsStore.getValue("notificationSound", roomId);

apps/web/src/PosthogAnalytics.ts

@@ -19,7 +19,7 @@ import SettingsStore from "./settings/SettingsStore";
 import { type ScreenName } from "./PosthogTrackers";
 import { type ActionPayload } from "./dispatcher/payloads";
 import { Action } from "./dispatcher/actions";
-import { type SettingUpdatedPayload } from "./dispatcher/payloads/SettingUpdatedPayload";
+import { isSettingUpdatedPayload, type SettingUpdatedPayload } from "./dispatcher/payloads/SettingUpdatedPayload";
 import dis from "./dispatcher/dispatcher";
 import { Layout } from "./settings/enums/Layout";
 
@@ -199,8 +199,8 @@ export class PosthogAnalytics {
         const settingsPayload = payload as SettingUpdatedPayload;
         if (["layout", "useCompactLayout"].includes(settingsPayload.settingName)) {
             this.onLayoutUpdated();
-        } else if (settingsPayload.settingName === "urlPreviewsEnabled" && !settingsPayload.roomId) {
-            this.onUrlPreviewSettingUpdated(settingsPayload.newValue as boolean);
+        } else if (isSettingUpdatedPayload(settingsPayload, "urlPreviewsEnabled") && !settingsPayload.roomId) {
+            this.onUrlPreviewSettingUpdated(settingsPayload.newValue);
         }
     };
 

apps/web/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx

@@ -122,7 +122,7 @@ export default class ManageEventIndexDialog extends React.Component<IProps, ISta
 
     private onCrawlerSleepTimeChange = (e: ChangeEvent<HTMLInputElement>): void => {
         this.setState({ crawlerSleepTime: parseInt(e.target.value, 10) });
-        SettingsStore.setValue("crawlerSleepTime", null, SettingLevel.DEVICE, e.target.value);
+        SettingsStore.setValue("crawlerSleepTime", null, SettingLevel.DEVICE, e.target.valueAsNumber);
     };
 
     public render(): React.ReactNode {

apps/web/src/components/structures/MatrixChat.tsx

@@ -1794,11 +1794,11 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             SettingsStore.watchSetting(
                 "blacklistUnverifiedDevices",
                 null,
-                (_settingName, _roomId, atLevel, blacklistEnabled: boolean) => {
+                (_settingName, _roomId, atLevel, blacklistEnabled) => {
                     if (atLevel != SettingLevel.DEVICE) {
                         return;
                     }
-                    crypto.globalBlacklistUnverifiedDevices = blacklistEnabled;
+                    crypto.globalBlacklistUnverifiedDevices = !!blacklistEnabled;
                 },
             );
         }

apps/web/src/components/views/settings/LayoutSwitcher.tsx

@@ -38,8 +38,8 @@ function LayoutSelector(): JSX.Element {
         <Root
             className="mx_LayoutSwitcher_LayoutSelector"
             onChange={async (evt) => {
-                // We don't have any file in the form, we can cast it as string safely
-                const newLayout = new FormData(evt.currentTarget).get("layout") as string | null;
+                // We don't have any file in the form, we can cast it as Layout safely
+                const newLayout = new FormData(evt.currentTarget).get("layout") as Layout;
                 await SettingsStore.setValue("layout", null, SettingLevel.DEVICE, newLayout);
             }}
         >

apps/web/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx

@@ -211,17 +211,17 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
 
     private onAutocompleteDelayChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
         this.setState({ autocompleteDelay: e.target.value });
-        SettingsStore.setValue("autocompleteDelay", null, SettingLevel.DEVICE, e.target.value);
+        SettingsStore.setValue("autocompleteDelay", null, SettingLevel.DEVICE, e.target.valueAsNumber);
     };
 
     private onReadMarkerInViewThresholdMs = (e: React.ChangeEvent<HTMLInputElement>): void => {
         this.setState({ readMarkerInViewThresholdMs: e.target.value });
-        SettingsStore.setValue("readMarkerInViewThresholdMs", null, SettingLevel.DEVICE, e.target.value);
+        SettingsStore.setValue("readMarkerInViewThresholdMs", null, SettingLevel.DEVICE, e.target.valueAsNumber);
     };
 
     private onReadMarkerOutOfViewThresholdMs = (e: React.ChangeEvent<HTMLInputElement>): void => {
         this.setState({ readMarkerOutOfViewThresholdMs: e.target.value });
-        SettingsStore.setValue("readMarkerOutOfViewThresholdMs", null, SettingLevel.DEVICE, e.target.value);
+        SettingsStore.setValue("readMarkerOutOfViewThresholdMs", null, SettingLevel.DEVICE, e.target.valueAsNumber);
     };
 
     private renderGroup(settingIds: BooleanSettingKey[], level = SettingLevel.ACCOUNT): JSX.Element {

apps/web/src/device-listener/DeviceListener.ts

@@ -340,7 +340,7 @@ export class DeviceListener {
         });
     }
 
-    private onRecordClientInformationSettingChange: CallbackFn = (
+    private onRecordClientInformationSettingChange: CallbackFn<"deviceClientInformationOptIn"> = (
         _originalSettingName,
         _roomId,
         _level,

apps/web/src/dispatcher/payloads/SettingUpdatedPayload.ts

@@ -9,14 +9,26 @@ Please see LICENSE files in the repository root for full details.
 import { type ActionPayload } from "../payloads";
 import { type Action } from "../actions";
 import { type SettingLevel } from "../../settings/SettingLevel";
-import { type SettingValueType } from "../../settings/Settings";
+import { type SettingKey, type Settings } from "../../settings/Settings";
 
-export interface SettingUpdatedPayload extends ActionPayload {
+export interface SettingUpdatedPayload<S extends SettingKey = SettingKey> extends ActionPayload {
     action: Action.SettingUpdated;
 
-    settingName: string;
+    settingName: S;
     roomId: string | null;
     level: SettingLevel;
-    newValueAtLevel: SettingLevel;
-    newValue: SettingValueType;
+    newValueAtLevel: Settings[S]["default"];
+    newValue: Settings[S]["default"];
+}
+
+/**
+ * Type guard to check if a payload is a SettingUpdatedPayload for a specific setting.
+ * @param payload the payload to assert
+ * @param settingName the setting name to check for
+ */
+export function isSettingUpdatedPayload<S extends SettingKey>(
+    payload: SettingUpdatedPayload<any>,
+    settingName: S,
+): payload is SettingUpdatedPayload<S> {
+    return payload.settingName === settingName;
 }