lorentz
9658640c04
The soft reset to 77073ba inadvertently staged deletions of all phase 2
and 3 artifacts. This commit restores them from their source commits so
subsequent task commits build on the complete prior-phase foundation:
- components/mobile/{BottomNav,HeaderBar,KpiCardMobile,MoreDrawer,NeedsAttentionStrip,WorkerStatusRow}
- app/mobile/layout.tsx, dashboard/page.tsx, analyzer/page.tsx
- app/api/mobile/dashboard/route.ts
- All .planning/** files from phases 01-04
- CLAUDE.md, app/layout.tsx, app/styles/brand.css, public/manifest.json
72 lines
2.7 KiB
TypeScript
72 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
/* HeaderBar — phase 02 (SHELL-02..04).
|
|
*
|
|
* Sticky top bar inside the /mobile shell. Three slots:
|
|
* left: WulfMark + "Pulse" wordmark, linked to /mobile/dashboard
|
|
* right: Bell icon button (placeholder, aria-label="Notifications")
|
|
* right: compact avatar circle — opens the More drawer (parent owns state)
|
|
*
|
|
* No page title in the header — pages render their own H1. */
|
|
|
|
import Link from 'next/link';
|
|
import { Bell } from 'lucide-react';
|
|
import { WulfMark } from '@/components/branding/wulf-mark';
|
|
import { useSession } from '@/lib/auth-client';
|
|
|
|
interface HeaderBarProps {
|
|
onAvatarClick: () => void;
|
|
}
|
|
|
|
export function HeaderBar({ onAvatarClick }: HeaderBarProps) {
|
|
const { data: session } = useSession();
|
|
const user = session?.user as
|
|
| { name?: string; email?: string }
|
|
| undefined;
|
|
|
|
const initials = (user?.name ?? user?.email ?? '?')
|
|
.split(/[\s@]/)
|
|
.filter(Boolean)
|
|
.slice(0, 2)
|
|
.map((p) => p[0]?.toUpperCase())
|
|
.join('');
|
|
|
|
return (
|
|
<header className="sticky top-0 z-30 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80 border-b pt-safe">
|
|
<div className="flex items-center justify-between px-4 h-14">
|
|
{/* Left: brand mark + wordmark, linked to /mobile/dashboard */}
|
|
<Link
|
|
href="/mobile/dashboard"
|
|
className="flex items-center gap-2 -ml-1 px-1 rounded-md hover:bg-accent/50 transition-colors"
|
|
aria-label="Pulse — go to Dashboard"
|
|
>
|
|
<WulfMark variant="mark" className="h-6 w-auto" />
|
|
<span className="font-bold text-base tracking-tight">Pulse</span>
|
|
</Link>
|
|
|
|
{/* Right: Bell placeholder, then avatar trigger */}
|
|
<div className="flex items-center gap-1">
|
|
<button
|
|
type="button"
|
|
onClick={() => { /* SHELL-03: placeholder — no menu, no badge */ }}
|
|
aria-label="Notifications"
|
|
className="inline-flex items-center justify-center h-9 w-9 rounded-md hover:bg-accent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
>
|
|
<Bell className="h-5 w-5" />
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={onAvatarClick}
|
|
aria-label="Open menu"
|
|
className="inline-flex items-center justify-center h-9 w-9 rounded-md hover:bg-accent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
>
|
|
<span className="inline-flex h-7 w-7 items-center justify-center rounded-full bg-primary/15 text-primary text-[11px] font-semibold">
|
|
{initials}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|