From 091454d2733f7d9b935af78448986adf0e813a01 Mon Sep 17 00:00:00 2001
From: Marco Sadjadi <marco@buildmymcpserver.local>
Date: Mon, 25 May 2026 19:30:27 +0200
Subject: [PATCH] fix(web): single Login/Dashboard button on marketing header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Logged-out state was showing two CTAs ("Sign in" link + "Start building"
button) both going to /login — confusing because the prominent purple
button never literally said "Login". Consolidate to one button whose
label flips with auth state: "Login" when out, "Dashboard" when in.
Same slot, same colour, no header layout shift.

Defaults to "Login" while the /v1/auth/me probe is in flight so the
common (anonymous) visitor sees no flicker.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../web/components/marketing-auth-buttons.tsx | 43 +++++++------------
 1 file changed, 15 insertions(+), 28 deletions(-)

diff --git a/apps/web/components/marketing-auth-buttons.tsx b/apps/web/components/marketing-auth-buttons.tsx
index c8e7b8a..a126603 100644
--- a/apps/web/components/marketing-auth-buttons.tsx
+++ b/apps/web/components/marketing-auth-buttons.tsx
@@ -5,9 +5,14 @@ import Link from 'next/link';
 import { useEffect, useState } from 'react';
 
 /**
- * Marketing-header CTAs that reflect the session: a logged-in visitor sees a
- * "Dashboard" link instead of the sign-in buttons. The session cookie is
- * httpOnly, so login state is probed via /v1/auth/me.
+ * Marketing-header CTA that reflects the session: logged-out visitors see a
+ * "Login" button, signed-in users see "Dashboard". Same button slot so the
+ * header layout doesn't shift between states.
+ *
+ * While the auth probe is in flight (`authed === null`) we default to the
+ * logged-out label — most marketing-page visitors are anonymous, so this
+ * avoids a "Dashboard → Login" flicker for them. Authed users see a single
+ * "Login → Dashboard" swap once the /v1/auth/me round-trip completes.
  */
 export function MarketingAuthButtons() {
   const [authed, setAuthed] = useState<boolean | null>(null);
@@ -18,32 +23,14 @@ export function MarketingAuthButtons() {
       .catch(() => setAuthed(false));
   }, []);
 
-  if (authed) {
-    return (
-      <Link
-        href="/dashboard"
-        className="rounded-md bg-[--color-accent] px-3 py-1.5 text-[13px] font-medium text-white transition-colors duration-200 hover:bg-[#5557e8]"
-      >
-        Dashboard
-      </Link>
-    );
-  }
+  const showDashboard = authed === true;
 
-  // Logged out — or still resolving — show the default sign-in CTAs.
   return (
-    <>
-      <Link
-        href="/login"
-        className="hidden rounded-md px-3 py-1.5 text-[13px] text-[--color-fg-muted] transition-colors hover:text-[--color-fg] sm:block"
-      >
-        Sign in
-      </Link>
-      <Link
-        href="/login"
-        className="rounded-md bg-[--color-accent] px-3 py-1.5 text-[13px] font-medium text-white transition-colors duration-200 hover:bg-[#5557e8]"
-      >
-        Start building
-      </Link>
-    </>
+    <Link
+      href={showDashboard ? '/dashboard' : '/login'}
+      className="rounded-md bg-[--color-accent] px-3 py-1.5 text-[13px] font-medium text-white transition-colors duration-200 hover:bg-[#5557e8]"
+    >
+      {showDashboard ? 'Dashboard' : 'Login'}
+    </Link>
   );
 }