); } function NavLabel({ children }) { return (

{children}

); } function NavItem({ item, active, onClick, expanded }) { const [hover, setHover] = useStateSB(false); return ( ); } /* AI Copilot pocket card — adapts content but keeps a stable height in both states */ function AIPocketCard({ expanded, onClick }) { return ( ); } window.Sidebar = Sidebar; /* ───────────────────────────────────────────────────────────────────── Sidebar search — input with popover results, arrow-key navigable. ───────────────────────────────────────────────────────────────────── */ function SidebarSearch({ onNavigate }) { const [q, setQ] = useStateSB(""); const [focused, setFocused] = useStateSB(false); const [active, setActive] = useStateSB(0); const inputRef = React.useRef(null); const popRef = React.useRef(null); /* ⌘K / Ctrl+K to focus */ React.useEffect(() => { const onKey = (e) => { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); inputRef.current?.focus(); inputRef.current?.select(); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, []); const lower = q.toLowerCase().trim(); /* Build result groups. Always show pages when typing. */ const groups = React.useMemo(() => { const matches = (s) => !lower || (s || "").toLowerCase().includes(lower); const accounts = window.COMPANIES .filter(c => matches(c.name) || matches(c.industry) || matches(c.hqCity)) .slice(0, 6) .map(c => ({ kind: "account", id: c.id, primary: c.name, secondary: `${c.industry} · ${c.hqCity}`, icon: "building", company: c, onPick: () => onNavigate("account-detail", { companyId: c.id }), })); const contacts = window.CONTACTS .filter(c => { const name = `${c.firstName} ${c.lastName}`; return matches(name) || matches(c.headline) || matches(c.position); }) .slice(0, 6) .map(c => ({ kind: "contact", id: c.id, primary: `${c.firstName} ${c.lastName}`, secondary: c.position + (c.companyName ? ` · ${c.companyName}` : ""), icon: "user", contact: c, onPick: () => { const conv = window.CONVERSATIONS.find(cv => cv.contactId === c.id); if (conv) onNavigate("conversations", { conversationId: conv.id }); else onNavigate("contacts"); }, })); const pages = window.NAV .filter(n => matches(n.label)) .slice(0, 5) .map(n => ({ kind: "page", id: n.id, primary: n.label, secondary: "Workspace · " + n.label, icon: n.icon, onPick: () => onNavigate(n.id), })); const out = []; if (accounts.length) out.push({ heading: "Accounts", items: accounts }); if (contacts.length) out.push({ heading: "Contacts", items: contacts }); if (lower && pages.length) out.push({ heading: "Navigate", items: pages }); if (!lower) { out.push({ heading: "Recent", items: [ ...accounts.slice(0, 3), ...contacts.slice(0, 2), ].slice(0, 5), }); } return out; }, [lower, onNavigate]); /* Flat list for keyboard navigation */ const flat = groups.flatMap(g => g.items); React.useEffect(() => { setActive(0); }, [lower]); React.useEffect(() => { if (!focused) return; const el = popRef.current?.querySelector(`[data-result-idx="${active}"]`); el?.scrollIntoView({ block: "nearest" }); }, [active, focused]); const handleKey = (e) => { if (e.key === "ArrowDown") { e.preventDefault(); setActive(i => Math.min(flat.length - 1, i + 1)); } else if (e.key === "ArrowUp") { e.preventDefault(); setActive(i => Math.max(0, i - 1)); } else if (e.key === "Enter") { e.preventDefault(); const pick = flat[active]; if (pick) { pick.onPick?.(); setQ(""); inputRef.current?.blur(); } } else if (e.key === "Escape") { setQ(""); inputRef.current?.blur(); } }; const open = focused; /* show panel whenever focused (even empty query → Recent) */ return (

{/* Input — styled identical to old TextField (sm) */}

setQ(e.target.value)} onFocus={() => setFocused(true)} onBlur={() => setTimeout(() => setFocused(false), 140)} onKeyDown={handleKey} placeholder="Search accounts, contacts…" style={{ flex: 1, border: "none", outline: "none", background: "transparent", fontSize: 13, color: "var(--ink)", }} /> {q ? ( ) : ( ⌘K )}

{/* Popover */} {open && (

{flat.length === 0 ? (

No matches

Try a company, person or page name.

) : ( <> {groups.map((g, gi) => { /* compute starting flat index for this group */ let base = 0; for (let i = 0; i < gi; i++) base += groups[i].items.length; return (

{g.heading} {g.items.length}

{g.items.map((r, ri) => { const idx = base + ri; const isActive = idx === active; return ( ); })}

); })} {/* Footer hints */}

↑↓ navigate ↵ open esc close {flat.length}

)}

); } /* highlight matching substring in result text */ function highlight(text, q) { if (!q) return text; const i = text.toLowerCase().indexOf(q); if (i === -1) return text; return ( <> {text.slice(0, i)} {text.slice(i, i + q.length)} {text.slice(i + q.length)} ); }