/// GlobalTabBar — narrow icon rail on the left edge.
///
/// Mirrors the Svelte app's GlobalTabBar.svelte: a 2.75rem-wide column
/// with a settings gear icon at the bottom.

use dioxus::prelude::*;

#[component]
pub fn Sidebar(
    settings_open: Signal<bool>,
) -> Element {
    let toggle_settings = move |_| {
        let current = *settings_open.read();
        settings_open.set(!current);
    };

    rsx! {
        div { class: "sidebar-rail",
            // Top spacer — in the real app, this holds group/workspace icons
            div { class: "sidebar-spacer" }

            // Settings gear — bottom of the rail
            div {
                class: if *settings_open.read() { "sidebar-icon active" } else { "sidebar-icon" },
                onclick: toggle_settings,
                title: "Settings (Ctrl+,)",
                "\u{2699}" // gear symbol
            }
        }
    }
}
