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/views/settings/UiSettingsView.tsx

@@ -1,10 +1,7 @@
-import Heading from "@/components/ui/heading";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
-import { useCallback, useContext, useEffect } from "react";
-import { Toaster } from "@/components/ui/sonner";
-import { toast } from "sonner";
-import { Separator } from "../../components/ui/separator";
+import { ReactNode, useCallback, useContext, useEffect } from "react";
+import { Toaster, toast } from "sonner";
 import { Button } from "../../components/ui/button";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
@@ -22,28 +19,108 @@ import {
 } from "../../components/ui/select";
 import { useTranslation } from "react-i18next";
 import { AuthContext } from "@/context/auth-context";
+import {
+  SettingsGroupCard,
+  SPLIT_ROW_CLASS_NAME,
+  DESCRIPTION_CLASS_NAME,
+  CONTROL_COLUMN_CLASS_NAME,
+} from "@/components/card/SettingsGroupCard";
+import Heading from "@/components/ui/heading";
 
-const PLAYBACK_RATE_DEFAULT = isSafari ? [0.5, 1, 2] : [0.5, 1, 2, 4, 8, 16];
 const WEEK_STARTS_ON = ["Sunday", "Monday"];
 
+type SwitchSettingRowProps = {
+  id: string;
+  label: string;
+  description: string;
+  checked: boolean | undefined;
+  onCheckedChange: (checked: boolean | undefined) => void;
+};
+
+function SwitchSettingRow({
+  id,
+  label,
+  description,
+  checked,
+  onCheckedChange,
+}: SwitchSettingRowProps) {
+  return (
+    <div className={SPLIT_ROW_CLASS_NAME}>
+      <div className="space-y-1.5">
+        <div className="flex items-center justify-between gap-4 md:block">
+          <Label className="cursor-pointer" htmlFor={id}>
+            {label}
+          </Label>
+          <div className="md:hidden">
+            <Switch
+              id={id}
+              checked={checked ?? false}
+              onCheckedChange={onCheckedChange}
+            />
+          </div>
+        </div>
+        <p className={DESCRIPTION_CLASS_NAME}>{description}</p>
+      </div>
+      <div className="hidden w-full md:flex md:max-w-2xl md:items-center">
+        <Switch
+          id={`${id}-desktop`}
+          checked={checked ?? false}
+          onCheckedChange={onCheckedChange}
+        />
+      </div>
+    </div>
+  );
+}
+
+type ValueSettingRowProps = {
+  id: string;
+  label: string;
+  description: string;
+  control: ReactNode;
+};
+
+function ValueSettingRow({
+  id,
+  label,
+  description,
+  control,
+}: ValueSettingRowProps) {
+  return (
+    <div className={SPLIT_ROW_CLASS_NAME}>
+      <div className="space-y-1.5">
+        <Label className="cursor-pointer" htmlFor={id}>
+          {label}
+        </Label>
+        <p className="hidden text-sm text-muted-foreground md:block">
+          {description}
+        </p>
+      </div>
+      <div className={`${CONTROL_COLUMN_CLASS_NAME} space-y-1.5`}>
+        {control}
+        <p className="text-sm text-muted-foreground md:hidden">{description}</p>
+      </div>
+    </div>
+  );
+}
+
 export default function UiSettingsView() {
   const { data: config } = useSWR<FrigateConfig>("config");
   const { t } = useTranslation("views/settings");
   const { auth } = useContext(AuthContext);
   const username = auth?.user?.username;
 
+  const PLAYBACK_RATE_DEFAULT = isSafari ? [0.5, 1, 2] : [0.5, 1, 2, 4, 8, 16];
+
   const clearStoredLayouts = useCallback(() => {
     if (!config) {
       return [];
     }
 
-    Object.entries(config.camera_groups).forEach(async (value) => {
-      await deleteUserNamespacedKey(`${value[0]}-draggable-layout`, username)
+    Object.entries(config.camera_groups).forEach(async ([cameraName]) => {
+      await deleteUserNamespacedKey(`${cameraName}-draggable-layout`, username)
         .then(() => {
           toast.success(
-            t("general.toast.success.clearStoredLayout", {
-              cameraName: value[0],
-            }),
+            t("general.toast.success.clearStoredLayout", { cameraName }),
             {
               position: "top-center",
             },
@@ -69,7 +146,7 @@ export default function UiSettingsView() {
       return [];
     }
 
-    await deleteUserNamespacedKey(`streaming-settings`, username)
+    await deleteUserNamespacedKey("streaming-settings", username)
       .then(() => {
         toast.success(t("general.toast.success.clearStreamingSettings"), {
           position: "top-center",
@@ -95,8 +172,6 @@ export default function UiSettingsView() {
     document.title = t("documentTitle.general");
   }, [t]);
 
-  // settings
-
   const [autoLive, setAutoLive] = useUserPersistence("autoLiveView", true);
   const [cameraNames, setCameraName] = useUserPersistence(
     "displayCameraNames",
@@ -110,229 +185,198 @@ export default function UiSettingsView() {
     3,
   );
 
+  const liveDashboardSwitchRows = [
+    {
+      id: "auto-live",
+      label: t("general.liveDashboard.automaticLiveView.label"),
+      description: t("general.liveDashboard.automaticLiveView.desc"),
+      checked: autoLive,
+      onCheckedChange: setAutoLive,
+    },
+    {
+      id: "images-only",
+      label: t("general.liveDashboard.playAlertVideos.label"),
+      description: t("general.liveDashboard.playAlertVideos.desc"),
+      checked: alertVideos,
+      onCheckedChange: setAlertVideos,
+    },
+    {
+      id: "camera-names",
+      label: t("general.liveDashboard.displayCameraNames.label"),
+      description: t("general.liveDashboard.displayCameraNames.desc"),
+      checked: cameraNames,
+      onCheckedChange: setCameraName,
+    },
+  ];
+
   return (
-    <>
-      <div className="flex size-full flex-col md:flex-row">
-        <Toaster position="top-center" closeButton={true} />
-        <div className="scrollbar-container order-last mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none">
-          <Heading as="h4" className="mb-2">
-            {t("general.title")}
-          </Heading>
+    <div className="flex size-full flex-col md:pb-8">
+      <Toaster position="top-center" closeButton={true} />
+      <Heading as="h4" className="mb-3">
+        {t("general.title")}
+      </Heading>
+      <div className="scrollbar-container mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2">
+        <div className="w-full max-w-5xl space-y-6">
+          <SettingsGroupCard title={t("general.liveDashboard.title")}>
+            <div className="space-y-6">
+              {liveDashboardSwitchRows.map((row) => (
+                <SwitchSettingRow key={row.id} {...row} />
+              ))}
 
-          <Separator className="my-2 flex bg-secondary" />
-
-          <Heading as="h4" className="my-2">
-            {t("general.liveDashboard.title")}
-          </Heading>
-
-          <div className="mt-2 space-y-6">
-            <div className="space-y-3">
-              <div className="flex flex-row items-center justify-start gap-2">
-                <Switch
-                  id="auto-live"
-                  checked={autoLive}
-                  onCheckedChange={setAutoLive}
-                />
-                <Label className="cursor-pointer" htmlFor="auto-live">
-                  {t("general.liveDashboard.automaticLiveView.label")}
-                </Label>
-              </div>
-              <div className="my-2 max-w-5xl text-sm text-muted-foreground">
-                <p>{t("general.liveDashboard.automaticLiveView.desc")}</p>
-              </div>
-            </div>
-            <div className="space-y-3">
-              <div className="flex flex-row items-center justify-start gap-2">
-                <Switch
-                  id="images-only"
-                  checked={alertVideos}
-                  onCheckedChange={setAlertVideos}
-                />
-                <Label className="cursor-pointer" htmlFor="images-only">
-                  {t("general.liveDashboard.playAlertVideos.label")}
-                </Label>
-              </div>
-              <div className="my-2 max-w-5xl text-sm text-muted-foreground">
-                <p>{t("general.liveDashboard.playAlertVideos.desc")}</p>
-              </div>
-            </div>
-            <div className="space-y-3">
-              <div className="flex flex-row items-center justify-start gap-2">
-                <Switch
-                  id="camera-names"
-                  checked={cameraNames}
-                  onCheckedChange={setCameraName}
-                />
-                <Label className="cursor-pointer" htmlFor="camera-names">
-                  {t("general.liveDashboard.displayCameraNames.label")}
-                </Label>
-              </div>
-              <div className="my-2 max-w-5xl text-sm text-muted-foreground">
-                <p>{t("general.liveDashboard.displayCameraNames.desc")}</p>
-              </div>
-            </div>
-            <div className="space-y-3">
-              <div className="flex flex-row items-center justify-start gap-2">
-                <Label
-                  className="cursor-pointer"
-                  htmlFor="live-fallback-timeout"
-                >
-                  {t("general.liveDashboard.liveFallbackTimeout.label")}
-                </Label>
-              </div>
-              <div className="my-2 max-w-5xl text-sm text-muted-foreground">
-                <p>{t("general.liveDashboard.liveFallbackTimeout.desc")}</p>
-              </div>
-              <Select
-                value={fallbackTimeout?.toString()}
-                onValueChange={(value) => setFallbackTimeout(parseInt(value))}
-              >
-                <SelectTrigger className="w-36">
-                  {t("time.second", {
-                    ns: "common",
-                    time: fallbackTimeout,
-                    count: fallbackTimeout,
-                  })}
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    {[1, 2, 3, 5, 8, 10, 12, 15].map((timeout) => (
-                      <SelectItem
-                        key={timeout}
-                        className="cursor-pointer"
-                        value={timeout.toString()}
-                      >
-                        {t("time.second", {
-                          ns: "common",
-                          time: timeout,
-                          count: timeout,
-                        })}
-                      </SelectItem>
-                    ))}
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-
-          <div className="my-3 flex w-full flex-col space-y-6">
-            <div className="mt-2 space-y-3">
-              <div className="space-y-0.5">
-                <div className="text-md">
-                  {t("general.storedLayouts.title")}
-                </div>
-                <div className="my-2 text-sm text-muted-foreground">
-                  <p>{t("general.storedLayouts.desc")}</p>
-                </div>
-              </div>
-              <Button
-                aria-label={t("general.storedLayouts.clearAll")}
-                onClick={clearStoredLayouts}
-              >
-                {t("general.storedLayouts.clearAll")}
-              </Button>
-            </div>
-
-            <div className="mt-2 space-y-3">
-              <div className="space-y-0.5">
-                <div className="text-md">
-                  {t("general.cameraGroupStreaming.title")}
-                </div>
-                <div className="my-2 max-w-5xl text-sm text-muted-foreground">
-                  <p>{t("general.cameraGroupStreaming.desc")}</p>
-                </div>
-              </div>
-              <Button
-                aria-label={t("general.cameraGroupStreaming.clearAll")}
-                onClick={clearStreamingSettings}
-              >
-                {t("general.cameraGroupStreaming.clearAll")}
-              </Button>
-            </div>
-
-            <Separator className="my-2 flex bg-secondary" />
-
-            <Heading as="h4" className="my-2">
-              {t("general.recordingsViewer.title")}
-            </Heading>
-
-            <div className="mt-2 space-y-6">
-              <div className="space-y-0.5">
-                <div className="text-md">
-                  {t("general.recordingsViewer.defaultPlaybackRate.label")}
-                </div>
-                <div className="my-2 text-sm text-muted-foreground">
-                  <p>
-                    {t("general.recordingsViewer.defaultPlaybackRate.desc")}
-                  </p>
-                </div>
-              </div>
-            </div>
-            <Select
-              value={playbackRate?.toString()}
-              onValueChange={(value) => setPlaybackRate(parseFloat(value))}
-            >
-              <SelectTrigger className="w-20">
-                {`${playbackRate}x`}
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  {PLAYBACK_RATE_DEFAULT.map((rate) => (
-                    <SelectItem
-                      key={rate}
-                      className="cursor-pointer"
-                      value={rate.toString()}
-                    >
-                      {rate}x
-                    </SelectItem>
-                  ))}
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-            <Separator className="my-2 flex bg-secondary" />
-
-            <Heading as="h4" className="my-2">
-              {t("general.calendar.title")}
-            </Heading>
-
-            <div className="mt-2 space-y-6">
-              <div className="space-y-0.5">
-                <div className="text-md">
-                  {t("general.calendar.firstWeekday.label")}
-                </div>
-                <div className="my-2 text-sm text-muted-foreground">
-                  <p>{t("general.calendar.firstWeekday.desc")}</p>
-                </div>
-              </div>
-            </div>
-            <Select
-              value={weekStartsOn?.toString()}
-              onValueChange={(value) => setWeekStartsOn(parseInt(value))}
-            >
-              <SelectTrigger className="w-32">
-                {t(
-                  "general.calendar.firstWeekday." +
-                    WEEK_STARTS_ON[weekStartsOn ?? 0].toLowerCase(),
+              <ValueSettingRow
+                id="live-fallback-timeout"
+                label={t("general.liveDashboard.liveFallbackTimeout.label")}
+                description={t(
+                  "general.liveDashboard.liveFallbackTimeout.desc",
                 )}
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  {WEEK_STARTS_ON.map((day, index) => (
-                    <SelectItem
-                      key={index}
-                      className="cursor-pointer"
-                      value={index.toString()}
+                control={
+                  <Select
+                    value={fallbackTimeout?.toString()}
+                    onValueChange={(value) =>
+                      setFallbackTimeout(parseInt(value, 10))
+                    }
+                  >
+                    <SelectTrigger
+                      id="live-fallback-timeout"
+                      className="w-full md:w-36"
                     >
-                      {t("general.calendar.firstWeekday." + day.toLowerCase())}
-                    </SelectItem>
-                  ))}
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-            <Separator className="my-2 flex bg-secondary" />
-          </div>
+                      {t("time.second", {
+                        ns: "common",
+                        time: fallbackTimeout,
+                        count: fallbackTimeout,
+                      })}
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectGroup>
+                        {[1, 2, 3, 5, 8, 10, 12, 15].map((timeout) => (
+                          <SelectItem
+                            key={timeout}
+                            className="cursor-pointer"
+                            value={timeout.toString()}
+                          >
+                            {t("time.second", {
+                              ns: "common",
+                              time: timeout,
+                              count: timeout,
+                            })}
+                          </SelectItem>
+                        ))}
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                }
+              />
+
+              <ValueSettingRow
+                id="stored-layouts-clear"
+                label={t("general.storedLayouts.title")}
+                description={t("general.storedLayouts.desc")}
+                control={
+                  <Button
+                    id="stored-layouts-clear"
+                    aria-label={t("general.storedLayouts.clearAll")}
+                    className="w-full md:w-auto"
+                    onClick={clearStoredLayouts}
+                  >
+                    {t("general.storedLayouts.clearAll")}
+                  </Button>
+                }
+              />
+
+              <ValueSettingRow
+                id="camera-group-streaming-clear"
+                label={t("general.cameraGroupStreaming.title")}
+                description={t("general.cameraGroupStreaming.desc")}
+                control={
+                  <Button
+                    id="camera-group-streaming-clear"
+                    aria-label={t("general.cameraGroupStreaming.clearAll")}
+                    className="w-full md:w-auto"
+                    onClick={clearStreamingSettings}
+                  >
+                    {t("general.cameraGroupStreaming.clearAll")}
+                  </Button>
+                }
+              />
+            </div>
+          </SettingsGroupCard>
+
+          <SettingsGroupCard title={t("general.recordingsViewer.title")}>
+            <ValueSettingRow
+              id="default-playback-rate"
+              label={t("general.recordingsViewer.defaultPlaybackRate.label")}
+              description={t(
+                "general.recordingsViewer.defaultPlaybackRate.desc",
+              )}
+              control={
+                <Select
+                  value={playbackRate?.toString()}
+                  onValueChange={(value) => setPlaybackRate(parseFloat(value))}
+                >
+                  <SelectTrigger
+                    id="default-playback-rate"
+                    className="w-full md:w-20"
+                  >
+                    {`${playbackRate}x`}
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      {PLAYBACK_RATE_DEFAULT.map((rate) => (
+                        <SelectItem
+                          key={rate}
+                          className="cursor-pointer"
+                          value={rate.toString()}
+                        >
+                          {rate}x
+                        </SelectItem>
+                      ))}
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              }
+            />
+          </SettingsGroupCard>
+
+          <SettingsGroupCard title={t("general.calendar.title")}>
+            <ValueSettingRow
+              id="first-weekday"
+              label={t("general.calendar.firstWeekday.label")}
+              description={t("general.calendar.firstWeekday.desc")}
+              control={
+                <Select
+                  value={weekStartsOn?.toString()}
+                  onValueChange={(value) =>
+                    setWeekStartsOn(parseInt(value, 10))
+                  }
+                >
+                  <SelectTrigger id="first-weekday" className="w-full md:w-32">
+                    {t(
+                      "general.calendar.firstWeekday." +
+                        WEEK_STARTS_ON[weekStartsOn ?? 0].toLowerCase(),
+                    )}
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      {WEEK_STARTS_ON.map((day, index) => (
+                        <SelectItem
+                          key={index}
+                          className="cursor-pointer"
+                          value={index.toString()}
+                        >
+                          {t(
+                            "general.calendar.firstWeekday." +
+                              day.toLowerCase(),
+                          )}
+                        </SelectItem>
+                      ))}
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              }
+            />
+          </SettingsGroupCard>
         </div>
       </div>
-    </>
+    </div>
   );
 }