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

import { useEffect, useRef, useState } from 'react'
import { useWaste } from '../store'

export function MessagePane() {
  const { messages, historyCutoff, activeRoom, activeNetworkId, localPeer, connectedPeers, send } = useWaste()
  const [draft, setDraft] = useState('')
  const bottomRef = useRef<HTMLDivElement>(null)
  const roomMessages = messages[activeRoom] ?? []
  const cutoff = historyCutoff[activeRoom] ?? 0

  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
  }, [roomMessages.length])

  function submit(e: React.FormEvent) {
    e.preventDefault()
    const text = draft.trim()
    if (!text || !activeNetworkId) return

    if (activeRoom.startsWith('dm:')) {
      const toPeerID = activeRoom.slice(3)
      const peer = connectedPeers.find(p => p.id.startsWith(toPeerID) || p.id === toPeerID)
      if (peer) {
        send({ type: 'send_message', network_id: activeNetworkId, room: activeRoom, body: text, to: peer.id })
      }
    } else {
      send({ type: 'send_message', network_id: activeNetworkId, room: activeRoom, body: text })
    }
    setDraft('')
  }

  function aliasFor(fromId: string) {
    if (fromId === localPeer?.id) return localPeer.alias
    return connectedPeers.find(p => p.id === fromId)?.alias ?? fromId.slice(0, 8)
  }

  const roomLabel = activeRoom.startsWith('dm:')
    ? `@ ${activeRoom.slice(3, 11)}…`
    : `# ${activeRoom}`

  return (
    <main className="message-pane">
      <div className="message-pane-header">{roomLabel}</div>

      <div className="messages">
        {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', hour12: false })
          const showDivider = cutoff > 0 && i > 0 && roomMessages[i - 1].ts <= cutoff && msg.ts > cutoff
          return (
            <div key={msg.mid ?? i}>
              {showDivider && (
                <div className="history-divider">
                  <span>earlier messages</span>
                </div>
              )}
              <div className={`message ${mine ? 'mine' : ''}`}>
                <span className="message-ts">{time}</span>
                <span className="message-alias">{alias}</span>
                <span className="message-text">{msg.text}</span>
              </div>
            </div>
          )
        })}
        <div ref={bottomRef} />
      </div>

      <form className="compose" onSubmit={submit}>
        <input
          value={draft}
          onChange={e => setDraft(e.target.value)}
          placeholder={`Message ${roomLabel}`}
          autoComplete="off"
        />
        <button type="submit" disabled={!draft.trim()}>Send</button>
      </form>
    </main>
  )
}