From e4b84fb1cde31169ce6174264959693741ddf173 Mon Sep 17 00:00:00 2001
From: Ajax Davis <thomasalwyndavis@gmail.com>
Date: Fri, 2 Jan 2026 01:28:04 +1000
Subject: [PATCH] feat: add minimal header to auth pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Create AuthHeader component with logo and contextual auth link
- Show "Sign Up" on sign-in page and vice versa
- Keep centered form layout with header at top

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/app/(auth)/layout.tsx     |  8 +++-
 apps/web/src/components/AuthHeader.tsx | 66 ++++++++++++++++++++++++++
 2 files changed, 72 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/src/components/AuthHeader.tsx

diff --git a/apps/web/src/app/(auth)/layout.tsx b/apps/web/src/app/(auth)/layout.tsx
index 063f0ad..322c85d 100644
--- a/apps/web/src/app/(auth)/layout.tsx
+++ b/apps/web/src/app/(auth)/layout.tsx
@@ -1,9 +1,13 @@
+import { AuthHeader } from '@/components/AuthHeader';
 import type { ReactNode } from 'react';
 
 export default function AuthLayout({ children }: { children: ReactNode }) {
   return (
-    <div className="min-h-screen flex items-center justify-center bg-background">
-      <div className="w-full max-w-md p-8">{children}</div>
+    <div className="min-h-screen flex flex-col bg-background">
+      <AuthHeader />
+      <div className="flex-1 flex items-center justify-center">
+        <div className="w-full max-w-md p-8">{children}</div>
+      </div>
     </div>
   );
 }
diff --git a/apps/web/src/components/AuthHeader.tsx b/apps/web/src/components/AuthHeader.tsx
new file mode 100644
index 0000000..ecd53f2
--- /dev/null
+++ b/apps/web/src/components/AuthHeader.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import { Button } from '@tpmjs/ui/Button/Button';
+import { Header } from '@tpmjs/ui/Header/Header';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+/**
+ * Minimal header for auth pages (sign-in, sign-up, verify-email)
+ * Shows logo on left, contextual auth link on right
+ */
+export function AuthHeader(): React.ReactElement {
+  const pathname = usePathname();
+  const isSignIn = pathname === '/sign-in';
+  const isSignUp = pathname === '/sign-up';
+
+  return (
+    <Header
+      title={
+        <Link
+          href="/"
+          className="text-foreground hover:text-foreground text-xl md:text-2xl font-bold uppercase tracking-tight"
+        >
+          TPMJS
+        </Link>
+      }
+      size="md"
+      sticky={true}
+      actions={
+        <div className="flex items-center gap-2">
+          {isSignIn && (
+            <>
+              <span className="text-foreground-secondary text-sm hidden sm:inline">
+                Don&apos;t have an account?
+              </span>
+              <Link href="/sign-up">
+                <Button variant="outline" size="sm">
+                  Sign Up
+                </Button>
+              </Link>
+            </>
+          )}
+          {isSignUp && (
+            <>
+              <span className="text-foreground-secondary text-sm hidden sm:inline">
+                Already have an account?
+              </span>
+              <Link href="/sign-in">
+                <Button variant="outline" size="sm">
+                  Sign In
+                </Button>
+              </Link>
+            </>
+          )}
+          {!isSignIn && !isSignUp && (
+            <Link href="/sign-in">
+              <Button variant="outline" size="sm">
+                Sign In
+              </Button>
+            </Link>
+          )}
+        </div>
+      }
+    />
+  );
+}