LIVE
{expanded && ReactDOM.createPortal((
setExpanded(false)}>
);
}
function ConnectionsScreen({ user, toast, setUser, onPro }) {
// Demo connections show ONLY for the demo account (@maxxharland). Real accounts start empty.
const isDemo = user.handle === 'maxxharland';
const conns = user.connections && user.connections.length ? user.connections : (isDemo ? SEED_CONNECTIONS : []);
const total = conns.length;
const back = conns.filter((c) => c.email || c.phone || c.website).length;
const cities = new Set(conns.map((c) => (c.place || '').split('·').pop().trim())).size;
const [q, setQ] = React.useState('');
const [tag, setTag] = React.useState(null);
const [viaTab, setViaTab] = React.useState('all'); // all | card | bio
const [detail, setDetail] = React.useState(null); // connection detail drawer
const cardCount = conns.filter((c) => c.via === 'card').length;
const bioCount = conns.filter((c) => c.via === 'bio').length;
const [sheet, setSheet] = React.useState(null); // 'add' | 'tags'
React.useEffect(() => {
const frame = document.querySelector('.appframe');
if (frame) frame.classList.toggle('nav-hidden', sheet !== null);
return () => { if (frame) frame.classList.remove('nav-hidden'); };
}, [sheet]);
const isPro = !!user.pro;
const customTags = user.connTags || [];
const allTags = customTags;
const filtered = conns.filter((c) => {
const hay = (c.name + ' ' + (c.handle || '') + ' ' + (c.place || '') + ' ' + (c.tags || []).join(' ')).toLowerCase();
const viaOk = viaTab === 'all' || (c.via || 'bio') === viaTab;
return viaOk && (!q || hay.includes(q.toLowerCase())) && (!tag || (c.tags || []).includes(tag));
});
const FREE_CAP = 10;
const capped = (!isPro && !q && !tag && filtered.length > FREE_CAP);
const shown = capped ? filtered.slice(0, FREE_CAP) : filtered;
const save = (patch) => { const next = { ...user, ...patch }; window.Store.saveUser(next); setUser && setUser(next); };
const addConnection = (c) => {
const conn = { ...c, id: (window.newId ? window.newId() : Date.now()), when: 'Just now', accent: 'linear-gradient(135deg,#6B8299,#3a4f63)' };
const next = [conn, ...(user.connections || [])];
save({ connections: next }); if (window.Store.saveConn) window.Store.saveConn(conn); setSheet(null); toast('Connection added');
};
const saveTags = (tags) => { save({ connTags: tags }); setSheet(null); toast('Tags saved'); };
const isInLeads = (c) => {
const leads = user.leads || [];
return leads.some((l) => (c.email && l.email && l.email.toLowerCase() === c.email.toLowerCase()) || (c.name && l.name && l.name.toLowerCase() === c.name.toLowerCase()));
};
const moveToLeads = (c) => {
const lead = {
id: (window.newId ? window.newId() : 'l' + Date.now()),
name: c.name || '', email: c.email || '', phone: c.phone || '', company: c.company || '',
jobTitle: c.role || '', linkedin: '', website: c.website || '', photo: c.photo || null,
ts: Date.now(), source: 'From Connections · ' + (c.via === 'card' ? 'card tap' : 'bio link'),
via: c.via || 'bio', stage: (user.followupStage || 'new'), potential: '', notes: c.note || '',
nextAction: null, metAt: c.place || '', location: c.location || null,
};
const nextLeads = [lead, ...(user.leads || [])];
save({ leads: nextLeads }); if (window.Store.saveLead) window.Store.saveLead(lead);
toast(c.name + ' moved to Leads');
};
return (
e.stopPropagation()}>
{/* top bar: live + search + close */}
), document.querySelector('.appframe') || document.body)}
LIVE
{/* filter button + dropdown */}
{searchOpen && setSearch(e.target.value)} />}
{filterOpen && (
setFilterOpen(false)} />
{/* recenter on me */}
{[['all', 'All'], ['back', 'Has contact'], ['week', 'This week']].map(([id, lb]) => (
))}
{allTags.length > 0 &&
)}
Tags
}
{allTags.map((t) => (
))}
{conns.filter(matches).length} of {conns.length} taps · pan & zoom
Connections
{[['all', 'All', null], ['card', 'NFC Card', 'card'], ['bio', 'Bio Link', 'link']].map(([id, lbl, ic]) => (
))}
{/* map — Pro feature */}
{isPro ? (
{total}
People met
{back}
Contactable
{cities}
Cities
{XI.search ? XI.search({ width: 17, height: 17 }) : null}
setQ(e.target.value)} />
{allTags.length > 0 && (
{allTags.map((t) => )}
)}
{shown.map((c) => (
{capped && (
)}
{sheet === 'add' && setDetail(c)}>
{c.photo ? 
: (c.name || '?').charAt(0)}
{XI.arrow({ width: 16, height: 16 })}
))}
{filtered.length === 0 && {c.name} {c.icon && XI[c.icon] ? {XI[c.icon]({ width: 12, height: 12 })} : null} {c.persona}{isInLeads(c) && {XI.check ? XI.check({ width: 11, height: 11 }) : '✓'} In Leads}
{c.place} · {c.when}
{(() => {
const ch = [];
if (c.email) ch.push(['mail', 'email-tile']);
if (c.phone) ch.push(['phone', 'phone-tile']);
if (c.website) ch.push(['website', 'link-tile']);
if (!ch.length) return Name only;
return ch.map(([ic, cls]) => (
{XI[ic] ? XI[ic]({ width: 15, height: 15 }) : null}
));
})()}
{(c.tags || []).map((t) => {t})}
No one matches that.
}
{ if (e.target === e.currentTarget) onClose(); }}>
)}
{detail && window.LeadDetailSheet && setDetail(null)} onUpdate={(next) => { setDetail(next); onUpdate && onUpdate(next); }} onDelete={(id) => onDelete && onDelete(id)} onConnection={(l) => { onConvert(l); setDetail(null); }} />}
{manage && onStagesChange && setManage(false)} onChange={onStagesChange} />}
);
}
/* ---- Stage manager — customise CRM stages like tags ---- */
const STAGE_COLORS = ['#2ED573', '#5CC8FF', '#6B8299', '#E8C75A', '#FF6BC8', '#FF8A3D', '#8A8A92'];
function StageManagerSheet({ stages, onClose, onChange }) {
const [list, setList] = React.useState(stages.map((s) => ({ ...s })));
const commit = (next) => { setList(next); onChange(next); };
const rename = (id, label) => commit(list.map((s) => s.id === id ? { ...s, label } : s));
const recolor = (id, color) => commit(list.map((s) => s.id === id ? { ...s, color } : s));
const remove = (id) => { if (list.length <= 1) return; commit(list.filter((s) => s.id !== id)); };
const add = () => commit(list.concat([{ id: 'st' + Date.now(), label: '', color: STAGE_COLORS[list.length % STAGE_COLORS.length] }]));
return (
Leads {leads.length ? {leads.length} : null}
{leads.length === 0 ? (
)}
{leads.length > 0 && (
{XI.mail ? XI.mail({ width: 26, height: 26 }) : '✉'}
) : (
No leads yet
Turn on Contact exchange in Edit Profile. When people exchange with you, they land here as leads you can track.
Pipeline
{gbpK(pipeline)}
New · 7d
{newThisWeek}
Won
{won}
{stages.map((s) => )}
{onStagesChange && }
{shown.map((l) => {
const st = window.exStage ? window.exStage(l.stage) : { label: 'New', color: '#2ED573' };
return (
);
})}
{shown.length === 0 &&
No leads in this stage.
}
{ if (e.target === e.currentTarget) onClose(); }}>
))}
);
}
/* ---- Add Connection sheet (manual, V1CE-style but warm) ---- */
function AddConnectionSheet({ tags, onClose, onSave }) {
const [d, setD] = React.useState({ name: '', company: '', role: '', place: '', email: '', phone: '', website: '', note: '', persona: 'Work', tags: [], photo: null });
const set = (p) => setD((s) => ({ ...s, ...p }));
const toggleTag = (t) => set({ tags: d.tags.includes(t) ? d.tags.filter((x) => x !== t) : [...d.tags, t] });
const photoRef = React.useRef(null);
return (
Lead stages
Build your own pipeline — name each stage and pick a colour. The last stage counts as "Won".
{list.map((s) => (
{STAGE_COLORS.map((c) =>
rename(s.id, e.target.value)} />
{list.length > 1 && }
{ if (e.target === e.currentTarget) onClose(); }}>
Add Connection
{ const f = e.target.files && e.target.files[0]; if (!f) return; const r = new FileReader(); r.onload = () => set({ photo: r.result }); r.readAsDataURL(f); }} />
set({ name: e.target.value })} />
set({ company: e.target.value })} />
set({ role: e.target.value })} />
set({ place: e.target.value })} />
set({ email: e.target.value })} />
set({ phone: e.target.value })} />
set({ website: e.target.value })} />