waste-go/web/src/components/PeerList.tsx

import { useWaste } from '../store'

export function PeerList() {
  const { connectedPeers, activeNetworkId, setActiveRoom, send } = useWaste()

  function openDM(peerId: string) {
    const room = `dm:${peerId}`
    setActiveRoom(room)
  }

  function requestFiles(peerId: string) {
    send({ type: 'get_file_list', network_id: activeNetworkId ?? undefined, peer_id: peerId })
  }

  return (
    <aside className="peer-list">
      <span className="sidebar-label">Peers ({connectedPeers.length})</span>
      {connectedPeers.map(p => (
        <div key={p.id} className="peer-entry">
          <div className="peer-entry-info">
            <span className="alias">{p.alias}</span>
            <span className="peer-id">{p.id.slice(0, 8)}…</span>
          </div>
          <div className="peer-entry-actions">
            <button onClick={() => openDM(p.id)} title="Direct message">DM</button>
            <button onClick={() => requestFiles(p.id)} title="Browse files">Files</button>
          </div>
        </div>
      ))}
      {connectedPeers.length === 0 && (
        <p className="empty">No peers connected yet</p>
      )}
    </aside>
  )
}