redesign: 2-col layout, peers in sidebar, IRC-style messages, NAT dot

- 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 <noreply@anthropic.com>

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 (
     <nav className="sidebar">
       <div
@@ -28,7 +58,6 @@ export function Sidebar() {
       >
         <span className="alias">{displayAlias || '…'}</span>
         <span className="peer-id">{displayId.slice(0, 16).replace(/(.{4})/g, '$1 ').trim()}</span>
-        {card && <span className="peer-id" style={{ fontSize: '9px', opacity: 0.5 }}>click to copy card</span>}
       </div>
 
       <div className="sidebar-section">
@@ -56,6 +85,35 @@ export function Sidebar() {
           </button>
         ))}
       </div>
+
+      <div className="sidebar-section sidebar-peers">
+        <span className="sidebar-label">Peers {connectedPeers.length > 0 && `· ${connectedPeers.length}`}</span>
+        {connectedPeers.length === 0 && (
+          <span className="sidebar-empty">no peers yet</span>
+        )}
+        {connectedPeers.map(p => {
+          const st = peerStatus[p.id]
+          const dot = connDot(st)
+          const tooltip = [
+            p.alias,
+            p.id,
+            `connection: ${dot.label}`,
+            st?.remoteAddress ? `remote: ${st.remoteAddress}` : null,
+            st?.lastSeen ? `last seen: ${formatTs(st.lastSeen)}` : null,
+          ].filter(Boolean).join('\n')
+          return (
+            <div key={p.id} className="peer-row" title={tooltip}>
+              <span className="peer-dot" style={{ background: dot.color }} />
+              <span className="peer-row-alias">{p.alias}</span>
+              <span className="peer-row-id">{p.id.slice(0, 8)}</span>
+              <span className="peer-row-actions">
+                <button className="peer-action" onClick={() => openDM(p.id)} title="DM">↩</button>
+                <button className="peer-action" onClick={() => requestFiles(p.id)} title="Files">⊞</button>
+              </span>
+            </div>
+          )
+        })}
+      </div>
     </nav>
   )
 }