v0.4.2: Welcome screen, status ticker, notifications, text scaling, networking fixes
Welcome screen with staggered counters while backend bootstraps. Header status ticker for new posts/messages/reactions/comments/connection changes. Notification fallback chain (Tauri plugin → Web API → notify-rust). Responsive text scaling (Small/Normal/Large, persisted). Diagnostics moved to popover with on-demand connections. Share details lightbox with QR code. Connect string prefers external address. Stale N1 fix (disconnected routes excluded). Replication handler actively fetches posts+blobs from requester. Hole punch registers remote address for relay. Replication semaphore (3 concurrent). Peer labels show truncated node ID. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Scott Reimers
parent
79922a9208
commit
6004cae8a8
10 changed files with 446 additions and 95 deletions
292
frontend/app.js
292
frontend/app.js
|
|
@ -51,7 +51,7 @@ let networkSummaryEl = null; // created dynamically inside diagnostics popover
|
|||
const resetDataBtn = $('#reset-data-btn');
|
||||
|
||||
// --- State ---
|
||||
let currentTab = 'feed';
|
||||
let currentTab = 'welcome';
|
||||
let connectString = '';
|
||||
let myNodeId = '';
|
||||
const POST_MAX_CHARS = 500;
|
||||
|
|
@ -361,20 +361,39 @@ let _activeNotificationIds = new Set();
|
|||
|
||||
async function maybeNotify(title, body, tag) {
|
||||
try {
|
||||
if (window.__TAURI__?.notification) {
|
||||
const { isPermissionGranted, requestPermission, sendNotification } = window.__TAURI__.notification;
|
||||
let granted = await isPermissionGranted();
|
||||
if (!granted) {
|
||||
const perm = await requestPermission();
|
||||
granted = perm === 'granted';
|
||||
}
|
||||
if (granted) {
|
||||
sendNotification({ title, body, channelId: 'default', id: tag ? hashCode(tag) : undefined });
|
||||
if (tag) _activeNotificationIds.add(tag);
|
||||
}
|
||||
} else if ('Notification' in window) {
|
||||
if (Notification.permission === 'default') await Notification.requestPermission();
|
||||
if (Notification.permission === 'granted') new Notification(title, { body, tag, silent: false });
|
||||
showTicker(title);
|
||||
// Try Tauri plugin first, then Web Notification API, then invoke fallback
|
||||
let sent = false;
|
||||
const tauriNotif = window.__TAURI__?.notification || window.__TAURI__?.plugin?.notification;
|
||||
if (tauriNotif) {
|
||||
try {
|
||||
const { isPermissionGranted, requestPermission, sendNotification } = tauriNotif;
|
||||
let granted = await isPermissionGranted();
|
||||
if (!granted) {
|
||||
const perm = await requestPermission();
|
||||
granted = perm === 'granted';
|
||||
}
|
||||
if (granted) {
|
||||
sendNotification({ title, body, channelId: 'default', id: tag ? hashCode(tag) : undefined });
|
||||
if (tag) _activeNotificationIds.add(tag);
|
||||
sent = true;
|
||||
}
|
||||
} catch (_) {}
|
||||
}
|
||||
if (!sent && 'Notification' in window && Notification.permission !== 'denied') {
|
||||
try {
|
||||
if (Notification.permission === 'default') await Notification.requestPermission();
|
||||
if (Notification.permission === 'granted') {
|
||||
new Notification(title, { body, tag, silent: false });
|
||||
sent = true;
|
||||
}
|
||||
} catch (_) {}
|
||||
}
|
||||
if (!sent) {
|
||||
// Last resort: try invoke to Rust-side notification
|
||||
try {
|
||||
await invoke('send_notification', { title, body });
|
||||
} catch (_) {}
|
||||
}
|
||||
} catch (_) {}
|
||||
}
|
||||
|
|
@ -446,7 +465,7 @@ function relativeTime(timestampMs) {
|
|||
}
|
||||
|
||||
function peerLabel(nodeId, displayName) {
|
||||
if (displayName) return displayName;
|
||||
if (displayName) return `${displayName} (${nodeId.substring(0, 6)})`;
|
||||
return nodeId.substring(0, 12) + '...';
|
||||
}
|
||||
|
||||
|
|
@ -579,6 +598,20 @@ function updateTabBadge(tabName, count) {
|
|||
let _lastFeedViewMs = 0;
|
||||
let _lastMyPostsViewMs = 0;
|
||||
|
||||
let _tickerTimeout = null;
|
||||
let _lastTickerMs = 0;
|
||||
function showTicker(msg) {
|
||||
const now = Date.now();
|
||||
if (now - _lastTickerMs < 1000) return; // max 1 update/sec
|
||||
_lastTickerMs = now;
|
||||
const el = $('#status-ticker');
|
||||
if (!el) return;
|
||||
el.textContent = msg;
|
||||
el.classList.remove('faded');
|
||||
if (_tickerTimeout) clearTimeout(_tickerTimeout);
|
||||
_tickerTimeout = setTimeout(() => { el.classList.add('faded'); }, 3000);
|
||||
}
|
||||
|
||||
async function updateNetworkIndicator() {
|
||||
try {
|
||||
const info = await invoke('get_network_summary');
|
||||
|
|
@ -596,6 +629,14 @@ async function updateNetworkIndicator() {
|
|||
if (info.hasPublicV6) labelHtml += '<span class="net-label">Public</span>';
|
||||
if (info.hasPublicV4 || info.hasUpnp) labelHtml += '<span class="net-label">Server</span>';
|
||||
if (labels) labels.innerHTML = labelHtml;
|
||||
// Only show connection ticker on state change
|
||||
if (typeof updateNetworkIndicator._lastTotal === 'undefined') updateNetworkIndicator._lastTotal = -1;
|
||||
if (total !== updateNetworkIndicator._lastTotal) {
|
||||
if (total === 0) showTicker('Connecting...');
|
||||
else if (updateNetworkIndicator._lastTotal === 0) showTicker('Connected');
|
||||
else if (total > updateNetworkIndicator._lastTotal) showTicker(`${total} peers connected`);
|
||||
updateNetworkIndicator._lastTotal = total;
|
||||
}
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
|
|
@ -666,7 +707,18 @@ async function loadFeed(force) {
|
|||
const oldFp = _feedFingerprint;
|
||||
_feedFingerprint = fp;
|
||||
|
||||
// Notify on new posts and engagement (DB-backed seen tracking)
|
||||
// Ticker for new posts from others
|
||||
if (_notifReady && oldFp) {
|
||||
const oldIds = new Set(oldFp.split('|').map(s => s.split(':')[0]));
|
||||
for (const p of posts) {
|
||||
if (!p.isMe && !oldIds.has(p.id)) {
|
||||
const name = p.authorName || p.author.substring(0, 8);
|
||||
showTicker(`New post from ${name}`);
|
||||
break; // one ticker per cycle
|
||||
}
|
||||
}
|
||||
}
|
||||
// Notify on engagement (DB-backed seen tracking)
|
||||
if (_notifReady && oldFp) {
|
||||
try {
|
||||
const notifReacts = await invoke('get_setting', { key: 'notif_reacts' }).catch(() => null) || 'on';
|
||||
|
|
@ -680,10 +732,12 @@ async function loadFeed(force) {
|
|||
if (totalReacts > seen.seenReactCount) {
|
||||
const newReacts = totalReacts - seen.seenReactCount;
|
||||
maybeNotify('New reactions on your post', `${newReacts} new reaction${newReacts > 1 ? 's' : ''}`, `react-${p.id}`);
|
||||
showTicker(`New reaction on your post`);
|
||||
}
|
||||
if (totalComments > seen.seenCommentCount) {
|
||||
const newComments = totalComments - seen.seenCommentCount;
|
||||
maybeNotify('New comment on your post', (p.content || '').slice(0, 40), `comment-${p.id}`);
|
||||
showTicker(`New comment on your post`);
|
||||
}
|
||||
}
|
||||
} catch (_) {}
|
||||
|
|
@ -696,6 +750,8 @@ async function loadFeed(force) {
|
|||
if (postEl) expandedComments.add(postEl.dataset.postId);
|
||||
});
|
||||
if (posts.length === 0) {
|
||||
// Don't lock in empty fingerprint — let next refresh re-render when posts arrive
|
||||
_feedFingerprint = null;
|
||||
feedList.innerHTML = renderEmptyState(
|
||||
'Your feed is empty',
|
||||
'Follow peers on the People tab to see their posts here.'
|
||||
|
|
@ -839,6 +895,7 @@ async function loadMessages(force) {
|
|||
const name = thread.partnerName || partnerId.slice(0, 8);
|
||||
const body = notifMsg === 'preview' ? (p.decryptedContent || '').slice(0, 100) : 'New message';
|
||||
maybeNotify(`Message from ${name}`, body, `msg-${p.id}`);
|
||||
showTicker(`New message from ${name}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1556,7 +1613,13 @@ async function loadConnections() {
|
|||
}
|
||||
|
||||
async function loadAllDiagnostics() {
|
||||
await Promise.all([loadNetworkSummary(), loadConnections(), loadPeers(), loadActivityLog()]);
|
||||
const tasks = [loadNetworkSummary(), loadActivityLog()];
|
||||
// Only load connections if section is visible
|
||||
const connSection = $('#connections-section');
|
||||
if (connSection && !connSection.classList.contains('hidden')) {
|
||||
tasks.push(loadConnections());
|
||||
}
|
||||
await Promise.all(tasks);
|
||||
lastDiagUpdate = Date.now();
|
||||
const ts = $('#diag-update-time');
|
||||
if (ts) ts.textContent = 'Updated ' + relativeTime(lastDiagUpdate);
|
||||
|
|
@ -1567,13 +1630,7 @@ let activityInterval = null;
|
|||
async function loadActivityLog() {
|
||||
try {
|
||||
const data = await invoke('get_activity_log');
|
||||
// Render timers
|
||||
const timersEl = $('#activity-timers');
|
||||
if (timersEl) {
|
||||
const now = Date.now();
|
||||
timersEl.innerHTML = renderTimer('Rebalance', data.rebalanceLastMs, data.rebalanceIntervalSecs, now)
|
||||
+ renderTimer('Anchor Register', data.anchorRegisterLastMs, data.anchorRegisterIntervalSecs, now);
|
||||
}
|
||||
// Timers removed — rebalance/anchor register countdowns not useful for users
|
||||
// Render events (newest first)
|
||||
const logEl = $('#activity-log');
|
||||
if (logEl) {
|
||||
|
|
@ -2800,20 +2857,32 @@ $('#diagnostics-btn').addEventListener('click', () => {
|
|||
<button id="request-referrals-btn" class="btn btn-ghost btn-sm">Request Referrals</button>
|
||||
<span id="diag-update-time" class="diag-timestamp"></span>
|
||||
</div>
|
||||
<h4 class="subsection-title">Timers</h4>
|
||||
<div id="activity-timers" class="diag-grid" style="grid-template-columns: 1fr 1fr;"></div>
|
||||
<button id="show-connections-btn" class="btn btn-ghost btn-sm" style="margin-top:0.5rem">Show Connections</button>
|
||||
<div id="connections-section" class="hidden">
|
||||
<h4 class="subsection-title">Mesh & Session Connections</h4>
|
||||
<div id="connections-list"></div>
|
||||
</div>
|
||||
<h4 class="subsection-title">Activity Log</h4>
|
||||
<div id="activity-log" class="activity-log-container"></div>
|
||||
<h4 class="subsection-title">Mesh Connections</h4>
|
||||
<div id="connections-list"></div>
|
||||
<h4 class="subsection-title">Known Peers</h4>
|
||||
<div id="peers-list"></div>`;
|
||||
<div id="activity-log" class="activity-log-container"></div>`;
|
||||
openPopover('Network Diagnostics', diagHtml, {
|
||||
onOpen() {
|
||||
// Re-bind dynamic element refs
|
||||
networkSummaryEl = $('#network-summary');
|
||||
connectionsList = $('#connections-list');
|
||||
peersList = $('#peers-list');
|
||||
peersList = null; // Known peers removed
|
||||
// Wire connections toggle
|
||||
$('#show-connections-btn').addEventListener('click', () => {
|
||||
const section = $('#connections-section');
|
||||
const btn = $('#show-connections-btn');
|
||||
if (section.classList.contains('hidden')) {
|
||||
section.classList.remove('hidden');
|
||||
btn.textContent = 'Hide Connections';
|
||||
loadConnections();
|
||||
} else {
|
||||
section.classList.add('hidden');
|
||||
btn.textContent = 'Show Connections';
|
||||
}
|
||||
});
|
||||
// Wire action buttons
|
||||
$('#diag-refresh-btn').addEventListener('click', async () => {
|
||||
const btn = $('#diag-refresh-btn');
|
||||
|
|
@ -2869,10 +2938,38 @@ connectInput.addEventListener('keydown', (e) => {
|
|||
$('#connect-toggle').addEventListener('click', () => {
|
||||
const body = $('#connect-body');
|
||||
body.classList.toggle('hidden');
|
||||
$('#connect-toggle').textContent = body.classList.contains('hidden') ? 'Add peer manually...' : 'Cancel';
|
||||
$('#connect-toggle').textContent = body.classList.contains('hidden') ? 'Add peer manually' : 'Cancel';
|
||||
});
|
||||
$('#share-details-btn').addEventListener('click', () => {
|
||||
const overlay = document.createElement('div');
|
||||
overlay.className = 'image-lightbox';
|
||||
overlay.style.cursor = 'default';
|
||||
let qrSvg = '';
|
||||
try { qrSvg = generateQRCodeSVG(connectString, 200); } catch (_) {}
|
||||
overlay.innerHTML = `
|
||||
<div style="background:#1a1a2e;border:1px solid #333;border-radius:12px;padding:1.5rem;max-width:400px;width:90%;text-align:center">
|
||||
<h3 style="color:#7fdbca;margin:0 0 0.75rem">Share My Details</h3>
|
||||
<div style="margin-bottom:0.75rem">${qrSvg}</div>
|
||||
<div class="connect-string-box" style="margin-bottom:0.75rem;font-size:0.7rem">${escapeHtml(connectString)}</div>
|
||||
<div style="display:flex;gap:0.5rem;justify-content:center">
|
||||
<button class="btn btn-primary btn-sm" id="share-copy-btn">Copy</button>
|
||||
<button class="btn btn-ghost btn-sm" id="share-close-btn">Close</button>
|
||||
</div>
|
||||
</div>`;
|
||||
document.body.appendChild(overlay);
|
||||
overlay.querySelector('#share-copy-btn').addEventListener('click', async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(connectString);
|
||||
toast('Connect string copied!');
|
||||
} catch (_) {
|
||||
prompt('Copy your connect string:', connectString);
|
||||
}
|
||||
});
|
||||
overlay.querySelector('#share-close-btn').addEventListener('click', () => overlay.remove());
|
||||
overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); });
|
||||
});
|
||||
syncBtn.addEventListener('click', doSyncAll);
|
||||
copyBtn.addEventListener('click', async () => {
|
||||
if (copyBtn) copyBtn.addEventListener('click', async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(connectString);
|
||||
toast('Connect string copied!');
|
||||
|
|
@ -2881,7 +2978,7 @@ copyBtn.addEventListener('click', async () => {
|
|||
prompt('Copy your connect string:', connectString);
|
||||
}
|
||||
});
|
||||
exportKeyBtn.addEventListener('click', async () => {
|
||||
if (exportKeyBtn) exportKeyBtn.addEventListener('click', async () => {
|
||||
try {
|
||||
const key = await invoke('export_identity');
|
||||
try {
|
||||
|
|
@ -2909,6 +3006,28 @@ $('#circle-profiles-toggle').addEventListener('click', () => {
|
|||
});
|
||||
|
||||
// --- Notifications popover ---
|
||||
// Text size toggle
|
||||
const TEXT_SIZE_SCALES = { small: '100%', normal: '150%', large: '200%' };
|
||||
// Apply text size immediately (default Normal = 150%)
|
||||
document.documentElement.style.fontSize = '150%';
|
||||
(async () => {
|
||||
const saved = await invoke('get_setting', { key: 'text_size' }).catch(() => null) || 'normal';
|
||||
document.documentElement.style.fontSize = TEXT_SIZE_SCALES[saved] || '150%';
|
||||
document.querySelectorAll('.text-size-opt').forEach(b => {
|
||||
b.classList.toggle('active', b.dataset.size === saved);
|
||||
});
|
||||
})();
|
||||
document.querySelectorAll('.text-size-opt').forEach(btn => {
|
||||
btn.addEventListener('click', async () => {
|
||||
const size = btn.dataset.size;
|
||||
document.documentElement.style.fontSize = TEXT_SIZE_SCALES[size] || '';
|
||||
document.querySelectorAll('.text-size-opt').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
await invoke('set_setting', { key: 'text_size', value: size }).catch(() => {});
|
||||
toast('Text size updated');
|
||||
});
|
||||
});
|
||||
|
||||
$('#notifications-btn').addEventListener('click', async () => {
|
||||
// Load current settings
|
||||
const msgVal = await invoke('get_setting', { key: 'notif_messages' }).catch(() => null) || 'on';
|
||||
|
|
@ -2968,41 +3087,84 @@ setupName.addEventListener('keydown', (e) => {
|
|||
|
||||
// --- Init ---
|
||||
async function init() {
|
||||
// Backend setup may still be running — retry until state is managed
|
||||
for (let attempt = 0; attempt < 30; attempt++) {
|
||||
try {
|
||||
await invoke('get_node_info');
|
||||
break; // backend ready
|
||||
} catch (e) {
|
||||
if (attempt === 29) { console.error('Backend not ready after 30 attempts'); return; }
|
||||
await new Promise(r => setTimeout(r, 300));
|
||||
}
|
||||
}
|
||||
|
||||
updateCharCount();
|
||||
const info = await loadNodeInfo();
|
||||
await loadStats();
|
||||
await loadFeed();
|
||||
await loadMessages();
|
||||
// Now safe to fire notifications (initial data loaded, won't spam)
|
||||
_notifReady = true;
|
||||
|
||||
// Show setup overlay if no profile exists
|
||||
if (info && !info.hasProfile) {
|
||||
setupOverlay.classList.remove('hidden');
|
||||
setupName.focus();
|
||||
}
|
||||
|
||||
// Initialize feed view timestamp
|
||||
_lastFeedViewMs = Date.now();
|
||||
updateNetworkIndicator().catch(() => {});
|
||||
|
||||
// Initial network indicator
|
||||
updateNetworkIndicator();
|
||||
// Welcome screen — stagger count reveals every 2 seconds
|
||||
let _welcomeTick = 0;
|
||||
let _welcomeValues = [0, 0, 0, 0, 0];
|
||||
const welcomeFields = ['welcome-connections', 'welcome-posts', 'welcome-messages', 'welcome-reacts', 'welcome-comments'];
|
||||
|
||||
// Fetch data in background (non-blocking — updates _welcomeValues + tab badges + notifications)
|
||||
const welcomeFetch = () => {
|
||||
invoke('get_network_summary').then(info => {
|
||||
_welcomeValues[0] = info.totalConnections || 0;
|
||||
}).catch(() => {});
|
||||
invoke('get_badge_counts', { lastFeedViewMs: _lastFeedViewMs }).then(b => {
|
||||
_welcomeValues[1] = b.newFeed || 0;
|
||||
_welcomeValues[2] = b.unreadMessages || 0;
|
||||
_welcomeValues[3] = b.newReacts || 0;
|
||||
_welcomeValues[4] = b.newComments || 0;
|
||||
// Update tab badges from welcome screen
|
||||
updateTabBadge('feed', b.newFeed || 0);
|
||||
updateTabBadge('myposts', b.newEngagement || 0);
|
||||
updateTabBadge('messages', b.unreadMessages || 0);
|
||||
// Ticker + notifications only after user leaves welcome screen
|
||||
// (welcome page already shows these counts directly)
|
||||
}).catch(() => {});
|
||||
};
|
||||
// Stagger reveals — one field every 2 seconds (first fetch happens on first tick)
|
||||
let _welcomeRevealed = 0;
|
||||
const welcomeInterval = setInterval(() => {
|
||||
if (currentTab !== 'welcome') {
|
||||
clearInterval(welcomeInterval);
|
||||
return;
|
||||
}
|
||||
// Reveal next field
|
||||
if (_welcomeRevealed < welcomeFields.length) {
|
||||
const el = document.getElementById(welcomeFields[_welcomeRevealed]);
|
||||
if (el) el.textContent = _welcomeValues[_welcomeRevealed];
|
||||
_welcomeRevealed++;
|
||||
}
|
||||
// Update all revealed fields with latest data
|
||||
welcomeFetch();
|
||||
for (let i = 0; i < _welcomeRevealed; i++) {
|
||||
const el = document.getElementById(welcomeFields[i]);
|
||||
if (el) el.textContent = _welcomeValues[i];
|
||||
}
|
||||
}, 2000);
|
||||
|
||||
// Wait for backend in the background, then load node info
|
||||
(async () => {
|
||||
for (let attempt = 0; attempt < 30; attempt++) {
|
||||
try {
|
||||
await invoke('get_node_info');
|
||||
break;
|
||||
} catch (e) {
|
||||
if (attempt === 29) { console.error('Backend not ready after 30 attempts'); return; }
|
||||
await new Promise(r => setTimeout(r, 300));
|
||||
}
|
||||
}
|
||||
const info = await loadNodeInfo();
|
||||
if (info && !info.hasProfile) {
|
||||
setupOverlay.classList.remove('hidden');
|
||||
setupName.focus();
|
||||
}
|
||||
// Reload feed now that backend is ready
|
||||
loadFeed(true).catch(() => {});
|
||||
loadMessages(true).catch(() => {});
|
||||
})();
|
||||
|
||||
// Mark notif ready after first welcome fetch succeeds (skip first 2 ticks to avoid spam)
|
||||
setTimeout(() => { _notifReady = true; }, 6000);
|
||||
|
||||
// Auto-refresh every 10 seconds — only the active tab
|
||||
const _initTime = Date.now();
|
||||
setInterval(() => {
|
||||
if (currentTab === 'feed') loadFeed();
|
||||
if (currentTab === 'myposts') loadMyPosts();
|
||||
const startup = Date.now() - _initTime < 30000; // force during first 30s
|
||||
if (currentTab === 'feed') loadFeed(startup);
|
||||
if (currentTab === 'myposts') loadMyPosts(startup);
|
||||
if (currentTab === 'people') { loadFollows(); loadPeers(); loadAudience(); }
|
||||
updateNetworkIndicator();
|
||||
}, 10000);
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
<header>
|
||||
<div id="header-row">
|
||||
<h1>ItsGoin</h1>
|
||||
<div id="status-ticker"></div>
|
||||
<div id="net-indicator">
|
||||
<span id="net-dot"></span>
|
||||
<span id="net-labels"></span>
|
||||
|
|
@ -29,15 +30,31 @@
|
|||
|
||||
<main>
|
||||
<nav id="tabs">
|
||||
<button class="tab active" data-tab="feed">Feed</button>
|
||||
<button class="tab" data-tab="feed">Feed</button>
|
||||
<button class="tab" data-tab="myposts">My Posts</button>
|
||||
<button class="tab" data-tab="people">People</button>
|
||||
<button class="tab" data-tab="messages">Messages</button>
|
||||
<button class="tab" data-tab="settings">Settings</button>
|
||||
</nav>
|
||||
|
||||
<!-- Welcome (shown on startup) -->
|
||||
<section id="view-welcome" class="view active">
|
||||
<div style="text-align:center;padding:2rem 1rem">
|
||||
<h2 style="color:#7fdbca;margin-bottom:0.25rem">Welcome back!</h2>
|
||||
<p style="color:#e0e0e0;font-size:1.1rem;margin-bottom:0.5rem">How's it goin?</p>
|
||||
<p style="color:#666;font-size:0.8rem;margin-bottom:1.5rem">Connecting and getting updates usually takes a couple minutes.<br>New things we've found so far:</p>
|
||||
<div id="welcome-counts" style="display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;color:#888;font-size:0.85rem">
|
||||
<div><span id="welcome-connections" style="font-size:1.4rem;font-weight:700;color:#5b8def;display:block">-</span>Connections</div>
|
||||
<div><span id="welcome-posts" style="font-size:1.4rem;font-weight:700;color:#5b8def;display:block">-</span>New Posts</div>
|
||||
<div><span id="welcome-messages" style="font-size:1.4rem;font-weight:700;color:#5b8def;display:block">-</span>Messages</div>
|
||||
<div><span id="welcome-reacts" style="font-size:1.4rem;font-weight:700;color:#5b8def;display:block">-</span>Reacts</div>
|
||||
<div><span id="welcome-comments" style="font-size:1.4rem;font-weight:700;color:#5b8def;display:block">-</span>Comments</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Feed tab -->
|
||||
<section id="view-feed" class="view active">
|
||||
<section id="view-feed" class="view">
|
||||
<div id="feed-list"></div>
|
||||
</section>
|
||||
|
||||
|
|
@ -116,8 +133,9 @@
|
|||
<div id="audience-approved-list"></div>
|
||||
</div>
|
||||
|
||||
<div class="section-card">
|
||||
<button id="connect-toggle" class="btn btn-ghost btn-sm">Add peer manually...</button>
|
||||
<div class="section-card" style="display:flex;gap:0.5rem;flex-wrap:wrap">
|
||||
<button id="share-details-btn" class="btn btn-ghost btn-sm">Share my details</button>
|
||||
<button id="connect-toggle" class="btn btn-ghost btn-sm">Add peer manually</button>
|
||||
<div id="connect-body" class="hidden">
|
||||
<div class="input-row" style="margin-top:0.5rem">
|
||||
<input id="connect-input" placeholder="paste connect string: nodeid@ip:port" />
|
||||
|
|
@ -182,15 +200,8 @@
|
|||
</div>
|
||||
|
||||
<div class="section-card">
|
||||
<h3>Identity</h3>
|
||||
<div id="node-info">
|
||||
<span id="node-id">loading...</span>
|
||||
</div>
|
||||
<div id="connect-string-display" class="connect-string-box"></div>
|
||||
<div id="qr-code" class="qr-container"></div>
|
||||
<div class="button-row">
|
||||
<button id="copy-connect" class="btn btn-ghost" title="Copy connect string">Copy Connect String</button>
|
||||
<button id="export-key-btn" class="btn btn-ghost" title="Export identity key">Export Key</button>
|
||||
<div id="node-info" style="display:none">
|
||||
<span id="node-id"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -215,6 +226,15 @@
|
|||
<button id="diagnostics-btn" class="btn btn-ghost btn-full">Network Diagnostics</button>
|
||||
</div>
|
||||
|
||||
<div class="section-card">
|
||||
<h3>Text Size</h3>
|
||||
<div id="text-size-btns" style="display:flex;gap:0.4rem;margin-top:0.3rem">
|
||||
<button class="notif-opt text-size-opt" data-size="small">Small</button>
|
||||
<button class="notif-opt text-size-opt active" data-size="normal">Normal</button>
|
||||
<button class="notif-opt text-size-opt" data-size="large">Large</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-card">
|
||||
<h3>Cache Storage</h3>
|
||||
<div id="cache-stats-display" class="empty-hint">Loading...</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
html { font-size: clamp(14px, 1.5vw, 24px); }
|
||||
select option { color: #000 !important; }
|
||||
body { font-family: system-ui, sans-serif; max-width: 640px; margin: 0 auto; padding: 1rem; background: #1a1a2e; color: #e0e0e0; color-scheme: dark; }
|
||||
body { font-family: system-ui, sans-serif; max-width: clamp(640px, 80vw, 1600px); margin: 0 auto; padding: clamp(0.5rem, 2vw, 2rem); background: #1a1a2e; color: #e0e0e0; color-scheme: dark; }
|
||||
header { border-bottom: 1px solid #333; padding-bottom: 0.5rem; margin-bottom: 1rem; }
|
||||
#header-row { display: flex; justify-content: space-between; align-items: center; }
|
||||
header h1 { font-size: 1.4rem; color: #7fdbca; margin: 0; }
|
||||
header h1 { font-size: clamp(1.4rem, 2.5vw, 2rem); color: #7fdbca; margin: 0; }
|
||||
#status-ticker { flex: 1; text-align: center; font-size: 0.7rem; color: #888; line-height: 1.3; max-height: 2.4em; overflow: hidden; transition: opacity 0.3s; }
|
||||
#status-ticker.faded { opacity: 0; }
|
||||
#net-indicator { display: flex; align-items: center; gap: 0.4rem; }
|
||||
#net-dot { width: 10px; height: 10px; border-radius: 50%; background: #222; border: 1px solid #444; }
|
||||
#net-dot.net-black { background: #222; }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue