From 171e8972805342bea8696eca9c91314e994329fb Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Thu, 2 Oct 2025 10:51:54 +0200
Subject: [PATCH] feat: create submit page with authentication flow

- Add submit page with authentication check
- Implement login modal integration for unauthenticated users
- Create submission guidelines and requirements display
- Add AdvancedIconSubmissionForm component integration
- Handle loading states and user experience flow
---
 web/src/app/submit/page.tsx | 90 +++++++++++++++++++++++++++++++++++++
 1 file changed, 90 insertions(+)
 create mode 100644 web/src/app/submit/page.tsx

diff --git a/web/src/app/submit/page.tsx b/web/src/app/submit/page.tsx
new file mode 100644
index 00000000..9895059a
--- /dev/null
+++ b/web/src/app/submit/page.tsx
@@ -0,0 +1,90 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { AdvancedIconSubmissionForm } from "@/components/advanced-icon-submission-form"
+import { LoginModal } from "@/components/login-modal"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { pb } from "@/lib/pb"
+
+export default function SubmitPage() {
+	const [isAuthenticated, setIsAuthenticated] = useState(false)
+	const [isLoading, setIsLoading] = useState(true)
+	const [showLoginModal, setShowLoginModal] = useState(false)
+
+	useEffect(() => {
+		const checkAuth = () => {
+			setIsAuthenticated(pb.authStore.isValid)
+			setIsLoading(false)
+		}
+
+		checkAuth()
+
+		// Subscribe to auth changes
+		pb.authStore.onChange(() => {
+			checkAuth()
+		})
+	}, [])
+
+	if (isLoading) {
+		return (
+			<div className="container mx-auto px-4 py-12">
+				<div className="flex items-center justify-center min-h-[60vh]">
+					<p className="text-muted-foreground">Loading...</p>
+				</div>
+			</div>
+		)
+	}
+
+	if (!isAuthenticated) {
+		return (
+			<>
+				<div className="container mx-auto px-4 py-12">
+					<div className="max-w-2xl mx-auto">
+						<Card>
+							<CardHeader className="text-center space-y-4">
+								<CardTitle className="text-3xl">Submit an Icon</CardTitle>
+								<CardDescription className="text-base">
+									Share your icons with the community and help expand our collection
+								</CardDescription>
+							</CardHeader>
+							<CardContent className="space-y-6">
+								<div className="bg-muted/50 p-6 rounded-lg space-y-4">
+									<h3 className="font-semibold text-lg">Before you start</h3>
+									<ul className="space-y-2 text-sm text-muted-foreground list-disc list-inside">
+										<li>You need to be logged in to submit icons</li>
+										<li>Icons should be in SVG, PNG, or WebP format</li>
+										<li>Maximum file size: 5MB per variant</li>
+										<li>All submissions are reviewed before being added to the collection</li>
+									</ul>
+								</div>
+
+								<div className="flex justify-center pt-4">
+									<Button size="lg" onClick={() => setShowLoginModal(true)}>
+										Sign In to Submit
+									</Button>
+								</div>
+							</CardContent>
+						</Card>
+					</div>
+				</div>
+
+				{showLoginModal && <LoginModal onClose={() => setShowLoginModal(false)} />}
+			</>
+		)
+	}
+
+	return (
+		<div className="container mx-auto px-4 py-12">
+			<div className="mb-8 text-center">
+				<h1 className="text-4xl font-bold mb-2">Submit an Icon</h1>
+				<p className="text-muted-foreground text-lg">
+					{isAuthenticated ? "Create a new icon or update an existing one" : "Sign in to submit icons"}
+				</p>
+			</div>
+
+			<AdvancedIconSubmissionForm />
+		</div>
+	)
+}
+