no separate login/register page, use modal throughout

frontend/src/components/PrivateRoute.tsx

@@ -1,18 +1,25 @@
-import React from 'react';
-import { Navigate, useLocation } from 'react-router-dom';
-import { useAuth } from '../contexts/AuthContext';
+import React, { useEffect } from "react";
+import { useAuth } from "../contexts/AuthContext";
 
 interface PrivateRouteProps {
   children: React.ReactNode;
 }
 
 const PrivateRoute: React.FC<PrivateRouteProps> = ({ children }) => {
-  const { user, loading } = useAuth();
-  const location = useLocation();
+  const { user, loading, openAuthModal } = useAuth();
+
+  useEffect(() => {
+    if (!loading && !user) {
+      openAuthModal("login");
+    }
+  }, [loading, user, openAuthModal]);
 
   if (loading) {
     return (
-      <div className="d-flex justify-content-center align-items-center" style={{ minHeight: '80vh' }}>
+      <div
+        className="d-flex justify-content-center align-items-center"
+        style={{ minHeight: "80vh" }}
+      >
         <div className="spinner-border text-primary" role="status">
           <span className="visually-hidden">Loading...</span>
         </div>
@@ -20,7 +27,21 @@ const PrivateRoute: React.FC<PrivateRouteProps> = ({ children }) => {
     );
   }
 
-  return user ? <>{children}</> : <Navigate to="/login" state={{ from: location }} replace />;
+  if (!user) {
+    return (
+      <div
+        className="d-flex justify-content-center align-items-center"
+        style={{ minHeight: "80vh" }}
+      >
+        <div className="text-center">
+          <i className="bi bi-lock display-1 text-muted mb-3"></i>
+          <h3>Please log in or sign up to access this page.</h3>
+        </div>
+      </div>
+    );
+  }
+
+  return <>{children}</>;
 };
 
-export default PrivateRoute;
+export default PrivateRoute;