UI tweaks (#23492)

* slightly darken bg-card

* change menu label

* move snapshot retain out of advanced fields

* add new ui options for collapsibles

* backend title and description

* remove unused snapshot retention field

* update reference config

* remove further references to snapshots retain.mode

docs/docs/configuration/advanced/reference.md

@@ -655,11 +655,6 @@ snapshots:
   retain:
     # Required: Default retention days (default: shown below)
     default: 10
-    # Optional: Mode for retention. (default: shown below)
-    #   all - save all snapshots regardless of activity
-    #   motion - save snapshots for any detected motion
-    #   active_objects - save snapshots for active/moving objects
-    mode: motion
     # Optional: Per object retention days
     objects:
       person: 15

docs/docs/configuration/snapshots.md

@@ -111,7 +111,6 @@ Navigate to <NavPath path="Settings > Global configuration > Snapshots" />.
 | Field                                              | Description                                                                         |
 | -------------------------------------------------- | ----------------------------------------------------------------------------------- |
 | **Snapshot retention > Default retention**         | Number of days to retain snapshots (default: 10)                                    |
-| **Snapshot retention > Retention mode**            | Retention mode: `all`, `motion`, or `active_objects`                                |
 | **Snapshot retention > Object retention > Person** | Per-object overrides for retention days (e.g., keep `person` snapshots for 15 days) |
 
 </TabItem>
@@ -122,7 +121,6 @@ snapshots:
   enabled: True
   retain:
     default: 10
-    mode: motion
     objects:
       person: 15
 ```

frigate/config/camera/camera.py

@@ -100,8 +100,8 @@ class CameraConfig(FrigateBaseModel):
         description="Settings for face detection and recognition for this camera.",
     )
     ffmpeg: CameraFfmpegConfig = Field(
-        title="FFmpeg",
-        description="FFmpeg settings including binary path, args, hwaccel options, and per-role output args.",
+        title="Streams (FFmpeg)",
+        description="Camera stream inputs and FFmpeg options, including binary path, args, hwaccel, and per-role output args.",
     )
     live: CameraLiveConfig = Field(
         default_factory=CameraLiveConfig,

frigate/config/camera/snapshots.py

@@ -3,7 +3,6 @@ from typing import Optional
 from pydantic import Field
 
 from ..base import FrigateBaseModel
-from .record import RetainModeEnum
 
 __all__ = ["SnapshotsConfig", "RetainConfig"]
 
@@ -14,11 +13,6 @@ class RetainConfig(FrigateBaseModel):
         title="Default retention",
         description="Default number of days to retain snapshots.",
     )
-    mode: RetainModeEnum = Field(
-        default=RetainModeEnum.motion,
-        title="Retention mode",
-        description="Mode for retention: all (save all segments), motion (save segments with motion), or active_objects (save segments with active objects).",
-    )
     objects: dict[str, float] = Field(
         default_factory=dict,
         title="Object retention",

web/public/locales/en/config/cameras.json

@@ -152,8 +152,8 @@
     }
   },
   "ffmpeg": {
-    "label": "FFmpeg",
-    "description": "FFmpeg settings including binary path, args, hwaccel options, and per-role output args.",
+    "label": "Streams (FFmpeg)",
+    "description": "Camera stream inputs and FFmpeg options, including binary path, args, hwaccel, and per-role output args.",
     "path": {
       "label": "FFmpeg path",
       "description": "Path to the FFmpeg binary to use or a version alias (\"7.0\" or \"8.0\")."
@@ -666,10 +666,6 @@
         "label": "Default retention",
         "description": "Default number of days to retain snapshots."
       },
-      "mode": {
-        "label": "Retention mode",
-        "description": "Mode for retention: all (save all segments), motion (save segments with motion), or active_objects (save segments with active objects)."
-      },
       "objects": {
         "label": "Object retention",
         "description": "Per-object overrides for snapshot retention days."

web/public/locales/en/config/global.json

@@ -1176,10 +1176,6 @@
         "label": "Default retention",
         "description": "Default number of days to retain snapshots."
       },
-      "mode": {
-        "label": "Retention mode",
-        "description": "Mode for retention: all (save all segments), motion (save segments with motion), or active_objects (save segments with active objects)."
-      },
       "objects": {
         "label": "Object retention",
         "description": "Per-object overrides for snapshot retention days."

web/public/locales/en/views/settings.json

@@ -85,7 +85,7 @@
     "integrationObjectClassification": "Object classification",
     "integrationAudioTranscription": "Audio transcription",
     "cameraDetect": "Object detection",
-    "cameraFfmpeg": "FFmpeg",
+    "cameraFfmpeg": "Streams (FFmpeg)",
     "cameraRecording": "Recording",
     "cameraSnapshots": "Snapshots",
     "cameraMotion": "Motion detection",

web/src/components/config-form/section-configs/record.ts

@@ -44,7 +44,14 @@ const record: SectionConfigOverrides = {
     hiddenFields: ["enabled_in_config", "sync_recordings"],
     advancedFields: ["expire_interval", "preview", "export"],
     uiSchema: {
+      continuous: {
+        "ui:options": { defaultOpen: true, disableCollapsible: true },
+      },
+      motion: {
+        "ui:options": { defaultOpen: true, disableCollapsible: true },
+      },
       export: {
+        "ui:options": { defaultOpen: true, disableCollapsible: true },
         hwaccel_args: {
           "ui:widget": "FfmpegArgsWidget",
           "ui:options": {
@@ -59,9 +66,12 @@ const record: SectionConfigOverrides = {
       "detections.retain.mode": {
         "ui:options": { enumI18nPrefix: "retainMode" },
       },
-      "preview.quality": {
-        "ui:options": {
-          enumI18nPrefix: "previewQuality",
+      preview: {
+        "ui:options": { defaultOpen: true, disableCollapsible: true },
+        quality: {
+          "ui:options": {
+            enumI18nPrefix: "previewQuality",
+          },
         },
       },
     },

web/src/components/config-form/section-configs/snapshots.ts

@@ -21,13 +21,14 @@ const snapshots: SectionConfigOverrides = {
       "crop",
       "quality",
       "timestamp",
+      "required_zones",
       "retain",
     ],
     fieldGroups: {
       display: ["bounding_box", "crop", "quality", "timestamp"],
     },
     hiddenFields: ["enabled_in_config"],
-    advancedFields: ["height", "quality", "retain"],
+    advancedFields: ["height", "quality"],
     uiSchema: {
       required_zones: {
         "ui:widget": "zoneNames",
@@ -35,11 +36,6 @@ const snapshots: SectionConfigOverrides = {
           suppressMultiSchema: true,
         },
       },
-      "retain.mode": {
-        "ui:options": {
-          enumI18nPrefix: "retainMode",
-        },
-      },
     },
   },
   global: {

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

@@ -156,7 +156,8 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
   };
 
   const hasModifiedDescendants = checkSubtreeModified(fieldPath);
-  const [isOpen, setIsOpen] = useState(hasModifiedDescendants);
+  const defaultOpen = uiSchema?.["ui:options"]?.defaultOpen === true;
+  const [isOpen, setIsOpen] = useState(hasModifiedDescendants || defaultOpen);
   const resetKey = `${formContext?.level ?? "global"}::${
     formContext?.cameraName ?? "global"
   }`;
@@ -192,6 +193,8 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
     (uiSchema?.["ui:groups"] as Record<string, string[]> | undefined) || {};
   const disableNestedCard =
     uiSchema?.["ui:options"]?.disableNestedCard === true;
+  const disableCollapsible =
+    uiSchema?.["ui:options"]?.disableCollapsible === true;
 
   const isHiddenProp = (prop: (typeof properties)[number]) =>
     (prop.content.props as RjsfElementProps).uiSchema?.["ui:widget"] ===
@@ -228,10 +231,10 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
   useEffect(() => {
     if (lastResetKeyRef.current !== resetKey) {
       lastResetKeyRef.current = resetKey;
-      setIsOpen(hasModifiedDescendants);
+      setIsOpen(hasModifiedDescendants || defaultOpen);
       setShowAdvanced(hasModifiedAdvanced);
     }
-  }, [resetKey, hasModifiedDescendants, hasModifiedAdvanced]);
+  }, [resetKey, hasModifiedDescendants, hasModifiedAdvanced, defaultOpen]);
   const { children } = props as ObjectFieldTemplateProps & {
     children?: ReactNode;
   };
@@ -458,6 +461,75 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
     );
   }
 
+  // Label/description/docs header shared by the collapsible and static layouts.
+  const cardHeaderContent = (
+    <div className="min-w-0 pr-3">
+      <CardTitle
+        className={cn(
+          "flex items-center text-sm",
+          hasModifiedDescendants && "text-unsaved",
+        )}
+      >
+        {inferredLabel}
+        {objectRequiresRestart && <RestartRequiredIndicator className="ml-2" />}
+      </CardTitle>
+      {inferredDescription && (
+        <p className="mt-1 text-xs text-muted-foreground">
+          {inferredDescription}
+        </p>
+      )}
+      {fieldDocsUrl && (
+        <div className="mt-1 flex items-center text-xs text-primary-variant">
+          <Link
+            to={fieldDocsUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {t("readTheDocumentation", { ns: "common" })}
+            <LuExternalLink className="ml-2 inline-flex size-3" />
+          </Link>
+        </div>
+      )}
+    </div>
+  );
+
+  // Body shared by the collapsible and static layouts.
+  const cardBody = hasCustomChildren ? (
+    children
+  ) : (
+    <>
+      {renderGroupedFields(regularProps)}
+      <AddPropertyButton
+        onAddProperty={onAddProperty}
+        schema={schema}
+        uiSchema={uiSchema}
+        formData={formData}
+        disabled={disabled}
+        readonly={readonly}
+      />
+
+      <AdvancedCollapsible
+        count={advancedProps.length}
+        open={showAdvanced}
+        onOpenChange={setShowAdvanced}
+      >
+        {renderGroupedFields(advancedProps)}
+      </AdvancedCollapsible>
+    </>
+  );
+
+  // Static (non-collapsible) card: keep the labeled header, always show content.
+  if (disableCollapsible) {
+    return (
+      <Card className="w-full">
+        <CardHeader className="p-4">{cardHeaderContent}</CardHeader>
+        <CardContent className="space-y-6 p-4 pt-0">{cardBody}</CardContent>
+      </Card>
+    );
+  }
+
   // Nested objects render as collapsible cards
   return (
     <Card className="w-full">
@@ -465,38 +537,7 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
         <CollapsibleTrigger asChild>
           <CardHeader className="cursor-pointer p-4 transition-colors hover:bg-muted/50">
             <div className="flex items-center justify-between">
-              <div className="min-w-0 pr-3">
-                <CardTitle
-                  className={cn(
-                    "flex items-center text-sm",
-                    hasModifiedDescendants && "text-unsaved",
-                  )}
-                >
-                  {inferredLabel}
-                  {objectRequiresRestart && (
-                    <RestartRequiredIndicator className="ml-2" />
-                  )}
-                </CardTitle>
-                {inferredDescription && (
-                  <p className="mt-1 text-xs text-muted-foreground">
-                    {inferredDescription}
-                  </p>
-                )}
-                {fieldDocsUrl && (
-                  <div className="mt-1 flex items-center text-xs text-primary-variant">
-                    <Link
-                      to={fieldDocsUrl}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="inline"
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      {t("readTheDocumentation", { ns: "common" })}
-                      <LuExternalLink className="ml-2 inline-flex size-3" />
-                    </Link>
-                  </div>
-                )}
-              </div>
+              {cardHeaderContent}
               {isOpen ? (
                 <LuChevronDown className="h-4 w-4 shrink-0" />
               ) : (
@@ -506,31 +547,7 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
           </CardHeader>
         </CollapsibleTrigger>
         <CollapsibleContent>
-          <CardContent className="space-y-6 p-4 pt-0">
-            {hasCustomChildren ? (
-              children
-            ) : (
-              <>
-                {renderGroupedFields(regularProps)}
-                <AddPropertyButton
-                  onAddProperty={onAddProperty}
-                  schema={schema}
-                  uiSchema={uiSchema}
-                  formData={formData}
-                  disabled={disabled}
-                  readonly={readonly}
-                />
-
-                <AdvancedCollapsible
-                  count={advancedProps.length}
-                  open={showAdvanced}
-                  onOpenChange={setShowAdvanced}
-                >
-                  {renderGroupedFields(advancedProps)}
-                </AdvancedCollapsible>
-              </>
-            )}
-          </CardContent>
+          <CardContent className="space-y-6 p-4 pt-0">{cardBody}</CardContent>
         </CollapsibleContent>
       </Collapsible>
     </Card>

web/themes/theme-default.css

@@ -113,8 +113,8 @@
     --foreground: hsl(0, 0%, 100%);
     --foreground: 0, 0%, 100%;
 
-    --card: hsl(0, 0%, 15%);
-    --card: 0, 0%, 15%;
+    --card: hsl(0, 0%, 12%);
+    --card: 0, 0%, 12%;
 
     --card-foreground: hsl(210, 40%, 98%);
     --card-foreground: 210 40% 98%;