| 5198 | // as a regular note/folder row so the shared Vim activation (Enter) and the |
| 5199 | // `m` context-menu key work without special-casing. |
| 5200 | function FavoriteRow({ |
| 5201 | label, |
| 5202 | icon, |
| 5203 | active, |
| 5204 | onClick, |
| 5205 | onContextMenu, |
| 5206 | sidebarIdx, |
| 5207 | vimHighlight, |
| 5208 | sidebarFocused = false, |
| 5209 | dataAttrs, |
| 5210 | }: { |
| 5211 | label: string; |
| 5212 | icon: JSX.Element; |
| 5213 | active: boolean; |
| 5214 | onClick: () => void; |
| 5215 | onContextMenu?: (e: React.MouseEvent) => void; |
| 5216 | sidebarIdx?: number; |
| 5217 | vimHighlight?: boolean; |
| 5218 | sidebarFocused?: boolean; |
| 5219 | dataAttrs: Record<string, string | number>; |
| 5220 | }): JSX.Element { |
| 5221 | const strongActive = active && (!sidebarFocused || !!vimHighlight); |
| 5222 | return ( |
| 5223 | <div |
| 5224 | role="button" |
| 5225 | tabIndex={0} |
| 5226 | onClick={onClick} |
| 5227 | onKeyDown={(e) => { |
| 5228 | if (e.key === "Enter" || e.key === " ") { |
| 5229 | e.preventDefault(); |
| 5230 | onClick(); |
| 5231 | } |
| 5232 | }} |
| 5233 | onContextMenu={onContextMenu} |
| 5234 | className={[ |
| 5235 | "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", |
| 5236 | active |
| 5237 | ? vimHighlight |
| 5238 | ? "vim-cursor-on-active bg-paper-300/70 text-ink-900 font-medium" |
| 5239 | : sidebarFocused |
| 5240 | ? "text-accent" |
| 5241 | : "bg-paper-300/70 text-ink-900 font-medium" |
| 5242 | : vimHighlight |
| 5243 | ? "vim-cursor" |
| 5244 | : "text-ink-800 hover:bg-paper-200/70", |
| 5245 | ].join(" ")} |
| 5246 | style={{ paddingLeft: 4 }} |
| 5247 | {...(sidebarIdx != null ? { "data-sidebar-idx": sidebarIdx } : {})} |
| 5248 | {...dataAttrs} |
| 5249 | > |
| 5250 | <SidebarGlyph active={strongActive} rowActive={active}> |
| 5251 | {icon} |
| 5252 | </SidebarGlyph> |
| 5253 | <span className="flex-1 truncate">{label}</span> |
| 5254 | {sidebarFocused && vimHighlight && ( |
| 5255 | <RowKeyHint active={active} keyLabel="m" compact /> |
| 5256 | )} |
| 5257 | </div> |