Drop CSV or JSON file here
{/* Logo */}
setSearchActiveIndex(0)}
placeholder="Search city, person, company, or tag..."
style={{
width: "100%", padding: "8px 12px 8px 36px", borderRadius: 8,
border: "1px solid #E0DDD7", background: "white",
color: "#1A1A18", fontSize: 14, outline: "none", boxSizing: "border-box",
}}
onFocus={(e) => e.target.style.borderColor = "#E8541A"}
onBlur={(e) => { setTimeout(() => { setSearchQuery(""); setSearchActiveIndex(-1); }, 200); e.target.style.borderColor = "#E0DDD7"; }}
onKeyDown={(e) => {
if (!searchResults.length) {
if (e.key === "Escape") {
setSearchQuery("");
setSearchActiveIndex(-1);
}
return;
}
if (e.key === "ArrowDown") {
e.preventDefault();
setSearchActiveIndex((prev) => (prev < 0 ? 0 : Math.min(prev + 1, searchResults.length - 1)));
} else if (e.key === "ArrowUp") {
e.preventDefault();
setSearchActiveIndex((prev) => (prev <= 0 ? 0 : prev - 1));
} else if (e.key === "Enter") {
e.preventDefault();
selectSearchResult(searchResults[Math.max(searchActiveIndex, 0)] || searchResults[0]);
} else if (e.key === "Escape") {
e.preventDefault();
setSearchQuery("");
setSearchActiveIndex(-1);
}
}}
/>
S
{searchResults.length > 0 && (
{/* Filters */}
{hasDemoContactsLoaded && !hasNonDemoContactsLoaded && !importSession && (
setView("landing")}>
PinPal
{/* Search */}
{searchResults.map((g, i) => (
)}
selectSearchResult(g)}
style={{
padding: "10px 14px", cursor: "pointer", display: "flex", justifyContent: "space-between",
borderBottom: i < searchResults.length - 1 ? "1px solid #F0EDE8" : "none",
background: i === searchActiveIndex ? "rgba(232,84,26,0.08)" : "transparent",
gap: 12,
}}
onMouseEnter={() => setSearchActiveIndex(i)}
>
{g.type === "city" ? "City" : g.type === "destination" ? "Destination" : g.type === "unresolved_contact" ? "Unresolved" : "Contact"}
))}
{g.title}
{g.subtitle}
{Object.entries(SOURCE_LABELS).map(([key, label]) => (
))}
{/* Actions */}
Sample data loaded. These contacts are fictional demo records and will be removed when you import real data.
)}
{/* Map + Sidebar */}
{/* SVG Map */}
{renderImportReviewModal()}
{/* Manual form modal */}
{selectedContactProfile && (
{/* Zoom controls */}
{!showTripPlanner && (
)}
{/* Stats + unresolved editor dock */}
{/* Sidebar */}
{sidebarOpen && (
{showUnresolvedEditor && unresolvedCommittedContacts.length > 0 && (
{showTripPlanner && (
e.stopPropagation()}
onPointerDown={(e) => e.stopPropagation()}
onWheel={(e) => e.stopPropagation()}
onWheelCapture={(e) => e.stopPropagation()}
>
)}
Unresolved contacts
{visibleUnresolvedContacts.length} unresolved contact{visibleUnresolvedContacts.length === 1 ? "" : "s"}
{unresolvedCompanyGroups.length} compan{unresolvedCompanyGroups.length === 1 ? "y" : "ies"} • {unresolvedFilteredContacts.length} visible contact{unresolvedFilteredContacts.length === 1 ? "" : "s"}
e.stopPropagation()}
onWheelCapture={(e) => e.stopPropagation()}
>
{unresolvedCompanyGroups.length > 0 ? (
) : (
e.stopPropagation()}
onWheelCapture={(e) => e.stopPropagation()}
>
{unresolvedCompanyGroups.map((group, index) => {
const isSelectedGroup = selectedUnresolvedCompany && selectedUnresolvedCompany.key === group.key;
return (
);
})}
e.stopPropagation()}
onWheelCapture={(e) => e.stopPropagation()}
>
{selectedUnresolvedCompany ? (
<>
{selectedUnresolvedCompany.label}
{selectedUnresolvedCompany.contacts.length} unresolved contact{selectedUnresolvedCompany.contacts.length === 1 ? "" : "s"}
{selectedUnresolvedCompany.contacts.slice(0, 3).map((contact) => contact.name).join(" • ")}
{selectedUnresolvedCompany.contacts.length > 3 ? ` +${selectedUnresolvedCompany.contacts.length - 3} more` : ""}
setUnresolvedCompanyCityDraft(e.target.value)}
placeholder={`Set city for ${selectedUnresolvedCompany.contacts.length} contact${selectedUnresolvedCompany.contacts.length === 1 ? "" : "s"} at ${selectedUnresolvedCompany.label}`}
style={{ flex: "1 1 260px", padding: "9px 11px", borderRadius: 10, border: "1px solid #E0DDD7", background: "white", color: "#1A1A18", fontSize: 13 }}
/>
{selectedUnresolvedCompany.contacts.map((contact) => {
const contactKey = getPersistentContactKey(contact);
return (
{contact.source && (
{SOURCE_LABELS[contact.source]}
)}
{!!contact.guessReason && (
);
})}
) : (
{contact.name}
{[contact.company, contact.position].filter(Boolean).join(" - ") || "No company or title"}
{contact.guessReason}
)}
{contact.guessCandidates.length > 0 && (
{contact.guessCandidates.map((candidate) => (
))}
)}
setUnresolvedCityDrafts((prev) => ({ ...prev, [contactKey]: e.target.value }))}
placeholder="Type a city"
style={{ padding: "8px 10px", borderRadius: 8, border: "1px solid #E0DDD7", background: "#F7F5F0", minWidth: 180, flex: "1 1 180px" }}
/>
Select a company to review its unresolved contacts.
)}
No unresolved contacts match this search.
)}
{geoContacts.length} contacts
{Object.keys(cityGroups).length} cities
{unresolvedCommittedContacts.length > 0 && (
)}
e.stopPropagation()}
onPointerDown={(e) => e.stopPropagation()}
>
{tripPlan && (
{Object.keys(tripSummary).length > 0 && (
)}
)}
Trip planner
Find people near your destination
setTripDraft({ ...tripDraft, destination: e.target.value })}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
handleTripPlanCreate();
}
}}
placeholder="Barcelona, Halifax, Tokyo..."
style={plannerInputStyle}
/>
{tripDraft.radiusKm} km
setTripDraft({ ...tripDraft, radiusKm: Number(e.target.value) })}
onChange={(e) => setTripDraft({ ...tripDraft, radiusKm: Number(e.target.value) })}
onMouseDown={(e) => e.stopPropagation()}
onPointerDown={(e) => e.stopPropagation()}
style={{ width: "100%", cursor: "ew-resize" }}
/>
setTripDraft({ ...tripDraft, notes: e.target.value })}
placeholder="Conference, customer visit, vacation..."
style={plannerInputStyle}
/>
{tripPlan && (
)}
{tripPlan.destination}
{`${tripMatches.length} nearby contact${tripMatches.length === 1 ? "" : "s"}`}
{tripPlan.notes && (
{tripPlan.notes}
)}
{Object.entries(tripSummary).map(([band, count]) => (
{band}: {count}
))}
)}
e.stopPropagation()}
onPointerDown={(e) => e.stopPropagation()}
>
{sidebarMode === "trip" && tripPlan ? (
<>
)}
{activeTripPlan.destination}
{`${tripMatches.length} nearby contact${tripMatches.length === 1 ? "" : "s"}`}
{Object.keys(tripSummary).length > 0 && (
) : sidebarMode === "city" && activeSelectedCity ? (
<>
{Object.entries(tripSummary).map(([band, count]) => (
{band}: {count}
))}
)}
{tripMatches.length > 0 ? tripMatches.slice(0, 12).map((contact, index) => (
e.currentTarget.style.background = "#F7F5F0"} onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
{SOURCE_LABELS[contact.source]}
{(contact.position || (contact.tags || []).length) && (
)) : (
{[contact.city, contact.company].filter(Boolean).join(" - ")}
{Math.round(contact.distanceKm)} km - {getDistanceBand(contact.distanceKm)}
{[contact.position, ...(contact.tags || []).map((tag) => `#${tag}`)].filter(Boolean).join(" - ")}
)}
No contacts within {activeTripPlan.radiusKm} km yet. Try a bigger radius or another destination.
)}
{activeSelectedCity.city}
{visibleCityContacts.length} contact{visibleCityContacts.length !== 1 ? "s" : ""}
{visibleCityContacts.length > 0 ? visibleCityContacts.map((c, i) => (
) : (
<>
{
e.preventDefault();
togglePinnedContactByKey(getPersistentContactKey(c));
}}
onMouseEnter={(e) => { e.currentTarget.style.background = "#F7F5F0"; e.currentTarget.style.borderColor = "#EAE4DB"; }}
onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.borderColor = "transparent"; }}
title="Right-click to pin to the top of this city"
>
{c.note && (
)) : (
{c.pinned && (
{c.company && (
{c.company}
)}
{c.position && (
{c.position}
)}
{c.citySource === "inferred_company" && c.guessConfidence && (
{c.guessConfidence === "high" ? "Guessed location" : "Medium-confidence guess"}
)}
"{c.note}"
)}
{(c.tags || []).length > 0 && (
{c.tags.map((tag) => (
#{tag}
))}
)}
No contacts in {activeSelectedCity.city} match this search.
)}
Top hubs
{geoContacts.length} contacts across {Object.keys(cityGroups).length} cities
{topHubs.length > 0 ? topHubs.map((hub) => (
)) : (
Import contacts to see your strongest cities here.
)}
setSelectedContactProfile(null)}>
)}
{/* Manual form modal */}
{showManualForm && (
e.stopPropagation()}>
{selectedContactProfile.note && (
{getAvatarSrc(selectedContactProfile, 192) ? (
) : (
selectedContactProfile.name.charAt(0)
)}
{selectedContactProfile.name}
{[selectedContactProfile.position, selectedContactProfile.company].filter(Boolean).join(" - ") || selectedContactProfile.city}
{selectedContactProfile.city && {selectedContactProfile.city}
}
{selectedContactProfile.city && (
)}
{SOURCE_LABELS[selectedContactProfile.source]}
{selectedContactProfile.citySource === "inferred_company" && (
{selectedContactProfile.guessConfidence === "high" ? "Guessed: high confidence" : "Guessed: medium confidence"}
)}
{selectedContactProfile.citySource === "manual" && selectedContactProfile.source === "linkedin" && (
Manually placed
)}
{(selectedContactProfile.tags || []).map((tag) => (
#{tag}
))}
{selectedContactProfile.guessReason && (
{selectedContactProfile.guessReason}
)}
Update location
{selectedContactProfile.guessCandidates.filter((candidate) => normalizeCityKey(candidate) !== normalizeCityKey(selectedContactProfile.city)).length > 0 && (
{selectedContactProfile.guessCandidates
.filter((candidate) => normalizeCityKey(candidate) !== normalizeCityKey(selectedContactProfile.city))
.map((candidate) => (
))}
)}
setProfileCityDraft(e.target.value)}
placeholder="Type a city manually"
style={{ padding: "10px 12px", borderRadius: 10, border: "1px solid #E0DDD7", background: "white", minWidth: 220, flex: "1 1 220px" }}
/>
{selectedContactProfile.note}
)}
{selectedContactProfile.company &&
Company: {selectedContactProfile.company}
}
{selectedContactProfile.position && Role: {selectedContactProfile.position}
}
{selectedContactProfile.city && City: {selectedContactProfile.city}
}
{selectedContactProfile.url && (
Open link
)}
setShowManualForm(false)}>
)}
{/* Toast */}
{toast && (
e.stopPropagation()}>
Add contact
{[ { key: "name", label: "Name", required: true }, { key: "city", label: "City", required: true }, { key: "company", label: "Company" }, { key: "position", label: "Position" }, { key: "note", label: "Note" }, { key: "tags", label: "Tags" }, ].map(({ key, label, required }) => (
setManualForm({ ...manualForm, [key]: e.target.value })}
style={{
width: "100%", padding: "10px 12px", borderRadius: 8,
border: "1px solid #E0DDD7", background: "#F7F5F0", color: "#1A1A18",
fontSize: 15, outline: "none", boxSizing: "border-box",
}}
onFocus={(e) => e.target.style.borderColor = "#E8541A"}
onBlur={(e) => e.target.style.borderColor = "#E0DDD7"}
onKeyDown={(e) => e.key === "Enter" && handleManualAdd()}
/>
))}
{toast.msg}
)}