synpad 0.1.0

A full-featured Matrix chat client built with Dioxus
use dioxus::prelude::*;

use crate::components::modal::Modal;

/// Keyboard shortcuts help dialog.
#[component]
pub fn KeyboardShortcutsDialog(on_close: EventHandler<()>) -> Element {
    rsx! {
        Modal {
            title: "Keyboard Shortcuts".to_string(),
            on_close: move |_| on_close.call(()),

            div {
                class: "keyboard-shortcuts",

                // Navigation
                div {
                    class: "keyboard-shortcuts__section",
                    h4 { class: "keyboard-shortcuts__section-title", "Navigation" }
                    ShortcutRow { keys: "Ctrl+K", desc: "Open spotlight search" }
                    ShortcutRow { keys: "Alt+Up/Down", desc: "Previous/Next room" }
                    ShortcutRow { keys: "Ctrl+`", desc: "Toggle room list" }
                }

                // Messaging
                div {
                    class: "keyboard-shortcuts__section",
                    h4 { class: "keyboard-shortcuts__section-title", "Messaging" }
                    ShortcutRow { keys: "Enter", desc: "Send message" }
                    ShortcutRow { keys: "Shift+Enter", desc: "New line" }
                    ShortcutRow { keys: "Arrow Up", desc: "Edit last message (when composer empty)" }
                    ShortcutRow { keys: "Escape", desc: "Cancel edit / close dialog" }
                    ShortcutRow { keys: "Ctrl+Shift+E", desc: "Toggle emoji picker" }
                }

                // Formatting
                div {
                    class: "keyboard-shortcuts__section",
                    h4 { class: "keyboard-shortcuts__section-title", "Formatting (Rich Text)" }
                    ShortcutRow { keys: "Ctrl+B", desc: "Bold" }
                    ShortcutRow { keys: "Ctrl+I", desc: "Italic" }
                    ShortcutRow { keys: "Ctrl+U", desc: "Underline" }
                    ShortcutRow { keys: "Ctrl+Shift+X", desc: "Strikethrough" }
                    ShortcutRow { keys: "Ctrl+Shift+C", desc: "Code block" }
                }

                // Other
                div {
                    class: "keyboard-shortcuts__section",
                    h4 { class: "keyboard-shortcuts__section-title", "Other" }
                    ShortcutRow { keys: "Ctrl+/", desc: "Show keyboard shortcuts" }
                    ShortcutRow { keys: "Ctrl+.", desc: "Toggle right panel" }
                    ShortcutRow { keys: "Ctrl+F", desc: "Search in room" }
                }
            }
        }
    }
}

#[component]
fn ShortcutRow(keys: String, desc: String) -> Element {
    rsx! {
        div {
            class: "keyboard-shortcuts__row",
            kbd { class: "keyboard-shortcuts__keys", "{keys}" }
            span { class: "keyboard-shortcuts__desc", "{desc}" }
        }
    }
}