From bb53357bc86095a1e714414f5731492fd3ae359a Mon Sep 17 00:00:00 2001 From: Fredrik Johansson Date: Thu, 25 Jun 2026 13:28:40 +0200 Subject: [PATCH] redesign: 2-col layout, peers in sidebar, IRC-style messages, NAT dot MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Peers moved from right panel into sidebar below Rooms - Messages left-aligned IRC style: time · alias · text - Per-peer colored dot: green=direct/NAT-punched, amber=relay/connecting, red=failed - Hover title on peer row shows full ID, connection type, remote address, last seen - Removed right PeerList panel Co-Authored-By: Claude Sonnet 4.6 --- web/src/App.css | 71 ++++++++++++++++-------------- web/src/adapter/browser.ts | 39 +++++++++++++++- web/src/components/MessagePane.tsx | 17 ++++--- web/src/components/Sidebar.tsx | 66 +++++++++++++++++++++++++-- web/src/pages/Chat.tsx | 2 - web/src/store/index.ts | 38 +++++++++++++++- web/src/types.ts | 8 ++++ 7 files changed, 191 insertions(+), 50 deletions(-) diff --git a/web/src/App.css b/web/src/App.css index 5eb00d7..cc8f1a0 100644 --- a/web/src/App.css +++ b/web/src/App.css @@ -7,8 +7,7 @@ --accent: #7c6af7; --text: #e0e0e8; --muted: #6b6b80; - --sidebar-w: 200px; - --peerlist-w: 180px; + --sidebar-w: 220px; } html, body, #root { height: 100%; } @@ -16,7 +15,7 @@ body { background: var(--bg); color: var(--text); font-family: system-ui, sans-s button { cursor: pointer; background: var(--accent); color: #fff; border: none; border-radius: 4px; padding: 4px 10px; font-size: 13px; } button:disabled { opacity: 0.4; cursor: default; } -input { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px; font-size: 13px; outline: none; } +input { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px; font-size: 13px; outline: none; width: 100%; } input:focus { border-color: var(--accent); } /* ── onboarding ── */ @@ -33,52 +32,56 @@ input:focus { border-color: var(--accent); } .onboarding-code { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 8px 12px; font-size: 12px; font-family: monospace; color: var(--text); width: 100%; text-align: left; } .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-form input { width: 100%; } .join-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } 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); } .backup-panel { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .backup-form { display: flex; flex-direction: column; gap: 6px; } -.backup-form textarea { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px; font-size: 11px; resize: vertical; } +.backup-form textarea { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px; font-size: 11px; resize: vertical; width: 100%; } .export-result { display: flex; flex-direction: column; gap: 6px; } .export-result textarea { font-size: 10px; } .mono { font-family: monospace; } details summary { color: var(--muted); font-size: 12px; cursor: pointer; } /* ── chat layout ── */ -.chat-layout { display: grid; grid-template-columns: var(--sidebar-w) 1fr var(--peerlist-w); height: 100%; } +.chat-layout { display: grid; grid-template-columns: var(--sidebar-w) 1fr; height: 100%; } /* ── sidebar ── */ -.sidebar { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; padding: 12px 8px; overflow-y: auto; } -.sidebar-identity { padding: 8px; border-bottom: 1px solid var(--border); margin-bottom: 8px; } -.sidebar-identity .alias { display: block; font-weight: 600; } -.sidebar-identity .peer-id { display: block; color: var(--muted); font-size: 11px; font-family: monospace; } -.sidebar-section { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; } -.sidebar-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); padding: 4px 8px; } -.sidebar-item { background: none; color: var(--text); text-align: left; padding: 5px 8px; border-radius: 4px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.sidebar-item:hover { background: var(--border); } +.sidebar { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; } +.sidebar-identity { padding: 12px 12px 10px; border-bottom: 1px solid var(--border); } +.sidebar-identity .alias { display: block; font-weight: 600; font-size: 14px; } +.sidebar-identity .peer-id { display: block; color: var(--muted); font-size: 10px; font-family: monospace; margin-top: 2px; } +.sidebar-section { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid var(--border); } +.sidebar-section:last-child { border-bottom: none; flex: 1; } +.sidebar-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); padding: 4px 12px 2px; } +.sidebar-item { background: none; color: var(--text); text-align: left; padding: 5px 12px; border-radius: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } +.sidebar-item:hover { background: rgba(255,255,255,0.04); } .sidebar-item.active { background: var(--accent); color: #fff; } +.sidebar-empty { font-size: 11px; color: var(--muted); padding: 4px 12px; } + +/* peer rows in sidebar */ +.sidebar-peers { gap: 0; } +.peer-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } +.peer-row { display: flex; align-items: center; gap: 6px; padding: 4px 12px; } +.peer-row:hover { background: rgba(255,255,255,0.04); } +.peer-row:hover .peer-row-actions { opacity: 1; } +.peer-row-alias { font-size: 13px; font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.peer-row-id { font-size: 10px; color: var(--muted); font-family: monospace; } +.peer-row-actions { opacity: 0; display: flex; gap: 2px; transition: opacity 0.1s; } +.peer-action { background: none; color: var(--muted); font-size: 14px; padding: 1px 3px; line-height: 1; } +.peer-action:hover { color: var(--accent); background: none; } /* ── message pane ── */ -.message-pane { display: flex; flex-direction: column; height: 100%; } -.message-pane-header { padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 600; color: var(--muted); } -.messages { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; } -.message { display: flex; gap: 8px; align-items: baseline; } +.message-pane { display: flex; flex-direction: column; height: 100%; min-width: 0; } +.message-pane-header { padding: 10px 16px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; color: var(--text); } +.messages { flex: 1; overflow-y: auto; padding: 8px 0; display: flex; flex-direction: column; } +.message { display: flex; align-items: baseline; gap: 0; padding: 2px 16px; line-height: 1.5; } +.message:hover { background: rgba(255,255,255,0.02); } +.message-ts { color: var(--muted); font-size: 11px; min-width: 42px; flex-shrink: 0; } +.message-alias { font-weight: 600; font-size: 13px; min-width: 100px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 10px 0 8px; flex-shrink: 0; } .message.mine .message-alias { color: var(--accent); } -.message-alias { font-weight: 600; min-width: 80px; color: var(--muted); font-size: 12px; } -.message-text { flex: 1; word-break: break-word; } -.message-ts { color: var(--muted); font-size: 11px; white-space: nowrap; } -.compose { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); } -.compose input { flex: 1; } - -/* ── peer list ── */ -.peer-list { background: var(--surface); border-left: 1px solid var(--border); padding: 12px 8px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; } -.peer-entry { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border-radius: 4px; } -.peer-entry:hover { background: var(--border); } -.peer-entry-info .alias { display: block; font-weight: 600; font-size: 13px; } -.peer-entry-info .peer-id { display: block; color: var(--muted); font-size: 11px; font-family: monospace; } -.peer-entry-actions { display: flex; gap: 4px; } -.peer-entry-actions button { font-size: 11px; padding: 2px 6px; background: var(--border); color: var(--text); } -.peer-entry-actions button:hover { background: var(--accent); color: #fff; } -.empty { color: var(--muted); font-size: 12px; padding: 8px; } +.message-text { flex: 1; word-break: break-word; font-size: 14px; color: var(--text); } +.compose { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border); } +.compose input { flex: 1; width: auto; } +.compose button { flex-shrink: 0; } diff --git a/web/src/adapter/browser.ts b/web/src/adapter/browser.ts index 1e5e574..b0dabf6 100644 --- a/web/src/adapter/browser.ts +++ b/web/src/adapter/browser.ts @@ -257,8 +257,10 @@ class PeerConn { this._esk = kp.privateKey this._epk = kp.publicKey this.pc.ondatachannel = (ev) => this._wire(ev.channel) - this.pc.onconnectionstatechange = () => + this.pc.onconnectionstatechange = () => { this.on('status', { peer: this.peerId, state: this.pc.connectionState }) + if (this.pc.connectionState === 'connected') this.reportStats() + } } private _seal(obj: object, preferEph: boolean): [string, boolean] { @@ -386,6 +388,28 @@ class PeerConn { } } + async reportStats() { + try { + const stats = await this.pc.getStats() + let candidateType: string = 'unknown' + let remoteAddress = '' + stats.forEach((s) => { + if (s.type === 'candidate-pair' && (s as RTCIceCandidatePairStats).state === 'succeeded') { + const pair = s as RTCIceCandidatePairStats & { nominated?: boolean } + if (pair.nominated) { + stats.forEach((c) => { + if (c.type === 'remote-candidate' && c.id === (pair as unknown as Record)['remoteCandidateId']) { + candidateType = (c as unknown as Record)['candidateType'] || 'unknown' + remoteAddress = (c as unknown as Record)['address'] || '' + } + }) + } + } + }) + this.on('ice_stats', { peer: this.peerId, candidateType, remoteAddress }) + } catch { /* ignore */ } + } + sendChat(room: string, text: string) { this._dc({ type: 'chat', room, text, ts: Date.now() }) } @@ -608,6 +632,19 @@ export class BrowserAdapter { ts, }, }) + } else if (event === 'status') { + this.emit({ + type: 'peer_status', + peer_id: data['peer'] as unknown as import('../types').PeerID, + conn_state: data['state'] as import('../types').PeerConnState, + }) + } else if (event === 'ice_stats') { + this.emit({ + type: 'peer_status', + peer_id: data['peer'] as unknown as import('../types').PeerID, + candidate_type: data['candidateType'] as import('../types').CandidateType, + remote_address: data['remoteAddress'] as string, + }) } } diff --git a/web/src/components/MessagePane.tsx b/web/src/components/MessagePane.tsx index 63806c7..f2870bb 100644 --- a/web/src/components/MessagePane.tsx +++ b/web/src/components/MessagePane.tsx @@ -17,7 +17,6 @@ export function MessagePane() { if (!text || !activeNetworkId) return if (activeRoom.startsWith('dm:')) { - // Find peer ID from room name — stored as full ID in room key after "dm:" const toPeerID = activeRoom.slice(3) const peer = connectedPeers.find(p => p.id.startsWith(toPeerID) || p.id === toPeerID) if (peer) { @@ -34,20 +33,24 @@ export function MessagePane() { return connectedPeers.find(p => p.id === fromId)?.alias ?? fromId.slice(0, 8) } + const roomLabel = activeRoom.startsWith('dm:') + ? `@ ${activeRoom.slice(3, 11)}…` + : `# ${activeRoom}` + return (
-
- {activeRoom.startsWith('dm:') ? `@ ${activeRoom.slice(3, 11)}…` : `# ${activeRoom}`} -
+
{roomLabel}
{roomMessages.map((msg, i) => { const mine = msg.from === localPeer?.id + const alias = aliasFor(msg.from) + const time = new Date(msg.ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) return (
- {aliasFor(msg.from)} + {time} + {alias} {msg.text} - {new Date(msg.ts).toLocaleTimeString()}
) })} @@ -58,7 +61,7 @@ export function MessagePane() { setDraft(e.target.value)} - placeholder={`Message ${activeRoom}`} + placeholder={`Message ${roomLabel}`} autoComplete="off" /> diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx index 92e9e56..c958f4f 100644 --- a/web/src/components/Sidebar.tsx +++ b/web/src/components/Sidebar.tsx @@ -1,14 +1,36 @@ import { useWaste } from '../store' +import type { PeerStatus } from '../store' function makeYawCard(id: string, alias: string): string { const nick = encodeURIComponent(alias.trim().slice(0, 40)) return nick ? `yaw:${id}?n=${nick}` : `yaw:${id}` } -export function Sidebar() { - const { localPeer, masterId, masterAlias, networks, activeNetworkId, activeRoom, setActiveRoom, setActiveNetwork, messages } = useWaste() +function connDot(status: PeerStatus | undefined): { color: string; label: string } { + const ct = status?.candidateType + const cs = status?.connState + if (cs === 'failed' || cs === 'closed') return { color: '#e06060', label: 'failed' } + if (cs === 'connecting' || cs === 'new') return { color: '#c8a020', label: 'connecting…' } + if (ct === 'relay') return { color: '#c8a020', label: 'relayed (TURN)' } + if (ct === 'srflx') return { color: '#60c060', label: 'NAT punched' } + if (ct === 'host') return { color: '#60c060', label: 'direct (LAN)' } + if (cs === 'connected') return { color: '#60c060', label: 'connected' } + return { color: 'var(--muted)', label: 'unknown' } +} + +function formatTs(ts: number | undefined): string { + if (!ts) return '—' + return new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }) +} + +export function Sidebar() { + const { + localPeer, masterId, masterAlias, + networks, activeNetworkId, activeRoom, + connectedPeers, peerStatus, + setActiveRoom, setActiveNetwork, messages, send, + } = useWaste() - // Rooms = general + any DM threads that have messages const rooms = ['general'] Object.keys(messages).forEach(r => { if (r.startsWith('dm:') && !rooms.includes(r)) rooms.push(r) @@ -18,6 +40,14 @@ export function Sidebar() { const displayId = localPeer?.id ?? masterId ?? '' const card = displayId ? makeYawCard(displayId, displayAlias) : null + function openDM(peerId: string) { + setActiveRoom(`dm:${peerId}`) + } + + function requestFiles(peerId: string) { + send({ type: 'get_file_list', network_id: activeNetworkId ?? undefined, peer_id: peerId }) + } + return ( ) } diff --git a/web/src/pages/Chat.tsx b/web/src/pages/Chat.tsx index 3eea17e..b5e6d2e 100644 --- a/web/src/pages/Chat.tsx +++ b/web/src/pages/Chat.tsx @@ -1,13 +1,11 @@ import { Sidebar } from '../components/Sidebar' import { MessagePane } from '../components/MessagePane' -import { PeerList } from '../components/PeerList' export function Chat() { return (
-
) } diff --git a/web/src/store/index.ts b/web/src/store/index.ts index 9363a73..a73eb50 100644 --- a/web/src/store/index.ts +++ b/web/src/store/index.ts @@ -1,5 +1,12 @@ import { create } from 'zustand' -import type { PeerInfo, NetworkInfo, ChatMessage, FileEntry, IpcMessage } from '../types' +import type { PeerInfo, NetworkInfo, ChatMessage, FileEntry, IpcMessage, PeerConnState, CandidateType } from '../types' + +export interface PeerStatus { + connState?: PeerConnState + candidateType?: CandidateType + remoteAddress?: string + lastSeen?: number +} import { DaemonAdapter } from '../adapter/daemon' import { BrowserAdapter } from '../adapter/browser' @@ -30,6 +37,9 @@ interface WasteState { // file listings — keyed by peer id fileLists: Record + // per-peer connection status (browser mode) and last-seen timestamps + peerStatus: Record + // identity backup export result (cleared when consumed) exportedBackup: string | null @@ -57,6 +67,7 @@ export const useWaste = create((set, get) => ({ activeRoom: 'general', fileLists: {}, exportedBackup: null, + peerStatus: {}, connect(url: string) { const adapter = new DaemonAdapter(url) @@ -161,14 +172,37 @@ export const useWaste = create((set, get) => ({ if (msg.message) { const m = msg.message const room = m.room + const fromId = String(m.from) set(s => { const existing = s.messages[room] ?? [] if (m.mid && existing.some(e => e.mid === m.mid)) return s - return { messages: { ...s.messages, [room]: [...existing, m] } } + const prev = s.peerStatus[fromId] ?? {} + return { + messages: { ...s.messages, [room]: [...existing, m] }, + peerStatus: { ...s.peerStatus, [fromId]: { ...prev, lastSeen: m.ts } }, + } }) } break } + case 'peer_status': { + const pid = String(msg.peer_id) + set(s => { + const prev = s.peerStatus[pid] ?? {} + return { + peerStatus: { + ...s.peerStatus, + [pid]: { + ...prev, + ...(msg.conn_state ? { connState: msg.conn_state } : {}), + ...(msg.candidate_type ? { candidateType: msg.candidate_type } : {}), + ...(msg.remote_address !== undefined ? { remoteAddress: msg.remote_address } : {}), + }, + }, + } + }) + break + } case 'identity_exported': { if (msg.backup) set({ exportedBackup: msg.backup }) break diff --git a/web/src/types.ts b/web/src/types.ts index 0f9fda9..d7ab87c 100644 --- a/web/src/types.ts +++ b/web/src/types.ts @@ -40,6 +40,9 @@ export interface FileOffer { // ── IPC message types ───────────────────────────────────────────────────────── +export type CandidateType = 'host' | 'srflx' | 'relay' | 'unknown' +export type PeerConnState = 'new' | 'connecting' | 'connected' | 'disconnected' | 'failed' | 'closed' + export type IpcMsgType = // commands | 'send_message' @@ -67,6 +70,7 @@ export type IpcMsgType = | 'invite_generated' | 'identity_exported' | 'identity_imported' + | 'peer_status' | 'error' export interface IpcMessage { @@ -104,4 +108,8 @@ export interface IpcMessage { error_message?: string invite?: string files?: FileEntry[] + // peer_status + conn_state?: PeerConnState + candidate_type?: CandidateType + remote_address?: string }