Add auth-aware navbar to landing page

- Extract navbar into separate client component (navbar.tsx) with useSession hook
- When authenticated: show "Go to App" button linking to /app
- When unauthenticated: show "Log in" and "Get Started" buttons
- Add SessionProvider to public layout to enable auth hooks
- Create session-provider wrapper component to separate concerns (metadata exports still work)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/(public)/layout.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { SessionProviderClient } from "./session-provider";
 
 export const metadata: Metadata = {
   title: "Candle Annotator",
@@ -10,5 +11,9 @@ export default function PublicLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  return children;
+  return (
+    <SessionProviderClient>
+      {children}
+    </SessionProviderClient>
+  );
 }

src/app/(public)/navbar.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import Link from "next/link";
+import { useSession } from "next-auth/react";
+import { Button } from "@/components/ui/button";
+import { ChartColumn } from "lucide-react";
+
+export function Navbar() {
+  const { data: session } = useSession();
+
+  return (
+    <nav className="border-b border-border bg-card/50 backdrop-blur-sm sticky top-0 z-50">
+      <div className="max-w-6xl mx-auto flex items-center justify-between px-6 py-3">
+        <div className="flex items-center gap-2">
+          <ChartColumn className="w-5 h-5 text-primary" />
+          <span className="font-mono font-bold text-sm tracking-tight">
+            CandleAnnotator
+          </span>
+        </div>
+        <div className="flex items-center gap-3">
+          {session ? (
+            <Button size="sm" className="font-mono text-xs" asChild>
+              <Link href="/app">Go to App</Link>
+            </Button>
+          ) : (
+            <>
+              <Button variant="ghost" size="sm" className="font-mono text-xs" asChild>
+                <Link href="/login">Log in</Link>
+              </Button>
+              <Button size="sm" className="font-mono text-xs" asChild>
+                <Link href="/register">Get Started</Link>
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+    </nav>
+  );
+}

src/app/(public)/page.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
+import { Navbar } from "./navbar";
 import {
   ChartColumn,
   Zap,
@@ -14,24 +15,7 @@ export default function LandingPage() {
   return (
     <div className="min-h-screen bg-background text-foreground">
       {/* Navbar */}
-      <nav className="border-b border-border bg-card/50 backdrop-blur-sm sticky top-0 z-50">
+      <Navbar />
-        <div className="max-w-6xl mx-auto flex items-center justify-between px-6 py-3">
-          <div className="flex items-center gap-2">
-            <ChartColumn className="w-5 h-5 text-primary" />
-            <span className="font-mono font-bold text-sm tracking-tight">
-              CandleAnnotator
-            </span>
-          </div>
-          <div className="flex items-center gap-3">
-            <Button variant="ghost" size="sm" className="font-mono text-xs" asChild>
-              <Link href="/login">Log in</Link>
-            </Button>
-            <Button size="sm" className="font-mono text-xs" asChild>
-              <Link href="/register">Get Started</Link>
-            </Button>
-          </div>
-        </div>
-      </nav>
 
       {/* Hero Section */}
       <section className="relative overflow-hidden">

src/app/(public)/session-provider.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import { SessionProvider } from 'next-auth/react';
+
+export function SessionProviderClient({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <SessionProvider>{children}</SessionProvider>;
+}