Add Camera Wizard (#20461)

* fetch more from ffprobe

* add detailed param to ffprobe endpoint

* add dots variant to step indicator

* add classname

* tweak colors for dark mode to match figma

* add step 1 form

* add helper function for ffmpeg snapshot

* add go2rtc stream add and ffprobe snapshot endpoints

* add camera image and stream details on successful test

* step 1 tweaks

* step 2 and i18n

* types

* step 1 and 2 tweaks

* add wizard to camera settings view

* add data unit i18n keys

* restream tweak

* fix type

* implement rough idea for step 3

* add api endpoint to delete stream from go2rtc

* add main wizard dialog component

* extract logic for friendly_name and use in wizard

* add i18n and popover for brand url

* add camera name to top

* consolidate validation logic

* prevent dialog from closing when clicking outside

* center camera name on mobile

* add help/docs link popovers

* keep spaces in friendly name

* add stream details to overlay like stats in liveplayer

* add validation results pane to step 3

* ensure test is invalidated if stream is changed

* only display validation results and enable save button if all streams have been tested

* tweaks

* normalize camera name to lower case and improve hash generation

* move wizard to subfolder

* tweaks

* match look of camera edit form to wizard

* move wizard and edit form to its own component

* move enabled/disabled switch to management section

* clean up

* fixes

* fix mobile

web/src/components/indicators/StepIndicator.tsx

@@ -4,17 +4,43 @@ import { useTranslation } from "react-i18next";
 type StepIndicatorProps = {
   steps: string[];
   currentStep: number;
-  translationNameSpace: string;
+  variant?: "default" | "dots";
+  translationNameSpace?: string;
+  className?: string;
 };
+
 export default function StepIndicator({
   steps,
   currentStep,
+  variant = "default",
   translationNameSpace,
+  className,
 }: StepIndicatorProps) {
   const { t } = useTranslation(translationNameSpace);
 
+  if (variant == "dots") {
+    return (
+      <div className={cn("flex flex-row justify-center gap-2", className)}>
+        {steps.map((_, idx) => (
+          <div
+            key={idx}
+            className={cn(
+              "size-3 rounded-full border border-primary/10 transition-colors",
+              currentStep === idx
+                ? "bg-selected"
+                : currentStep > idx
+                  ? "bg-muted-foreground"
+                  : "bg-muted",
+            )}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  // Default variant (original behavior)
   return (
-    <div className="flex flex-row justify-evenly">
+    <div className={cn("flex flex-row justify-evenly", className)}>
       {steps.map((name, idx) => (
         <div key={idx} className="flex flex-col items-center gap-2">
           <div