feat(client): Add notification

tools/rktk-client/src/app/components/mod.rs

@@ -1,2 +1,3 @@
+pub mod notification;
 pub mod selector;
 pub mod topbar;

tools/rktk-client/src/app/components/notification.rs

@@ -0,0 +1,83 @@
+use std::time::Duration;
+
+use dioxus::prelude::*;
+
+#[derive(Default)]
+pub enum NotificationLevel {
+    #[default]
+    Info,
+    Success,
+    Warning,
+    Error,
+}
+
+impl NotificationLevel {
+    fn to_class(&self) -> &str {
+        match self {
+            NotificationLevel::Info => "alert-info",
+            NotificationLevel::Success => "alert-success",
+            NotificationLevel::Warning => "alert-warning",
+            NotificationLevel::Error => "alert-error",
+        }
+    }
+}
+
+#[derive(Default)]
+pub struct Notification {
+    pub title: Option<String>,
+    pub message: String,
+    pub level: NotificationLevel,
+    pub duration: Option<Duration>,
+}
+
+struct NotificationData {
+    id: usize,
+    record: Notification,
+}
+
+static NOTFICATIONS: GlobalSignal<Vec<NotificationData>> = GlobalSignal::new(|| vec![]);
+static NOTIFICATION_ID: GlobalSignal<usize> = GlobalSignal::new(|| 0);
+
+pub fn push_notification(notification: Notification) {
+    NOTIFICATION_ID.with_mut(|id| {
+        *id += 1;
+    });
+    let notification = NotificationData {
+        id: *NOTIFICATION_ID.read(),
+        record: notification,
+    };
+
+    spawn_forever(async move {
+        gloo_timers::future::TimeoutFuture::new(
+            notification
+                .record
+                .duration
+                .unwrap_or_else(|| Duration::from_secs(3))
+                .as_millis() as u32,
+        )
+        .await;
+        NOTFICATIONS.with_mut(|notifications| {
+            notifications.retain(|n| n.id != notification.id);
+        });
+    });
+
+    NOTFICATIONS.write().push(notification);
+}
+
+#[component]
+pub fn NotificationProvider() -> Element {
+    rsx! {
+        div { class: "fixed right-10 bottom-10 flex flex-col-reverse gap-2",
+            for notification in NOTFICATIONS.read().iter() {
+                div {
+                    class: "alert",
+                    class: "{notification.record.level.to_class()}",
+                    if let Some(title) = &notification.record.title {
+                        h3 { "{title}" }
+                    }
+                    "{notification.record.message}"
+                }
+            }
+        }
+    }
+}

tools/rktk-client/src/app/components/topbar.rs

@@ -1,6 +1,10 @@
 use dioxus::prelude::*;
 
-use crate::app::{disconnect::disconnect, state::CONN};
+use crate::app::{
+    components::notification::{push_notification, Notification, NotificationLevel},
+    disconnect::disconnect,
+    state::CONN,
+};
 
 #[component]
 pub fn Topbar() -> Element {
@@ -20,7 +24,11 @@ pub fn Topbar() -> Element {
                                         *CONN.write() = None;
                                     }
                                     Err(e) => {
-                                        dioxus::logger::tracing::info!("{:?}", e);
+                                        push_notification(Notification {
+                                            message: format!("Cannot disconnect from device: {:?}", e),
+                                            level: NotificationLevel::Error,
+                                            ..Default::default()
+                                        });
                                     }
                                 }
                             });

tools/rktk-client/src/app/mod.rs

@@ -15,6 +15,7 @@ pub fn App() -> Element {
         document::Link { rel: "icon", href: FAVICON }
         document::Link { rel: "stylesheet", href: TAILWIND_CSS }
         document::Title { "RKTK Client" }
+        components::notification::NotificationProvider {}
         div { class: "h-full bg-base flex flex-col",
             components::topbar::Topbar {}
             Home {}

tools/rktk-client/src/app/page/connect.rs

@@ -1,6 +1,9 @@
 use dioxus::prelude::*;
 
-use crate::app::state::CONN;
+use crate::app::{
+    components::notification::{push_notification, Notification, NotificationLevel},
+    state::CONN,
+};
 
 #[component]
 pub fn Connect() -> Element {
@@ -20,10 +23,19 @@ pub fn Connect() -> Element {
                         spawn(async move {
                             match conn::connect(hid.clone()).await {
                                 Ok(state) => {
+                                    push_notification(Notification {
+                                        message: format!("Connected to device: {}", state.keyboard.name),
+                                        level: NotificationLevel::Info,
+                                        ..Default::default()
+                                    });
                                     *CONN.write() = Some(state);
                                 }
                                 Err(e) => {
-                                    dioxus::logger::tracing::info!("{:?}", e);
+                                    push_notification(Notification {
+                                        message: format!("Cannot connect to device: {:?}", e),
+                                        level: NotificationLevel::Error,
+                                        ..Default::default()
+                                    });
                                 }
                             }
                         });
@@ -75,8 +87,6 @@ mod conn {
 
         let client = Client::new(&device);
 
-        web_sys::console::log_1(&device);
-
         let keyboard = client
             .client
             .lock()

tools/rktk-client/src/app/page/connected/config.rs

@@ -1,6 +1,8 @@
 use dioxus::prelude::*;
 use rktk_keymanager::state::config::StateConfig;
 
+use crate::app::components::notification::{push_notification, Notification, NotificationLevel};
+
 #[component]
 pub fn Config() -> Element {
     let mut config_res = use_resource(fetcher::get_config);
@@ -96,8 +98,17 @@ pub fn ConfigInner(initial_config: StateConfig, refetch: Callback<()>) -> Elemen
                     spawn(async move {
                         let result = fetcher::set_config(config).await;
                         if let Err(e) = result {
-                            dioxus::logger::tracing::error!("{:?}", e);
+                            push_notification(Notification {
+                                message: format!("Could not set config: {:?}", e),
+                                level: NotificationLevel::Error,
+                                ..Default::default()
+                            });
                         } else {
+                            push_notification(Notification {
+                                message: "Config updated".to_string(),
+                                level: NotificationLevel::Info,
+                                ..Default::default()
+                            });
                             refetch(());
                         }
                     });

tools/rktk-client/src/app/page/connected/remap.rs

@@ -5,7 +5,13 @@ use dioxus::prelude::*;
 use fetcher::KeymapData;
 use rktk_rrp::endpoints::{get_keyboard_info::KeyboardInfo, rktk_keymanager::keycode::KeyAction};
 
-use crate::app::{components::selector::key_action::KeyActionSelector, state::CONN};
+use crate::app::{
+    components::{
+        notification::{push_notification, Notification, NotificationLevel},
+        selector::key_action::KeyActionSelector,
+    },
+    state::CONN,
+};
 
 mod bar;
 mod fetcher;
@@ -47,11 +53,12 @@ pub fn Remap() -> Element {
             }
         }
         Some((Err(e), _)) => {
-            dioxus::logger::tracing::error!("{:?}", e);
             rsx! {
                 div {
                     h1 { "Error" }
                     p { "Failed to load keymap" }
+                    p { "{e:?}" }
+
                 }
             }
         }
@@ -72,8 +79,22 @@ pub fn RemapInner(keyboard: KeyboardInfo, keymap: KeymapData, refetch: Callback<
                 changes: keymap_changes.read().clone(),
                 apply: Callback::new(move |_| {
                     spawn(async move {
-                        if fetcher::set_keymap(&keymap_changes.read()).await.is_ok() {
-                            refetch(());
+                        match fetcher::set_keymap(&keymap_changes.read()).await {
+                            Ok(_) => {
+                                push_notification(Notification {
+                                    message: "Keymap updated".to_string(),
+                                    level: NotificationLevel::Info,
+                                    ..Default::default()
+                                });
+                                refetch(())
+                            }
+                            Err(e) => {
+                                push_notification(Notification {
+                                    message: format!("Cannot connect to device: {:?}", e),
+                                    level: NotificationLevel::Error,
+                                    ..Default::default()
+                                });
+                            }
                         }
                     });
                 }),