Sologretto/itsgoin
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

v0.4.4: UI overhaul — sticky header, mobile nav, profiles/redundancy lightboxes

Browse source 
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>
This commit is contained in:
Scott Reimers 2026-03-23 00:56:27 -04:00
parent 409e44762a
commit 926e0c1509
9 changed files with 220 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

105
frontend/index.html
View file

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>ItsGoin</title>
<link rel="stylesheet" href="style.css">
</head>
@ -26,9 +26,6 @@
<span id="net-labels"></span>
</div>
</div>
</header>
<main>
<nav id="tabs">
<button class="tab" data-tab="feed"><span class="tab-icon">&#x1f4f0;</span><span class="tab-label">Feed</span></button>
<button class="tab" data-tab="myposts"><span class="tab-icon">&#x270d;</span><span class="tab-label">My Posts</span></button>
@ -36,7 +33,9 @@
<button class="tab" data-tab="messages"><span class="tab-icon">&#x1f4ac;</span><span class="tab-label">Messages</span></button>
<button class="tab" data-tab="settings"><span class="tab-icon">&#x2699;</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">
@ -60,13 +59,25 @@
<!-- 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">
<button id="attach-btn" class="btn btn-ghost btn-sm" title="Attach images or videos">Attach</button>
<span class="hint">Ctrl+Enter to post</span>
<div id="visibility-row">
<select id="visibility-select">
@ -95,17 +106,6 @@
</div>
</div>
<div class="section-card">
<button id="circles-toggle" class="btn btn-ghost btn-sm section-toggle">Manage Circles</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="my-posts-list"></div>
</section>
@ -172,58 +172,26 @@
<!-- Settings tab -->
<section id="view-settings" class="view">
<div class="section-card">
<h3>Profile</h3>
<div id="profile-editor">
<label for="profile-name">Display Name</label>
<input id="profile-name" type="text" placeholder="Your name" maxlength="50" />
<label for="profile-bio">Bio</label>
<textarea id="profile-bio" placeholder="Tell people about yourself..." maxlength="200" rows="3"></textarea>
<label class="checkbox-label" style="margin:0.5rem 0">
<input type="checkbox" id="public-visible-check" checked />
Show my profile to non-circle peers
</label>
<button id="save-profile-btn" class="btn btn-primary">Save</button>
</div>
<!-- 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>
<div class="section-card">
<button id="circle-profiles-toggle" class="btn btn-ghost btn-sm section-toggle">Circle Profiles</button>
<div id="circle-profiles-body" class="hidden">
<p class="empty-hint" style="margin-bottom:0.5rem">Set a different name/bio for each circle you manage.</p>
<div id="circle-profiles-list"></div>
</div>
</div>
<div class="section-card">
<div id="node-info" style="display:none">
<span id="node-id"></span>
</div>
</div>
<div class="section-card">
<button id="anchors-toggle" class="btn btn-ghost btn-sm section-toggle">Stored Anchors</button>
<div id="anchors-body" class="hidden">
<p class="empty-hint" style="margin-bottom:0.5rem">Anchors your node has discovered and will reconnect to.</p>
<div id="known-anchors-list"></div>
<h4 class="subsection-title" style="margin-top:0.75rem">Profile Anchors</h4>
<p class="empty-hint" style="margin-bottom:0.5rem">Anchors listed in your profile so peers can find you.</p>
<div id="anchors-list"></div>
<div id="anchor-add-row" class="input-row" style="margin-top:0.5rem">
<select id="anchor-add-select">
<option value="">(no anchor peers available)</option>
</select>
<button id="anchor-add-btn" class="btn btn-primary btn-sm">Add</button>
</div>
</div>
</div>
<div class="section-card">
<button id="diagnostics-btn" class="btn btn-ghost btn-full">Network Diagnostics</button>
<!-- 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">
@ -252,16 +220,11 @@
</select>
</div>
<div class="section-card">
<h3>Redundancy</h3>
<div id="redundancy-panel">
<p class="empty-hint">Loading...</p>
</div>
</div>
<!-- Redundancy moved to My Posts lightbox -->
<div class="hidden"><div id="redundancy-panel"></div></div>
<div class="section-card">
<button id="sync-btn" class="btn btn-primary btn-full">Sync Now</button>
</div>
<!-- Sync moved to diagnostics popover -->
<div class="hidden"><button id="sync-btn"></button></div>
<div class="section-card">
<h3>Danger Zone</h3>