feat: Centralize Auth Modal and require auth for actions

src/pages/Parks.tsx

@@ -31,6 +31,7 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } f
 import { ParkForm } from '@/components/admin/ParkForm';
 import { useAuth } from '@/hooks/useAuth';
 import { useUserRole } from '@/hooks/useUserRole';
+import { useAuthModal } from '@/hooks/useAuthModal';
 
 export interface FilterState {
   search: string;
@@ -80,6 +81,7 @@ export default function Parks() {
   const { toast } = useToast();
   const { user } = useAuth();
   const { isModerator } = useUserRole();
+  const { requireAuth } = useAuthModal();
 
   useEffect(() => {
     fetchParks();
@@ -235,19 +237,8 @@ export default function Parks() {
     navigate(`/parks/${park.slug}`);
   };
 
-  const handleAddParkClick = () => {
-    if (!user) {
-      navigate('/auth');
-      return;
-    }
-    setIsAddParkModalOpen(true);
-  };
-
   const handleParkSubmit = async (parkData: any) => {
-    if (!user) {
-      navigate('/auth');
-      return;
-    }
+    if (!user) return;
 
     try {
       const { submitParkCreation } = await import('@/lib/entitySubmissionHelpers');
@@ -321,7 +312,7 @@ export default function Parks() {
 
             <div className="flex items-center gap-2">
               <Button 
-                onClick={handleAddParkClick}
+                onClick={() => requireAuth(() => setIsAddParkModalOpen(true), "Sign in to add a new park")}
                 className="gap-2"
               >
                 <Plus className="w-4 h-4" />