1- import { Search } from 'lucide-react' ;
1+ import { Command , Search } from 'lucide-react' ;
22import { NotificationBell } from '../../features/notifications/components/NotificationBell' ;
33
44interface TopBarProps {
55 /** Opens the command palette, optionally seeded with typed text. */
66 onSearch : ( seed ?: string ) => void ;
77}
88
9- const IS_MAC = / M a c | i P h o n e | i P a d / . test ( navigator . platform ) ;
10-
119/**
1210 * Desktop-only header strip on the outer shell surface, above the floating
1311 * content canvas: workspace search centered, the notification bell pinned to
1412 * the far right. Below lg these controls live in MobileTopBar instead.
1513 */
1614export function TopBar ( { onSearch } : TopBarProps ) {
1715 return (
18- < div className = "hidden shrink-0 grid-cols-[1fr_minmax(0,28rem )_1fr] items-center gap-2 px-3 pt-3 lg:grid" >
16+ < div className = "hidden shrink-0 grid-cols-[1fr_minmax(0,21rem )_1fr] items-center gap-2 px-3 pt-3 lg:grid" >
1917 { /* Left spacer keeps the search truly centered despite the bell. */ }
2018 < div aria-hidden = "true" />
2119 { /* Real search input, centered on the shell. Focusing or typing hands
@@ -35,10 +33,15 @@ export function TopBar({ onSearch }: TopBarProps) {
3533 value = ""
3634 onFocus = { ( ) => onSearch ( ) }
3735 onChange = { ( event ) => onSearch ( event . target . value ) }
38- className = "w-full rounded border border-steel/20 bg-canvas py-1.5 pl-8 pr-14 text-sm text-charcoal transition-colors placeholder:text-steel hover:border-steel/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
36+ className = "w-full rounded border border-steel/20 bg-canvas py-2 pl-8 pr-14 text-sm text-charcoal transition-colors placeholder:text-steel hover:border-steel/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
3937 />
40- < kbd className = "pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 rounded border border-steel/20 bg-surface px-1.5 font-sans text-[11px] text-steel" >
41- { IS_MAC ? '⌘ K' : 'Ctrl K' }
38+ { /* Icon-based shortcut chip (Ctrl/⌘ + K opens the palette). */ }
39+ < kbd
40+ aria-label = "Shortcut: Control or Command plus K"
41+ className = "pointer-events-none absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-0.5 rounded border border-steel/20 bg-surface px-1.5 py-0.5 font-sans text-[11px] text-steel"
42+ >
43+ < Command size = { 11 } aria-hidden = "true" />
44+ K
4245 </ kbd >
4346 </ div >
4447 { /* Operational inbox at the far right of the outer shell; the bell's
0 commit comments