Full UI configuration (#22151)

* use react-jsonschema-form for UI config

* don't use properties wrapper when generating config i18n json

* configure for full i18n support

* section fields

* add descriptions to all fields for i18n

* motion i18n

* fix nullable fields

* sanitize internal fields

* add switches widgets and use friendly names

* fix nullable schema entries

* ensure update_topic is added to api calls

this needs further backend implementation to work correctly

* add global sections, camera config overrides, and reset button

* i18n

* add reset logic to global config view

* tweaks

* fix sections and live validation

* fix validation for schema objects that can be null

* generic and custom per-field validation

* improve generic error validation messages

* remove show advanced fields switch

* tweaks

* use shadcn theme

* fix array field template

* i18n tweaks

* remove collapsible around root section

* deep merge schema for advanced fields

* add array field item template and fix ffmpeg section

* add missing i18n keys

* tweaks

* comment out api call for testing

* add config groups as a separate i18n namespace

* add descriptions to all pydantic fields

* make titles more concise

* new titles as i18n

* update i18n config generation script to use json schema

* tweaks

* tweaks

* rebase

* clean up

* form tweaks

* add wildcards and fix object filter fields

* add field template for additionalproperties schema objects

* improve typing

* add section description from schema and clarify global vs camera level descriptions

* separate and consolidate global and camera i18n namespaces

* clean up now obsolete namespaces

* tweaks

* refactor sections and overrides

* add ability to render components before and after fields

* fix titles

* chore(sections): remove legacy single-section components replaced by template

* refactor configs to use individual files with a template

* fix review description

* apply hidden fields after ui schema

* move util

* remove unused i18n

* clean up error messages

* fix fast refresh

* add custom validation and use it for ffmpeg input roles

* update nav tree

* remove unused

* re-add override and modified indicators

* mark pending changes and add confirmation dialog for resets

* fix red unsaved dot

* tweaks

* add docs links, readonly keys, and restart required per field

* add special case and comments for global motion section

* add section form special cases

* combine review sections

* tweaks

* add audio labels endpoint

* add audio label switches and input to filter list

* fix type

* remove key from config when resetting to default/global

* don't show description for new key/val fields

* tweaks

* spacing tweaks

* add activity indicator and scrollbar tweaks

* add docs to filter fields

* wording changes

* fix global ffmpeg section

* add review classification zones to review form

* add backend endpoint and frontend widget for ffmpeg presets and manual args

* improve wording

* hide descriptions for additional properties arrays

* add warning log about incorrectly nested model config

* spacing and language tweaks

* fix i18n keys

* networking section docs and description

* small wording tweaks

* add layout grid field

* refactor with shared utilities

* field order

* add individual detectors to schema

add detector titles and descriptions (docstrings in pydantic are used for descriptions) and add i18n keys to globals

* clean up detectors section and i18n

* don't save model config back to yaml when saving detectors

* add full detectors config to api model dump

works around the way we use detector plugins so we can have the full detector config for the frontend

* add restart button to toast when restart is required

* add ui option to remove inner cards

* fix buttons

* section tweaks

* don't zoom into text on mobile

* make buttons sticky at bottom of sections

* small tweaks

* highlight label of changed fields

* add null to enum list when unwrapping

* refactor to shared utils and add save all button

* add undo all button

* add RJSF to dictionary

* consolidate utils

* preserve form data when changing cameras

* add mono fonts

* add popover to show what fields will be saved

* fix mobile menu not re-rendering with unsaved dots

* tweaks

* fix logger and env vars config section saving

use escaped periods in keys to retain them in the config file (eg "frigate.embeddings")

* add timezone widget

* role map field with validation

* fix validation for model section

* add another hidden field

* add footer message for required restart

* use rjsf for notifications view

* fix config saving

* add replace rules field

* default column layout and add field sizing

* clean up field template

* refactor profile settings to match rjsf forms

* tweaks

* refactor frigate+ view and make tweaks to sections

* show frigate+ model info in detection model settings when using a frigate+ model

* update restartRequired for all fields

* fix restart fields

* tweaks and add ability enable disabled cameras

more backend changes required

* require restart when enabling camera that is disabled in config

* disable save when form is invalid

* refactor ffmpeg section for readability

* change label

* clean up camera inputs fields

* misc tweaks to ffmpeg section

- add raw paths endpoint to ensure credentials get saved
- restart required tooltip

* maintenance settings tweaks

* don't mutate with lodash

* fix description re-rendering for nullable object fields

* hide reindex field

* update rjsf

* add frigate+ description to settings pane

* disable save all when any section is invalid

* show translated field name in validation error pane

* clean up

* remove unused

* fix genai merge

* fix genai

web/src/components/config-form/theme/frigateTheme.ts

@@ -0,0 +1,95 @@
+// Custom RJSF Theme for Frigate
+// Maps RJSF templates and widgets to shadcn/ui components
+
+import type {
+  WidgetProps,
+  FieldTemplateProps,
+  RegistryWidgetsType,
+  RegistryFieldsType,
+  TemplatesType,
+} from "@rjsf/utils";
+
+import { SwitchWidget } from "./widgets/SwitchWidget";
+import { SelectWidget } from "./widgets/SelectWidget";
+import { TextWidget } from "./widgets/TextWidget";
+import { PasswordWidget } from "./widgets/PasswordWidget";
+import { RangeWidget } from "./widgets/RangeWidget";
+import { TagsWidget } from "./widgets/TagsWidget";
+import { ColorWidget } from "./widgets/ColorWidget";
+import { TextareaWidget } from "./widgets/TextareaWidget";
+import { SwitchesWidget } from "./widgets/SwitchesWidget";
+import { ObjectLabelSwitchesWidget } from "./widgets/ObjectLabelSwitchesWidget";
+import { AudioLabelSwitchesWidget } from "./widgets/AudioLabelSwitchesWidget";
+import { ZoneSwitchesWidget } from "./widgets/ZoneSwitchesWidget";
+import { ArrayAsTextWidget } from "./widgets/ArrayAsTextWidget";
+import { FfmpegArgsWidget } from "./widgets/FfmpegArgsWidget";
+import { InputRolesWidget } from "./widgets/InputRolesWidget";
+import { TimezoneSelectWidget } from "./widgets/TimezoneSelectWidget";
+import { CameraPathWidget } from "./widgets/CameraPathWidget";
+
+import { FieldTemplate } from "./templates/FieldTemplate";
+import { ObjectFieldTemplate } from "./templates/ObjectFieldTemplate";
+import { ArrayFieldTemplate } from "./templates/ArrayFieldTemplate";
+import { ArrayFieldItemTemplate } from "./templates/ArrayFieldItemTemplate";
+import { BaseInputTemplate } from "./templates/BaseInputTemplate";
+import { DescriptionFieldTemplate } from "./templates/DescriptionFieldTemplate";
+import { TitleFieldTemplate } from "./templates/TitleFieldTemplate";
+import { ErrorListTemplate } from "./templates/ErrorListTemplate";
+import { MultiSchemaFieldTemplate } from "./templates/MultiSchemaFieldTemplate";
+import { WrapIfAdditionalTemplate } from "./templates/WrapIfAdditionalTemplate";
+
+import { LayoutGridField } from "./fields/LayoutGridField";
+import { DetectorHardwareField } from "./fields/DetectorHardwareField";
+import { ReplaceRulesField } from "./fields/ReplaceRulesField";
+import { CameraInputsField } from "./fields/CameraInputsField";
+
+export interface FrigateTheme {
+  widgets: RegistryWidgetsType;
+  templates: Partial<TemplatesType>;
+  fields: RegistryFieldsType;
+}
+
+export const frigateTheme: FrigateTheme = {
+  widgets: {
+    // Override default widgets with shadcn/ui styled versions
+    TextWidget: TextWidget,
+    PasswordWidget: PasswordWidget,
+    SelectWidget: SelectWidget,
+    CheckboxWidget: SwitchWidget,
+    ArrayAsTextWidget: ArrayAsTextWidget,
+    FfmpegArgsWidget: FfmpegArgsWidget,
+    CameraPathWidget: CameraPathWidget,
+    inputRoles: InputRolesWidget,
+    // Custom widgets
+    switch: SwitchWidget,
+    password: PasswordWidget,
+    select: SelectWidget,
+    range: RangeWidget,
+    tags: TagsWidget,
+    color: ColorWidget,
+    textarea: TextareaWidget,
+    switches: SwitchesWidget,
+    objectLabels: ObjectLabelSwitchesWidget,
+    audioLabels: AudioLabelSwitchesWidget,
+    zoneNames: ZoneSwitchesWidget,
+    timezoneSelect: TimezoneSelectWidget,
+  },
+  templates: {
+    FieldTemplate: FieldTemplate as React.ComponentType<FieldTemplateProps>,
+    ObjectFieldTemplate: ObjectFieldTemplate,
+    ArrayFieldTemplate: ArrayFieldTemplate,
+    ArrayFieldItemTemplate: ArrayFieldItemTemplate,
+    BaseInputTemplate: BaseInputTemplate as React.ComponentType<WidgetProps>,
+    DescriptionFieldTemplate: DescriptionFieldTemplate,
+    TitleFieldTemplate: TitleFieldTemplate,
+    ErrorListTemplate: ErrorListTemplate,
+    MultiSchemaFieldTemplate: MultiSchemaFieldTemplate,
+    WrapIfAdditionalTemplate: WrapIfAdditionalTemplate,
+  },
+  fields: {
+    LayoutGridField: LayoutGridField,
+    DetectorHardwareField: DetectorHardwareField,
+    ReplaceRulesField: ReplaceRulesField,
+    CameraInputsField: CameraInputsField,
+  },
+};