Something went wrong. Try again.
A local-first note taking app
Something went wrong. Try again.
3.3 kB · 103 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104import type { CSSProperties } from 'react';import type { WorkspaceKind } from '../workspaces/workspace';import { SplitDownIcon, SplitRightIcon } from '../icons';import { WorkspaceMenu } from './WorkspaceMenu';
type AppTitleBarProps = { sidebarOpen: boolean; onToggleSidebar: () => void; workspaceKind: WorkspaceKind; onWorkspaceKindChange: (kind: WorkspaceKind) => void; onSplitRight: () => void; onSplitDown: () => void;};
function SidebarToggleIcon({ className }: { className?: string }) { return ( <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden > <rect x="3" y="4" width="7" height="16" rx="1" ry="1" /> <path d="M14 8h7M14 12h7M14 16h5" /> </svg> );}
/** Window Controls Overlay title bar row (macOS): sits in the OS-defined title bar rectangle. */const macTitleBarStyle: CSSProperties & { WebkitAppRegion?: 'drag' } = { WebkitAppRegion: 'drag', position: 'fixed', zIndex: 50, left: 'env(titlebar-area-x, 0px)', top: 'env(titlebar-area-y, 0px)', width: 'env(titlebar-area-width, 100%)', height: 'env(titlebar-area-height, 40px)', boxSizing: 'border-box',};
export function AppTitleBar({ sidebarOpen, onToggleSidebar, workspaceKind, onWorkspaceKindChange, onSplitRight, onSplitDown,}: AppTitleBarProps) { const noDrag = { WebkitAppRegion: 'no-drag' as const };
return ( <header className="bg-background/95 text-foreground flex items-center gap-2 px-1 py-1" style={macTitleBarStyle} > <div className="flex h-full min-w-0 flex-1 items-center gap-2"> <button type="button" aria-controls="app-sidebar" aria-label={sidebarOpen ? 'Hide sidebar' : 'Show sidebar'} title={sidebarOpen ? 'Hide sidebar' : 'Show sidebar'} aria-pressed={sidebarOpen} onClick={onToggleSidebar} className="text-foreground hover:bg-border/40 flex size-5 cursor-pointer items-center justify-center rounded" style={noDrag} > <SidebarToggleIcon className="size-4" /> </button> </div> <div className="flex h-full shrink-0 items-center gap-1 pr-1"> {workspaceKind === 'tiling' ? ( <> <button type="button" aria-label="Split right" title="Split right" onClick={onSplitRight} className="text-foreground hover:bg-border/40 flex size-5 cursor-pointer items-center justify-center rounded" style={noDrag} > <SplitRightIcon className="size-4" /> </button> <button type="button" aria-label="Split down" title="Split down" onClick={onSplitDown} className="text-foreground hover:bg-border/40 flex size-5 cursor-pointer items-center justify-center rounded" style={noDrag} > <SplitDownIcon className="size-4" /> </button> </> ) : null} <WorkspaceMenu value={workspaceKind} onChange={onWorkspaceKindChange} /> </div> </header> );}