Repository Public
1'use client';2import { usePathname } from 'next/navigation';3import { Command, LogOut, Plus } from 'lucide-react';4import { useUi } from '@/stores/ui';5import { Button, IconButton } from '@/components/ui/button';6import { Kbd } from '@/components/ui/misc';7import { api } from '@/lib/api';8import { isMac } from '@/lib/format';9import { ThemeToggle } from './theme-toggle';10import { NotificationsBell } from './notifications';11import { ConnectionIndicator } from './connection-indicator';12import { TITLES } from './nav';1314export async function signOut(): Promise<void> {15 try {16 await api.post('/auth/logout');17 } finally {18 api.clearCsrf();19 location.assign('/login/');20 }21}2223export function Header() {24 const pathname = usePathname();25 const path = pathname.endsWith('/') ? pathname : `${pathname}/`;26 const ui = useUi();27 return (28 <header className="flex h-14 shrink-0 items-center gap-2 border-b border-line bg-bg px-5">29 <p className="flex-1 truncate text-[13px] font-semibold text-text-2" data-testid="page-title">{TITLES[path] ?? ''}</p>30 <ConnectionIndicator className="mr-1 px-1.5" />31 <button onClick={() => ui.set({ paletteOpen: true })} className="hidden h-8 items-center gap-2 rounded-full bg-surface px-3 text-xs text-muted shadow-card hover:text-text-2 lg:flex" aria-label="Open command palette">32 <Command className="size-3" /> Search <Kbd>{isMac() ? '⌘K' : 'Ctrl K'}</Kbd>33 </button>34 <NotificationsBell />35 <ThemeToggle />36 <IconButton label="Sign out" onClick={() => void signOut()}>37 <LogOut className="size-4" />38 </IconButton>39 <Button size="sm" variant="brand" className="ml-1 h-8 rounded-full px-3.5 font-semibold" onClick={() => ui.openNewMission()} data-testid="new-mission">40 <Plus className="size-3.5" strokeWidth={2.6} /> New mission41 </Button>42 </header>43 );44}45