mirror of
https://github.com/walkxcode/dashboard-icons.git
synced 2025-10-28 22:19:03 +08:00
feat: implement advanced icon submission form
- Create comprehensive icon submission form with multiple variants - Add support for base, dark, light, wordmark, and wordmark_dark variants - Implement file upload with drag-and-drop functionality - Add icon name validation and existing icon detection - Include category selection, aliases, and description fields - Integrate with PocketBase for submission storage - Add form validation and error handling
This commit is contained in:
Thomas Camlong
451
web/src/components/advanced-icon-submission-form.tsx
Normal file
451
web/src/components/advanced-icon-submission-form.tsx
Normal file
@@ -0,0 +1,451 @@
|
|||||||
|
"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 [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 }
|
||||||
|
delete newFiles[variantId]
|
||||||
|
setFiles(newFiles)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleFileDrop = (variantId: string, droppedFiles: File[]) => {
|
||||||
|
setFiles({
|
||||||
|
...files,
|
||||||
|
[variantId]: droppedFiles,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
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({})
|
||||||
|
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">
|
||||||
|
<Check className="h-4 w-4 text-green-500" />
|
||||||
|
<AlertDescription className="text-green-600 dark:text-green-400">
|
||||||
|
This is a <strong>new icon</strong> 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 />
|
||||||
|
</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({})
|
||||||
|
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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
Reference in New Issue
Block a user