setRoute(id)}
onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
style={{
display: 'flex', alignItems: 'center', gap: 11, padding: '9px 12px', borderRadius: 9,
cursor: 'pointer', userSelect: 'none',
background: active ? T.grad : (h ? T.hov : 'transparent'),
color: active ? '#fff' : (h ? T.text : T.mut),
fontSize: 13.5, fontWeight: active ? 700 : 500, transition: 'background .15s, color .15s',
}}>
{label}
);
}
const posCollectionPalette = ['#f472b6', '#60a5fa', '#f5b94a', '#34d399', '#a78bfa', '#22b8cf', '#f87171'];
function Sidebar({ route, setRoute, cols = posCollections, addCollection, deleteCollection, activeCol, selectCol, colCounts = {}, cap = {}, colLimit = Infinity, onUpgrade }) {
const [adding, setAdding] = React.useState(false);
const [name, setName] = React.useState('');
const [open, setOpen] = React.useState(true);
const atColLimit = cols.length >= colLimit;
const submit = () => {
const n = name.trim();
if (n && addCollection && !cols.some(([c]) => c === n)) {
addCollection(n, posCollectionPalette[cols.length % posCollectionPalette.length]);
}
setName(''); setAdding(false);
};
return (
{posNav.map(([id, label, glyph]) => (
))}
{cap.manageUsers && (
)}
setOpen((o) => !o)} style={{ cursor: 'pointer' }}>Collections
{cap.edit && setRoute('manage')} title="Kelola koleksi & kategori"
style={{ marginLeft: 'auto', fontSize: 14, color: T.dim, cursor: 'pointer' }}>⚙ }
setOpen((o) => !o)} style={{ marginLeft: cap.edit ? 8 : 'auto', fontSize: 10, cursor: 'pointer' }}>{open ? '▾' : '▸'}
{open && cols.map(([name, color, icon]) => {
const active = activeCol === name;
return (
selectCol && selectCol(name)}
title={active ? 'Klik lagi untuk menampilkan semua prompt' : `Lihat prompt di "${name}"`}
style={{
display: 'flex', alignItems: 'center', gap: 11, padding: '8px 12px', borderRadius: 9,
color: active ? T.text : T.mut, fontSize: 13, cursor: 'pointer', userSelect: 'none',
background: active ? T.vioSoft : 'transparent', fontWeight: active ? 700 : 500,
transition: 'background .15s, color .15s',
}}>
{icon ?
{name}
{colCounts[name] ? (
{colCounts[name]}
) : null}
);
})}
{open && adding ? (
) : open && cap.edit && atColLimit ? (
onUpgrade && onUpgrade({ feature: 'Koleksi tak terbatas', plan: 'Pro', desc: `Paket Anda dibatasi ${colLimit} koleksi. Upgrade ke Pro untuk membuat tanpa batas.` })}
title={`Paket Anda dibatasi ${colLimit} koleksi`}
style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '8px 12px', color: T.dim, fontSize: 13, cursor: 'pointer' }}>
🔒 Upgrade untuk koleksi lain
) : open && cap.edit ? (
setAdding(true)}
style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '8px 12px', color: T.dim, fontSize: 13, cursor: 'pointer' }}>
+ New Collection
) : null}
);
}
function Topbar({ query, setQuery, goLibrary, theme = 'dark', toggleTheme, user, onLogout, onPlans, lib = [], onPick }) {
const ref = React.useRef(null);
const boxRef = React.useRef(null);
const [open, setOpen] = React.useState(false);
const [hi, setHi] = React.useState(0);
React.useEffect(() => {
const onKey = (e) => {
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') { e.preventDefault(); ref.current && ref.current.focus(); }
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, []);
React.useEffect(() => {
const close = (e) => { if (boxRef.current && !boxRef.current.contains(e.target)) setOpen(false); };
document.addEventListener('mousedown', close);
return () => document.removeEventListener('mousedown', close);
}, []);
const q = (query || '').trim().toLowerCase();
const matches = q
? lib.filter((p) => (p.t + ' ' + p.d + ' ' + p.m + ' ' + p.cat).toLowerCase().includes(q)).slice(0, 6)
: [];
const showDrop = open && q && matches.length > 0;
React.useEffect(() => { setHi(0); }, [query]);
const pick = (p) => {
setOpen(false);
if (onPick) onPick(p); else goLibrary();
};
const onSearchKey = (e) => {
if (!showDrop) return;
if (e.key === 'ArrowDown') { e.preventDefault(); setHi((h) => (h + 1) % matches.length); }
else if (e.key === 'ArrowUp') { e.preventDefault(); setHi((h) => (h - 1 + matches.length) % matches.length); }
else if (e.key === 'Enter') { e.preventDefault(); pick(matches[hi]); }
else if (e.key === 'Escape') { setOpen(false); }
};
return (