refactor(cloud): pre-facelift handling of login/logout/home

cloud/app/components/blocks/navigation/desktop-navigation.tsx

@@ -2,6 +2,7 @@ import { Link } from "@tanstack/react-router";
 import React from "react";
 import { cn } from "@/app/lib/utils";
 import { NAV_LINK_STYLES, DESKTOP_NAV_STYLES } from "./styles";
+import { useAuth } from "@/app/contexts/auth";
 
 // Reusable navigation link component
 interface NavLinkProps {
@@ -33,12 +34,28 @@ interface DesktopNavigationProps {
 export default function DesktopNavigation({
   isSearchOpen,
 }: DesktopNavigationProps) {
+  const { user, isLoading, logout } = useAuth();
+
   return (
     <div className={DESKTOP_NAV_STYLES.container(isSearchOpen)}>
       {/* Products Menu */}
-      <NavLink href="/docs">Docs</NavLink>
+      <NavLink href="/docs/v1">Docs</NavLink>
       <NavLink href="/blog">Blog</NavLink>
       <NavLink href="/pricing">Pricing</NavLink>
+      {!isLoading && (
+        <>
+          {user ? (
+            <button
+              onClick={() => void logout()}
+              className={cn(NAV_LINK_STYLES.base)}
+            >
+              Logout
+            </button>
+          ) : (
+            <NavLink href="/login">Login</NavLink>
+          )}
+        </>
+      )}
     </div>
   );
 }

cloud/app/components/blocks/navigation/mobile-navigation.tsx

@@ -1,5 +1,7 @@
 import { Link } from "@tanstack/react-router";
 import { MOBILE_NAV_STYLES, NAV_LINK_STYLES } from "./styles";
+import { useAuth } from "@/app/contexts/auth";
+import { cn } from "@/app/lib/utils";
 
 interface MobileNavigationProps {
   /**
@@ -16,8 +18,15 @@ export default function MobileNavigation({
   isOpen,
   onClose,
 }: MobileNavigationProps) {
+  const { user, isLoading, logout } = useAuth();
+
   if (!isOpen) return null;
 
+  const handleLogout = async () => {
+    await logout();
+    onClose();
+  };
+
   return (
     <div className={MOBILE_NAV_STYLES.container}>
       <div className={MOBILE_NAV_STYLES.content}>
@@ -36,6 +45,27 @@ export default function MobileNavigation({
         >
           Pricing
         </Link>
+
+        {!isLoading && (
+          <>
+            {user ? (
+              <button
+                onClick={() => void handleLogout()}
+                className={cn(NAV_LINK_STYLES.mobile)}
+              >
+                Logout
+              </button>
+            ) : (
+              <Link
+                to="/login"
+                className={NAV_LINK_STYLES.mobile}
+                onClick={onClose}
+              >
+                Login
+              </Link>
+            )}
+          </>
+        )}
       </div>
     </div>
   );

cloud/app/components/protected.tsx

@@ -10,7 +10,7 @@ export function Protected({ children }: { children: ReactNode }) {
   useEffect(() => {
     // Only redirect on client-side after auth check completes
     if (!isLoading && !user) {
-      void navigate({ to: "/login", replace: true });
+      void navigate({ to: "/home", replace: true });
     }
   }, [user, isLoading, navigate]);