# VoiceChannelLayout Component

## Overview
`VoiceChannelLayout` orchestrates the Discord-inspired voice channel module:

- **ChannelSidebar** – wraps connection management (`ConnectionPanel`) and `StatusDisplay` inside a sidebar with channel metadata.
- **ChannelHeader** – displays channel title/topic and view state pills.
- **ParticipantsGrid** – renders a responsive grid of `Participant` tiles. Visual states:
  - `is_self` highlights the current user in accent color.
  - `is_speaking` glows in the accent-green palette.
  - `is_muted` dims the avatar and shows a mute badge.
- **ControlDock** – sticky bottom bar that embeds `CallControls` with the reworked button set.

## Props
```
VoiceChannelProps {
    channel_name: String,
    channel_topic: String,
    participants: Signal<Vec<Participant>>,
    peer_id: Signal<String>,
    remote_id: Signal<String>,
    connected: Signal<bool>,
    websocket: Signal<Option<WebSocket>>,
    responder_connection: Signal<Option<RtcPeerConnection>>,
    initiator_connection: Signal<Option<RtcPeerConnection>>,
    local_media: Signal<Option<MediaStream>>,
}
```

## Layout Notes
- Top-level grid maps to Discord style: sidebar (320px) + stage + control dock.
- Mobile breakpoint hides sidebar; channel content becomes full width.
- Partial data (mock participants) lives in `main.rs` until real presence sync exists.

## Next Steps
1. Replace mock participant Signal with data from signaling server (rooms/memberships).
2. Animate speaking indicator using audio levels from `MediaStreamTrack`.
3. Add quick actions (invite, copy link) to channel header action pills.