refactor(submissions): improve submission forms and data table

- Update icon submission forms with better validation
- Enhance advanced submission form with TanStack
- Improve submissions data table functionality
- Update submissions hook for better data management

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

@@ -1,7 +1,8 @@
 "use client"
 
-import { Check, FileImage, FileType, Plus, X } from "lucide-react"
 import { useForm } from "@tanstack/react-form"
+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 { Badge } from "@/components/ui/badge"
@@ -12,9 +13,9 @@ import { Label } from "@/components/ui/label"
 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"
+import { pb } from "@/lib/pb"
+import { revalidateAllSubmissions } from "@/app/actions/submissions"
 
 interface VariantConfig {
 	id: string
@@ -168,6 +169,9 @@ export function AdvancedIconSubmissionFormTanStack() {
 
 				await pb.collection("submissions").create(submissionData)
 
+				// Revalidate Next.js cache for community pages
+				await revalidateAllSubmissions()
+
 				toast.success("Icon submitted!", {
 					description: `Your icon "${value.iconName}" has been submitted for review`,
 				})
@@ -188,7 +192,10 @@ export function AdvancedIconSubmissionFormTanStack() {
 		if (variantId !== "base") {
 			// Remove from selected variants
 			const currentVariants = form.getFieldValue("selectedVariants")
-			form.setFieldValue("selectedVariants", currentVariants.filter((v) => v !== variantId))
+			form.setFieldValue(
+				"selectedVariants",
+				currentVariants.filter((v) => v !== variantId),
+			)
 
 			// Remove files
 			const currentFiles = form.getFieldValue("files")
@@ -205,9 +212,7 @@ export function AdvancedIconSubmissionFormTanStack() {
 
 	const handleVariantSelectionChange = (selectedValues: string[]) => {
 		// Ensure base is always included
-		const finalValues = selectedValues.includes("base") 
+		const finalValues = selectedValues.includes("base") ? selectedValues : ["base", ...selectedValues]
-			? selectedValues 
-			: ["base", ...selectedValues]
 		return finalValues
 	}
 
@@ -222,7 +227,7 @@ export function AdvancedIconSubmissionFormTanStack() {
 		if (droppedFiles.length > 0) {
 			const reader = new FileReader()
 			reader.onload = (e) => {
-				if (typeof e.target?.result === 'string') {
+				if (typeof e.target?.result === "string") {
 					setFilePreviews({
 						...filePreviews,
 						[variantId]: e.target.result,
@@ -247,13 +252,19 @@ export function AdvancedIconSubmissionFormTanStack() {
 
 	const handleRemoveAlias = (alias: string) => {
 		const currentAliases = form.getFieldValue("aliases")
-		form.setFieldValue("aliases", currentAliases.filter((a) => a !== alias))
+		form.setFieldValue(
+			"aliases",
+			currentAliases.filter((a) => a !== alias),
+		)
 	}
 
 	const toggleCategory = (category: string) => {
 		const currentCategories = form.getFieldValue("categories")
 		if (currentCategories.includes(category)) {
-			form.setFieldValue("categories", currentCategories.filter((c) => c !== category))
+			form.setFieldValue(
+				"categories",
+				currentCategories.filter((c) => c !== category),
+			)
 		} else {
 			form.setFieldValue("categories", [...currentCategories, category])
 		}
@@ -326,11 +337,7 @@ export function AdvancedIconSubmissionFormTanStack() {
 											{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
+														<img alt={`${variantId} preview`} className="max-h-full max-w-full object-contain" src={preview} />
-															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>
@@ -386,11 +393,7 @@ export function AdvancedIconSubmissionFormTanStack() {
 												return (
 													<Card
 														key={variantId}
-														className={`relative transition-all ${
+														className={`relative transition-all ${hasFile ? "border-primary bg-primary/5" : "border-border"}`}
-															hasFile
-																? "border-primary bg-primary/5"
-																: "border-border"
-														}`}
 													>
 														{/* Remove button at top-right corner */}
 														{!isBase && (
@@ -410,7 +413,11 @@ export function AdvancedIconSubmissionFormTanStack() {
 															<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>}
+																	{isBase && (
+																		<Badge variant="secondary" className="text-xs">
+																			Required
+																		</Badge>
+																	)}
 																	{hasFile && (
 																		<Badge variant="default" className="text-xs">
 																			<Check className="h-3 w-3 mr-1" />

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

@@ -51,7 +51,7 @@ export function IconSubmissionContent({ onClose }: { onClose?: () => void }) {
 		if (files.length > 0) {
 			const reader = new FileReader()
 			reader.onload = (e) => {
-				if (typeof e.target?.result === 'string') {
+				if (typeof e.target?.result === "string") {
 					setFilePreview(e.target?.result)
 				}
 			}
@@ -65,7 +65,7 @@ export function IconSubmissionContent({ onClose }: { onClose?: () => void }) {
 			<div className="space-y-3">
 				<h3 className="text-sm font-medium">Upload Icon Files</h3>
 				<Dropzone
-					accept={{ 'image/*': ['.png', '.jpg', '.jpeg', '.svg', '.webp'] }}
+					accept={{ "image/*": [".png", ".jpg", ".jpeg", ".svg", ".webp"] }}
 					onDrop={handleDrop}
 					onError={console.error}
 					src={files}
@@ -76,20 +76,12 @@ export function IconSubmissionContent({ onClose }: { onClose?: () => void }) {
 					<DropzoneContent>
 						{filePreview && (
 							<div className="h-[102px] w-full">
-								<img
+								<img alt="Preview" className="absolute top-0 left-0 h-full w-full object-cover" src={filePreview} />
-									alt="Preview"
-									className="absolute top-0 left-0 h-full w-full object-cover"
-									src={filePreview}
-								/>
 							</div>
 						)}
 					</DropzoneContent>
 				</Dropzone>
-				{files && files.length > 0 && (
+				{files && files.length > 0 && <div className="text-xs text-muted-foreground">{files.length} file(s) selected</div>}
-					<div className="text-xs text-muted-foreground">
-						{files.length} file(s) selected
-					</div>
-				)}
 			</div>
 
 			{/* Divider */}
@@ -121,7 +113,7 @@ export function IconSubmissionContent({ onClose }: { onClose?: () => void }) {
 		</div>
 	)
 }
-export function IconSubmissionForm({ trigger, onClick }: { trigger?: React.ReactNode, onClick?: () => void }) {
+export function IconSubmissionForm({ trigger, onClick }: { trigger?: React.ReactNode; onClick?: () => void }) {
 	const [open, setOpen] = useState(false)
 
 	return (

web/src/components/submissions-data-table.tsx

@@ -140,7 +140,8 @@ export function SubmissionsDataTable({
 		[userFilter],
 	)
 
-	const columns: ColumnDef<Submission>[] = React.useMemo(() => [
+	const columns: ColumnDef<Submission>[] = React.useMemo(
+		() => [
 			{
 				id: "expander",
 				header: () => null,
@@ -282,7 +283,9 @@ export function SubmissionsDataTable({
 					)
 				},
 			},
-	], [handleRowToggle, handleUserFilter, userFilter])
+		],
+		[handleRowToggle, handleUserFilter, userFilter],
+	)
 
 	const table = useReactTable({
 		data: groupedData,

web/src/hooks/use-submissions.ts

@@ -1,7 +1,8 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import { toast } from "sonner"
-import { pb, type Submission } from "@/lib/pb"
 import { getAllIcons } from "@/lib/api"
+import { pb, type Submission } from "@/lib/pb"
+import { revalidateAllSubmissions } from "@/app/actions/submissions"
 
 // Query key factory
 export const submissionKeys = {
@@ -46,10 +47,13 @@ export function useApproveSubmission() {
 				},
 			)
 		},
-		onSuccess: (data) => {
+		onSuccess: async (data) => {
 			// Invalidate and refetch submissions
 			queryClient.invalidateQueries({ queryKey: submissionKeys.lists() })
 
+			// Revalidate Next.js cache for community pages
+			await revalidateAllSubmissions()
+
 			toast.success("Submission approved", {
 				description: "The submission has been approved successfully",
 			})
@@ -82,10 +86,13 @@ export function useRejectSubmission() {
 				},
 			)
 		},
-		onSuccess: () => {
+		onSuccess: async () => {
 			// Invalidate and refetch submissions
 			queryClient.invalidateQueries({ queryKey: submissionKeys.lists() })
 
+			// Revalidate Next.js cache for community pages
+			await revalidateAllSubmissions()
+
 			toast.success("Submission rejected", {
 				description: "The submission has been rejected",
 			})