926e0c1509
Sticky header with tabs as one block on desktop. Fixed header + bottom nav on mobile. Full-width dark header (#0a0a1a) edge-to-edge with 15px fade gradient. Tab icons on desktop (inline) and mobile (stacked). Safe area inset support for phone notches. Lightboxes close on tab switch. Profiles lightbox (name, bio, visibility, circle profiles) and redundancy lightbox moved from settings to My Posts. Sync All and Stored Anchors moved into Network Diagnostics popover. Network indicator click opens diagnostics. Settings streamlined — removed profile editor, diagnostics button, sync, redundancy, anchor management. Keepalive fix: tokio::time::sleep in select! never fired; switched to interval. Auto-reconnect on unexpected disconnect with 3s delay. notify_growth on disconnect. Tab badge fix preserving icon spans. Feed re-render skip during media playback. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
251 lines
11 KiB
HTML
251 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<title>ItsGoin</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<!-- First-run: set display name -->
|
|
<div id="setup-overlay" class="overlay hidden">
|
|
<div class="overlay-box">
|
|
<h2>Welcome to ItsGoin</h2>
|
|
<p>Choose a display name to get started.</p>
|
|
<input id="setup-name" type="text" placeholder="Your name" maxlength="50" autofocus />
|
|
<button id="setup-btn" class="btn btn-primary">Continue</button>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<nav id="tabs">
|
|
<button class="tab" data-tab="feed"><span class="tab-icon">📰</span><span class="tab-label">Feed</span></button>
|
|
<button class="tab" data-tab="myposts"><span class="tab-icon">✍</span><span class="tab-label">My Posts</span></button>
|
|
<button class="tab" data-tab="people"><span class="tab-icon">👥</span><span class="tab-label">People</span></button>
|
|
<button class="tab" data-tab="messages"><span class="tab-icon">💬</span><span class="tab-label">Messages</span></button>
|
|
<button class="tab" data-tab="settings"><span class="tab-icon">⚙</span><span class="tab-label">Settings</span></button>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- 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">
|
|
<div id="feed-list"></div>
|
|
</section>
|
|
|
|
<!-- My Posts tab -->
|
|
<section id="view-myposts" class="view">
|
|
<div class="section-card" style="text-align:center;margin-bottom:0.5rem">
|
|
<button id="profile-lightbox-btn" class="btn btn-ghost btn-sm">Profiles</button>
|
|
<button id="circles-toggle" class="btn btn-ghost btn-sm section-toggle">Manage Circles</button>
|
|
<button id="redundancy-lightbox-btn" class="btn btn-ghost btn-sm">Redundancy</button>
|
|
<div id="circles-body" class="hidden">
|
|
<div class="input-row" style="margin-top:0.5rem">
|
|
<input id="circle-name-input" placeholder="New circle name" />
|
|
<button id="create-circle-btn" class="btn btn-primary">Create</button>
|
|
</div>
|
|
<div id="circles-list"></div>
|
|
</div>
|
|
</div>
|
|
<div id="compose">
|
|
<textarea id="post-content" placeholder="How's it goin?"></textarea>
|
|
<div id="attachment-preview"></div>
|
|
<input type="file" id="file-input" multiple class="hidden" />
|
|
<div style="text-align:center;margin:0.3rem 0"><button id="attach-btn" class="btn btn-ghost btn-sm" title="Attach images or videos">Attach</button></div>
|
|
<div id="compose-footer">
|
|
<div class="compose-left">
|
|
<span class="hint">Ctrl+Enter to post</span>
|
|
<div id="visibility-row">
|
|
<select id="visibility-select">
|
|
<option value="public">Public</option>
|
|
<option value="friends">Friends</option>
|
|
<option value="circle">Circle</option>
|
|
</select>
|
|
<select id="circle-select" class="hidden"></select>
|
|
<select id="comment-perm-select" title="Comment permission">
|
|
<option value="public">Comments: All</option>
|
|
<option value="audience_only">Comments: Audience</option>
|
|
<option value="none">Comments: Off</option>
|
|
</select>
|
|
<select id="react-perm-select" title="React permission">
|
|
<option value="both">Reacts: All</option>
|
|
<option value="public">Reacts: Public</option>
|
|
<option value="private">Reacts: Private</option>
|
|
<option value="none">Reacts: Off</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="compose-right">
|
|
<span id="char-count">0/500</span>
|
|
<button id="post-btn" class="btn btn-primary">Post</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="my-posts-list"></div>
|
|
</section>
|
|
|
|
<!-- People tab -->
|
|
<section id="view-people" class="view">
|
|
<div class="section-card">
|
|
<h3>Following</h3>
|
|
<div id="follows-list"></div>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<button id="discover-toggle" class="btn btn-ghost btn-sm section-toggle">Discover People</button>
|
|
<div id="discover-body" class="hidden">
|
|
<p class="empty-hint" style="margin-bottom:0.5rem">People on the network with profiles you can follow.</p>
|
|
<div id="discover-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<h3>Audience</h3>
|
|
<p class="empty-hint">People who receive your public posts.</p>
|
|
<h4 class="subsection-title">Pending Requests</h4>
|
|
<div id="audience-pending-list"></div>
|
|
<h4 class="subsection-title">Approved</h4>
|
|
<div id="audience-approved-list"></div>
|
|
</div>
|
|
|
|
<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" />
|
|
<button id="connect-btn" class="btn btn-primary">Connect</button>
|
|
</div>
|
|
<div id="connect-status"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Messages tab -->
|
|
<section id="view-messages" class="view">
|
|
<div id="dm-compose" class="section-card">
|
|
<h3>New Conversation</h3>
|
|
<div class="dm-compose-row">
|
|
<select id="dm-recipient-select">
|
|
<option value="">(select recipient)</option>
|
|
</select>
|
|
</div>
|
|
<textarea id="dm-content" placeholder="Write a private message..." rows="2"></textarea>
|
|
<div class="dm-compose-footer">
|
|
<span class="hint">Encrypted end-to-end</span>
|
|
<button id="dm-send-btn" class="btn btn-primary">Send</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="conversations-list"></div>
|
|
|
|
<div class="section-card" id="message-requests-section">
|
|
<h3>Message Requests</h3>
|
|
<div id="message-requests-list"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Settings tab -->
|
|
<section id="view-settings" class="view">
|
|
<!-- Hidden profile fields (used by JS, edited via Profiles lightbox) -->
|
|
<div class="hidden">
|
|
<input id="profile-name" type="text" maxlength="50" />
|
|
<textarea id="profile-bio" maxlength="200"></textarea>
|
|
<input type="checkbox" id="public-visible-check" checked />
|
|
<button id="save-profile-btn"></button>
|
|
<button id="circle-profiles-toggle"></button>
|
|
<div id="circle-profiles-body" class="hidden"><div id="circle-profiles-list"></div></div>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<button id="notifications-btn" class="btn btn-ghost btn-full">Notifications</button>
|
|
</div>
|
|
|
|
<!-- Hidden: node-info, anchors, diagnostics btn moved elsewhere -->
|
|
<div class="hidden">
|
|
<button id="anchors-toggle"></button>
|
|
<div id="anchors-body"><div id="known-anchors-list"></div><div id="anchors-list"></div></div>
|
|
<button id="diagnostics-btn"></button>
|
|
<div id="node-info"><span id="node-id"></span></div>
|
|
</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="xsmall">XS</button>
|
|
<button class="notif-opt text-size-opt" data-size="small">S</button>
|
|
<button class="notif-opt text-size-opt active" data-size="normal">M</button>
|
|
<button class="notif-opt text-size-opt" data-size="large">L</button>
|
|
<button class="notif-opt text-size-opt" data-size="xlarge">XL</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-card">
|
|
<h3>Cache Storage</h3>
|
|
<div id="cache-stats-display" class="empty-hint">Loading...</div>
|
|
<label for="cache-size-select" style="margin-top:0.5rem;display:block">Cache Size Limit</label>
|
|
<select id="cache-size-select" style="margin-top:0.25rem;width:100%">
|
|
<option value="268435456">256 MB</option>
|
|
<option value="536870912">512 MB</option>
|
|
<option value="1073741824" selected>1 GB (default)</option>
|
|
<option value="2147483648">2 GB</option>
|
|
<option value="5368709120">5 GB</option>
|
|
<option value="10737418240">10 GB</option>
|
|
<option value="0">Unlimited</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Redundancy moved to My Posts lightbox -->
|
|
<div class="hidden"><div id="redundancy-panel"></div></div>
|
|
|
|
<!-- Sync moved to diagnostics popover -->
|
|
<div class="hidden"><button id="sync-btn"></button></div>
|
|
|
|
<div class="section-card">
|
|
<h3>Danger Zone</h3>
|
|
<p class="empty-hint">Delete all local data. Identity key preserved.</p>
|
|
<button id="reset-data-btn" class="btn btn-danger btn-full">Reset All Data</button>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Generic popover -->
|
|
<div id="popover-overlay" class="overlay hidden">
|
|
<div class="overlay-box overlay-wide">
|
|
<div class="overlay-header">
|
|
<h3 id="popover-title"></h3>
|
|
<button class="overlay-close" id="popover-close-btn">×</button>
|
|
</div>
|
|
<div class="overlay-body" id="popover-body"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="toast" class="toast hidden"></div>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|