feat(submissions): add experimental warning and confirmation dialog to submission form

- Replace inline warning with shared ExperimentalWarning component
- Add confirmation dialog before submission to acknowledge experimental phase
- Refactor submission handler to show dialog first, then process on confirmation
- Warn users that submissions won't be reviewed during experimentation phase

web/src/components/advanced-icon-submission-form-tanstack.tsx

@@ -5,6 +5,17 @@ import { Check, FileImage, FileType, Plus, X } from "lucide-react"
 import { useState } from "react"
 import { toast } from "sonner"
 import { IconNameCombobox } from "@/components/icon-name-combobox"
+import { ExperimentalWarning } from "@/components/experimental-warning"
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
@@ -98,6 +109,7 @@ interface FormData {
 
 export function AdvancedIconSubmissionFormTanStack() {
 	const [filePreviews, setFilePreviews] = useState<Record<string, string>>({})
+	const [showConfirmDialog, setShowConfirmDialog] = useState(false)
 	const { data: existingIcons = [] } = useExistingIconNames()
 
 	const form = useForm({
@@ -117,6 +129,14 @@ export function AdvancedIconSubmissionFormTanStack() {
 				return
 			}
 
+			setShowConfirmDialog(true)
+		},
+	})
+
+	const handleConfirmedSubmit = async () => {
+		const value = form.state.values
+		setShowConfirmDialog(false)
+
 		try {
 			const assetFiles: File[] = []
 
@@ -185,8 +205,7 @@ export function AdvancedIconSubmissionFormTanStack() {
 				description: error?.message || "Please try again later",
 			})
 		}
-		},
+	}
-	})
 
 	const handleRemoveVariant = (variantId: string) => {
 		if (variantId !== "base") {
@@ -272,6 +291,26 @@ export function AdvancedIconSubmissionFormTanStack() {
 
 	return (
 		<div className="max-w-4xl mx-auto">
+			<ExperimentalWarning message="This icon submission form is currently in an experimentation phase. Submissions will not be reviewed or processed at this time. We're gathering feedback to improve the experience." />
+
+			<AlertDialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Confirm Submission</AlertDialogTitle>
+						<AlertDialogDescription>
+							This icon submission form is a work-in-progress and is currently in an experimentation phase. Your submission will not be reviewed or processed at this time. We're using this to gather feedback and improve the experience.
+							<br />
+							<br />
+							Do you still want to proceed with submitting your icon?
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogAction onClick={handleConfirmedSubmit}>Yes, Submit Anyway</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+
 			<form
 				onSubmit={(e) => {
 					e.preventDefault()