refactor: migrate to TanStack Form and fix IconNameCombobox integration

- Remove old advanced-icon-submission-form.tsx (replaced by TanStack version)
- Fix TanStack Form implementation:
  - Remove generic type argument and use type assertion instead
  - Fix form.Subscribe selector to return object instead of array
  - Remove unused IconCard import
- Update editable-icon-details.tsx to use new IconNameCombobox API:
  - Remove deprecated onIsExisting prop
  - Remove isExistingIcon state management
  - Simplify form submission messages

All components now use the updated IconNameCombobox with error/isInvalid props
instead of the old onIsExisting callback pattern.

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

@@ -4,7 +4,6 @@ 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 { 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"
@@ -100,7 +99,7 @@ export function AdvancedIconSubmissionFormTanStack() {
 	const [filePreviews, setFilePreviews] = useState<Record<string, string>>({})
 	const { data: existingIcons = [] } = useExistingIconNames()
 
-	const form = useForm<FormData>({
+	const form = useForm({
 		defaultValues: {
 			iconName: "",
 			selectedVariants: ["base"], // Base is always selected by default
@@ -110,22 +109,7 @@ export function AdvancedIconSubmissionFormTanStack() {
 			aliasInput: "",
 			categories: [],
 			description: "",
-		},
-		validators: {
-			onChange: ({ value }) => {
-				const errors: Partial<Record<keyof FormData, string>> = {}
-				
-				if (!value.files.base || value.files.base.length === 0) {
-					errors.files = "At least the base icon is required"
-				}
-				
-				if (value.categories.length === 0) {
-					errors.categories = "At least one category is required"
-				}
-				
-				return Object.keys(errors).length > 0 ? errors : undefined
-			},
-		},
+		} as FormData,
 		onSubmit: async ({ value }) => {
 			if (!pb.authStore.isValid) {
 				toast.error("You must be logged in to submit an icon")
@@ -588,11 +572,14 @@ export function AdvancedIconSubmissionFormTanStack() {
 								Clear Form
 							</Button>
 							<form.Subscribe
-								selector={(state) => [state.canSubmit, state.isSubmitting]}
+								selector={(state) => ({
+									canSubmit: state.canSubmit,
+									isSubmitting: state.isSubmitting,
+								})}
 							>
-								{([canSubmit, isSubmitting]: [boolean, boolean]) => (
-									<Button type="submit" disabled={!canSubmit || isSubmitting} size="lg">
-										{isSubmitting ? "Submitting..." : "Submit New Icon"}
+								{(state) => (
+									<Button type="submit" disabled={!state.canSubmit || state.isSubmitting} size="lg">
+										{state.isSubmitting ? "Submitting..." : "Submit New Icon"}
 									</Button>
 								)}
 							</form.Subscribe>

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

@@ -1,480 +0,0 @@
-"use client"
-
-import { AlertCircle, Check, Plus, X } from "lucide-react"
-import { useState } from "react"
-import { toast } from "sonner"
-import { IconNameCombobox } from "@/components/icon-name-combobox"
-import { Alert, AlertDescription } from "@/components/ui/alert"
-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 { Dropzone, DropzoneContent, DropzoneEmptyState } from "@/components/ui/shadcn-io/dropzone"
-import { Textarea } from "@/components/ui/textarea"
-import { pb } from "@/lib/pb"
-
-interface VariantConfig {
-	id: string
-	label: string
-	description: string
-	field: "base" | "dark" | "light" | "wordmark" | "wordmark_dark"
-}
-
-const VARIANTS: VariantConfig[] = [
-	{
-		id: "base",
-		label: "Base Icon",
-		description: "Main icon file (required)",
-		field: "base",
-	},
-	{
-		id: "dark",
-		label: "Dark Variant",
-		description: "Icon optimized for dark backgrounds",
-		field: "dark",
-	},
-	{
-		id: "light",
-		label: "Light Variant",
-		description: "Icon optimized for light backgrounds",
-		field: "light",
-	},
-	{
-		id: "wordmark",
-		label: "Wordmark",
-		description: "Logo with text/wordmark",
-		field: "wordmark",
-	},
-	{
-		id: "wordmark_dark",
-		label: "Wordmark Dark",
-		description: "Wordmark optimized for dark backgrounds",
-		field: "wordmark_dark",
-	},
-]
-
-const AVAILABLE_CATEGORIES = [
-	"automation",
-	"cloud",
-	"database",
-	"development",
-	"entertainment",
-	"finance",
-	"gaming",
-	"home-automation",
-	"media",
-	"monitoring",
-	"network",
-	"security",
-	"social",
-	"storage",
-	"tools",
-	"utility",
-	"other",
-]
-
-export function AdvancedIconSubmissionForm() {
-	const [iconName, setIconName] = useState("")
-	const [isExistingIcon, setIsExistingIcon] = useState(false)
-	const [activeVariants, setActiveVariants] = useState<string[]>(["base"])
-	const [files, setFiles] = useState<Record<string, File[]>>({})
-	const [filePreviews, setFilePreviews] = useState<Record<string, string>>({})
-	const [aliases, setAliases] = useState<string[]>([])
-	const [aliasInput, setAliasInput] = useState("")
-	const [categories, setCategories] = useState<string[]>([])
-	const [description, setDescription] = useState("")
-	const [isSubmitting, setIsSubmitting] = useState(false)
-
-	const handleAddVariant = (variantId: string) => {
-		if (!activeVariants.includes(variantId)) {
-			setActiveVariants([...activeVariants, variantId])
-		}
-	}
-
-	const handleRemoveVariant = (variantId: string) => {
-		if (variantId !== "base") {
-			setActiveVariants(activeVariants.filter((id) => id !== variantId))
-			const newFiles = { ...files }
-			const newPreviews = { ...filePreviews }
-			delete newFiles[variantId]
-			delete newPreviews[variantId]
-			setFiles(newFiles)
-			setFilePreviews(newPreviews)
-		}
-	}
-
-	const handleFileDrop = (variantId: string, droppedFiles: File[]) => {
-		setFiles({
-			...files,
-			[variantId]: droppedFiles,
-		})
-		
-		// Generate preview for the first file
-		if (droppedFiles.length > 0) {
-			const reader = new FileReader()
-			reader.onload = (e) => {
-				if (typeof e.target?.result === 'string') {
-					setFilePreviews({
-						...filePreviews,
-						[variantId]: e.target.result,
-					})
-				}
-			}
-			reader.readAsDataURL(droppedFiles[0])
-		}
-	}
-
-	const handleAddAlias = () => {
-		const trimmedAlias = aliasInput.trim()
-		if (trimmedAlias && !aliases.includes(trimmedAlias)) {
-			setAliases([...aliases, trimmedAlias])
-			setAliasInput("")
-		}
-	}
-
-	const handleRemoveAlias = (alias: string) => {
-		setAliases(aliases.filter((a) => a !== alias))
-	}
-
-	const toggleCategory = (category: string) => {
-		if (categories.includes(category)) {
-			setCategories(categories.filter((c) => c !== category))
-		} else {
-			setCategories([...categories, category])
-		}
-	}
-
-	const handleSubmit = async () => {
-		if (!iconName.trim()) {
-			toast.error("Please enter an icon name")
-			return
-		}
-
-		if (!files.base || files.base.length === 0) {
-			toast.error("Please upload at least the base icon")
-			return
-		}
-
-		if (categories.length === 0) {
-			toast.error("Please select at least one category")
-			return
-		}
-
-		if (!pb.authStore.isValid) {
-			toast.error("You must be logged in to submit an icon")
-			return
-		}
-
-		setIsSubmitting(true)
-
-		try {
-			const assetFiles: File[] = []
-
-			// Add base file
-			if (files.base?.[0]) {
-				assetFiles.push(files.base[0])
-			}
-
-			// Build extras object
-			const extras: any = {
-				aliases: aliases,
-				categories: categories,
-				base: files.base[0]?.name.split(".").pop() || "svg",
-			}
-
-			// Add color variants if present
-			if (files.dark?.[0] || files.light?.[0]) {
-				extras.colors = {}
-				if (files.dark?.[0]) {
-					extras.colors.dark = files.dark[0].name
-					assetFiles.push(files.dark[0])
-				}
-				if (files.light?.[0]) {
-					extras.colors.light = files.light[0].name
-					assetFiles.push(files.light[0])
-				}
-			}
-
-			// Add wordmark variants if present
-			if (files.wordmark?.[0] || files.wordmark_dark?.[0]) {
-				extras.wordmark = {}
-				if (files.wordmark?.[0]) {
-					extras.wordmark.light = files.wordmark[0].name
-					assetFiles.push(files.wordmark[0])
-				}
-				if (files.wordmark_dark?.[0]) {
-					extras.wordmark.dark = files.wordmark_dark[0].name
-					assetFiles.push(files.wordmark_dark[0])
-				}
-			}
-
-			// Create submission
-			const submissionData = {
-				name: iconName,
-				assets: assetFiles,
-				created_by: pb.authStore.model?.id,
-				status: "pending",
-				extras: extras,
-			}
-
-			await pb.collection("submissions").create(submissionData)
-
-			toast.success(isExistingIcon ? "Icon update submitted!" : "Icon submitted!", {
-				description: isExistingIcon
-					? `Your update for "${iconName}" has been submitted for review`
-					: `Your icon "${iconName}" has been submitted for review`,
-			})
-
-			// Reset form
-			setIconName("")
-			setFiles({})
-			setFilePreviews({})
-			setActiveVariants(["base"])
-			setAliases([])
-			setCategories([])
-			setDescription("")
-		} catch (error: any) {
-			console.error("Submission error:", error)
-			toast.error("Failed to submit icon", {
-				description: error?.message || "Please try again later",
-			})
-		} finally {
-			setIsSubmitting(false)
-		}
-	}
-
-	return (
-		<div className="max-w-4xl mx-auto space-y-6">
-			{/* Icon Name Section */}
-			<Card>
-				<CardHeader>
-					<CardTitle>Icon Identification</CardTitle>
-					<CardDescription>Choose a unique identifier for your icon</CardDescription>
-				</CardHeader>
-				<CardContent className="space-y-4">
-					<div className="space-y-2">
-						<Label htmlFor="icon-name">Icon Name / ID</Label>
-						<IconNameCombobox value={iconName} onValueChange={setIconName} onIsExisting={setIsExistingIcon} />
-						<p className="text-sm text-muted-foreground">Use lowercase letters, numbers, and hyphens only</p>
-					</div>
-
-					{isExistingIcon && (
-						<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>
-					)}
-
-					{iconName && !isExistingIcon && (
-						<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>
-					)}
-				</CardContent>
-			</Card>
-
-			{/* Icon Variants Section */}
-			<Card>
-				<CardHeader>
-					<div className="flex items-start justify-between">
-						<div>
-							<CardTitle>Icon Variants</CardTitle>
-							<CardDescription>Upload different versions of your icon</CardDescription>
-						</div>
-					</div>
-				</CardHeader>
-				<CardContent className="space-y-6">
-					{activeVariants.map((variantId) => {
-						const variant = VARIANTS.find((v) => v.id === variantId)
-						if (!variant) return null
-
-						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" && (
-										<Button
-											type="button"
-											variant="ghost"
-											size="sm"
-											onClick={() => handleRemoveVariant(variantId)}
-											className="text-destructive"
-										>
-											<X className="h-4 w-4" />
-										</Button>
-									)}
-								</div>
-
-								<Dropzone
-									accept={{
-										"image/svg+xml": [".svg"],
-										"image/png": [".png"],
-										"image/webp": [".webp"],
-									}}
-									maxSize={1024 * 1024 * 5}
-									maxFiles={1}
-									onDrop={(droppedFiles) => handleFileDrop(variantId, droppedFiles)}
-									onError={(error) => toast.error(error.message)}
-									src={files[variantId]}
-								>
-									<DropzoneEmptyState />
-									<DropzoneContent>
-										{filePreviews[variantId] && (
-											<div className="h-[102px] w-full">
-												<img
-													alt="Preview"
-													className="absolute top-0 left-0 h-full w-full object-cover"
-													src={filePreviews[variantId]}
-												/>
-											</div>
-										)}
-									</DropzoneContent>
-								</Dropzone>
-							</div>
-						)
-					})}
-
-					<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) => !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">
-					{/* Categories */}
-					<div className="space-y-3">
-						<Label>Categories</Label>
-						<div className="flex flex-wrap gap-2">
-							{AVAILABLE_CATEGORIES.map((category) => (
-								<Badge
-									key={category}
-									variant={categories.includes(category) ? "default" : "outline"}
-									className="cursor-pointer hover:bg-primary/80"
-									onClick={() => toggleCategory(category)}
-								>
-									{category.replace(/-/g, " ")}
-								</Badge>
-							))}
-						</div>
-						<p className="text-sm text-muted-foreground">Select all categories that apply to your icon</p>
-					</div>
-
-					<Separator />
-
-					{/* Aliases */}
-					<div className="space-y-3">
-						<Label htmlFor="alias-input">Aliases</Label>
-						<div className="flex gap-2">
-							<Input
-								id="alias-input"
-								placeholder="Add alternative name..."
-								value={aliasInput}
-								onChange={(e) => setAliasInput(e.target.value)}
-								onKeyDown={(e) => {
-									if (e.key === "Enter") {
-										e.preventDefault()
-										handleAddAlias()
-									}
-								}}
-							/>
-							<Button type="button" onClick={handleAddAlias}>
-								<Plus className="h-4 w-4 mr-2" />
-								Add
-							</Button>
-						</div>
-						{aliases.length > 0 && (
-							<div className="flex flex-wrap gap-2 mt-2">
-								{aliases.map((alias) => (
-									<Badge key={alias} variant="secondary" className="flex items-center gap-1 pl-2 pr-1">
-										{alias}
-										<Button
-											type="button"
-											variant="ghost"
-											size="sm"
-											className="h-4 w-4 p-0 hover:bg-transparent"
-											onClick={() => handleRemoveAlias(alias)}
-										>
-											<X className="h-3 w-3" />
-										</Button>
-									</Badge>
-								))}
-							</div>
-						)}
-						<p className="text-sm text-muted-foreground">Alternative names that users might search for</p>
-					</div>
-
-					<Separator />
-
-					{/* Description */}
-					<div className="space-y-3">
-						<Label htmlFor="description">Description (Optional)</Label>
-						<Textarea
-							id="description"
-							placeholder="Brief description of the icon or service it represents..."
-							value={description}
-							onChange={(e) => setDescription(e.target.value)}
-							rows={3}
-						/>
-						<p className="text-sm text-muted-foreground">This helps reviewers understand your submission</p>
-					</div>
-				</CardContent>
-			</Card>
-
-			{/* Submit Button */}
-			<div className="flex justify-end gap-4">
-				<Button
-					type="button"
-					variant="outline"
-					onClick={() => {
-						setIconName("")
-						setFiles({})
-						setFilePreviews({})
-						setActiveVariants(["base"])
-						setAliases([])
-						setCategories([])
-						setDescription("")
-					}}
-				>
-					Clear Form
-				</Button>
-				<Button type="button" onClick={handleSubmit} disabled={isSubmitting} size="lg">
-					{isSubmitting ? "Submitting..." : isExistingIcon ? "Submit Update" : "Submit New Icon"}
-				</Button>
-			</div>
-		</div>
-	)
-}
-

web/src/components/editable-icon-details.tsx

@@ -0,0 +1,719 @@
+"use client"
+
+import confetti from "canvas-confetti"
+import { motion } from "framer-motion"
+import {
+	ArrowRight,
+	Check,
+	FileType,
+	Github,
+	Moon,
+	PaletteIcon,
+	Plus,
+	Sun,
+	Type,
+	Upload,
+	X,
+} from "lucide-react"
+import Image from "next/image"
+import Link from "next/link"
+import type React from "react"
+import { useCallback, useState } from "react"
+import { toast } from "sonner"
+import { IconNameCombobox } from "@/components/icon-name-combobox"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+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 { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { BASE_URL, REPO_PATH } from "@/constants"
+import { formatIconName } from "@/lib/utils"
+import { MagicCard } from "./magicui/magic-card"
+import { Badge } from "./ui/badge"
+import { Dropzone, DropzoneContent, DropzoneEmptyState } from "./ui/shadcn-io/dropzone"
+import { pb } from "@/lib/pb"
+
+interface VariantFile {
+	file: File
+	preview: string
+	type: "base" | "light" | "dark" | "wordmark-light" | "wordmark-dark"
+	label: string
+}
+
+interface EditableIconData {
+	iconName: string
+	variants: VariantFile[]
+	categories: string[]
+	aliases: string[]
+	description: string
+}
+
+const AVAILABLE_CATEGORIES = [
+	"automation",
+	"cloud",
+	"database",
+	"development",
+	"entertainment",
+	"finance",
+	"gaming",
+	"home-automation",
+	"media",
+	"monitoring",
+	"network",
+	"security",
+	"social",
+	"storage",
+	"tools",
+	"utility",
+	"other",
+]
+
+type AddVariantCardProps = {
+	onAddVariant: (type: VariantFile["type"], label: string) => void
+	existingTypes: VariantFile["type"][]
+}
+
+function AddVariantCard({ onAddVariant, existingTypes }: AddVariantCardProps) {
+	const [showOptions, setShowOptions] = useState(false)
+
+	const availableVariants = [
+		{ type: "base" as const, label: "Base Icon", icon: FileType },
+		{ type: "light" as const, label: "Light Theme", icon: Sun },
+		{ type: "dark" as const, label: "Dark Theme", icon: Moon },
+		{ type: "wordmark-light" as const, label: "Wordmark Light", icon: Type },
+		{ type: "wordmark-dark" as const, label: "Wordmark Dark", icon: Type },
+	].filter((v) => !existingTypes.includes(v.type))
+
+	if (availableVariants.length === 0) return null
+
+	return (
+		<TooltipProvider delayDuration={500}>
+			<MagicCard className="p-0 rounded-md">
+				<div className="flex flex-col items-center justify-center p-4 h-full min-h-[280px]">
+					{!showOptions ? (
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<motion.button
+									type="button"
+									className="relative w-28 h-28 mb-3 cursor-pointer rounded-xl overflow-hidden group border-2 border-dashed border-muted-foreground/30 hover:border-primary/50 transition-colors flex items-center justify-center"
+									whileHover={{ scale: 1.05 }}
+									whileTap={{ scale: 0.95 }}
+									onClick={() => setShowOptions(true)}
+									aria-label="Add new variant"
+								>
+									<Plus className="w-12 h-12 text-muted-foreground group-hover:text-primary transition-colors" />
+								</motion.button>
+							</TooltipTrigger>
+							<TooltipContent>
+								<p>Add a new variant</p>
+							</TooltipContent>
+						</Tooltip>
+					) : (
+						<div className="space-y-2 w-full">
+							<p className="text-sm font-medium text-center mb-3">Select variant type:</p>
+							{availableVariants.map(({ type, label, icon: Icon }) => (
+								<Button
+									key={type}
+									type="button"
+									variant="outline"
+									size="sm"
+									className="w-full justify-start"
+									onClick={() => {
+										onAddVariant(type, label)
+										setShowOptions(false)
+									}}
+								>
+									<Icon className="w-4 h-4 mr-2" />
+									{label}
+								</Button>
+							))}
+							<Button
+								type="button"
+								variant="ghost"
+								size="sm"
+								className="w-full"
+								onClick={() => setShowOptions(false)}
+							>
+								Cancel
+							</Button>
+						</div>
+					)}
+					<p className="text-sm font-medium mt-2">Add Variant</p>
+				</div>
+			</MagicCard>
+		</TooltipProvider>
+	)
+}
+
+type VariantCardProps = {
+	variant: VariantFile
+	onRemove: () => void
+	canRemove: boolean
+}
+
+function VariantCard({ variant, onRemove, canRemove }: VariantCardProps) {
+	return (
+		<TooltipProvider delayDuration={500}>
+			<MagicCard className="p-0 rounded-md relative group">
+				{canRemove && (
+					<Button
+						type="button"
+						variant="destructive"
+						size="sm"
+						className="absolute top-2 right-2 z-30 opacity-0 group-hover:opacity-100 transition-opacity h-6 w-6 p-0"
+						onClick={onRemove}
+					>
+						<X className="h-4 w-4" />
+					</Button>
+				)}
+				<div className="flex flex-col items-center p-4 transition-all">
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<div className="relative w-28 h-28 mb-3 rounded-xl overflow-hidden">
+								<div className="absolute inset-0 border-2 border-primary/20 rounded-xl z-10" />
+								<Image
+									src={variant.preview}
+									alt={`${variant.label} preview`}
+									fill
+									className="object-contain p-4"
+								/>
+							</div>
+						</TooltipTrigger>
+						<TooltipContent>
+							<p>{variant.label}</p>
+						</TooltipContent>
+					</Tooltip>
+
+					<p className="text-sm font-medium">{variant.label}</p>
+					<p className="text-xs text-muted-foreground">
+						{variant.file.name.split(".").pop()?.toUpperCase()}
+					</p>
+				</div>
+			</MagicCard>
+		</TooltipProvider>
+	)
+}
+
+type EditableIconDetailsProps = {
+	onSubmit?: (data: EditableIconData) => void
+	initialData?: Partial<EditableIconData>
+}
+
+export function EditableIconDetails({ onSubmit, initialData }: EditableIconDetailsProps) {
+	const [iconName, setIconName] = useState(initialData?.iconName || "")
+	const [variants, setVariants] = useState<VariantFile[]>(initialData?.variants || [])
+	const [categories, setCategories] = useState<string[]>(initialData?.categories || [])
+	const [aliases, setAliases] = useState<string[]>(initialData?.aliases || [])
+	const [aliasInput, setAliasInput] = useState("")
+	const [description, setDescription] = useState(initialData?.description || "")
+
+	const launchConfetti = useCallback((originX?: number, originY?: number) => {
+		if (typeof confetti !== "function") return
+
+		const defaults = {
+			startVelocity: 15,
+			spread: 180,
+			ticks: 50,
+			zIndex: 20,
+			disableForReducedMotion: true,
+			colors: ["#ff0a54", "#ff477e", "#ff7096", "#ff85a1", "#fbb1bd", "#f9bec7"],
+		}
+
+		if (originX !== undefined && originY !== undefined) {
+			confetti({
+				...defaults,
+				particleCount: 50,
+				origin: {
+					x: originX / window.innerWidth,
+					y: originY / window.innerHeight,
+				},
+			})
+		} else {
+			confetti({
+				...defaults,
+				particleCount: 50,
+				origin: { x: 0.5, y: 0.5 },
+			})
+		}
+	}, [])
+
+	const handleAddVariant = async (type: VariantFile["type"], label: string) => {
+		// Create a file input to get the file
+		const input = document.createElement("input")
+		input.type = "file"
+		input.accept = "image/svg+xml,image/png,image/webp"
+		input.onchange = async (e) => {
+			const file = (e.target as HTMLInputElement).files?.[0]
+			if (file) {
+				const preview = await new Promise<string>((resolve) => {
+					const reader = new FileReader()
+					reader.onload = (e) => resolve(e.target?.result as string)
+					reader.readAsDataURL(file)
+				})
+
+				setVariants([...variants, { file, preview, type, label }])
+				launchConfetti()
+				toast.success("Variant added", {
+					description: `${label} has been added to your submission`,
+				})
+			}
+		}
+		input.click()
+	}
+
+	const handleRemoveVariant = (index: number) => {
+		setVariants(variants.filter((_, i) => i !== index))
+		toast.info("Variant removed")
+	}
+
+	const toggleCategory = (category: string) => {
+		setCategories(
+			categories.includes(category)
+				? categories.filter((c) => c !== category)
+				: [...categories, category]
+		)
+	}
+
+	const handleAddAlias = () => {
+		const trimmedAlias = aliasInput.trim()
+		if (trimmedAlias && !aliases.includes(trimmedAlias)) {
+			setAliases([...aliases, trimmedAlias])
+			setAliasInput("")
+		}
+	}
+
+	const handleRemoveAlias = (alias: string) => {
+		setAliases(aliases.filter((a) => a !== alias))
+	}
+
+	const handleSubmit = async (e: React.FormEvent) => {
+		e.preventDefault()
+
+		// Validation
+		if (!iconName.trim()) {
+			toast.error("Icon name is required")
+			return
+		}
+
+		if (!/^[a-z0-9-]+$/.test(iconName)) {
+			toast.error("Icon name must contain only lowercase letters, numbers, and hyphens")
+			return
+		}
+
+		const baseVariant = variants.find((v) => v.type === "base")
+		if (!baseVariant) {
+			toast.error("Base icon variant is required")
+			return
+		}
+
+		if (categories.length === 0) {
+			toast.error("At least one category is required")
+			return
+		}
+
+		if (!pb.authStore.isValid) {
+			toast.error("You must be logged in to submit an icon")
+			return
+		}
+
+		try {
+			// Prepare submission data
+			const assetFiles: File[] = []
+			const extras: any = {
+				aliases,
+				categories,
+				base: baseVariant.file.name.split(".").pop() || "svg",
+			}
+
+			// Add base variant
+			assetFiles.push(baseVariant.file)
+
+			// Check for color variants (light/dark)
+			const lightVariant = variants.find((v) => v.type === "light")
+			const darkVariant = variants.find((v) => v.type === "dark")
+
+			if (lightVariant || darkVariant) {
+				extras.colors = {}
+				if (lightVariant) {
+					extras.colors.light = lightVariant.file.name
+					assetFiles.push(lightVariant.file)
+				}
+				if (darkVariant) {
+					extras.colors.dark = darkVariant.file.name
+					assetFiles.push(darkVariant.file)
+				}
+			}
+
+			// Check for wordmark variants
+			const wordmarkLight = variants.find((v) => v.type === "wordmark-light")
+			const wordmarkDark = variants.find((v) => v.type === "wordmark-dark")
+
+			if (wordmarkLight || wordmarkDark) {
+				extras.wordmark = {}
+				if (wordmarkLight) {
+					extras.wordmark.light = wordmarkLight.file.name
+					assetFiles.push(wordmarkLight.file)
+				}
+				if (wordmarkDark) {
+					extras.wordmark.dark = wordmarkDark.file.name
+					assetFiles.push(wordmarkDark.file)
+				}
+			}
+
+			// Create submission
+			const submissionData = {
+				name: iconName,
+				assets: assetFiles,
+				created_by: pb.authStore.model?.id,
+				status: "pending",
+				extras: extras,
+			}
+
+			await pb.collection("submissions").create(submissionData)
+
+			launchConfetti()
+			toast.success("Icon submitted!", {
+				description: `Your icon "${iconName}" has been submitted for review`,
+			})
+
+			// Reset form
+			setIconName("")
+			setVariants([])
+			setCategories([])
+			setAliases([])
+			setDescription("")
+
+			if (onSubmit) {
+				onSubmit({ iconName, variants, categories, aliases, description })
+			}
+		} catch (error: any) {
+			console.error("Submission error:", error)
+			toast.error("Failed to submit icon", {
+				description: error?.message || "Please try again later",
+			})
+		}
+	}
+
+	const getAvailableFormats = () => {
+		const baseVariant = variants.find((v) => v.type === "base")
+		if (!baseVariant) return []
+
+		const baseFormat = baseVariant.file.name.split(".").pop()?.toLowerCase()
+		switch (baseFormat) {
+			case "svg":
+				return ["svg", "png", "webp"]
+			case "png":
+				return ["png", "webp"]
+			default:
+				return [baseFormat || ""]
+		}
+	}
+
+	const availableFormats = getAvailableFormats()
+	const formattedIconName = iconName ? formatIconName(iconName) : "Your Icon"
+	const baseVariant = variants.find((v) => v.type === "base")
+
+	return (
+		<form onSubmit={handleSubmit}>
+			<main className="container mx-auto pt-12 pb-14 px-4 sm:px-6 lg:px-8">
+				<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
+					{/* Left Column - Icon Info & Metadata */}
+					<div className="lg:col-span-1">
+						<Card className="h-full bg-background/50 border shadow-lg">
+							<CardHeader className="pb-4">
+								<div className="flex flex-col items-center">
+									{baseVariant ? (
+										<div className="relative w-32 h-32 rounded-xl overflow-hidden border flex items-center justify-center p-3">
+											<Image
+												src={baseVariant.preview}
+												priority
+												width={96}
+												height={96}
+												alt={`${formattedIconName} icon preview`}
+												className="w-full h-full object-contain"
+											/>
+										</div>
+									) : (
+										<div className="relative w-32 h-32 rounded-xl overflow-hidden border border-dashed border-muted-foreground/30 flex items-center justify-center p-3">
+											<Upload className="w-12 h-12 text-muted-foreground" />
+										</div>
+									)}
+									<div className="w-full mt-4">
+										<Label htmlFor="icon-name" className="text-sm font-medium mb-2 block">
+											Icon Name
+										</Label>
+										<IconNameCombobox
+											value={iconName}
+											onValueChange={setIconName}
+										/>
+									</div>
+								</div>
+							</CardHeader>
+							<CardContent>
+								<div className="space-y-4">
+									{/* Categories */}
+									<div>
+										<h3 className="text-sm font-semibold text-muted-foreground mb-2">Categories</h3>
+										<div className="flex flex-wrap gap-2">
+											{AVAILABLE_CATEGORIES.map((category) => (
+												<Badge
+													key={category}
+													variant={categories.includes(category) ? "default" : "outline"}
+													className="cursor-pointer hover:bg-primary/80 text-xs"
+													onClick={() => toggleCategory(category)}
+												>
+													{category
+														.split("-")
+														.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+														.join(" ")}
+												</Badge>
+											))}
+										</div>
+										{categories.length === 0 && (
+											<p className="text-xs text-destructive mt-2">At least one category required</p>
+										)}
+									</div>
+
+									{/* Aliases */}
+									<div>
+										<h3 className="text-sm font-semibold text-muted-foreground mb-2">Aliases</h3>
+										<div className="flex gap-2 mb-2">
+											<Input
+												placeholder="Add alias..."
+												value={aliasInput}
+												onChange={(e) => setAliasInput(e.target.value)}
+												onKeyDown={(e) => {
+													if (e.key === "Enter") {
+														e.preventDefault()
+														handleAddAlias()
+													}
+												}}
+												className="h-8 text-xs"
+											/>
+											<Button type="button" size="sm" onClick={handleAddAlias} className="h-8">
+												<Plus className="h-3 w-3" />
+											</Button>
+										</div>
+										{aliases.length > 0 && (
+											<div className="flex flex-wrap gap-2">
+												{aliases.map((alias) => (
+													<Badge
+														key={alias}
+														variant="secondary"
+														className="inline-flex items-center px-2.5 py-1 text-xs"
+													>
+														{alias}
+														<button
+															type="button"
+															onClick={() => handleRemoveAlias(alias)}
+															className="ml-1 hover:text-destructive"
+														>
+															<X className="h-3 w-3" />
+														</button>
+													</Badge>
+												))}
+											</div>
+										)}
+									</div>
+
+									{/* About */}
+									<div>
+										<h3 className="text-sm font-semibold text-muted-foreground mb-2">
+											About this icon
+										</h3>
+										<div className="text-xs text-muted-foreground space-y-2">
+											<p>
+												{variants.length > 0
+													? `${variants.length} variant${variants.length > 1 ? "s" : ""} uploaded`
+													: "No variants uploaded yet"}
+											</p>
+											{availableFormats.length > 0 && (
+												<p>
+													Available in{" "}
+													{availableFormats.length > 1
+														? `${availableFormats.length} formats (${availableFormats.map((f) => f.toUpperCase()).join(", ")})`
+														: `${availableFormats[0].toUpperCase()} format`}
+												</p>
+											)}
+										</div>
+									</div>
+								</div>
+							</CardContent>
+						</Card>
+					</div>
+
+					{/* Middle Column - Icon Variants */}
+					<div className="lg:col-span-2">
+						<Card className="h-full bg-background/50 shadow-lg">
+							<CardHeader>
+								<CardTitle>
+									<h2>Icon Variants</h2>
+								</CardTitle>
+								<CardDescription>Add different versions of your icon for various themes</CardDescription>
+							</CardHeader>
+							<CardContent>
+								<div className="space-y-10">
+									{/* Base/Default Variants */}
+									<div>
+										<h3 className="text-lg font-semibold flex items-center gap-2 mb-1">
+											<FileType className="w-4 h-4 text-blue-500" />
+											Icon Variants
+										</h3>
+										<p className="text-sm text-muted-foreground mb-4">
+											Upload your icon files. Base icon is required.
+										</p>
+										<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+											{variants.map((variant, index) => (
+												<VariantCard
+													key={index}
+													variant={variant}
+													onRemove={() => handleRemoveVariant(index)}
+													canRemove={variant.type !== "base" || variants.length > 1}
+												/>
+											))}
+											<AddVariantCard
+												onAddVariant={handleAddVariant}
+												existingTypes={variants.map((v) => v.type)}
+											/>
+										</div>
+									</div>
+
+									{/* Help Text */}
+									<div className="bg-muted/50 p-4 rounded-lg space-y-2">
+										<h4 className="text-sm font-semibold">Variant Types:</h4>
+										<ul className="text-xs text-muted-foreground space-y-1 list-disc list-inside">
+											<li>
+												<strong>Base Icon:</strong> Main icon file (required)
+											</li>
+											<li>
+												<strong>Light Theme:</strong> Optimized for light backgrounds
+											</li>
+											<li>
+												<strong>Dark Theme:</strong> Optimized for dark backgrounds
+											</li>
+											<li>
+												<strong>Wordmark:</strong> Logo with text/brand name
+											</li>
+										</ul>
+									</div>
+								</div>
+							</CardContent>
+						</Card>
+					</div>
+
+					{/* Right Column - Technical Details & Actions */}
+					<div className="lg:col-span-1">
+						<Card className="h-full bg-background/50 border shadow-lg">
+							<CardHeader>
+								<CardTitle>Technical Details</CardTitle>
+							</CardHeader>
+							<CardContent>
+								<div className="space-y-6">
+									<div>
+										<h3 className="text-sm font-semibold text-muted-foreground mb-2">Base Format</h3>
+										<div className="flex items-center gap-2">
+											<FileType className="w-4 h-4 text-blue-500" />
+											<div className="px-3 py-1.5 border border-border rounded-lg text-sm font-medium">
+												{baseVariant
+													? baseVariant.file.name.split(".").pop()?.toUpperCase()
+													: "N/A"}
+											</div>
+										</div>
+									</div>
+
+									{availableFormats.length > 0 && (
+										<div>
+											<h3 className="text-sm font-semibold text-muted-foreground mb-2">
+												Available Formats
+											</h3>
+											<div className="flex flex-wrap gap-2">
+												{availableFormats.map((format) => (
+													<div
+														key={format}
+														className="px-3 py-1.5 border border-border rounded-lg text-xs font-medium"
+													>
+														{format.toUpperCase()}
+													</div>
+												))}
+											</div>
+										</div>
+									)}
+
+									{variants.some((v) => v.type === "light" || v.type === "dark") && (
+										<div>
+											<h3 className="text-sm font-semibold text-muted-foreground mb-2">
+												Color Variants
+											</h3>
+											<div className="space-y-2">
+												{variants
+													.filter((v) => v.type === "light" || v.type === "dark")
+													.map((variant, index) => (
+														<div key={index} className="flex items-center gap-2">
+															<PaletteIcon className="w-4 h-4 text-purple-500" />
+															<span className="capitalize font-medium text-sm">
+																{variant.type}:
+															</span>
+															<code className="border border-border px-2 py-0.5 rounded-lg text-xs">
+																{variant.file.name}
+															</code>
+														</div>
+													))}
+											</div>
+										</div>
+									)}
+
+									{variants.some((v) => v.type.startsWith("wordmark")) && (
+										<div>
+											<h3 className="text-sm font-semibold text-muted-foreground mb-2">
+												Wordmark Variants
+											</h3>
+											<div className="space-y-2">
+												{variants
+													.filter((v) => v.type.startsWith("wordmark"))
+													.map((variant, index) => (
+														<div key={index} className="flex items-center gap-2">
+															<Type className="w-4 h-4 text-green-500" />
+															<span className="capitalize font-medium text-sm">
+																{variant.type.replace("wordmark-", "")}:
+															</span>
+															<code className="border border-border px-2 py-0.5 rounded-lg text-xs">
+																{variant.file.name}
+															</code>
+														</div>
+													))}
+											</div>
+										</div>
+									)}
+
+									<div className="pt-4 space-y-2">
+										<Button type="submit" className="w-full" size="lg">
+											Submit Icon
+										</Button>
+										<Button
+											type="button"
+											variant="outline"
+											className="w-full"
+											onClick={() => {
+												setIconName("")
+												setVariants([])
+												setCategories([])
+												setAliases([])
+												setDescription("")
+											}}
+										>
+											Clear Form
+										</Button>
+									</div>
+								</div>
+							</CardContent>
+						</Card>
+					</div>
+				</div>
+			</main>
+		</form>
+	)
+}
+
+
+