💄 Add first breakpoint management by Conversations layout

src/ui/layouts/conversations.rs

@@ -210,22 +210,7 @@ fn LayoutBig() -> Element {
 }
 
 pub fn Conversations() -> Element {
-    let mut view_size = use_signal(|| None::<(f64, f64)>);
-
-    // TODO: Make the layout reactive (on window resize)
-    let layout = {
-        move || {
-            if let Some((width, height)) = view_size.read().as_ref() {
-                let component_width = height * WIDGET_HEIGHT_RATIO * ASPECT_RATIO;
-                let breakpoint_width = component_width * 2_f64;
-
-                if *width >= breakpoint_width {
-                    return rsx! { LayoutBig {} };
-                }
-            }
-            rsx! {LayoutSmall {}}
-        }
-    }();
+    let mut layout = use_signal(|| None::<VNode>);
 
     rsx! {
         style { {STYLE_SHEET} },
@@ -236,14 +221,22 @@ pub fn Conversations() -> Element {
 
         div {
             class: ClassName::CONVERSATIONS_VIEW,
-            onmounted: move |cx| {
-                async move {
-                    let data = cx.data();
 
-                    if let Ok(client_rect) = data.get_client_rect().await {
-                        view_size.set(Some((client_rect.size.width, client_rect.size.height)));
+            onresized: move |cx| {
+                let data = cx.data();
+                let mut use_big_layout = false;
+
+                if let Ok(size) = data.get_border_box_size() {
+                    if let Some(size) = size.first() {
+                        // Use LayoutBig if the layout can contain 2 panels side by side
+                        let component_width = size.height * WIDGET_HEIGHT_RATIO * ASPECT_RATIO;
+                        let breakpoint_width = component_width * 2_f64;
+                        use_big_layout = size.width > breakpoint_width;
                     }
                 }
+
+                layout.set(rsx! { if use_big_layout { LayoutBig {} } else { LayoutSmall {} }});
+
             },
 
             {layout}