synpad 0.1.0

A full-featured Matrix chat client built with Dioxus
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

use dioxus::prelude::*;

use crate::pages::room_directory::RoomDirectory;
use crate::room_list::create_room_dialog::CreateRoomDialog;
use crate::room_list::join_room_dialog::JoinRoomDialog;
use crate::state::app_state::AppState;

/// Room list header with search bar and user menu.
#[component]
pub fn RoomListHeader() -> Element {
    let mut state = use_context::<Signal<AppState>>();
    let mut show_create_room = use_signal(|| false);
    let mut show_join_room = use_signal(|| false);
    let mut show_directory = use_signal(|| false);
    let search_query = state.read().room_search_query.clone();

    let on_search = move |evt: Event<FormData>| {
        let query = evt.value();
        state.write().room_search_query = query;
        state.write().update_sorted_rooms();
    };

    let user_name = state
        .read()
        .user_profile
        .as_ref()
        .and_then(|p| p.display_name.clone())
        .unwrap_or_else(|| "User".to_string());

    rsx! {
        div {
            class: "room-list-header",

            // User info
            div {
                class: "room-list-header__user",
                div {
                    class: "room-list-header__avatar",
                    "{user_name.chars().next().unwrap_or('?')}"
                }
                span {
                    class: "room-list-header__name",
                    "{user_name}"
                }
                button {
                    class: "room-list-header__action-btn",
                    title: "Browse public rooms",
                    onclick: move |_| show_directory.set(true),
                    "🌐"
                }
                button {
                    class: "room-list-header__action-btn",
                    title: "Join room by ID",
                    onclick: move |_| show_join_room.set(true),
                    "#"
                }
                button {
                    class: "room-list-header__action-btn",
                    title: "Create room",
                    onclick: move |_| show_create_room.set(true),
                    "+"
                }
            }

            // Search input
            div {
                class: "room-list-header__search",
                input {
                    r#type: "text",
                    placeholder: "Search rooms...",
                    value: "{search_query}",
                    oninput: on_search,
                    class: "room-list-header__search-input",
                }
            }
        }

        // Dialogs
        if *show_create_room.read() {
            CreateRoomDialog {
                on_close: move |_| show_create_room.set(false),
            }
        }
        if *show_join_room.read() {
            JoinRoomDialog {
                on_close: move |_| show_join_room.set(false),
            }
        }
        if *show_directory.read() {
            crate::components::modal::Modal {
                title: "Room Directory".to_string(),
                on_close: move |_| show_directory.set(false),
                wide: true,
                RoomDirectory {}
            }
        }
    }
}