From c642b4deb54a03f85f241280a6a6d5e74eeb5b72 Mon Sep 17 00:00:00 2001
From: Ryan Salazar <ryaninwilton@gmail.com>
Date: Fri, 8 May 2026 21:05:32 +0000
Subject: [PATCH] Header: split Sign In / My Account by auth state, route Sign
 In to /client-login

Desktop nav (and mobile drawer) now show different account-related
links depending on auth state:

- Anonymous: Sign In (-> /client-login) + Register
- Authenticated: My Account + My Profile
- Admin-tier (administrator/admin/super_admin/editor/support): plus the
  full admin block (already gated by isAdmin from earlier commit)

Previously a single 'Sign In / My Account' link pointed at /account
regardless of auth state, which forced anonymous users through a
server-side bounce to the login page. Now Sign In links straight to the
canonical /client-login.
---
 src/components/Header.tsx | 69 ++++++++++++++++++++++++++++-----------
 1 file changed, 50 insertions(+), 19 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 59f4440..75118b9 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -240,18 +240,25 @@ export default function Header() {
             {/* Language Switcher — Section 18B */}
             <LanguageSwitcher compact />
             <div className="w-px h-3.5 bg-[#333] mx-1" />
-            <Link href="/account" className="text-[#999] hover:text-[#3b82f6] focus:text-[#3b82f6] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6] transition-colors text-xs font-body font-bold uppercase tracking-wider">
-              {currentUserId ? "My Account" : "Sign In"}
-            </Link>
             {!currentUserId && (
-              <Link href="/register" className="text-[#999] hover:text-[#3b82f6] focus:text-[#3b82f6] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6] transition-colors text-xs font-body font-bold uppercase tracking-wider">
-                Register
-              </Link>
+              <>
+                <Link href="/client-login" className="text-[#999] hover:text-[#3b82f6] focus:text-[#3b82f6] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6] transition-colors text-xs font-body font-bold uppercase tracking-wider">
+                  Sign In
+                </Link>
+                <Link href="/register" className="text-[#999] hover:text-[#3b82f6] focus:text-[#3b82f6] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6] transition-colors text-xs font-body font-bold uppercase tracking-wider">
+                  Register
+                </Link>
+              </>
             )}
             {currentUserId && (
-              <Link href={`/profile/${currentUserId}`} className="text-[#999] hover:text-[#3b82f6] focus:text-[#3b82f6] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6] transition-colors text-xs font-body font-bold uppercase tracking-wider">
-                My Profile
-              </Link>
+              <>
+                <Link href="/account" className="text-[#999] hover:text-[#3b82f6] focus:text-[#3b82f6] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6] transition-colors text-xs font-body font-bold uppercase tracking-wider">
+                  My Account
+                </Link>
+                <Link href={`/profile/${currentUserId}`} className="text-[#999] hover:text-[#3b82f6] focus:text-[#3b82f6] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6] transition-colors text-xs font-body font-bold uppercase tracking-wider">
+                  My Profile
+                </Link>
+              </>
             )}
             {isAdmin && (
               <>
@@ -457,16 +464,40 @@ export default function Header() {
                     </svg>
                     Reading List
                   </Link>
-                  {/* Account mobile link */}
-                  <Link
-                    href="/account"
-                    className="px-2 py-2.5 text-sm font-body font-bold uppercase tracking-wide text-[#cccccc] hover:text-[#3b82f6] hover:bg-[#1a1a1a] border-b border-[#222] transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[#3b82f6] flex items-center gap-2"
-                    onClick={() => setMobileOpen(false)}>
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
-                      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" />
-                    </svg>
-                    Account
-                  </Link>
+                  {/* Account / Sign In / Register — anonymous vs authenticated */}
+                  {!currentUserId && (
+                    <>
+                      <Link
+                        href="/client-login"
+                        className="px-2 py-2.5 text-sm font-body font-bold uppercase tracking-wide text-[#cccccc] hover:text-[#3b82f6] hover:bg-[#1a1a1a] border-b border-[#222] transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[#3b82f6] flex items-center gap-2"
+                        onClick={() => setMobileOpen(false)}>
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+                          <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" /><polyline points="10 17 15 12 10 7" /><line x1="15" y1="12" x2="3" y2="12" />
+                        </svg>
+                        Sign In
+                      </Link>
+                      <Link
+                        href="/register"
+                        className="px-2 py-2.5 text-sm font-body font-bold uppercase tracking-wide text-[#cccccc] hover:text-[#3b82f6] hover:bg-[#1a1a1a] border-b border-[#222] transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[#3b82f6] flex items-center gap-2"
+                        onClick={() => setMobileOpen(false)}>
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+                          <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="8.5" cy="7" r="4" /><line x1="20" y1="8" x2="20" y2="14" /><line x1="23" y1="11" x2="17" y2="11" />
+                        </svg>
+                        Register
+                      </Link>
+                    </>
+                  )}
+                  {currentUserId && (
+                    <Link
+                      href="/account"
+                      className="px-2 py-2.5 text-sm font-body font-bold uppercase tracking-wide text-[#cccccc] hover:text-[#3b82f6] hover:bg-[#1a1a1a] border-b border-[#222] transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[#3b82f6] flex items-center gap-2"
+                      onClick={() => setMobileOpen(false)}>
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" />
+                      </svg>
+                      My Account
+                    </Link>
+                  )}
                   {/* WP Import mobile link */}
                   {isAdmin && (
                     <Link