Improve flow

ui/src/App.tsx

@@ -26,7 +26,7 @@ export const App = () => {
               <Route
                 path="/"
                 element={
-                  <ProtectedRoute to="/landing">
+                  <ProtectedRoute to="/login">
                     <TabloPage />
                   </ProtectedRoute>
                 }

ui/src/components/ProtectedRoute.tsx

@@ -1,6 +1,7 @@
 import { ReactNode, useEffect } from "react";
 import { useSession } from "../contexts/SessionContext";
 import { useNavigate } from "react-router-dom";
+
 interface ProtectedRouteProps {
   children: ReactNode;
   to?: string;
@@ -9,11 +10,16 @@ interface ProtectedRouteProps {
 export const ProtectedRoute = ({ children, to }: ProtectedRouteProps) => {
   const { session } = useSession();
   const navigate = useNavigate();
-
   useEffect(() => {
-    let timer = setTimeout(() => {
+    const timer = setTimeout(() => {
       if (!session) {
-        navigate(to ?? "/landing");
+        const isFirstTimeUser =
+          localStorage.getItem("xtablo-has-seen-landing-page") === null;
+        if (isFirstTimeUser) {
+          navigate("/landing");
+        } else {
+          navigate(to ?? "/login");
+        }
       }
     }, 300);
     return () => clearTimeout(timer);

ui/src/pages/landing.tsx

@@ -5,6 +5,7 @@ import logo from "../assets/icon.jpg";
 import { Header } from "../components/header";
 
 export const LandingPage = () => {
+  localStorage.setItem("xtablo-has-seen-landing-page", "true");
   return (
     <>
       <Header />