chat_ui_components/components/

chat_layout.rs

use dioxus::prelude::*;
use chat_core::history::types::{ChatMessage, ConnectionStats};

use super::{MessageItem, PeerList, StatsPanel};

#[component]
pub fn ChatLayout(
    room_name: String,
    nickname: String,
    messages: Vec<ChatMessage>,
    is_online: bool,
    stats: Option<Box<ConnectionStats>>,
    system_messages: Vec<String>,
    error_messages: Vec<String>,
    show_stats: bool,
    sidebar_open: bool,
    sidebar_collapsed: bool,
    on_send_message: EventHandler<String>,
    on_set_nickname: EventHandler<String>,
    on_dial_peer: EventHandler<String>,
    on_leave_room: EventHandler<()>,
    on_toggle_stats: EventHandler<()>,
    on_toggle_sidebar: EventHandler<()>,
    on_close_sidebar: EventHandler<()>,
) -> Element {
    let mut message_input = use_signal(|| "".to_string());
    let mut nickname_input = use_signal(|| nickname.clone());
    let mut should_auto_scroll = use_signal(|| true);
    let mut last_scrolled_id = use_signal(|| String::new());
    let stats_for_effect = stats.clone();

    let mut send = move || {
        let content = message_input.read().trim().to_string();
        if !content.is_empty() {
            on_send_message.call(content);
            message_input.set("".to_string());
            should_auto_scroll.set(true);
        }
    };

    use_effect(use_reactive((&messages,), move |(messages,)| {
        if messages.is_empty() {
            return;
        }
        let last_id = messages.last().map(|m| m.id.clone()).unwrap_or_default();
        if last_id == last_scrolled_id() {
            return;
        }
        let local_peer_id = stats_for_effect.as_ref().map(|s| s.peer_id.clone()).unwrap_or_default();
        let is_local = messages.last().map(|m| m.peer_id == local_peer_id).unwrap_or(false);
        if is_local || should_auto_scroll() {
            last_scrolled_id.set(last_id);
            spawn(async move {
                let _ = document::eval(r#"
                    let el = document.getElementById("messages");
                    if (el) el.scrollTop = el.scrollHeight;
                "#).await;
            });
        }
    }));

    let status_text = if is_online { "● online" } else { "● offline" };
    let status_class = if is_online { "status-badge online" } else { "status-badge offline" };

    let peer_count = stats.as_ref().map(|s| s.connected_peers.len()).unwrap_or(0);
    let conn_count = stats.as_ref().map(|s| s.direct_peers + s.bootstrap_connections).unwrap_or(0);

    let sidebar_class = {
        let mut c = "sidebar".to_string();
        if sidebar_open { c.push_str(" open"); }
        if sidebar_collapsed { c.push_str(" collapsed"); }
        c
    };

    rsx! {
        div {
            id: "app",

            // Main content
            div {
                class: "main-content",

                // Header
                div {
                    class: "chat-header",
                    div {
                        class: "logo",
                        span { class: "logo-icon", "🔥" }
                        span { class: "logo-text", "P2Pandemonium" }
                    }
                    div {
                        class: "header-stats",
                        div {
                            class: "stat-badge",
                            "Room: {room_name}"
                        }
                        div {
                            class: "stat-badge",
                            "Peers: {peer_count} ({conn_count} conns)"
                        }
                        div {
                            class: status_class,
                            "{status_text}"
                        }
                        button {
                            class: "sidebar-toggle",
                            onclick: move |_| on_toggle_sidebar.call(()),
                            "👥"
                        }
                    }
                }

                // Stats panel (overlay)
                if show_stats {
                    StatsPanel {
                        stats: stats.clone(),
                        local_peer_id: stats.as_ref().map(|s| s.peer_id.clone()).unwrap_or_default(),
                        on_close: move || on_toggle_stats.call(()),
                        on_dial_peer,
                    }
                }

                // Messages area
                div {
                    class: "chat-container",
                    div {
                        class: "messages-list",
                        id: "messages",
                        onscroll: move |evt| {
                            let data = evt.data();
                            let scroll_top = data.scroll_top();
                            let client_height = data.client_height();
                            let scroll_height = data.scroll_height();
                            let at_bottom = (scroll_top + client_height as f64) >= (scroll_height as f64 - 50.0);
                            should_auto_scroll.set(at_bottom);
                        },

                        // System messages
                        for (idx, msg) in system_messages.iter().enumerate() {
                            div {
                                key: "sys-{idx}",
                                class: "system-message",
                                "{msg}"
                            }
                        }

                        // Error messages
                        for (idx, msg) in error_messages.iter().enumerate() {
                            div {
                                key: "err-{idx}",
                                class: "error-message",
                                "{msg}"
                            }
                        }

                        // Chat messages
                        for msg in messages {
                            MessageItem {
                                key: "{msg.id}",
                                msg: msg.clone(),
                                is_local: msg.peer_id == stats.as_ref().map(|s| s.peer_id.clone()).unwrap_or_default(),
                            }
                        }
                    }
                }

                // Footer / Input area
                div {
                    class: "chat-footer",

                    // Input row (nickname + stats button)
                    div {
                        class: "input-row",
                        div {
                            class: "nickname-section",
                            label { "Nick:" }
                            input {
                                id: "nickname",
                                value: "{nickname_input}",
                                oninput: move |evt| nickname_input.set(evt.value().clone()),
                                onchange: move |_| {
                                    let nick = nickname_input.read().trim().to_string();
                                    if !nick.is_empty() {
                                        on_set_nickname.call(nick);
                                    }
                                }
                            }
                        }
                        button {
                            class: "stats-btn",
                            onclick: move |_| on_toggle_stats.call(()),
                            "📊 Stats"
                        }
                    }

                    // Message input row
                    div {
                        class: "message-input-section",
                        input {
                            id: "message-input",
                            value: "{message_input}",
                            placeholder: "Type a message...",
                            disabled: !is_online,
                            oninput: move |evt| message_input.set(evt.value().clone()),
                            onkeypress: move |evt| {
                                if evt.key().to_string() == "Enter" {
                                    send();
                                }
                            }
                        }
                        button {
                            id: "send-btn",
                            class: "btn-primary",
                            disabled: !is_online || message_input.read().trim().is_empty(),
                            onclick: move |_| send(),
                            "Send"
                        }
                    }
                }
            }

            // Sidebar (right)
            div {
                class: "{sidebar_class}",
                div {
                    class: "sidebar-header",
                    h3 { "Peers" }
                    button {
                        class: "close-btn",
                        onclick: move |_| on_close_sidebar.call(()),
                        "×"
                    }
                }
                div {
                    class: "peer-list",
                    PeerList { stats: stats.clone(), sidebar_open: sidebar_open }

                    // Leave room button
                    div {
                        style: "padding: 1rem; border-top: 1px solid var(--border-color); margin-top: auto;",
                        button {
                            class: "leave-btn",
                            onclick: move |_| on_leave_room.call(()),
                            "Leave Room"
                        }
                    }
                }
            }

            // Mobile backdrop
            if sidebar_open {
                div {
                    class: "sidebar-backdrop",
                    onclick: move |_| on_close_sidebar.call(()),
                }
            }
        }
    }
}