184 lines
7.8 KiB
TypeScript
184 lines
7.8 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { signOut } from 'next-auth/react'
|
|
import { usePathname } from 'next/navigation'
|
|
import Link from 'next/link'
|
|
import { Search, Bell, Plus, Menu, LogOut, Sun, Moon } from 'lucide-react'
|
|
import { toast } from 'sonner'
|
|
import { Button } from '@/components/ui/button'
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbLink,
|
|
BreadcrumbList,
|
|
BreadcrumbPage,
|
|
BreadcrumbSeparator,
|
|
} from '@/components/ui/breadcrumb'
|
|
import { useTheme } from 'next-themes'
|
|
import { useMounted } from '@/components/client-only'
|
|
import { ACTIVE_PAGE_CHANGED } from '@/lib/pages'
|
|
|
|
// Notion keeps the top bar minimal: a breadcrumb path on the left, a subtle
|
|
// Quick Find pill, and ghost icon buttons on the right.
|
|
const SECTION_LABELS: Record<string, string> = {
|
|
'/bookmarks': 'All Bookmarks',
|
|
'/calendar': 'Calendar',
|
|
'/tags': 'Tags',
|
|
'/kanban': 'Kanban',
|
|
'/contacts': 'Contacts',
|
|
'/settings': 'Settings',
|
|
'/admin': 'Admin',
|
|
'/pages': 'Pages',
|
|
}
|
|
|
|
interface TopBarProps {
|
|
user: { id: string; name?: string | null; email?: string | null; image?: string | null }
|
|
alerts: any[]
|
|
onDismissAlert: (id: string) => void
|
|
onAddBookmark: () => void
|
|
onToggleSidebar: () => void
|
|
onQuickFind: () => void
|
|
}
|
|
|
|
export function TopBar({ user, alerts, onDismissAlert, onAddBookmark, onToggleSidebar, onQuickFind }: TopBarProps) {
|
|
const [showAlerts, setShowAlerts] = useState(false)
|
|
const pathname = usePathname()
|
|
const mounted = useMounted()
|
|
const { theme, setTheme } = useTheme()
|
|
const [activePageTitle, setActivePageTitle] = useState<string | null>(null)
|
|
|
|
// The pages workspace announces the open page so breadcrumbs can show it.
|
|
// The title only renders on /pages, so route changes need no reset effect.
|
|
useEffect(() => {
|
|
const handler = (e: Event) => setActivePageTitle((e as CustomEvent<string | null>).detail)
|
|
window.addEventListener(ACTIVE_PAGE_CHANGED, handler)
|
|
return () => window.removeEventListener(ACTIVE_PAGE_CHANGED, handler)
|
|
}, [])
|
|
const pageTitle = pathname === '/pages' ? activePageTitle : null
|
|
|
|
useEffect(() => {
|
|
const handler = (e: MouseEvent) => {
|
|
const el = document.getElementById('topbar-alerts')
|
|
if (el && !el.contains(e.target as Node)) setShowAlerts(false)
|
|
}
|
|
document.addEventListener('mousedown', handler)
|
|
return () => document.removeEventListener('mousedown', handler)
|
|
}, [])
|
|
|
|
const section = SECTION_LABELS[pathname] ?? 'computer'
|
|
const isMac = mounted && typeof navigator !== 'undefined' && /mac|iphone|ipad/i.test(navigator.userAgent)
|
|
const quickFindHint = !mounted ? '⌘K' : isMac ? '⌘K' : 'Ctrl K'
|
|
|
|
// Review CR-02: local sign-out is always available, but it is NOT the same
|
|
// claim as confirmed global revocation. Ask the trusted server to revoke
|
|
// (Go tokenVersion bump) first and report honestly when that fails — other
|
|
// devices and already-issued assertions then survive until the backend
|
|
// recovers, and the user is told so instead of being silently logged out.
|
|
const [signingOut, setSigningOut] = useState(false)
|
|
const doSignOut = async () => {
|
|
if (signingOut) return
|
|
setSigningOut(true)
|
|
let revoked = false
|
|
try {
|
|
const res = await fetch('/api/session/revoke', { method: 'POST' })
|
|
const data = await res.json().catch(() => null)
|
|
revoked = res.ok && data?.revoked === true
|
|
} catch { /* unreachable Next route — treated as a revocation failure below */ }
|
|
if (!revoked) {
|
|
toast.error('Signed out on this device, but global revocation failed — other sessions may remain signed in until the backend recovers.')
|
|
}
|
|
void signOut({ redirectTo: '/login' })
|
|
}
|
|
|
|
return (
|
|
<header className="flex items-center gap-2 border-b bg-card px-3 py-2">
|
|
<Button variant="ghost" size="icon-sm" onClick={onToggleSidebar} className="lg:hidden">
|
|
<Menu className="h-4 w-4" />
|
|
</Button>
|
|
|
|
<Breadcrumb className="min-w-0 flex-1">
|
|
<BreadcrumbList className="flex-nowrap">
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink asChild className="font-medium">
|
|
<Link href="/pages">computer</Link>
|
|
</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
<BreadcrumbSeparator />
|
|
<BreadcrumbItem className="min-w-0">
|
|
{pageTitle ? (
|
|
<>
|
|
<BreadcrumbLink asChild>
|
|
<Link href="/pages">Pages</Link>
|
|
</BreadcrumbLink>
|
|
<BreadcrumbSeparator />
|
|
<BreadcrumbPage className="truncate font-normal text-foreground">{pageTitle}</BreadcrumbPage>
|
|
</>
|
|
) : (
|
|
<BreadcrumbPage className="truncate font-normal text-foreground">{section}</BreadcrumbPage>
|
|
)}
|
|
</BreadcrumbItem>
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
|
|
<button
|
|
onClick={onQuickFind}
|
|
aria-label="Quick find"
|
|
className="flex shrink-0 items-center gap-2 rounded-md border border-border/60 bg-muted/40 px-2.5 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
|
|
>
|
|
<Search className="h-3.5 w-3.5" />
|
|
<span className="hidden md:inline">Quick find</span>
|
|
<kbd className="pointer-events-none hidden select-none rounded border bg-background px-1.5 text-[10px] font-medium md:inline-flex">{quickFindHint}</kbd>
|
|
</button>
|
|
|
|
<Button variant="ghost" size="sm" onClick={onAddBookmark} className="shrink-0 gap-1.5">
|
|
<Plus className="h-4 w-4" />
|
|
<span className="hidden sm:inline">New</span>
|
|
</Button>
|
|
|
|
<Button variant="ghost" size="icon-sm" className="shrink-0" onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
|
|
<Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
|
<Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
|
</Button>
|
|
|
|
<div className="relative shrink-0" id="topbar-alerts">
|
|
<Button variant="ghost" size="icon-sm" onClick={() => setShowAlerts(!showAlerts)}>
|
|
<Bell className="h-4 w-4" />
|
|
{(alerts?.length ?? 0) > 0 && (
|
|
<span className="absolute -top-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-destructive text-[10px] text-destructive-foreground">
|
|
{alerts?.length ?? 0}
|
|
</span>
|
|
)}
|
|
</Button>
|
|
{showAlerts && (
|
|
<div className="absolute right-0 top-full mt-2 w-80 rounded-lg border bg-card p-2 shadow-lg z-50">
|
|
<p className="px-2 py-1 text-xs font-medium text-muted-foreground">Alerts</p>
|
|
{(alerts?.length ?? 0) === 0 && (
|
|
<p className="px-2 py-4 text-sm text-center text-muted-foreground">No pending alerts</p>
|
|
)}
|
|
{(alerts ?? []).map((a: any) => (
|
|
<div key={a?.id} className="flex items-center gap-2 rounded-md px-2 py-1.5 hover:bg-muted">
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium truncate">{a?.title ?? 'Untitled'}</p>
|
|
<p className="text-xs text-muted-foreground">Alert due</p>
|
|
</div>
|
|
<Button variant="ghost" size="xs" onClick={() => onDismissAlert(a?.id)}>Dismiss</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex shrink-0 items-center gap-2 pl-1">
|
|
<div className="flex h-7 w-7 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-bold">
|
|
{(user?.name ?? user?.email ?? '?')[0]?.toUpperCase()}
|
|
</div>
|
|
<span className="hidden sm:inline text-sm font-medium">{user?.name ?? user?.email ?? 'User'}</span>
|
|
<Button variant="ghost" size="icon-sm" onClick={doSignOut} disabled={signingOut} aria-label="Sign out">
|
|
<LogOut className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|