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 2026-03-22 14:15:49 -04:00
parent 79922a9208
commit 6004cae8a8
10 changed files with 446 additions and 95 deletions

View file

@ -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>