Add Camera Wizard improvements (#20876)

* backend api endpoint

* don't add no-credentials version of streams to rtsp_candidates

* frontend types

* improve types

* add optional probe dialog to wizard step 1

* i18n

* form description and field change

* add onvif form description

* match onvif probe pane with other steps in the wizard

* refactor to add probe and snapshot as step 2

* consolidate probe dialog

* don't change dialog size

* radio button style

* refactor to select onvif urls via combobox in step 3

* i18n

* add scrollbar container

* i18n cleanup

* fix button activity indicator

* match test parsing in step 3 with step 2

* hide resolution if both width and height are zero

* use drawer for stream selection on mobile in step 3

* suppress double toasts

* api endpoint description

web/src/components/settings/CameraWizardDialog.tsx

@@ -12,15 +12,15 @@ import { toast } from "sonner";
 import useSWR from "swr";
 import axios from "axios";
 import Step1NameCamera from "@/components/settings/wizard/Step1NameCamera";
-import Step2StreamConfig from "@/components/settings/wizard/Step2StreamConfig";
-import Step3Validation from "@/components/settings/wizard/Step3Validation";
+import Step2ProbeOrSnapshot from "@/components/settings/wizard/Step2ProbeOrSnapshot";
+import Step3StreamConfig from "@/components/settings/wizard/Step3StreamConfig";
+import Step4Validation from "@/components/settings/wizard/Step4Validation";
 import type {
   WizardFormData,
   CameraConfigData,
   ConfigSetBody,
 } from "@/types/cameraWizard";
 import { processCameraName } from "@/utils/cameraUtil";
-import { isDesktop } from "react-device-detect";
 import { cn } from "@/lib/utils";
 
 type WizardState = {
@@ -57,6 +57,7 @@ const wizardReducer = (
 
 const STEPS = [
   "cameraWizard.steps.nameAndConnection",
+  "cameraWizard.steps.probeOrSnapshot",
   "cameraWizard.steps.streamConfiguration",
   "cameraWizard.steps.validationAndTesting",
 ];
@@ -100,20 +101,20 @@ export default function CameraWizardDialog({
   const canProceedToNext = useCallback((): boolean => {
     switch (currentStep) {
       case 0:
-        // Can proceed if camera name is set and at least one stream exists
-        return !!(
-          state.wizardData.cameraName &&
-          (state.wizardData.streams?.length ?? 0) > 0
-        );
+        // Step 1: Can proceed if camera name is set
+        return !!state.wizardData.cameraName;
       case 1:
-        // Can proceed if at least one stream has 'detect' role
+        // Step 2: Can proceed if at least one stream exists (from probe or manual test)
+        return (state.wizardData.streams?.length ?? 0) > 0;
+      case 2:
+        // Step 3: Can proceed if at least one stream has 'detect' role
         return !!(
           state.wizardData.streams?.some((stream) =>
             stream.roles.includes("detect"),
           ) ?? false
         );
-      case 2:
-        // Always can proceed from final step (save will be handled there)
+      case 3:
+        // Step 4: Always can proceed from final step (save will be handled there)
         return true;
       default:
         return false;
@@ -340,13 +341,7 @@ export default function CameraWizardDialog({
     <Dialog open={open} onOpenChange={handleClose}>
       <DialogContent
         className={cn(
-          "max-h-[90dvh] max-w-xl overflow-y-auto",
-          isDesktop &&
-            currentStep == 0 &&
-            state.wizardData?.streams?.[0]?.testResult?.snapshot &&
-            "max-w-4xl",
-          isDesktop && currentStep == 1 && "max-w-2xl",
-          isDesktop && currentStep > 1 && "max-w-4xl",
+          "scrollbar-container max-h-[90dvh] max-w-3xl overflow-y-auto",
         )}
         onInteractOutside={(e) => {
           e.preventDefault();
@@ -385,7 +380,16 @@ export default function CameraWizardDialog({
               />
             )}
             {currentStep === 1 && (
-              <Step2StreamConfig
+              <Step2ProbeOrSnapshot
+                wizardData={state.wizardData}
+                onUpdate={onUpdate}
+                onNext={handleNext}
+                onBack={handleBack}
+                probeMode={state.wizardData.probeMode ?? true}
+              />
+            )}
+            {currentStep === 2 && (
+              <Step3StreamConfig
                 wizardData={state.wizardData}
                 onUpdate={onUpdate}
                 onBack={handleBack}
@@ -393,8 +397,8 @@ export default function CameraWizardDialog({
                 canProceed={canProceedToNext()}
               />
             )}
-            {currentStep === 2 && (
-              <Step3Validation
+            {currentStep === 3 && (
+              <Step4Validation
                 wizardData={state.wizardData}
                 onUpdate={onUpdate}
                 onSave={handleSave}