Task 8.3: Create src/app/app/layout.tsx with SessionProvider and nav bar

Protected app layout wrapping all /app/* pages with SessionProvider from
next-auth/react. Includes a minimal fixed nav bar with an app title link,
a settings link to /app/settings, and a placeholder slot for the user menu
dropdown (to be implemented in task 13.1).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marko Djordjevic 2026-02-20 13:15:41 +01:00
parent 985f459bd7
commit 07efa32cfb
2 changed files with 60 additions and 1 deletions

59
src/app/app/layout.tsx Normal file
View file

@ -0,0 +1,59 @@
'use client';
import { SessionProvider } from 'next-auth/react';
import Link from 'next/link';
import { Settings } from 'lucide-react';
/**
* Protected app layout.
*
* Wraps all /app/* pages with SessionProvider so that auth hooks
* (useSession, signIn, signOut) are available throughout the workspace.
*
* Contains a minimal top nav bar with:
* - App title / home link
* - Settings link ( /app/settings)
* - Placeholder slot for the user menu (task 13.1)
*
* The full user-menu dropdown (avatar, sign-out, etc.) is wired up in task 13.1.
*/
export default function AppLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<SessionProvider>
{/* Minimal nav bar — user menu dropdown added in task 13.1 */}
<header className="fixed top-0 inset-x-0 z-50 h-10 flex items-center justify-between px-4 bg-background border-b border-border">
<Link
href="/app"
className="text-sm font-semibold text-foreground tracking-tight hover:opacity-80 transition-opacity"
>
Candle Annotator
</Link>
<nav className="flex items-center gap-2">
{/* Settings link */}
<Link
href="/app/settings"
className="flex items-center gap-1.5 px-2 py-1 text-xs text-muted-foreground hover:text-foreground rounded hover:bg-secondary/50 transition-colors"
>
<Settings className="w-3.5 h-3.5" />
Settings
</Link>
{/* User menu placeholder — implemented in task 13.1 */}
<div className="w-7 h-7 rounded-full bg-secondary/50 flex items-center justify-center text-xs text-muted-foreground" aria-label="User menu (coming soon)">
?
</div>
</nav>
</header>
{/* Push content below the fixed nav bar */}
<div className="pt-10 h-screen">
{children}
</div>
</SessionProvider>
);
}