add cloud / selfhosted segment in profile creation

client/ui/frontend/src/components/buttons/Button.tsx

@@ -1,5 +1,5 @@
 import { cva, VariantProps } from "class-variance-authority";
-import { Check, Copy } from "lucide-react";
+import { Check, Copy, Loader2 } from "lucide-react";
 import { ButtonHTMLAttributes, forwardRef, useState } from "react";
 
 import { cn } from "@/lib/cn";
@@ -10,6 +10,10 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, ButtonVar
     disabled?: boolean;
     stopPropagation?: boolean;
     copy?: string;
+    // When true, the content is replaced by a centered spinner while keeping
+    // the button's rendered width/height (the content stays in the layout,
+    // just hidden). Also disables the button.
+    loading?: boolean;
 }
 
 const buttonVariants = cva(
@@ -93,7 +97,7 @@ const buttonVariants = cva(
             },
             size: {
                 xs: "text-xs py-2.5 px-3.5",
-                xs2: "text-[0.78rem] py-[1.1rem] px-5 leading-[0]",
+                xs2: "text-[0.78rem] py-[1.1rem] px-4 leading-[0]",
                 sm: "text-sm py-[9px] px-4",
                 md: "py-[9px] px-4",
                 lg: "text-lg py-[9px] px-4",
@@ -124,6 +128,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
         onClick,
         disabled,
         copy,
+        loading = false,
         ...props
     },
     ref,
@@ -134,7 +139,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
         <button
             ref={ref}
             type={type}
-            disabled={disabled}
+            disabled={disabled || loading}
             className={cn(
                 buttonVariants({
                     variant,
@@ -159,8 +164,16 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
             }}
             {...props}
         >
-            {copy !== undefined && (copied ? <Check size={iconSize} /> : <Copy size={iconSize} />)}
-            {children}
+            {loading && (
+                <span className={"absolute inset-0 flex items-center justify-center"}>
+                    <Loader2 size={iconSize} className={"animate-spin"} />
+                </span>
+            )}
+            <span className={cn("contents", loading && "invisible")}>
+                {copy !== undefined &&
+                    (copied ? <Check size={iconSize} /> : <Copy size={iconSize} />)}
+                {children}
+            </span>
         </button>
     );
 });

client/ui/frontend/src/components/inputs/Input.tsx

@@ -13,6 +13,10 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement>, Input
     maxWidthClass?: string;
     icon?: ReactNode;
     error?: string;
+    // A soft, non-blocking caveat rendered in orange (vs. error's red). Used
+    // e.g. for "couldn't reach this server" where the value is syntactically
+    // fine and the user may still proceed. `error` takes precedence.
+    warning?: string;
     prefixClassName?: string;
     showPasswordToggle?: boolean;
     copy?: boolean;
@@ -33,6 +37,10 @@ const inputVariants = cva("", {
                 "dark:bg-nb-gray-900 dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500 border-neutral-200 dark:border-red-500 text-red-500",
                 "ring-offset-red-500/10 dark:ring-offset-red-500/10 dark:focus-visible:ring-red-500/10 focus-visible:ring-red-500/10",
             ],
+            warning: [
+                "dark:bg-nb-gray-900 dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500 border-neutral-200 dark:border-orange-400 text-orange-400",
+                "ring-offset-orange-400/10 dark:ring-offset-orange-400/10 dark:focus-visible:ring-orange-400/10 focus-visible:ring-orange-400/10",
+            ],
         },
         prefixSuffixVariant: {
             default: [
@@ -53,6 +61,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
         icon,
         maxWidthClass = "",
         error,
+        warning,
         variant = "default",
         prefixClassName,
         showPasswordToggle = false,
@@ -174,7 +183,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
                         {...props}
                         className={cn(
                             inputVariants({
-                                variant: error ? "error" : variant,
+                                variant: error ? "error" : warning ? "warning" : variant,
                             }),
                             "flex h-[40px] w-full rounded-md bg-white px-3 py-2 text-sm select-text",
                             "file:bg-transparent file:text-sm file:font-medium file:border-0",
@@ -238,9 +247,14 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
                     </div>
                 )}
             </div>
-            {error && (
-                <span className="text-xs text-red-500 mt-2 inline-flex items-center gap-1">
-                    {error}
+            {(error || warning) && (
+                <span
+                    className={cn(
+                        "text-xs mt-2 inline-flex items-center gap-1",
+                        error ? "text-red-500" : "text-orange-400",
+                    )}
+                >
+                    {error ?? warning}
                 </span>
             )}
         </div>