| 5262 | // leading glyph, label, and trailing count. Vim-navigable and activatable via |
| 5263 | // its data-sidebar-type. |
| 5264 | function SystemRow({ |
| 5265 | label, |
| 5266 | icon, |
| 5267 | count, |
| 5268 | active, |
| 5269 | onClick, |
| 5270 | onContextMenu, |
| 5271 | sidebarIdx, |
| 5272 | vimHighlight, |
| 5273 | sidebarFocused = false, |
| 5274 | sidebarType, |
| 5275 | }: { |
| 5276 | label: string; |
| 5277 | icon: JSX.Element; |
| 5278 | count: number; |
| 5279 | active: boolean; |
| 5280 | onClick: () => void; |
| 5281 | onContextMenu?: (e: React.MouseEvent) => void; |
| 5282 | sidebarIdx?: number; |
| 5283 | vimHighlight?: boolean; |
| 5284 | sidebarFocused?: boolean; |
| 5285 | sidebarType: string; |
| 5286 | }): JSX.Element { |
| 5287 | const strongActive = active && (!sidebarFocused || !!vimHighlight); |
| 5288 | |
| 5289 | return ( |
| 5290 | <div |
| 5291 | role="button" |
| 5292 | tabIndex={0} |
| 5293 | onClick={onClick} |
| 5294 | onKeyDown={(e) => { |
| 5295 | if (e.key === "Enter" || e.key === " ") { |
| 5296 | e.preventDefault(); |
| 5297 | onClick(); |
| 5298 | } |
| 5299 | }} |
| 5300 | onContextMenu={onContextMenu} |
| 5301 | className={[ |
| 5302 | "group select-none flex h-[var(--z-sidebar-row-h)] items-center gap-1.5 rounded-lg px-1 text-left text-sm outline-none transition-colors focus:outline-none", |
| 5303 | active |
| 5304 | ? vimHighlight |
| 5305 | ? "vim-cursor-on-active bg-paper-300/70 text-ink-900 font-medium" |
| 5306 | : sidebarFocused |
| 5307 | ? "text-accent" |
| 5308 | : "bg-paper-300/70 text-ink-900 font-medium" |
| 5309 | : vimHighlight |
| 5310 | ? "vim-cursor" |
| 5311 | : "text-ink-800 hover:bg-paper-200/70", |
| 5312 | ].join(" ")} |
| 5313 | style={{ paddingLeft: 4 }} |
| 5314 | {...(sidebarIdx != null |
| 5315 | ? { "data-sidebar-idx": sidebarIdx, "data-sidebar-type": sidebarType } |
| 5316 | : { "data-sidebar-type": sidebarType })} |
| 5317 | > |
| 5318 | <SidebarGlyph active={strongActive} rowActive={active}> |
| 5319 | {icon} |
| 5320 | </SidebarGlyph> |
| 5321 | <span className="flex-1 truncate">{label}</span> |