chore: consolidate platform split checks

webui/src/components/GuidedConfigDialog.tsx

@@ -0,0 +1,53 @@
+import type { ReactNode } from "react";
+import type { WizardStep } from "../types";
+import Dialog, { type DialogProps } from "./Dialog";
+import Stepper from "./Stepper";
+
+export type GuidedConfigDialogProps = Omit<DialogProps, "children"> & {
+  steps: WizardStep[];
+  activeStep: string;
+  onStepChange: (stepId: string) => void;
+  intro?: ReactNode;
+  children: ReactNode;
+};
+
+function joinClasses(...classes: Array<string | undefined | false>) {
+  return classes.filter(Boolean).join(" ");
+}
+
+export default function GuidedConfigDialog({
+  steps,
+  activeStep,
+  onStepChange,
+  intro,
+  children,
+  className = "",
+  bodyClassName = "",
+  ...dialogProps
+}: GuidedConfigDialogProps) {
+  const active = steps.find((step) => step.id === activeStep) ?? steps[0];
+
+  return (
+    <Dialog
+      {...dialogProps}
+      className={joinClasses("guided-config-dialog", className)}
+      bodyClassName={joinClasses("guided-config-dialog-body", bodyClassName)}
+    >
+      <div className="guided-config-shell">
+        <aside className="guided-config-sidebar" aria-label="Setup steps">
+          <Stepper steps={steps} activeStep={active?.id ?? activeStep} onSelect={onStepChange} />
+        </aside>
+        <section className="guided-config-content">
+          {intro && <div className="guided-config-intro">{intro}</div>}
+          {active && (
+            <header className="guided-config-step-heading">
+              <h3>{active.label}</h3>
+              {active.description && <p>{active.description}</p>}
+            </header>
+          )}
+          <div className="guided-config-step-body">{children}</div>
+        </section>
+      </div>
+    </Dialog>
+  );
+}