🚧 First design template for ConversationOptionsMenu

src/ui/components/conversations.rs

@@ -436,7 +436,60 @@ pub fn Search() -> Element {
     }
 }
 
+#[component]
+fn ConversationOptionsMenu(room_id: RoomId, on_close: EventHandler) -> Element {
+    rsx! {
+        div {
+            class: ClassName::CONVERSATION_OPTIONS_MENU,
+
+            div {
+                class: ClassName::CONVERSATION_OPTIONS_MENU_INNER,
+
+                div {
+                    class: ClassName::CONVERSATION_OPTIONS_MENU_INNER_AVATAR,
+                }
+
+                div {
+                    class: ClassName::CONVERSATION_OPTIONS_MENU_INNER_NAME,
+                }
+
+                div {
+                    class: ClassName::CONVERSATION_OPTIONS_MENU_INNER_TOPIC,
+                }
+
+                div {
+                    class: ClassName::CONVERSATION_OPTIONS_MENU_INNER_CONFIG,
+                }
+
+                div {
+                    class: ClassName::CONVERSATION_OPTIONS_MENU_INNER_CLOSE_BUTTON,
+                    RejectButton {
+                        onclick: move |_| on_close(()),
+                    }
+                }
+
+                div {
+                    class: ClassName::CONVERSATION_OPTIONS_MENU_INNER_JOIN_BUTTON,
+                    JoinButton {
+                        onclick: move |_| on_close(()),
+                    }
+                }
+            }
+        }
+    }
+}
+
 pub fn Conversations() -> Element {
+    let mut conversation_options_menu = use_signal(|| None::<Element>);
+
+    let on_conversation_options_menu_close = move |_| {
+        conversation_options_menu.set(None);
+    };
+
+    let on_pressed_conversation = move |room_id: RoomId| {
+        conversation_options_menu.set(Some(rsx! { ConversationOptionsMenu { room_id, on_close: on_conversation_options_menu_close } }));
+    };
+
     rsx! {
         style { {STYLE_SHEET} },
 
@@ -450,13 +503,14 @@ pub fn Conversations() -> Element {
 
             div {
                 class: ClassName::CONVERSATIONS_SPACES,
-                Spaces {},
+                Spaces { on_pressed_conversation },
             },
 
             div {
                 class: ClassName::CONVERSATIONS_SEARCH,
                 Search {},
             },
-        }
+        },
+        {conversation_options_menu}
     }
 }