fix: Header nav - Settings, Admin, Login/Signup visibility with proper auth guards

web/components/nav.tsx

@@ -55,7 +55,7 @@ export function Nav() {
     window.location.href = "/";
   }
 
-  // Public links — always visible
+  // Public links - always visible
   const mainLinks: NavLink[] = [
     { href: "/#features", label: "Features", icon: Sparkles },
     { href: "/#pricing", label: "Pricing", icon: CreditCard },
@@ -73,9 +73,9 @@ export function Nav() {
           <span className="hidden sm:inline text-[10px] font-medium text-zinc-400 ml-1 border border-zinc-200 px-1.5 py-0.5 rounded">v4.0</span>
         </Link>
 
-        {/* ─── Desktop Nav ─── */}
+        {/* Desktop Nav */}
         <div className="hidden md:flex items-center gap-0.5">
-          {/* Public links — always visible */}
+          {/* Public links - always visible */}
           {mainLinks.map((l) => {
             const isActive = pathname === l.href;
             return (
@@ -88,7 +88,7 @@ export function Nav() {
             );
           })}
 
-          {/* ── Loading skeleton ── */}
+          {/* Loading skeleton while auth state resolves */}
           {!loaded && (
             <>
               <div className="w-px h-4 bg-zinc-200 mx-1.5" />
@@ -99,7 +99,7 @@ export function Nav() {
             </>
           )}
 
-          {/* ── Logged-in links ── */}
+          {/* Logged-in links */}
           {loaded && isLoggedIn && (
             <>
               {/* Dashboard */}
@@ -113,7 +113,7 @@ export function Nav() {
                 Dashboard
               </Link>
 
-              {/* Team — only when user has a team */}
+              {/* Team - only when user belongs to a team */}
               {hasTeam && (
                 <Link href="/dashboard-pages/team"
                   className={`flex items-center gap-1.5 px-2.5 py-1.5 text-[13px] rounded-md transition-colors ${
@@ -126,7 +126,7 @@ export function Nav() {
                 </Link>
               )}
 
-              {/* Admin — only for admin role */}
+              {/* Admin - only for admin role */}
               {isAdmin && (
                 <Link href="/admin"
                   className={`flex items-center gap-1.5 px-2.5 py-1.5 text-[13px] rounded-md transition-colors ${
@@ -152,13 +152,13 @@ export function Nav() {
                 Settings
               </Link>
 
-              {/* User indicator + sign out dropdown */}
+              {/* User indicator with hover dropdown */}
               <div className="relative group ml-1">
                 <button className="flex items-center gap-1.5 px-2.5 py-1.5 text-[13px] text-zinc-500 hover:text-zinc-900 rounded-md hover:bg-zinc-50 transition-colors">
                   <UserCircle className="w-3.5 h-3.5" />
                   <span className="max-w-[100px] truncate">{userEmail?.split("@")[0]}</span>
                 </button>
-                {/* Dropdown */}
+                {/* Dropdown on hover */}
                 <div className="absolute right-0 top-full mt-1 w-52 bg-white border border-zinc-200 rounded-xl shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-150 z-50">
                   <div className="px-3 py-2.5 border-b border-zinc-100">
                     <p className="text-xs text-zinc-400">Signed in as</p>
@@ -198,7 +198,7 @@ export function Nav() {
             </>
           )}
 
-          {/* ── Logged-out links ── */}
+          {/* Logged-out links */}
           {loaded && !isLoggedIn && (
             <>
               <div className="w-px h-4 bg-zinc-200 mx-1.5" />
@@ -226,7 +226,7 @@ export function Nav() {
         </button>
       </div>
 
-      {/* ─── Mobile Menu ─── */}
+      {/* Mobile Menu */}
       {open && (
         <div className="md:hidden border-t border-zinc-100 bg-white px-5 py-3 space-y-0.5">
           {/* Public links */}
@@ -244,7 +244,7 @@ export function Nav() {
             );
           })}
 
-          {/* ── Mobile loading skeleton ── */}
+          {/* Mobile loading skeleton */}
           {!loaded && (
             <>
               <div className="h-px bg-zinc-100 my-1.5" />
@@ -255,12 +255,12 @@ export function Nav() {
             </>
           )}
 
-          {/* ── Mobile: Logged-in links ── */}
+          {/* Mobile: Logged-in links */}
           {loaded && isLoggedIn && (
             <>
               <div className="h-px bg-zinc-100 my-1.5" />
 
-              {/* User info */}
+              {/* User info banner */}
               <div className="px-3 py-2">
                 <p className="text-xs text-zinc-400">Signed in as</p>
                 <p className="text-sm text-zinc-700 font-medium truncate">{userEmail}</p>
@@ -284,7 +284,7 @@ export function Nav() {
                 <Settings className="w-4 h-4 text-zinc-400" /> Settings
               </Link>
 
-              {/* Team */}
+              {/* Team link */}
               {hasTeam && (
                 <Link href="/dashboard-pages/team" onClick={() => setOpen(false)}
                   className={`flex items-center gap-2.5 px-3 py-2.5 text-sm rounded-md ${
@@ -296,7 +296,7 @@ export function Nav() {
                 </Link>
               )}
 
-              {/* Admin */}
+              {/* Admin link */}
               {isAdmin && (
                 <Link href="/admin" onClick={() => setOpen(false)}
                   className={`flex items-center gap-2.5 px-3 py-2.5 text-sm rounded-md ${
@@ -324,7 +324,7 @@ export function Nav() {
             </>
           )}
 
-          {/* ── Mobile: Logged-out links ── */}
+          {/* Mobile: Logged-out links */}
           {loaded && !isLoggedIn && (
             <>
               <div className="h-px bg-zinc-100 my-1.5" />