add new ui options for collapsibles

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,13 +66,16 @@ const record: SectionConfigOverrides = {
       "detections.retain.mode": {
         "ui:options": { enumI18nPrefix: "retainMode" },
       },
-      "preview.quality": {
+      preview: {
+        "ui:options": { defaultOpen: true, disableCollapsible: true },
+        quality: {
           "ui:options": {
             enumI18nPrefix: "previewQuality",
           },
         },
       },
     },
+  },
   global: {
     restartRequired: [],
   },

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,13 +461,8 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
     );
   }
 
-  // Nested objects render as collapsible cards
+  // Label/description/docs header shared by the collapsible and static layouts.
-  return (
+  const cardHeaderContent = (
-    <Card className="w-full">
-      <Collapsible open={isOpen} onOpenChange={setIsOpen}>
-        <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(
@@ -473,9 +471,7 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
         )}
       >
         {inferredLabel}
-                  {objectRequiresRestart && (
+        {objectRequiresRestart && <RestartRequiredIndicator className="ml-2" />}
-                    <RestartRequiredIndicator className="ml-2" />
-                  )}
       </CardTitle>
       {inferredDescription && (
         <p className="mt-1 text-xs text-muted-foreground">
@@ -497,17 +493,10 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
         </div>
       )}
     </div>
-              {isOpen ? (
+  );
-                <LuChevronDown className="h-4 w-4 shrink-0" />
+
-              ) : (
+  // Body shared by the collapsible and static layouts.
-                <LuChevronRight className="h-4 w-4 shrink-0" />
+  const cardBody = hasCustomChildren ? (
-              )}
-            </div>
-          </CardHeader>
-        </CollapsibleTrigger>
-        <CollapsibleContent>
-          <CardContent className="space-y-6 p-4 pt-0">
-            {hasCustomChildren ? (
     children
   ) : (
     <>
@@ -529,8 +518,36 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
         {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">
+      <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+        <CollapsibleTrigger asChild>
+          <CardHeader className="cursor-pointer p-4 transition-colors hover:bg-muted/50">
+            <div className="flex items-center justify-between">
+              {cardHeaderContent}
+              {isOpen ? (
+                <LuChevronDown className="h-4 w-4 shrink-0" />
+              ) : (
+                <LuChevronRight className="h-4 w-4 shrink-0" />
               )}
-          </CardContent>
+            </div>
+          </CardHeader>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <CardContent className="space-y-6 p-4 pt-0">{cardBody}</CardContent>
         </CollapsibleContent>
       </Collapsible>
     </Card>