improve typing

web/src/components/config-form/ConfigForm.tsx

@@ -9,10 +9,32 @@ import { createErrorTransformer } from "@/lib/config-schema/errorMessages";
 import { useMemo, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { cn, mergeUiSchema } from "@/lib/utils";
+import type { ConfigFormContext } from "@/types/configForm";
 
-// Runtime guard for object-like schema fragments
-const isSchemaObject = (value: unknown): value is Record<string, unknown> =>
-  typeof value === "object" && value !== null;
+type SchemaWithProperties = RJSFSchema & {
+  properties: Record<string, RJSFSchema>;
+};
+
+type SchemaWithAdditionalProperties = RJSFSchema & {
+  additionalProperties: RJSFSchema;
+};
+
+// Runtime guards for schema fragments
+const hasSchemaProperties = (
+  schema: RJSFSchema,
+): schema is SchemaWithProperties =>
+  typeof schema === "object" &&
+  schema !== null &&
+  typeof schema.properties === "object" &&
+  schema.properties !== null;
+
+const hasSchemaAdditionalProperties = (
+  schema: RJSFSchema,
+): schema is SchemaWithAdditionalProperties =>
+  typeof schema === "object" &&
+  schema !== null &&
+  typeof schema.additionalProperties === "object" &&
+  schema.additionalProperties !== null;
 
 // Detects path-style uiSchema keys (e.g., "filters.*.mask")
 const isPathKey = (key: string) => key.includes(".") || key.includes("*");
@@ -70,34 +92,31 @@ const applyUiSchemaPathOverrides = (
     }
 
     const [segment, ...rest] = path;
-    const schemaObj = targetSchema as Record<string, unknown>;
+    const schemaObj = targetSchema;
 
     if (segment === "*") {
-      if (isSchemaObject(schemaObj.properties)) {
-        Object.entries(schemaObj.properties as Record<string, unknown>).forEach(
+      if (hasSchemaProperties(schemaObj)) {
+        Object.entries(schemaObj.properties).forEach(
           ([propertyName, propertySchema]) => {
-            if (!isSchemaObject(propertySchema)) {
-              return;
-            }
             const existing =
               (targetUi[propertyName] as UiSchema | undefined) || {};
             targetUi[propertyName] = { ...existing };
             applyOverride(
               targetUi[propertyName] as UiSchema,
-              propertySchema as RJSFSchema,
+              propertySchema,
               rest,
               value,
             );
           },
         );
-      } else if (isSchemaObject(schemaObj.additionalProperties)) {
+      } else if (hasSchemaAdditionalProperties(schemaObj)) {
         // For dict schemas, apply override to additionalProperties
         const existing =
           (targetUi.additionalProperties as UiSchema | undefined) || {};
         targetUi.additionalProperties = { ...existing };
         applyOverride(
           targetUi.additionalProperties as UiSchema,
-          schemaObj.additionalProperties as RJSFSchema,
+          schemaObj.additionalProperties,
           rest,
           value,
         );
@@ -105,16 +124,14 @@ const applyUiSchemaPathOverrides = (
       return;
     }
 
-    if (isSchemaObject(schemaObj.properties)) {
-      const propertySchema = (schemaObj.properties as Record<string, unknown>)[
-        segment
-      ];
-      if (isSchemaObject(propertySchema)) {
+    if (hasSchemaProperties(schemaObj)) {
+      const propertySchema = schemaObj.properties[segment];
+      if (propertySchema) {
         const existing = (targetUi[segment] as UiSchema | undefined) || {};
         targetUi[segment] = { ...existing };
         applyOverride(
           targetUi[segment] as UiSchema,
-          propertySchema as RJSFSchema,
+          propertySchema,
           rest,
           value,
         );
@@ -162,7 +179,7 @@ export interface ConfigFormProps {
   /** Live validation mode */
   liveValidate?: boolean;
   /** Form context passed to all widgets */
-  formContext?: Record<string, unknown>;
+  formContext?: ConfigFormContext;
   /** i18n namespace for field labels */
   i18nNamespace?: string;
 }

web/src/components/config-form/sections/BaseSection.tsx

@@ -33,6 +33,8 @@ import {
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
 import { applySchemaDefaults } from "@/lib/config-schema";
+import { isJsonObject } from "@/lib/utils";
+import { ConfigSectionData, JsonObject, JsonValue } from "@/types/configForm";
 
 export interface SectionConfig {
   /** Field ordering within the section */
@@ -130,10 +132,9 @@ export function createConfigSection({
   }: BaseSectionProps) {
     const { t } = useTranslation([i18nNamespace, "views/settings", "common"]);
     const [isOpen, setIsOpen] = useState(!defaultCollapsed);
-    const [pendingData, setPendingData] = useState<Record<
-      string,
-      unknown
-    > | null>(null);
+    const [pendingData, setPendingData] = useState<ConfigSectionData | null>(
+      null,
+    );
     const [isSaving, setIsSaving] = useState(false);
     const [formKey, setFormKey] = useState(0);
     const isResettingRef = useRef(false);
@@ -175,11 +176,8 @@ export function createConfigSection({
     }, [config, level, cameraName]);
 
     const sanitizeSectionData = useCallback(
-      (data: Record<string, unknown>) => {
-        const normalized = normalizeConfigValue(data) as Record<
-          string,
-          unknown
-        >;
+      (data: ConfigSectionData) => {
+        const normalized = normalizeConfigValue(data) as ConfigSectionData;
         if (
           !sectionConfig.hiddenFields ||
           sectionConfig.hiddenFields.length === 0
@@ -187,7 +185,7 @@ export function createConfigSection({
           return normalized;
         }
 
-        const cleaned = cloneDeep(normalized);
+        const cleaned = cloneDeep(normalized) as ConfigSectionData;
         sectionConfig.hiddenFields.forEach((path) => {
           if (!path) return;
           unset(cleaned, path);
@@ -245,18 +243,12 @@ export function createConfigSection({
           return current;
         }
 
-        if (typeof current === "object") {
-          const currentObj = current as Record<string, unknown>;
-          const baseObj =
-            base && typeof base === "object"
-              ? (base as Record<string, unknown>)
-              : undefined;
-          const defaultsObj =
-            defaults && typeof defaults === "object"
-              ? (defaults as Record<string, unknown>)
-              : undefined;
+        if (isJsonObject(current)) {
+          const currentObj = current;
+          const baseObj = isJsonObject(base) ? base : undefined;
+          const defaultsObj = isJsonObject(defaults) ? defaults : undefined;
 
-          const result: Record<string, unknown> = {};
+          const result: JsonObject = {};
           for (const [key, value] of Object.entries(currentObj)) {
             const overrideValue = buildOverrides(
               value,
@@ -264,7 +256,7 @@ export function createConfigSection({
               defaultsObj ? defaultsObj[key] : undefined,
             );
             if (overrideValue !== undefined) {
-              result[key] = overrideValue;
+              result[key] = overrideValue as JsonValue;
             }
           }
 
@@ -305,9 +297,7 @@ export function createConfigSection({
           setPendingData(null);
           return;
         }
-        const sanitizedData = sanitizeSectionData(
-          data as Record<string, unknown>,
-        );
+        const sanitizedData = sanitizeSectionData(data as ConfigSectionData);
         if (isEqual(formData, sanitizedData)) {
           setPendingData(null);
           return;

web/src/components/config-form/theme/templates/FieldTemplate.tsx

@@ -1,5 +1,5 @@
 // Field Template - wraps each form field with label and description
-import type { FieldTemplateProps, StrictRJSFSchema } from "@rjsf/utils";
+import { FieldTemplateProps, StrictRJSFSchema, UiSchema } from "@rjsf/utils";
 import {
   getTemplate,
   getUiOptions,
@@ -10,6 +10,7 @@ import { cn } from "@/lib/utils";
 import { useTranslation } from "react-i18next";
 import { isNullableUnionSchema } from "../fields/nullableUtils";
 import { getTranslatedLabel } from "@/utils/i18n";
+import { ConfigFormContext } from "@/types/configForm";
 
 /**
  * Build the i18n translation key path for nested fields using the field path
@@ -78,9 +79,7 @@ export function FieldTemplate(props: FieldTemplateProps) {
   } = props;
 
   // Get i18n namespace from form context (passed through registry)
-  const formContext = registry?.formContext as
-    | Record<string, unknown>
-    | undefined;
+  const formContext = registry?.formContext as ConfigFormContext | undefined;
   const i18nNamespace = formContext?.i18nNamespace as string | undefined;
   const { t, i18n } = useTranslation([
     i18nNamespace || "common",
@@ -103,7 +102,7 @@ export function FieldTemplate(props: FieldTemplateProps) {
   const isNullableUnion = isNullableUnionSchema(schema as StrictRJSFSchema);
   const isAdditionalProperty = ADDITIONAL_PROPERTY_FLAG in schema;
   const suppressMultiSchema =
-    (uiSchema?.["ui:options"] as Record<string, unknown> | undefined)
+    (uiSchema?.["ui:options"] as UiSchema["ui:options"] | undefined)
       ?.suppressMultiSchema === true;
 
   // Only suppress labels/descriptions if this is a multi-schema field (anyOf/oneOf) with suppressMultiSchema flag
@@ -122,12 +121,8 @@ export function FieldTemplate(props: FieldTemplateProps) {
     : undefined;
 
   // Use schema title/description as primary source (from JSON Schema)
-  const schemaTitle = (schema as Record<string, unknown>).title as
-    | string
-    | undefined;
-  const schemaDescription = (schema as Record<string, unknown>).description as
-    | string
-    | undefined;
+  const schemaTitle = schema.title;
+  const schemaDescription = schema.description;
 
   // Try to get translated label, falling back to schema title, then RJSF label
   let finalLabel = label;

web/src/components/config-form/theme/templates/MultiSchemaFieldTemplate.tsx

@@ -1,10 +1,11 @@
 // Custom MultiSchemaFieldTemplate to handle anyOf [Type, null] fields
 // Renders simple nullable types as single inputs instead of dropdowns
 
-import type {
+import {
   MultiSchemaFieldTemplateProps,
   StrictRJSFSchema,
   FormContextType,
+  UiSchema,
 } from "@rjsf/utils";
 import { isNullableUnionSchema } from "../fields/nullableUtils";
 
@@ -23,7 +24,7 @@ export function MultiSchemaFieldTemplate<
   const { schema, selector, optionSchemaField, uiSchema } = props;
 
   const uiOptions = uiSchema?.["ui:options"] as
-    | Record<string, unknown>
+    | UiSchema["ui:options"]
     | undefined;
   const suppressMultiSchema = uiOptions?.suppressMultiSchema === true;
 

web/src/components/config-form/theme/templates/ObjectFieldTemplate.tsx

@@ -13,6 +13,7 @@ import { LuChevronDown, LuChevronRight, LuPlus } from "react-icons/lu";
 import { useTranslation } from "react-i18next";
 import { cn } from "@/lib/utils";
 import { getTranslatedLabel } from "@/utils/i18n";
+import { ConfigFormContext } from "@/types/configForm";
 
 /**
  * Build the i18n translation key path for nested fields using the field path
@@ -60,8 +61,7 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
     disabled,
     readonly,
   } = props;
-  type FormContext = { i18nNamespace?: string };
-  const formContext = registry?.formContext as FormContext | undefined;
+  const formContext = registry?.formContext as ConfigFormContext | undefined;
 
   // Check if this is a root-level object
   const isRoot = registry?.rootSchema === schema;

web/src/components/config-form/theme/widgets/ObjectLabelSwitchesWidget.tsx

@@ -1,9 +1,10 @@
 // Object Label Switches Widget - For selecting objects via switches
-import type { WidgetProps } from "@rjsf/utils";
+import { WidgetProps } from "@rjsf/utils";
 import { SwitchesWidget } from "./SwitchesWidget";
-import type { FormContext } from "./SwitchesWidget";
+import { FormContext } from "./SwitchesWidget";
 import { getTranslatedLabel } from "@/utils/i18n";
-import type { FrigateConfig } from "@/types/frigateConfig";
+import { FrigateConfig } from "@/types/frigateConfig";
+import { JsonObject } from "@/types/configForm";
 
 // Collect labelmap values (human-readable labels) from a labelmap object.
 function collectLabelmapLabels(labelmap: unknown, labels: Set<string>) {
@@ -11,7 +12,7 @@ function collectLabelmapLabels(labelmap: unknown, labels: Set<string>) {
     return;
   }
 
-  Object.values(labelmap as Record<string, unknown>).forEach((value) => {
+  Object.values(labelmap as JsonObject).forEach((value) => {
     if (typeof value === "string" && value.trim().length > 0) {
       labels.add(value);
     }
@@ -47,18 +48,30 @@ function getObjectLabels(context: FormContext): string[] {
 
   if (context) {
     // context.cameraValue and context.globalValue should be the entire objects section
-    const trackValue = context.cameraValue?.track;
-    if (Array.isArray(trackValue)) {
-      cameraLabels = trackValue.filter(
-        (item): item is string => typeof item === "string",
-      );
+    if (
+      context.cameraValue &&
+      typeof context.cameraValue === "object" &&
+      !Array.isArray(context.cameraValue)
+    ) {
+      const trackValue = (context.cameraValue as JsonObject).track;
+      if (Array.isArray(trackValue)) {
+        cameraLabels = trackValue.filter(
+          (item): item is string => typeof item === "string",
+        );
+      }
     }
 
-    const globalTrackValue = context.globalValue?.track;
-    if (Array.isArray(globalTrackValue)) {
-      globalLabels = globalTrackValue.filter(
-        (item): item is string => typeof item === "string",
-      );
+    if (
+      context.globalValue &&
+      typeof context.globalValue === "object" &&
+      !Array.isArray(context.globalValue)
+    ) {
+      const globalTrackValue = (context.globalValue as JsonObject).track;
+      if (Array.isArray(globalTrackValue)) {
+        globalLabels = globalTrackValue.filter(
+          (item): item is string => typeof item === "string",
+        );
+      }
     }
   }
 

web/src/components/config-form/theme/widgets/SwitchesWidget.tsx

@@ -1,5 +1,5 @@
 // Generic Switches Widget - Reusable component for selecting from any list of entities
-import type { WidgetProps } from "@rjsf/utils";
+import { WidgetProps } from "@rjsf/utils";
 import { useMemo, useState } from "react";
 import { Switch } from "@/components/ui/switch";
 import { Button } from "@/components/ui/button";
@@ -10,13 +10,14 @@ import {
 } from "@/components/ui/collapsible";
 import { LuChevronDown, LuChevronRight } from "react-icons/lu";
 import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
+import { ConfigFormContext } from "@/types/configForm";
 
-type FormContext = {
-  cameraValue?: Record<string, unknown>;
-  globalValue?: Record<string, unknown>;
+type FormContext = Pick<
+  ConfigFormContext,
+  "cameraValue" | "globalValue" | "fullCameraConfig" | "fullConfig" | "t"
+> & {
   fullCameraConfig?: CameraConfig;
   fullConfig?: FrigateConfig;
-  t?: (key: string, options?: Record<string, unknown>) => string;
 };
 
 export type { FormContext };