|
|
|
|
@@ -257,6 +257,10 @@
|
|
|
|
|
================================================================ -->
|
|
|
|
|
<div id="divBody" class="clsBodyFull">
|
|
|
|
|
<div id="divRelays">Loading relays...</div>
|
|
|
|
|
<div id="divDiscoveredRelaysWrap" style="width:95%;margin:10px auto 0 auto;">
|
|
|
|
|
<div id="divDiscoveredRelaysTitle" style="font-size:120%;margin-bottom:6px;cursor:pointer;user-select:none;">▸ Discovered Relays (Outbox)</div>
|
|
|
|
|
<div id="divDiscoveredRelays" style="display:none;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="divRelayEventsWrap">
|
|
|
|
|
<div id="divRelayEvents" class="relay-events-stream"></div>
|
|
|
|
|
</div>
|
|
|
|
|
@@ -333,7 +337,7 @@
|
|
|
|
|
/* ================================================================
|
|
|
|
|
IMPORTS
|
|
|
|
|
================================================================ */
|
|
|
|
|
import { initNDKPage, getPubkey, injectHeaderAvatar, disconnect, getRelayData, getRelayStats, reconnectRelay, publishEvent, getVersion, updateVersionDisplay, ndkFetchEvents, setRelayEventLogging } from './js/init-ndk.mjs';
|
|
|
|
|
import { initNDKPage, getPubkey, injectHeaderAvatar, disconnect, getRelayData, getRelayStats, reconnectRelay, publishEvent, getVersion, updateVersionDisplay, ndkFetchEvents, setRelayEventLogging, getDiscoveredRelays } from './js/init-ndk.mjs';
|
|
|
|
|
import { HamburgerMorphing } from "./hamburger_morphing/hamburger.mjs";
|
|
|
|
|
import { initFooterRelayStatus, updateFooterRelayStatus, initSidenavRelaySection, updateSidenavRelaySection, setRelayActivityState } from './js/relay-ui.mjs';
|
|
|
|
|
|
|
|
|
|
@@ -1331,6 +1335,79 @@ const versionInfo = await getVersion();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const shortNpub = (hex) => {
|
|
|
|
|
if (!hex || hex.length < 16) return hex || '-';
|
|
|
|
|
return `${hex.slice(0, 8)}…${hex.slice(-4)}`;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
let discoveredRelaysExpanded = false;
|
|
|
|
|
|
|
|
|
|
const renderDiscoveredRelays = (relays) => {
|
|
|
|
|
const container = document.getElementById('divDiscoveredRelays');
|
|
|
|
|
const title = document.getElementById('divDiscoveredRelaysTitle');
|
|
|
|
|
if (!container || !title) return;
|
|
|
|
|
|
|
|
|
|
if (!discoveredRelaysExpanded) {
|
|
|
|
|
container.style.display = 'none';
|
|
|
|
|
title.textContent = `▸ Discovered Relays (Outbox)${relays.length > 0 ? ` (${relays.length})` : ''}`;
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
title.textContent = `▾ Discovered Relays (Outbox) (${relays.length})`;
|
|
|
|
|
container.style.display = '';
|
|
|
|
|
|
|
|
|
|
if (relays.length === 0) {
|
|
|
|
|
container.innerHTML = '<div style="padding:8px;color:var(--muted-color);font-size:80%;">No discovered relays. Load the feed page to populate outbox relays from your follows.</div>';
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let html = '<table style="width:100%;font-size:70%;border-collapse:collapse;">';
|
|
|
|
|
html += '<thead><tr>';
|
|
|
|
|
html += '<th class="tblCol tblColLeft" style="border:0.1px solid var(--muted-color);padding:4px;">Relay</th>';
|
|
|
|
|
html += '<th class="tblCol tblColCenter" style="border:0.1px solid var(--muted-color);padding:4px;">Connected</th>';
|
|
|
|
|
html += '<th class="tblCol tblColRight" style="border:0.1px solid var(--muted-color);padding:4px;">Serving</th>';
|
|
|
|
|
html += '<th class="tblCol tblColLeft" style="border:0.1px solid var(--muted-color);padding:4px;">Sample Follows</th>';
|
|
|
|
|
html += '</tr></thead><tbody>';
|
|
|
|
|
|
|
|
|
|
for (const relay of relays) {
|
|
|
|
|
const connected = relay.connected ? SVG_CHECKED : SVG_UNCHECKED;
|
|
|
|
|
const servingCount = Array.isArray(relay.servingPubkeys) ? relay.servingPubkeys.length : 0;
|
|
|
|
|
const sampleFollows = Array.isArray(relay.servingPubkeys)
|
|
|
|
|
? relay.servingPubkeys.slice(0, 3).map(shortNpub).join(', ')
|
|
|
|
|
: '-';
|
|
|
|
|
const rowClass = relay.connected ? 'tblRowConnected' : '';
|
|
|
|
|
|
|
|
|
|
html += `<tr class="${rowClass}">`;
|
|
|
|
|
html += `<td class="tblCol tblColLeft tblColRelay" style="border:0.1px solid var(--muted-color);padding:4px;" title="${relay.url}">${relay.url}</td>`;
|
|
|
|
|
html += `<td class="tblCol tblColCenter" style="border:0.1px solid var(--muted-color);padding:4px;">${connected}</td>`;
|
|
|
|
|
html += `<td class="tblCol tblColRight" style="border:0.1px solid var(--muted-color);padding:4px;">${servingCount}</td>`;
|
|
|
|
|
html += `<td class="tblCol tblColLeft" style="border:0.1px solid var(--muted-color);padding:4px;font-family:monospace;">${sampleFollows}</td>`;
|
|
|
|
|
html += '</tr>';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html += '</tbody></table>';
|
|
|
|
|
container.innerHTML = html;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const refreshDiscoveredRelays = async () => {
|
|
|
|
|
try {
|
|
|
|
|
const relays = await getDiscoveredRelays();
|
|
|
|
|
renderDiscoveredRelays(Array.isArray(relays) ? relays : []);
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.warn('[relays.html] Failed to fetch discovered relays:', error?.message || error);
|
|
|
|
|
renderDiscoveredRelays([]);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const initDiscoveredRelaysToggle = () => {
|
|
|
|
|
const title = document.getElementById('divDiscoveredRelaysTitle');
|
|
|
|
|
if (!title) return;
|
|
|
|
|
title.addEventListener('click', () => {
|
|
|
|
|
discoveredRelaysExpanded = !discoveredRelaysExpanded;
|
|
|
|
|
refreshDiscoveredRelays();
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const refreshRelayData = async () => {
|
|
|
|
|
console.log('[relay2.html] Refreshing relay data...');
|
|
|
|
|
try {
|
|
|
|
|
@@ -1494,6 +1571,9 @@ const versionInfo = await getVersion();
|
|
|
|
|
|
|
|
|
|
await loadCurrentDmInboxRelayList();
|
|
|
|
|
|
|
|
|
|
// Initialize discovered relays (outbox) collapsible toggle
|
|
|
|
|
initDiscoveredRelaysToggle();
|
|
|
|
|
|
|
|
|
|
// Get initial relay data
|
|
|
|
|
await refreshRelayData();
|
|
|
|
|
|
|
|
|
|
@@ -1506,6 +1586,9 @@ const versionInfo = await getVersion();
|
|
|
|
|
// Refresh relay table every 5 seconds
|
|
|
|
|
setInterval(refreshRelayData, 5000);
|
|
|
|
|
|
|
|
|
|
// Discovered relays are fetched only on manual expand click — no
|
|
|
|
|
// auto-refresh interval, to avoid blocking the worker's message queue.
|
|
|
|
|
|
|
|
|
|
// Sync connection history toggle state from localStorage
|
|
|
|
|
connectionHistoryEnabled = localStorage.getItem('relayConnectionHistory') === 'true';
|
|
|
|
|
setRelayEventLogging(connectionHistoryEnabled);
|
|
|
|
|
|