Fixes multiple chat bugs and adds a few quality of life improvements

apis/.rust-analyzer

@@ -1,5 +1,7 @@
 {
-  "rust-analyzer.diagnostics.disabled": [ "inactive-code" ],
+  "rust-analyzer.diagnostics.disabled": [
+    "inactive-code"
+  ],
   "rust-analyzer.cargo.features": "all",
-  "rust-analyzer.procMacro.enable": true,
-}
+  "rust-analyzer.procMacro.enable": true
+}

apis/src/components/molecules/hamburger.rs

@@ -12,13 +12,20 @@ pub fn Hamburger<T: IntoView>(
     content: T,
 ) -> impl IntoView {
     let target = create_node_ref::<Div>();
-    let _ = on_click_outside(target, move |_| hamburger_show.update(|b| *b = false));
+    create_effect(move |_| {
+        if hamburger_show() {
+            let _ = on_click_outside(target, move |_| {
+                hamburger_show.update(|b| *b = false);
+            });
+        }
+    });
+
     let children = store_value(children);
 
     view! {
         <div node_ref=target class=format!("inline-block {extend_tw_classes}")>
             <button
-                on:click=move |_| { hamburger_show.update(|b| *b = !*b) }
+                on:click=move |_| hamburger_show.update(|b| *b = !*b)
 
                 class=button_style
             >

apis/src/components/organisms/chat.rs

@@ -2,24 +2,26 @@ use crate::providers::{
     auth_context::AuthContext, chat::Chat, game_state::GameStateSignal,
     navigation_controller::NavigationControllerSignal,
 };
+use chrono::Local;
 use leptos::*;
 use leptos_use::{use_mutation_observer_with_options, UseMutationObserverOptions};
 use shared_types::chat_message::{ChatDestination, ChatMessage, SimpleDestination};
 use uuid::Uuid;
 
 #[component]
 pub fn Message(message: ChatMessage) -> impl IntoView {
-    let formatted_timestamp = message
+    let user_local_time = message
         .timestamp
         .unwrap()
-        .format("%Y-%m-%d %H:%M")
+        .with_timezone(&Local)
+        .format(" %d/%m/%Y %H:%M")
         .to_string();
+    let turn = message.turn.map(|turn| (format!(" on turn {turn}:")));
+
     view! {
-        <div class="flex items-center mb-1 w-full">
-            <div class="w-full px-2">
-                <div class="text-sm select-text">{message.username} at {formatted_timestamp}</div>
-                <div class="text-sm select-text max-w-fit break-words">{message.message}</div>
-            </div>
+        <div class="flex flex-col items-start mb-1 w-full">
+            <div class="flex px-2 gap-1"><div class="font-bold">{message.username}</div>{user_local_time}{turn}</div>
+            <div class="px-2 max-w-fit break-words">{message.message}</div>
         </div>
     }
 }
@@ -28,25 +30,31 @@ pub fn Message(message: ChatMessage) -> impl IntoView {
 pub fn ChatInput(destination: ChatDestination) -> impl IntoView {
     let chat = expect_context::<Chat>();
     let destination = store_value(destination);
-    let message_signal = RwSignal::new(String::new());
-    let input = move |evt| message_signal.update(|v| *v = event_target_value(&evt));
+    let input = move |evt| chat.typed_message.update(|v| *v = event_target_value(&evt));
     let send = move || {
-        let message = message_signal();
-        if !message.is_empty() {
-            chat.send(&message, destination());
-            message_signal.set(String::new());
-        };
+        batch(move || {
+            let message = chat.typed_message.get();
+            if !message.is_empty() {
+                chat.send(&message, destination());
+                chat.typed_message.set(String::new());
+            };
+        })
     };
     let placeholder = move || match destination() {
         ChatDestination::GamePlayers(_, _, _) => "Chat with opponent",
         ChatDestination::GameSpectators(_, _, _) => "Chat with spectators",
         _ => "Chat",
     };
+    let my_input = NodeRef::<html::Input>::new();
+    create_effect(move |_| {
+        let _ = my_input.get_untracked().map(|el| el.focus());
+    });
     view! {
         <input
+            ref=my_input
             type="text"
             class="bg-odd-light dark:bg-odd-dark rounded-lg px-4 py-2 focus:outline-none w-full resize-none h-auto box-border shrink-0"
-            prop:value=message_signal
+            prop:value=chat.typed_message
             attr:placeholder=placeholder
             on:input=input
             on:keydown=move |evt| {
@@ -147,8 +155,8 @@ pub fn ChatWindow(
             .unwrap_or_default(),
     };
     view! {
-        <div class="h-full flex flex-col">
-            <div ref=div class="overflow-y-auto h-full">
+        <div class="h-full flex flex-col max-w-full">
+            <div ref=div class="overflow-y-auto h-full w-full">
                 <For each=messages key=|message| message.timestamp let:message>
                     <Message message=message/>
                 </For>

apis/src/components/organisms/dropdowns.rs

@@ -182,7 +182,7 @@ pub fn ChatDropdown(destination: SimpleDestination) -> impl IntoView {
     let button_color = move || {
         if hamburger_show() {
             "bg-button-dawn dark:bg-button-twilight"
-        } else if (chat.games_public_new_messages)() || (chat.games_private_new_messages)() {
+        } else if chat.has_messages() {
             "bg-ladybug-red"
         } else {
             "bg-button-dawn dark:bg-button-twilight"
@@ -191,11 +191,9 @@ pub fn ChatDropdown(destination: SimpleDestination) -> impl IntoView {
 
     create_effect(move |_| {
         hamburger_show();
-        batch(move || {
-            (chat.games_public_new_messages).set(false);
-            (chat.games_private_new_messages).set(false);
-        })
+        chat.seen_messages()
     });
+
     view! {
         <Hamburger
             hamburger_show=hamburger_show

apis/src/components/organisms/side_board.rs

@@ -12,6 +12,7 @@ use crate::{
 };
 use hive_lib::color::Color;
 use leptos::*;
+use leptos_router::use_location;
 use shared_types::chat_message::SimpleDestination;
 
 #[derive(Clone, PartialEq)]
@@ -35,7 +36,12 @@ pub fn SideboardTabs(
         Some(Ok(Some(user))) => Some(user),
         _ => None,
     };
-
+    // On navigation switch to reserve
+    create_effect(move |_| {
+        let location = use_location();
+        let _ = (location.pathname)();
+        tab_view.set(SideboardTabView::Reserve);
+    });
     let show_buttons = move || {
         user().map_or(false, |user| {
             let game_state = game_state_signal.signal.get();
@@ -54,7 +60,7 @@ pub fn SideboardTabs(
         let chat_view = SideboardTabView::Chat;
         if tab_view() == chat_view {
             button_color(chat_view)
-        } else if (chat.games_private_new_messages)() || (chat.games_public_new_messages)() {
+        } else if chat.has_messages() {
             "bg-ladybug-red"
         } else {
             "bg-inherit"
@@ -93,8 +99,7 @@ pub fn SideboardTabs(
                         batch(move || {
                             game_state_signal.view_game();
                             if tab_view() == SideboardTabView::Chat {
-                                (chat.games_private_new_messages).set(false);
-                                (chat.games_public_new_messages).set(false);
+                                chat.seen_messages();
                             }
                             tab_view.set(SideboardTabView::Reserve);
                         });
@@ -116,8 +121,7 @@ pub fn SideboardTabs(
                         batch(move || {
                             game_state_signal.view_history();
                             if tab_view() == SideboardTabView::Chat {
-                                (chat.games_private_new_messages).set(false);
-                                (chat.games_public_new_messages).set(false);
+                                chat.seen_messages();
                             }
                             tab_view.set(SideboardTabView::History);
                         });
@@ -138,8 +142,7 @@ pub fn SideboardTabs(
                         on:click=move |_| {
                             batch(move || {
                                 tab_view.set(SideboardTabView::Chat);
-                                (chat.games_private_new_messages).set(false);
-                                (chat.games_public_new_messages).set(false);
+                                chat.seen_messages();
                             });
                         }
                     >

apis/src/main.rs

@@ -2,9 +2,9 @@ pub mod common;
 pub mod functions;
 pub mod responses;
 pub mod websockets;
-use actix_web::middleware::Compress;
 use actix_session::config::PersistentSession;
 use actix_web::cookie::time::Duration;
+use actix_web::middleware::Compress;
 use cfg_if::cfg_if;
 cfg_if! { if #[cfg(feature = "ssr")] {