💄 Open/close ChatPanel on click

src/ui/components/conversations.rs

@@ -306,6 +306,9 @@ pub fn Space(id: SpaceId) -> Element {
 
     let on_selected_conversation = move |room_id: RoomId| {
         trace!("");
+
+        STORE.write().on_selected_room(room_id.clone());
+
         selected_room_id.set(Some(room_id));
     };
 
@@ -380,6 +383,10 @@ pub fn HomeSpace() -> Element {
     });
 
     let on_selected_conversation = move |room_id: RoomId| {
+        trace!("");
+
+        STORE.write().on_selected_room(room_id.clone());
+
         selected_room_id.set(Some(room_id));
     };
 

src/ui/layouts/conversations.rs

@@ -2,10 +2,14 @@ use std::rc::Rc;
 
 use dioxus::prelude::*;
 use futures::join;
+use tracing::{error, warn};
 
-use crate::ui::components::{
+use crate::ui::{
-    chat_panel::ChatPanel, conversations::Conversations as ConversationsComponent,
+    components::{
-    wallpaper::Wallpaper,
+        chat_panel::ChatPanel, conversations::Conversations as ConversationsComponent,
+        wallpaper::Wallpaper,
+    },
+    STORE,
 };
 
 turf::style_sheet!("src/ui/layouts/conversations.scss");
@@ -47,36 +51,50 @@ async fn on_carousel_scroll(
 }
 
 fn LayoutSmall() -> Element {
-    let mut carousel_div = use_signal(|| None::<Rc<MountedData>>);
     let mut first_div = use_signal(|| None::<Rc<MountedData>>);
     let mut last_div = use_signal(|| None::<Rc<MountedData>>);
+    let mut carousel_div = use_signal(|| None::<Rc<MountedData>>);
 
-    let conversation_panels_nb = 3;
+    let displayed_room_ids = STORE.read().displayed_room_ids();
-    let conversation_panels = (0..conversation_panels_nb + 1).map(|i| {
-        let inner = rsx! {
-                div {
-                    class: ClassName::CONVERSATIONS_VIEW_SMALL_PANEL_INNER,
-                    ChatPanel { name: format!("CHAT #{i}") },
-                }
-        };
 
-        if i == conversation_panels_nb {
+    let mut conversation_panels = Vec::new();
-            rsx! {
+    let mut displayed_room_ids_it = displayed_room_ids.iter().peekable();
-                div {
+    while let Some(room_id) = displayed_room_ids_it.next() {
-                    class: ClassName::CONVERSATIONS_VIEW_SMALL_PANEL,
+        if let Some(room) = STORE.read().rooms().get(room_id) {
-                    onmounted: move |cx: Event<MountedData>| last_div.set(Some(cx.data())),
+            let room = room.signal();
-                    {inner}
+            let room_name_repr = room.name().unwrap_or(room.id().to_string());
+            let inner = rsx! {
+                    div {
+                        class: ClassName::CONVERSATIONS_VIEW_SMALL_PANEL_INNER,
+                        ChatPanel { name: format!("CHAT {room_name_repr}") },
+                    }
+            };
+
+            // If this is the last iteration
+            let panel = if displayed_room_ids_it.peek().is_none() {
+                rsx! {
+                    div {
+                        class: ClassName::CONVERSATIONS_VIEW_SMALL_PANEL,
+                        onmounted: move |cx: Event<MountedData>| last_div.set(Some(cx.data())),
+                        {inner}
+                    }
                 }
+            } else {
+                rsx! {
+                    div {
+                        class: ClassName::CONVERSATIONS_VIEW_SMALL_PANEL,
+                        {inner}
+                    }
+                }
+            };
+
+            if let Some(panel) = panel {
+                conversation_panels.push(panel);
             }
         } else {
-            rsx! {
+            warn!("No {} room found", room_id);
-                div {
-                    class: ClassName::CONVERSATIONS_VIEW_SMALL_PANEL,
-                    {inner}
-                }
-            }
         }
-    });
+    }
 
     rsx! {
         style { {STYLE_SHEET} },
@@ -119,7 +137,7 @@ fn LayoutSmall() -> Element {
                 },
             },
 
-            {conversation_panels}
+            {conversation_panels.iter()}
 
             div {
                 class: ClassName::CONVERSATIONS_VIEW_TAIL,

src/ui/store/mod.rs

@@ -1,6 +1,7 @@
 pub(crate) mod room;
 pub(crate) mod space;
 
+use std::collections::HashSet;
 use std::{collections::HashMap, rc::Rc};
 
 use async_trait::async_trait;
@@ -21,6 +22,17 @@ use space::Space;
 pub struct Store {
     rooms: HashMap<RoomId, Rc<Room>>,
     spaces: HashMap<SpaceId, Rc<Space>>,
+
+    displayed_room_ids: HashSet<RoomId>,
+}
+
+impl Store {
+    pub fn on_selected_room(&mut self, room_id: RoomId) {
+        // Toggle the room_id selection
+        if !self.displayed_room_ids.write().remove(&room_id) {
+            self.displayed_room_ids.write().insert(room_id);
+        }
+    }
 }
 
 #[async_trait(?Send)]