feat: rename Peer Lookup to Holesail Lookup with result modal
CI / Build & Test (push) Successful in 3m1s

Replace the inline result div with a dedicated modal that displays
structured lookup data (host, port, protocol, private) returned by
Holesail.lookup(). Shows a loading state while the request is in
flight, and renders clear error/no-record states when the key is
not found or the lookup fails.
This commit is contained in:
Raven Scott
2026-03-01 00:13:41 -05:00
parent 0b31e7faa6
commit f0917a2d31
2 changed files with 69 additions and 18 deletions
+47 -15
View File
@@ -156,33 +156,65 @@ function setupEvents() {
reader.readAsText(file);
});
// Peer Lookup
// Holesail Lookup
function runPeerLookup() {
const input = $('peerLookupInput');
const resultEl = $('peerLookupResult');
if (!input || !resultEl) return;
if (!input) return;
const key = input.value.trim();
if (!key) { showToast('Enter an hs:// key', 'default'); return; }
resultEl.style.display = 'block';
resultEl.innerHTML = '<span style="color:var(--text3);">Looking up…</span>';
const body = $('holesailLookupBody');
if (body) body.innerHTML = '<div style="text-align:center;padding:12px 0;color:var(--text3);">Looking up…</div>';
openModal('modal-holesailLookup');
chrome.runtime.sendMessage(
{ target: 'holesail-native', action: 'send', payload: { type: 'lookup', payload: { hsUrl: key } } },
(response) => {
if (chrome.runtime.lastError || !response) {
resultEl.innerHTML = '<span style="color:var(--red);">Lookup failed: ' + (chrome.runtime.lastError?.message || 'No response') + '</span>';
void chrome.runtime.lastError;
if (!body) return;
if (!response || !response.ok) {
const errMsg = (response && response.error) || (chrome.runtime.lastError && chrome.runtime.lastError.message) || 'No response';
body.innerHTML = `
<div style="display:flex;align-items:center;gap:10px;color:var(--red);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:20px;height:20px;flex-shrink:0;"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
<span>${escapeHtml(errMsg)}</span>
</div>`;
return;
}
if (!response.ok) {
resultEl.innerHTML = '<span style="color:var(--red);">Error: ' + escapeHtml(response.error || 'Unknown error') + '</span>';
const host = response.host || null;
const port = response.port || null;
const protocol = response.protocol ? response.protocol.toUpperCase() : null;
const isPrivate = response.secure === true;
if (!host && !port && !protocol) {
body.innerHTML = `
<div style="display:flex;align-items:center;gap:10px;color:var(--amber);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:20px;height:20px;flex-shrink:0;"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
<span>No record found for the provided key.</span>
</div>`;
return;
}
const peers = response.peers || [];
if (peers.length === 0) {
resultEl.innerHTML = '<span style="color:var(--amber);">No peers found for this key.</span>';
} else {
resultEl.innerHTML = '<span style="color:var(--green);">Found ' + peers.length + ' peer(s):</span> ' +
peers.map(p => '<code style="font-family:\'JetBrains Mono\',monospace;font-size:11px;color:var(--cyan);">' + escapeHtml(String(p)) + '</code>').join(', ');
function row(label, value, valueColor) {
return `<div style="display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);">
<span style="color:var(--text2);font-size:12.5px;">${label}</span>
<span style="font-family:'JetBrains Mono',monospace;font-size:12.5px;color:${valueColor || 'var(--text1)'};font-weight:500;">${escapeHtml(String(value))}</span>
</div>`;
}
body.innerHTML = `
<div style="margin-bottom:4px;">
${row('Host', host || 'N/A', host ? 'var(--cyan)' : 'var(--text3)')}
${row('Port', port || 'N/A', port ? 'var(--cyan)' : 'var(--text3)')}
${row('Protocol', protocol || 'N/A', protocol ? 'var(--green)' : 'var(--text3)')}
<div style="display:flex;align-items:center;justify-content:space-between;padding:10px 0;">
<span style="color:var(--text2);font-size:12.5px;">Private</span>
<span style="font-size:12.5px;font-weight:500;color:${isPrivate ? 'var(--amber)' : 'var(--green)'};">
${isPrivate ? '🔒 Yes' : '🌐 No'}
</span>
</div>
</div>`;
}
);
}