diff --git a/web/src/App.css b/web/src/App.css index 8d48852..97ae738 100644 --- a/web/src/App.css +++ b/web/src/App.css @@ -33,6 +33,10 @@ input:focus { border-color: var(--accent); } .onboarding-section { width: 100%; border-top: 1px solid var(--border); padding-top: 12px; } .join-form { display: flex; flex-direction: column; gap: 8px; width: 100%; } .join-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } +.saved-networks { display: flex; flex-direction: column; gap: 6px; width: 100%; } +.saved-network-chips { display: flex; flex-wrap: wrap; gap: 6px; } +.network-chip { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 20px; padding: 4px 14px; font-size: 13px; } +.network-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--surface); } button.primary { background: var(--accent); width: 100%; padding: 8px; font-size: 14px; } .toggle-link { background: none; color: var(--muted); font-size: 12px; padding: 4px 0; text-align: left; } .toggle-link:hover { color: var(--text); } diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx index 9ca6982..583d4f9 100644 --- a/web/src/components/Sidebar.tsx +++ b/web/src/components/Sidebar.tsx @@ -32,10 +32,13 @@ export function Sidebar() { networks, activeNetworkId, activeRoom, connectedPeers, peerStatus, setActiveRoom, setActiveNetwork, messages, browseFiles, sendFileTo, adapterMode, - customRooms, createRoom, logout, + customRooms, createRoom, logout, send, } = useWaste() const [addingRoom, setAddingRoom] = useState(false) const [newRoomName, setNewRoomName] = useState('') + const [addingNetwork, setAddingNetwork] = useState(false) + const [newNetName, setNewNetName] = useState('') + const [newNetAnchor, setNewNetAnchor] = useState('') const netCustomRooms = activeNetworkId ? (customRooms[activeNetworkId] ?? []) : [] const rooms = ['general', ...netCustomRooms] @@ -50,6 +53,25 @@ export function Sidebar() { setAddingRoom(false) } + function submitNewNetwork(e: React.FormEvent) { + e.preventDefault() + const name = newNetName.trim() + if (!name) return + if (adapterMode === 'browser') { + // Persist to saved networks list in localStorage. + const anchor = newNetAnchor.trim() || localStorage.getItem('waste_anchor_url') || '' + const saved: Array<{name: string; anchor: string}> = JSON.parse(localStorage.getItem('waste_saved_networks') ?? '[]') + if (!saved.some(n => n.name === name && n.anchor === anchor)) { + saved.push({ name, anchor }) + localStorage.setItem('waste_saved_networks', JSON.stringify(saved)) + } + } + send({ type: 'join_network', network_name: name }) + setNewNetName('') + setNewNetAnchor('') + setAddingNetwork(false) + } + const displayAlias = localPeer?.alias ?? masterAlias ?? '' const displayId = localPeer?.id ?? masterId ?? '' const card = displayId ? makeYawCard(displayId, displayAlias) : null @@ -95,9 +117,12 @@ export function Sidebar() {