// Sidebar — exact layout copy from new site's chat-sidebar.tsx function Sidebar({ open, chats, activeId, onSelectChat, onNewChat, onOpenSettings, onOpenSearch, onToggle, tier, onUpgrade, user, onDeleteChat, onPinChat, onSignOut }) { const S = window.SOL; const [search, setSearch] = React.useState(''); const [acctOpen, setAcctOpen] = React.useState(false); const [emailRevealed, setEmailRevealed] = React.useState(false); // Close account dropdown on outside click React.useEffect(() => { if (!acctOpen) return; const h = (e) => { if (!e.target.closest('[data-acct]')) setAcctOpen(false); }; setTimeout(() => document.addEventListener('click', h), 0); return () => document.removeEventListener('click', h); }, [acctOpen]); // Group chats by date — matches new site GROUP_ORDER const GROUP_ORDER = ['Today', 'Yesterday', 'This Week', 'This Month', 'Older']; const now = new Date(); const groups = {}; GROUP_ORDER.forEach(g => groups[g] = []); const filtered = chats.filter(c => !search || c.title.toLowerCase().includes(search.toLowerCase())); filtered.forEach(c => { const d = new Date(c.updated_at || 0); const diff = Math.floor((now - d) / 86400000); if (diff === 0) groups['Today'].push(c); else if (diff === 1) groups['Yesterday'].push(c); else if (diff < 7) groups['This Week'].push(c); else if (diff < 30) groups['This Month'].push(c); else groups['Older'].push(c); }); // Fallback: no date info → put everything in "Recent" const hasDate = chats.some(c => c.updated_at); const renderGroups = hasDate ? GROUP_ORDER.filter(g => groups[g].length > 0).map(g => [g, groups[g]]) : [['Recent', filtered]]; const displayName = user?.display_name || null; const email = user?.email || ''; return ( ); } function menuItemStyle(S) { return { display: 'flex', alignItems: 'center', gap: 8, padding: '8px 10px', borderRadius: 8, fontFamily: S.sans, fontSize: 13, color: S.ink, textDecoration: 'none', background: 'transparent', cursor: 'pointer', transition: 'background 0.1s', }; } // ConvRow — exact structure from new site's ConvRow function ConvRow({ chat, active, onOpen, onDelete }) { const S = window.SOL; const [hovered, setHovered] = React.useState(false); return (
setHovered(true)} onMouseLeave={() => setHovered(false)} style={{ marginBottom: 4, display: 'flex', alignItems: 'center', gap: 8, borderRadius: 12, padding: '8px 8px', cursor: 'pointer', transition: 'background 0.15s', border: active ? `1px solid ${S.line2}` : '1px solid transparent', background: active ? S.paper : hovered ? S.paper : 'transparent', boxShadow: active ? '0 1px 3px rgba(0,0,0,0.06)' : 'none', }} > {/* Model icon — SunMark variant based on chat.model */} {/* Title — flex-1 truncate text-sm */} {chat.title} {/* Trash button — opacity-0 group-hover:opacity-100 */}
); } window.Sidebar = Sidebar;