feat: Centralize Auth Modal and require auth for actions

src/pages/Designers.tsx

@@ -15,11 +15,13 @@ import { useAuth } from '@/hooks/useAuth';
 import { useUserRole } from '@/hooks/useUserRole';
 import { toast } from '@/hooks/use-toast';
 import { submitCompanyCreation } from '@/lib/companyHelpers';
+import { useAuthModal } from '@/hooks/useAuthModal';
 
 export default function Designers() {
   const navigate = useNavigate();
   const { user } = useAuth();
   const { isModerator } = useUserRole();
+  const { requireAuth } = useAuthModal();
   const [companies, setCompanies] = useState<Company[]>([]);
   const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState('');
@@ -28,10 +30,7 @@ export default function Designers() {
 
   const handleCreateSubmit = async (data: any) => {
     try {
-      if (!user) {
-        navigate('/auth');
-        return;
-      }
+      if (!user) return;
       await submitCompanyCreation(data, 'designer', user.id);
       toast({
         title: "Designer Submitted",
@@ -122,13 +121,7 @@ export default function Designers() {
 
             <div className="flex items-center gap-2">
               <Button 
-                onClick={() => {
-                  if (!user) {
-                    navigate('/auth');
-                  } else {
-                    setIsCreateModalOpen(true);
-                  }
-                }}
+                onClick={() => requireAuth(() => setIsCreateModalOpen(true), "Sign in to add a designer")}
                 className="gap-2"
               >
                 <Plus className="w-4 h-4" />