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

use dioxus::prelude::*;

use crate::state::app_state::AppState;

/// Lab feature flag definition.
struct LabFlag {
    id: &'static str,
    label: &'static str,
    description: &'static str,
}

static LAB_FLAGS: &[LabFlag] = &[
    LabFlag { id: "threads", label: "Threaded Messaging", description: "Show thread UI for message replies" },
    LabFlag { id: "polls", label: "Polls", description: "Create and vote in polls" },
    LabFlag { id: "location_sharing", label: "Location Sharing", description: "Share your location in rooms" },
    LabFlag { id: "voice_messages", label: "Voice Messages", description: "Record and send voice messages" },
    LabFlag { id: "video_rooms", label: "Video Rooms", description: "Persistent video call rooms" },
    LabFlag { id: "rich_text_editor", label: "Rich Text Editor", description: "WYSIWYG message composer" },
    LabFlag { id: "stickers", label: "Sticker Picker", description: "Send stickers in rooms" },
    LabFlag { id: "jump_to_date", label: "Jump to Date", description: "Navigate to a specific date in timeline" },
    LabFlag { id: "spoilers", label: "Spoiler Messages", description: "Send and view spoiler text" },
    LabFlag { id: "latex", label: "LaTeX Rendering", description: "Render math formulas in messages" },
    LabFlag { id: "breadcrumbs", label: "Room Breadcrumbs", description: "Show recently visited rooms bar" },
    LabFlag { id: "developer_mode", label: "Developer Mode", description: "Show developer tools and event source" },
    LabFlag { id: "message_effects", label: "Message Effects", description: "Visual effects like confetti and fireworks" },
    LabFlag { id: "notification_panel", label: "Notification Panel", description: "Per-room notification settings in right panel" },
    LabFlag { id: "key_backup_reminder", label: "Key Backup Reminder", description: "Remind to set up key backup" },
    LabFlag { id: "dehydrated_devices", label: "Dehydrated Devices", description: "Support for offline E2EE devices" },
    LabFlag { id: "knock_rooms", label: "Knock Rooms", description: "Ask to join rooms that support knocking" },
    LabFlag { id: "space_hierarchy", label: "Space Hierarchy", description: "Browse full space room hierarchy" },
    LabFlag { id: "voice_broadcast", label: "Voice Broadcast", description: "Broadcast live audio to a room" },
];

/// Labs/experimental features settings panel.
#[component]
pub fn LabsSettings() -> Element {
    let mut state = use_context::<Signal<AppState>>();

    rsx! {
        div {
            class: "labs-settings",

            h3 { "Labs" }
            p {
                class: "labs-settings__description",
                "Experimental features that may be unstable. Enable at your own risk."
            }

            div {
                class: "labs-settings__list",
                for flag in LAB_FLAGS.iter() {
                    {
                        let id = flag.id.to_string();
                        let label = flag.label;
                        let desc = flag.description;
                        let is_enabled = state.read().labs_flags.get(&id).copied().unwrap_or(false);
                        let id_for_toggle = id.clone();
                        rsx! {
                            div {
                                class: "labs-settings__item",
                                div {
                                    class: "labs-settings__item-info",
                                    span { class: "labs-settings__item-label", "{label}" }
                                    span { class: "labs-settings__item-desc", "{desc}" }
                                }
                                label {
                                    class: "labs-settings__toggle",
                                    input {
                                        r#type: "checkbox",
                                        checked: is_enabled,
                                        oninput: move |evt: Event<FormData>| {
                                            let val = evt.value() == "true";
                                            state.write().labs_flags.insert(id_for_toggle.clone(), val);
                                        },
                                    }
                                    span { class: "labs-settings__toggle-slider" }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}