feat: multi-network join, persistence, and switching in web UI
- Sidebar: "+" button next to Networks opens an inline join form;
in browser mode shows anchor URL field; saves to waste_saved_networks
- Onboarding: saved networks shown as quick-join chips above the join
form; auto-rejoin all saved networks on reconnect (not just one)
- Browser mode: networks persisted as [{name, anchor}] array in
localStorage (waste_saved_networks); legacy waste_last_network kept
for backward compat
- Daemon mode: daemon already tracks joined networks; web UI just needs
the "+" to send join_network for additional ones
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -72,8 +72,15 @@ export function Onboarding({ status }: Props) {
|
||||
if (adapterMode !== 'browser' || status !== 'connected') return
|
||||
const { network: n, netHash: nh } = parseInviteParams()
|
||||
if (n || nh) return // explicit invite — don't auto-join, show form
|
||||
const savedNetwork = localStorage.getItem('waste_last_network')
|
||||
if (savedNetwork) doJoin(savedNetwork, '')
|
||||
// Rejoin all saved networks.
|
||||
const saved: Array<{name: string; anchor: string}> = JSON.parse(localStorage.getItem('waste_saved_networks') ?? '[]')
|
||||
if (saved.length > 0) {
|
||||
saved.forEach(s => doJoin(s.name, ''))
|
||||
} else {
|
||||
// Legacy single-network fallback.
|
||||
const savedNetwork = localStorage.getItem('waste_last_network')
|
||||
if (savedNetwork) doJoin(savedNetwork, '')
|
||||
}
|
||||
}, [adapterMode, status]) // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
function joinNetwork(e: React.FormEvent) {
|
||||
@@ -87,8 +94,16 @@ export function Onboarding({ status }: Props) {
|
||||
if (adapterMode === 'browser') {
|
||||
localStorage.setItem('waste_anchor_url', anchorUrl)
|
||||
if (nick.trim()) localStorage.setItem('waste_nick', nick.trim())
|
||||
if (name) localStorage.setItem('waste_last_network', name)
|
||||
else localStorage.removeItem('waste_last_network')
|
||||
if (name) {
|
||||
// Persist to saved networks list.
|
||||
const saved: Array<{name: string; anchor: string}> = JSON.parse(localStorage.getItem('waste_saved_networks') ?? '[]')
|
||||
if (!saved.some(n => n.name === name)) {
|
||||
saved.push({ name, anchor: anchorUrl })
|
||||
localStorage.setItem('waste_saved_networks', JSON.stringify(saved))
|
||||
}
|
||||
// Keep legacy key for backward compat.
|
||||
localStorage.setItem('waste_last_network', name)
|
||||
}
|
||||
}
|
||||
|
||||
if (hash.length === 64 && !name) {
|
||||
@@ -121,6 +136,7 @@ export function Onboarding({ status }: Props) {
|
||||
}
|
||||
|
||||
const shortId = masterId ? masterId.slice(0, 16).replace(/(.{4})/g, '$1 ').trim() : null
|
||||
const savedNetworks: Array<{name: string; anchor: string}> = JSON.parse(localStorage.getItem('waste_saved_networks') ?? '[]')
|
||||
|
||||
// ── disconnected / connecting ────────────────────────────────────────────────
|
||||
if (status !== 'connected') {
|
||||
@@ -159,8 +175,21 @@ export function Onboarding({ status }: Props) {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{adapterMode === 'browser' && savedNetworks.length > 0 && (
|
||||
<div className="saved-networks">
|
||||
<span className="join-label">Saved networks</span>
|
||||
<div className="saved-network-chips">
|
||||
{savedNetworks.map(n => (
|
||||
<button key={n.name} className="network-chip" type="button" onClick={() => doJoin(n.name, '')}>
|
||||
{n.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={joinNetwork} className="join-form">
|
||||
<label className="join-label">Join a network</label>
|
||||
<label className="join-label">{savedNetworks.length > 0 ? 'Join another network' : 'Join a network'}</label>
|
||||
|
||||
{adapterMode === 'browser' && (
|
||||
<input
|
||||
|
||||
Reference in New Issue
Block a user