feat: integrate MultiSelect for variant selection and improve form UX

- Replace manual variant cards with MultiSelect component
- Add VARIANT_OPTIONS with FileImage/FileType icons
- Make base variant disabled (always required, cannot be removed)
- Show upload zones only for selected variants (reactive with field.state.value)
- Move remove button to top-right corner as small icon-only button
- Add icon preview section with proper object-contain styling
- Use form.Subscribe for reactive preview updates
- Validate icon names against existing icons from database
- Show clear error message when icon already exists
- Remove isExistingIcon field (updates not yet supported)
- Improve preview image display with centered flex layout
- Add variant labels below preview images
- Consolidate form into single Card component
- Fix image cropping issues with object-contain instead of object-cover

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

@@ -1,19 +1,20 @@
 "use client"
 
-import { AlertCircle, Check, Plus, X } from "lucide-react"
+import { Check, FileImage, FileType, Plus, X } from "lucide-react"
 import { useForm } from "@tanstack/react-form"
 import { toast } from "sonner"
 import { IconNameCombobox } from "@/components/icon-name-combobox"
-import { Alert, AlertDescription } from "@/components/ui/alert"
+import { IconCard } from "@/components/icon-card"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
-import { Separator } from "@/components/ui/separator"
+import { MultiSelect, type MultiSelectOption } from "@/components/ui/multi-select"
 import { Dropzone, DropzoneContent, DropzoneEmptyState } from "@/components/ui/shadcn-io/dropzone"
 import { Textarea } from "@/components/ui/textarea"
 import { pb } from "@/lib/pb"
+import { useExistingIconNames } from "@/hooks/use-submissions"
 import { useState } from "react"
 
 interface VariantConfig {
@@ -56,6 +57,14 @@ const VARIANTS: VariantConfig[] = [
 	},
 ]
 
+// Convert VARIANTS to MultiSelect options
+const VARIANT_OPTIONS: MultiSelectOption[] = VARIANTS.map((variant) => ({
+	label: variant.label,
+	value: variant.id,
+	icon: variant.id === "base" ? FileImage : FileType,
+	disabled: variant.id === "base", // Base is always required
+}))
+
 const AVAILABLE_CATEGORIES = [
 	"automation",
 	"cloud",
@@ -78,8 +87,7 @@ const AVAILABLE_CATEGORIES = [
 
 interface FormData {
 	iconName: string
-	isExistingIcon: boolean
-	activeVariants: string[]
+	selectedVariants: string[]
 	files: Record<string, File[]>
 	filePreviews: Record<string, string>
 	aliases: string[]
@@ -90,12 +98,12 @@ interface FormData {
 
 export function AdvancedIconSubmissionFormTanStack() {
 	const [filePreviews, setFilePreviews] = useState<Record<string, string>>({})
+	const { data: existingIcons = [] } = useExistingIconNames()
 
 	const form = useForm<FormData>({
 		defaultValues: {
 			iconName: "",
-			isExistingIcon: false,
-			activeVariants: ["base"],
+			selectedVariants: ["base"], // Base is always selected by default
 			files: {},
 			filePreviews: {},
 			aliases: [],
@@ -107,12 +115,6 @@ export function AdvancedIconSubmissionFormTanStack() {
 			onChange: ({ value }) => {
 				const errors: Partial<Record<keyof FormData, string>> = {}
 				
-				if (!value.iconName.trim()) {
-					errors.iconName = "Icon name is required"
-				} else if (!/^[a-z0-9-]+$/.test(value.iconName)) {
-					errors.iconName = "Icon name must contain only lowercase letters, numbers, and hyphens"
-				}
-				
 				if (!value.files.base || value.files.base.length === 0) {
 					errors.files = "At least the base icon is required"
 				}
@@ -182,10 +184,8 @@ export function AdvancedIconSubmissionFormTanStack() {
 
 				await pb.collection("submissions").create(submissionData)
 
-				toast.success(value.isExistingIcon ? "Icon update submitted!" : "Icon submitted!", {
-					description: value.isExistingIcon
-						? `Your update for "${value.iconName}" has been submitted for review`
-						: `Your icon "${value.iconName}" has been submitted for review`,
+				toast.success("Icon submitted!", {
+					description: `Your icon "${value.iconName}" has been submitted for review`,
 				})
 
 				// Reset form
@@ -200,29 +200,33 @@ export function AdvancedIconSubmissionFormTanStack() {
 		},
 	})
 
-	const handleAddVariant = (variantId: string) => {
-		const currentVariants = form.getFieldValue("activeVariants")
-		if (!currentVariants.includes(variantId)) {
-			form.setFieldValue("activeVariants", [...currentVariants, variantId])
-		}
-	}
-
 	const handleRemoveVariant = (variantId: string) => {
 		if (variantId !== "base") {
-			const currentVariants = form.getFieldValue("activeVariants")
-			form.setFieldValue("activeVariants", currentVariants.filter((id) => id !== variantId))
+			// Remove from selected variants
+			const currentVariants = form.getFieldValue("selectedVariants")
+			form.setFieldValue("selectedVariants", currentVariants.filter((v) => v !== variantId))
 			
+			// Remove files
 			const currentFiles = form.getFieldValue("files")
 			const newFiles = { ...currentFiles }
 			delete newFiles[variantId]
 			form.setFieldValue("files", newFiles)
 			
+			// Remove previews
 			const newPreviews = { ...filePreviews }
 			delete newPreviews[variantId]
 			setFilePreviews(newPreviews)
 		}
 	}
 
+	const handleVariantSelectionChange = (selectedValues: string[]) => {
+		// Ensure base is always included
+		const finalValues = selectedValues.includes("base") 
+			? selectedValues 
+			: ["base", ...selectedValues]
+		return finalValues
+	}
+
 	const handleFileDrop = (variantId: string, droppedFiles: File[]) => {
 		const currentFiles = form.getFieldValue("files")
 		form.setFieldValue("files", {
@@ -272,7 +276,7 @@ export function AdvancedIconSubmissionFormTanStack() {
 	}
 
 	return (
-		<div className="max-w-4xl mx-auto space-y-6">
+		<div className="max-w-4xl mx-auto">
 			<form
 				onSubmit={(e) => {
 					e.preventDefault()
@@ -280,13 +284,19 @@ export function AdvancedIconSubmissionFormTanStack() {
 					form.handleSubmit()
 				}}
 			>
-				{/* Icon Name Section */}
 				<Card>
 					<CardHeader>
-						<CardTitle>Icon Identification</CardTitle>
-						<CardDescription>Choose a unique identifier for your icon</CardDescription>
+						<CardTitle>Submit an Icon</CardTitle>
+						<CardDescription>Fill in the details below to submit your icon for review</CardDescription>
 					</CardHeader>
-					<CardContent className="space-y-4">
+					<CardContent className="space-y-6">
+						{/* Icon Name Section */}
+						<div className="space-y-4">
+							<div>
+								<h3 className="text-lg font-semibold mb-1">Icon Identification</h3>
+								<p className="text-sm text-muted-foreground">Choose a unique identifier for your icon</p>
+							</div>
+							
 							<form.Field
 								name="iconName"
 								validators={{
@@ -295,6 +305,11 @@ export function AdvancedIconSubmissionFormTanStack() {
 										if (!/^[a-z0-9-]+$/.test(value)) {
 											return "Icon name must contain only lowercase letters, numbers, and hyphens"
 										}
+										// Check if icon already exists
+										const iconExists = existingIcons.some((icon) => icon.value === value)
+										if (iconExists) {
+											return "This icon already exists. Icon updates are not yet supported. Please choose a different name."
+										}
 										return undefined
 									},
 								}}
@@ -305,82 +320,121 @@ export function AdvancedIconSubmissionFormTanStack() {
 										<IconNameCombobox
 											value={field.state.value} 
 											onValueChange={field.handleChange}
-										onIsExisting={(isExisting) => form.setFieldValue("isExistingIcon", isExisting)} 
+											error={field.state.meta.errors.join(", ")}
+											isInvalid={!field.state.meta.isValid && field.state.meta.isTouched}
 										/>
 										<p className="text-sm text-muted-foreground">Use lowercase letters, numbers, and hyphens only</p>
-									{!field.state.meta.isValid && field.state.meta.isTouched && (
-										<p className="text-sm text-destructive">{field.state.meta.errors.join(", ")}</p>
-									)}
 									</div>
 								)}
 							</form.Field>
+						</div>
 
-						<form.Field name="isExistingIcon">
-							{(field) => (
-								<>
-									{field.state.value && (
-										<Alert>
-											<AlertCircle className="h-4 w-4" />
-											<AlertDescription>
-												This icon ID already exists. Your submission will be treated as an <strong>update</strong> to the
-												existing icon.
-											</AlertDescription>
-										</Alert>
+						{/* Icon Preview Section */}
+						{Object.keys(filePreviews).length > 0 && (
+							<form.Subscribe selector={(state) => ({ iconName: state.values.iconName, categories: state.values.categories })}>
+								{(state) => (
+									<div className="space-y-4">
+										<div>
+											<h3 className="text-lg font-semibold mb-1">Icon Preview</h3>
+											<p className="text-sm text-muted-foreground">How your icon will appear</p>
+										</div>
+										<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+											{Object.entries(filePreviews).map(([variantId, preview]) => (
+												<div key={variantId} className="flex flex-col gap-2">
+													<div className="relative aspect-square rounded-lg border bg-card p-4 flex items-center justify-center">
+														<img
+															alt={`${variantId} preview`}
+															className="max-h-full max-w-full object-contain"
+															src={preview}
+														/>
+													</div>
+													<div className="text-center">
+														<p className="text-xs font-mono text-muted-foreground">{state.iconName || "preview"}</p>
+														<p className="text-xs text-muted-foreground capitalize">{variantId}</p>
+													</div>
+												</div>
+											))}
+										</div>
+									</div>
 								)}
-
-									{form.getFieldValue("iconName") && !field.state.value && (
-										<Alert className="border-green-500/50 bg-green-500/10">
-											<AlertDescription className="text-green-600 dark:text-green-400">
-												This is a new icon submission.
-											</AlertDescription>
-										</Alert>
+							</form.Subscribe>
 						)}
-								</>
-							)}
-						</form.Field>
-					</CardContent>
-				</Card>
 
 						{/* Icon Variants Section */}
-				<Card>
-					<CardHeader>
-						<div className="flex items-start justify-between">
+						<div className="space-y-4">
 							<div>
-								<CardTitle>Icon Variants</CardTitle>
-								<CardDescription>Upload different versions of your icon</CardDescription>
+								<h3 className="text-lg font-semibold mb-1">Icon Variants</h3>
+								<p className="text-sm text-muted-foreground">Select which variants you want to upload</p>
 							</div>
-						</div>
-					</CardHeader>
-					<CardContent className="space-y-6">
-						<form.Field name="activeVariants">
+
+							<form.Field name="selectedVariants">
 								{(field) => (
 									<>
+										<div className="space-y-3">
+											<Label>Variant Selection</Label>
+											<MultiSelect
+												options={VARIANT_OPTIONS}
+												defaultValue={field.state.value}
+												onValueChange={(values) => {
+													const finalValues = handleVariantSelectionChange(values)
+													field.handleChange(finalValues)
+												}}
+												placeholder="Select icon variants..."
+												maxCount={5}
+												searchable={false}
+												hideSelectAll={true}
+												resetOnDefaultValueChange={true}
+											/>
+											<p className="text-sm text-muted-foreground">
+												Base icon is required and cannot be removed. Select additional variants as needed.
+											</p>
+										</div>
+
+										{/* Upload zones for selected variants - using field.state.value for reactivity */}
+										<div className="grid gap-3 mt-4">
 											{field.state.value.map((variantId) => {
 												const variant = VARIANTS.find((v) => v.id === variantId)
 												if (!variant) return null
 
+												const hasFile = form.getFieldValue("files")[variant.id]?.length > 0
+												const isBase = variant.id === "base"
+
 												return (
-											<div key={variantId} className="space-y-3 p-4 border rounded-lg bg-background/50">
-												<div className="flex items-start justify-between">
-													<div>
-														<div className="flex items-center gap-2">
-															<Label className="text-base font-semibold">{variant.label}</Label>
-															{variant.id === "base" && <Badge variant="secondary">Required</Badge>}
-														</div>
-														<p className="text-sm text-muted-foreground mt-1">{variant.description}</p>
-													</div>
-													{variant.id !== "base" && (
+													<Card
+														key={variantId}
+														className={`relative transition-all ${
+															hasFile
+																? "border-primary bg-primary/5"
+																: "border-border"
+														}`}
+													>
+														{/* Remove button at top-right corner */}
+														{!isBase && (
 															<Button
 																type="button"
 																variant="ghost"
-															size="sm"
-															onClick={() => handleRemoveVariant(variantId)}
-															className="text-destructive"
+																size="icon"
+																onClick={() => handleRemoveVariant(variant.id)}
+																className="absolute top-2 right-2 h-6 w-6 rounded-full hover:bg-destructive/10 hover:text-destructive z-10"
+																aria-label={`Remove ${variant.label}`}
 															>
 																<X className="h-4 w-4" />
 															</Button>
 														)}
+
+														<div className="p-4">
+															<div className="space-y-2">
+																<div className="flex items-center gap-2">
+																	<h4 className="text-sm font-semibold">{variant.label}</h4>
+																	{isBase && <Badge variant="secondary" className="text-xs">Required</Badge>}
+																	{hasFile && (
+																		<Badge variant="default" className="text-xs">
+																			<Check className="h-3 w-3 mr-1" />
+																			Uploaded
+																		</Badge>
+																	)}
 																</div>
+																<p className="text-xs text-muted-foreground">{variant.description}</p>
 																
 																<Dropzone
 																	accept={{
@@ -390,57 +444,41 @@ export function AdvancedIconSubmissionFormTanStack() {
 																	}}
 																	maxSize={1024 * 1024 * 5}
 																	maxFiles={1}
-													onDrop={(droppedFiles) => handleFileDrop(variantId, droppedFiles)}
+																	onDrop={(droppedFiles) => handleFileDrop(variant.id, droppedFiles)}
 																	onError={(error) => toast.error(error.message)}
-													src={form.getFieldValue("files")[variantId]}
+																	src={form.getFieldValue("files")[variant.id]}
 																>
 																	<DropzoneEmptyState />
 																	<DropzoneContent>
-														{filePreviews[variantId] && (
-															<div className="h-[102px] w-full">
+																		{filePreviews[variant.id] && (
+																			<div className="absolute inset-0 flex items-center justify-center p-2">
 																				<img
-																	alt="Preview"
-																	className="absolute top-0 left-0 h-full w-full object-cover"
-																	src={filePreviews[variantId]}
+																					alt={`${variant.label} preview`}
+																					className="max-h-full max-w-full object-contain"
+																					src={filePreviews[variant.id]}
 																				/>
 																			</div>
 																		)}
 																	</DropzoneContent>
 																</Dropzone>
 															</div>
+														</div>
+													</Card>
 												)
 											})}
+										</div>
 									</>
 								)}
 							</form.Field>
-
-						<Separator />
-
-						<div className="flex flex-wrap gap-2">
-							<p className="text-sm text-muted-foreground w-full mb-2">Add variant:</p>
-							{VARIANTS.filter((v) => !form.getFieldValue("activeVariants").includes(v.id)).map((variant) => (
-								<Button
-									key={variant.id}
-									type="button"
-									variant="outline"
-									size="sm"
-									onClick={() => handleAddVariant(variant.id)}
-								>
-									<Plus className="h-4 w-4 mr-2" />
-									{variant.label}
-								</Button>
-							))}
 						</div>
-					</CardContent>
-				</Card>
 
 						{/* Metadata Section */}
-				<Card>
-					<CardHeader>
-						<CardTitle>Icon Metadata</CardTitle>
-						<CardDescription>Provide additional information about your icon</CardDescription>
-					</CardHeader>
-					<CardContent className="space-y-6">
+						<div className="space-y-4">
+							<div>
+								<h3 className="text-lg font-semibold mb-1">Icon Metadata</h3>
+								<p className="text-sm text-muted-foreground">Provide additional information about your icon</p>
+							</div>
+
 							{/* Categories */}
 							<form.Field name="categories">
 								{(field) => (
@@ -466,8 +504,6 @@ export function AdvancedIconSubmissionFormTanStack() {
 								)}
 							</form.Field>
 
-						<Separator />
-
 							{/* Aliases */}
 							<div className="space-y-3">
 								<Label htmlFor="alias-input">Aliases</Label>
@@ -521,8 +557,6 @@ export function AdvancedIconSubmissionFormTanStack() {
 								<p className="text-sm text-muted-foreground">Alternative names that users might search for</p>
 							</div>
 
-						<Separator />
-
 							{/* Description */}
 							<form.Field name="description">
 								{(field) => (
@@ -539,11 +573,10 @@ export function AdvancedIconSubmissionFormTanStack() {
 									</div>
 								)}
 							</form.Field>
-					</CardContent>
-				</Card>
+						</div>
 
 						{/* Submit Button */}
-				<div className="flex justify-end gap-4">
+						<div className="flex justify-end gap-4 pt-4">
 							<Button
 								type="button"
 								variant="outline"
@@ -559,11 +592,13 @@ export function AdvancedIconSubmissionFormTanStack() {
 							>
 								{([canSubmit, isSubmitting]: [boolean, boolean]) => (
 									<Button type="submit" disabled={!canSubmit || isSubmitting} size="lg">
-								{isSubmitting ? "Submitting..." : form.getFieldValue("isExistingIcon") ? "Submit Update" : "Submit New Icon"}
+										{isSubmitting ? "Submitting..." : "Submit New Icon"}
 									</Button>
 								)}
 							</form.Subscribe>
 						</div>
+					</CardContent>
+				</Card>
 			</form>
 		</div>
 	)