86 lines
3.2 KiB
TypeScript
86 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { Search, Bell, Command } from 'lucide-react';
|
|
import { usePathname } from 'next/navigation';
|
|
import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
|
|
import { useState, useEffect } from 'react';
|
|
import { AppShellBar } from './AppShellBar';
|
|
import { CommandModal } from './CommandModal';
|
|
import { UserPill } from '@/components/profile/UserPill';
|
|
|
|
export function AppHeader() {
|
|
const pathname = usePathname();
|
|
const { data: session } = useCurrentSession();
|
|
const isAuthenticated = !!session;
|
|
const [isCommandOpen, setIsCommandOpen] = useState(false);
|
|
|
|
// Simple breadcrumb logic
|
|
const pathSegments = pathname.split('/').filter(Boolean);
|
|
const breadcrumbs = pathSegments.length > 0
|
|
? pathSegments.map(s => s.charAt(0).toUpperCase() + s.slice(1)).join(' / ')
|
|
: 'Home';
|
|
|
|
// Cmd+K Listener
|
|
useEffect(() => {
|
|
const down = (e: KeyboardEvent) => {
|
|
if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
|
|
e.preventDefault();
|
|
setIsCommandOpen((open) => !open);
|
|
}
|
|
};
|
|
document.addEventListener('keydown', down);
|
|
return () => document.removeEventListener('keydown', down);
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<AppShellBar position="top">
|
|
{/* Left: Context & Search */}
|
|
<Box display="flex" alignItems="center" gap={6} flex={1}>
|
|
<Text size="sm" className="text-text-med font-medium tracking-wide whitespace-nowrap min-w-[100px]">
|
|
{breadcrumbs}
|
|
</Text>
|
|
|
|
{/* Command Search Trigger */}
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsCommandOpen(true)}
|
|
className="hidden md:flex items-center gap-3 px-3 h-9 bg-surface-charcoal border border-outline-steel rounded-md w-96 text-text-low hover:border-text-low/50 hover:text-text-med transition-all group cursor-pointer"
|
|
>
|
|
<Search size={14} className="text-text-low group-hover:text-text-med transition-colors" />
|
|
<span className="flex-1 text-left text-sm text-text-low/70">
|
|
Search or type a command...
|
|
</span>
|
|
<div className="flex items-center gap-1 px-1.5 py-0.5 rounded bg-white/5 border border-white/5 text-[10px] font-mono text-text-low">
|
|
<Command size={10} />
|
|
<span>K</span>
|
|
</div>
|
|
</button>
|
|
</Box>
|
|
|
|
{/* Right: User & Notifications */}
|
|
<Box display="flex" alignItems="center" gap={4}>
|
|
{/* Notifications - Only when authed */}
|
|
{isAuthenticated && (
|
|
<Box
|
|
as="button"
|
|
className="w-8 h-8 flex items-center justify-center text-text-low hover:text-text-high hover:bg-white/5 transition-colors rounded-md relative"
|
|
title="Notifications"
|
|
>
|
|
<Bell size={16} />
|
|
<Box className="absolute top-2 right-2 w-1.5 h-1.5 bg-primary-accent rounded-full ring-2 ring-base-black" />
|
|
</Box>
|
|
)}
|
|
|
|
{/* User Pill (Handles Auth & Menu) */}
|
|
<UserPill />
|
|
</Box>
|
|
</AppShellBar>
|
|
|
|
<CommandModal isOpen={isCommandOpen} onClose={() => setIsCommandOpen(false)} />
|
|
</>
|
|
);
|
|
}
|