From bff777226caa6d85f825af36670ea763d8569a0d Mon Sep 17 00:00:00 2001
From: Kevin Boos <kevinaboos@gmail.com>
Date: Fri, 10 Jan 2025 01:39:47 -0800
Subject: [PATCH 1/5] WIP added login status modal, but it's mispositioned, and
 the login screen's width padding is missing

---
 Cargo.lock                      |  52 ++--
 Cargo.toml                      |   3 +-
 src/app.rs                      |  23 +-
 src/login/login_screen.rs       | 494 +++++++++++++++++---------------
 src/login/login_status_modal.rs | 170 +++++++++++
 src/login/mod.rs                |   2 +
 src/persistent_state.rs         |  15 +-
 src/sliding_sync.rs             |  77 +++--
 8 files changed, 536 insertions(+), 300 deletions(-)
 create mode 100644 src/login/login_status_modal.rs

diff --git a/Cargo.lock b/Cargo.lock
index a92678a6..0757d838 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1981,7 +1981,7 @@ dependencies = [
 [[package]]
 name = "makepad-derive-live"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=textflow_pub_states#b97dfcbc2046bcc9707c57ea9c7a5a810bc54489"
+source = "git+https://github.com/makepad/makepad?branch=rik#77fbf5fc3c56f435aa2cd887a3f815fdd29c149b"
 dependencies = [
  "makepad-live-id",
  "makepad-micro-proc-macro",
@@ -1990,7 +1990,7 @@ dependencies = [
 [[package]]
 name = "makepad-derive-wasm-bridge"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=textflow_pub_states#b97dfcbc2046bcc9707c57ea9c7a5a810bc54489"
+source = "git+https://github.com/makepad/makepad?branch=rik#77fbf5fc3c56f435aa2cd887a3f815fdd29c149b"
 dependencies = [
  "makepad-micro-proc-macro",
 ]
@@ -1998,7 +1998,7 @@ dependencies = [
 [[package]]
 name = "makepad-derive-widget"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=textflow_pub_states#b97dfcbc2046bcc9707c57ea9c7a5a810bc54489"
+source = "git+https://github.com/makepad/makepad?branch=rik#77fbf5fc3c56f435aa2cd887a3f815fdd29c149b"
 dependencies = [
  "makepad-live-id",
  "makepad-micro-proc-macro",
@@ -2007,7 +2007,7 @@ dependencies = [
 [[package]]
 name = "makepad-draw"
 version = "0.6.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=textflow_pub_states#b97dfcbc2046bcc9707c57ea9c7a5a810bc54489"
+source = "git+https://github.com/makepad/makepad?branch=rik#77fbf5fc3c56f435aa2cd887a3f815fdd29c149b"
 dependencies = [
  "ab_glyph_rasterizer",
  "fxhash",
@@ -2024,17 +2024,17 @@ dependencies = [
 [[package]]
 name = "makepad-futures"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=textflow_pub_states#b97dfcbc2046bcc9707c57ea9c7a5a810bc54489"
+source = "git+https://github.com/makepad/makepad?branch=rik#77fbf5fc3c56f435aa2cd887a3f815fdd29c149b"
 
 [[package]]
 name = "makepad-futures-legacy"
 version = "0.7.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=textflow_pub_states#b97dfcbc2046bcc9707c57ea9c7a5a810bc54489"
+source = "git+https://github.com/makepad/makepad?branch=rik#77fbf5fc3c56f435aa2cd887a3f815fdd29c149b"
 
 [[package]]
 name = "makepad-html"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=textflow_pub_states#b97dfcbc2046bcc9707c57ea9c7a5a810bc54489"
+source = "git+https://github.com/makepad/makepad?branch=rik#77fbf5fc3c56f435aa2cd887a3f815fdd29c149b"
 dependencies = [
  "makepad-live-id",
 ]
@@ -2042,7 +2042,7 @@ dependencies = [
 [[package]]
 name = "makepad-http"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=textflow_pub_states#b97dfcbc2046bcc9707c57ea9c7a5a810bc54489"
+source = "git+https://github.com/makepad/makepad?branch=rik#77fbf5fc3c56f435aa2cd887a3f815fdd29c149b"
 
 [[package]]
 name = "makepad-jni-sys"
@@ -2053,7 +2053,7 @@ checksum = "9775cbec5fa0647500c3e5de7c850280a88335d1d2d770e5aa2332b801ba7064"
 [[package]]
 name = "makepad-live-compiler"
 version = "0.5.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=textflow_pub_states#b97dfcbc2046bcc9707c57ea9c7a5a810bc54489"
+source = "git+https://github.com/makepad/makepad?branch=rik#77fbf5fc3c56f435aa2cd887a3f815fdd29c149b"
 dependencies = [
  "makepad-derive-live",
  "makepad-live-tokenizer",
@@ -2063,7 +2063,7 @@ dependencies = [
 [[package]]
 name = "makepad-live-id"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=textflow_pub_states#b97dfcbc2046bcc9707c57ea9c7a5a810bc54489"
+source = "git+https://github.com/makepad/makepad?branch=rik#77fbf5fc3c56f435aa2cd887a3f815fdd29c149b"
 dependencies = [
  "makepad-live-id-macros",
 ]
@@ -2071,7 +2071,7 @@ dependencies = [
 [[package]]
 name = "makepad-live-id-macros"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=textflow_pub_states#b97dfcbc2046bcc9707c57ea9c7a5a810bc54489"
+source = "git+https://github.com/makepad/makepad?branch=rik#77fbf5fc3c56f435aa2cd887a3f815fdd29c149b"
 dependencies = [
  "makepad-micro-proc-macro",
 ]
@@ -2079,7 +2079,7 @@ dependencies = [
 [[package]]
 name = "makepad-live-tokenizer"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=textflow_pub_states#b97dfcbc2046bcc9707c57ea9c7a5a810bc54489"
+source = "git+https://github.com/makepad/makepad?branch=rik#77fbf5fc3c56f435aa2cd887a3f815fdd29c149b"
 dependencies = [
  "makepad-live-id",
  "makepad-math",
@@ -2089,7 +2089,7 @@ dependencies = [
 [[package]]
 name = "makepad-markdown"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=textflow_pub_states#b97dfcbc2046bcc9707c57ea9c7a5a810bc54489"
+source = "git+https://github.com/makepad/makepad?branch=rik#77fbf5fc3c56f435aa2cd887a3f815fdd29c149b"
 dependencies = [
  "makepad-live-id",
 ]
@@ -2097,17 +2097,17 @@ dependencies = [
 [[package]]
 name = "makepad-math"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=textflow_pub_states#b97dfcbc2046bcc9707c57ea9c7a5a810bc54489"
+source = "git+https://github.com/makepad/makepad?branch=rik#77fbf5fc3c56f435aa2cd887a3f815fdd29c149b"
 
 [[package]]
 name = "makepad-micro-proc-macro"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=textflow_pub_states#b97dfcbc2046bcc9707c57ea9c7a5a810bc54489"
+source = "git+https://github.com/makepad/makepad?branch=rik#77fbf5fc3c56f435aa2cd887a3f815fdd29c149b"
 
 [[package]]
 name = "makepad-micro-serde"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=textflow_pub_states#b97dfcbc2046bcc9707c57ea9c7a5a810bc54489"
+source = "git+https://github.com/makepad/makepad?branch=rik#77fbf5fc3c56f435aa2cd887a3f815fdd29c149b"
 dependencies = [
  "makepad-live-id",
  "makepad-micro-serde-derive",
@@ -2116,7 +2116,7 @@ dependencies = [
 [[package]]
 name = "makepad-micro-serde-derive"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=textflow_pub_states#b97dfcbc2046bcc9707c57ea9c7a5a810bc54489"
+source = "git+https://github.com/makepad/makepad?branch=rik#77fbf5fc3c56f435aa2cd887a3f815fdd29c149b"
 dependencies = [
  "makepad-micro-proc-macro",
 ]
@@ -2124,12 +2124,12 @@ dependencies = [
 [[package]]
 name = "makepad-objc-sys"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=textflow_pub_states#b97dfcbc2046bcc9707c57ea9c7a5a810bc54489"
+source = "git+https://github.com/makepad/makepad?branch=rik#77fbf5fc3c56f435aa2cd887a3f815fdd29c149b"
 
 [[package]]
 name = "makepad-platform"
 version = "0.6.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=textflow_pub_states#b97dfcbc2046bcc9707c57ea9c7a5a810bc54489"
+source = "git+https://github.com/makepad/makepad?branch=rik#77fbf5fc3c56f435aa2cd887a3f815fdd29c149b"
 dependencies = [
  "hilog-sys",
  "makepad-android-state",
@@ -2152,7 +2152,7 @@ dependencies = [
 [[package]]
 name = "makepad-rustybuzz"
 version = "0.8.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=textflow_pub_states#b97dfcbc2046bcc9707c57ea9c7a5a810bc54489"
+source = "git+https://github.com/makepad/makepad?branch=rik#77fbf5fc3c56f435aa2cd887a3f815fdd29c149b"
 dependencies = [
  "bitflags 1.3.2",
  "bytemuck",
@@ -2167,7 +2167,7 @@ dependencies = [
 [[package]]
 name = "makepad-shader-compiler"
 version = "0.5.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=textflow_pub_states#b97dfcbc2046bcc9707c57ea9c7a5a810bc54489"
+source = "git+https://github.com/makepad/makepad?branch=rik#77fbf5fc3c56f435aa2cd887a3f815fdd29c149b"
 dependencies = [
  "makepad-live-compiler",
 ]
@@ -2175,7 +2175,7 @@ dependencies = [
 [[package]]
 name = "makepad-vector"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=textflow_pub_states#b97dfcbc2046bcc9707c57ea9c7a5a810bc54489"
+source = "git+https://github.com/makepad/makepad?branch=rik#77fbf5fc3c56f435aa2cd887a3f815fdd29c149b"
 dependencies = [
  "resvg",
  "ttf-parser",
@@ -2184,7 +2184,7 @@ dependencies = [
 [[package]]
 name = "makepad-wasm-bridge"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=textflow_pub_states#b97dfcbc2046bcc9707c57ea9c7a5a810bc54489"
+source = "git+https://github.com/makepad/makepad?branch=rik#77fbf5fc3c56f435aa2cd887a3f815fdd29c149b"
 dependencies = [
  "makepad-derive-wasm-bridge",
  "makepad-live-id",
@@ -2193,7 +2193,7 @@ dependencies = [
 [[package]]
 name = "makepad-widgets"
 version = "0.6.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=textflow_pub_states#b97dfcbc2046bcc9707c57ea9c7a5a810bc54489"
+source = "git+https://github.com/makepad/makepad?branch=rik#77fbf5fc3c56f435aa2cd887a3f815fdd29c149b"
 dependencies = [
  "makepad-derive-widget",
  "makepad-draw",
@@ -2207,7 +2207,7 @@ dependencies = [
 [[package]]
 name = "makepad-zune-png"
 version = "0.4.10"
-source = "git+https://github.com/kevinaboos/makepad?branch=textflow_pub_states#b97dfcbc2046bcc9707c57ea9c7a5a810bc54489"
+source = "git+https://github.com/makepad/makepad?branch=rik#77fbf5fc3c56f435aa2cd887a3f815fdd29c149b"
 dependencies = [
  "zune-core",
  "zune-inflate",
@@ -4324,7 +4324,7 @@ checksum = "e421abadd41a4225275504ea4d6566923418b7f05506fbc9c0fe86ba7396114b"
 [[package]]
 name = "ttf-parser"
 version = "0.21.1"
-source = "git+https://github.com/kevinaboos/makepad?branch=textflow_pub_states#b97dfcbc2046bcc9707c57ea9c7a5a810bc54489"
+source = "git+https://github.com/makepad/makepad?branch=rik#77fbf5fc3c56f435aa2cd887a3f815fdd29c149b"
 
 [[package]]
 name = "typenum"
diff --git a/Cargo.toml b/Cargo.toml
index 3d679f7f..101be9ec 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -16,8 +16,7 @@ version = "0.0.1-pre-alpha"
 metadata.makepad-auto-version = "zqpv-Yj-K7WNVK2I8h5Okhho46Q="
 
 [dependencies]
-# makepad-widgets = { git = "https://github.com/makepad/makepad", branch = "rik" }
-makepad-widgets = { git = "https://github.com/kevinaboos/makepad", branch = "textflow_pub_states" }
+makepad-widgets = { git = "https://github.com/makepad/makepad", branch = "rik" }
 
 ## Including this crate automatically configures all `robius-*` crates to work with Makepad.
 robius-use-makepad = "0.1.1"
diff --git a/src/app.rs b/src/app.rs
index e4d97aab..edadaf14 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -160,19 +160,19 @@ impl LiveRegister for App {
 }
 
 impl LiveHook for App {
-    fn after_update_from_doc(&mut self, _cx:&mut Cx) {
-        self.update_login_visibility();
+    fn after_update_from_doc(&mut self, cx: &mut Cx) {
+        self.update_login_visibility(cx);
     }
 }
 
 impl MatchEvent for App {
-    fn handle_startup(&mut self, _cx: &mut Cx) {
+    fn handle_startup(&mut self, cx: &mut Cx) {
         // Initialize the project directory here from the main UI thread
         // such that background threads/tasks will be able to can access it.
         let _app_data_dir = crate::app_data_dir();
         log!("App::handle_startup(): app_data_dir: {:?}", _app_data_dir);
 
-        self.update_login_visibility();
+        self.update_login_visibility(cx);
 
         log!("App::handle_startup(): starting matrix sdk loop");
         crate::sliding_sync::start_matrix_tokio().unwrap();
@@ -183,7 +183,7 @@ impl MatchEvent for App {
             if let Some(LoginAction::LoginSuccess) = action.downcast_ref() {
                 log!("Received LoginAction::LoginSuccess, hiding login view.");
                 self.app_state.logged_in = true;
-                self.update_login_visibility();
+                self.update_login_visibility(cx);
                 self.ui.redraw(cx);
             }
 
@@ -276,10 +276,15 @@ impl AppMain for App {
 }
 
 impl App {
-    fn update_login_visibility(&self) {
-        let login_visible = !self.app_state.logged_in;
-        self.ui.view(id!(login_screen_view)).set_visible(login_visible);
-        self.ui.view(id!(home_screen_view)).set_visible(!login_visible);
+    fn update_login_visibility(&self, cx: &mut Cx) {
+        let show_login = !self.app_state.logged_in;
+        self.ui.view(id!(login_screen_view)).set_visible(show_login);
+        self.ui.view(id!(home_screen_view)).set_visible(!show_login);
+        if !show_login {
+            self.ui
+                .modal(id!(login_screen_view.login_screen.login_status_modal))
+                .close(cx);
+        }
     }
 }
 
diff --git a/src/login/login_screen.rs b/src/login/login_screen.rs
index 1542a99d..24f89266 100644
--- a/src/login/login_screen.rs
+++ b/src/login/login_screen.rs
@@ -5,6 +5,8 @@ use matrix_sdk::ruma::api::client::session::get_login_types::v3::IdentityProvide
 
 use crate::sliding_sync::{submit_async_request, LoginByPassword, LoginRequest, MatrixRequest};
 
+use super::login_status_modal::{LoginStatusModalAction, LoginStatusModalWidgetExt};
+
 live_design! {
     use link::theme::*;
     use link::shaders::*;
@@ -13,6 +15,7 @@ live_design! {
     use crate::shared::helpers::*;
     use crate::shared::styles::*;
     use crate::shared::icon_button::*;
+    use crate::login::login_status_modal::*;
 
     IMG_APP_LOGO = dep("crate://self/resources/robrix_logo_alpha.png")
     ICON_SEARCH = dep("crate://self/resources/icons/search.svg")
@@ -44,6 +47,7 @@ live_design! {
         }
     }
 
+
     pub LoginScreen = {{LoginScreen}}<ScrollXYView> {
         width: Fill, height: Fill
         show_bg: true,
@@ -53,210 +57,229 @@ live_design! {
         // Note: *do NOT* vertically center this, it will break scrolling.
         align: {x: 0.5}
 
-        <RoundedView> {
-            width: Fit, height: Fit
-            flow: Down
-            align: {x: 0.5, y: 0.5}
-            padding: 30
-            margin: 40
-            spacing: 15.0
-
-            show_bg: true,
-            draw_bg: {
-                color: (COLOR_SECONDARY)
-            }
-
-            logo_image = <Image> {
-                fit: Smallest,
-                width: 80
-                source: (IMG_APP_LOGO),
-            }
+        <View> {
+            width: 250, height: Fit,
+            align: {x: 0.5}
+            flow: Overlay,
 
-            title = <Label> {
+            <RoundedView> {
                 width: Fit, height: Fit
-                margin: { bottom: 10 }
-                draw_text: {
-                    color: (COLOR_TEXT)
-                    text_style: <TITLE_TEXT>{font_size: 16.0}
+                flow: Down
+                align: {x: 0.5, y: 0.5}
+                padding: 30
+                margin: 40
+                spacing: 15.0
+
+                show_bg: true,
+                draw_bg: {
+                    color: (COLOR_SECONDARY)
                 }
-                text: "Login to Robrix"
-            }
 
-            user_id_input = <RobrixTextInput> {
-                width: 250, height: 40
-                empty_message: "User ID"
-            }
+                logo_image = <Image> {
+                    fit: Smallest,
+                    width: 80
+                    source: (IMG_APP_LOGO),
+                }
 
-            password_input = <RobrixTextInput> {
-                width: 250, height: 40
-                empty_message: "Password"
-                draw_text: { text_style: { is_secret: true } }
-            }
+                title = <Label> {
+                    width: Fit, height: Fit
+                    margin: { bottom: 10 }
+                    draw_text: {
+                        color: (COLOR_TEXT)
+                        text_style: <TITLE_TEXT>{font_size: 16.0}
+                    }
+                    text: "Login to Robrix"
+                }
 
-            <View> {
-                width: 250, height: Fit,
-                align: {x: 0.5}
-                flow: Right,
-                <View> {
-                    width: 215, height: Fit,
-                    flow: Down,
+                user_id_input = <RobrixTextInput> {
+                    width: 250, height: 40
+                    empty_message: "User ID"
+                }
 
-                    homeserver_input = <RobrixTextInput> {
-                        width: 215, height: 30,
-                        empty_message: "matrix.org"
-                        draw_text: {
-                            text_style: <TITLE_TEXT>{font_size: 10.0}
-                        }
-                    }
+                password_input = <RobrixTextInput> {
+                    width: 250, height: 40
+                    empty_message: "Password"
+                    draw_text: { text_style: { is_secret: true } }
+                }
 
+                <View> {
+                    width: 250, height: Fit,
+                    align: {x: 0.5}
+                    flow: Right,
                     <View> {
-                        width: 215,
-                        height: Fit,
-                        flow: Right,
-                        padding: {top: 3, left: 2, right: 2}
-                        spacing: 0.0,
-                        align: {x: 0.5, y: 0.5} // center horizontally and vertically
-
-                        left_line = <LineH> {
-                            draw_bg: { color: #C8C8C8 }
-                        }
+                        width: 215, height: Fit,
+                        flow: Down,
 
-                        <Label> {
-                            width: Fit, height: Fit
+                        homeserver_input = <RobrixTextInput> {
+                            width: 215, height: 30,
+                            empty_message: "matrix.org"
                             draw_text: {
-                                color: #8C8C8C
-                                text_style: <REGULAR_TEXT>{font_size: 9}
+                                text_style: <TITLE_TEXT>{font_size: 10.0}
                             }
-                            text: "Homeserver URL (optional)"
                         }
 
-                        right_line = <LineH> {
-                            draw_bg: { color: #C8C8C8 }
+                        <View> {
+                            width: 215,
+                            height: Fit,
+                            flow: Right,
+                            padding: {top: 3, left: 2, right: 2}
+                            spacing: 0.0,
+                            align: {x: 0.5, y: 0.5} // center horizontally and vertically
+
+                            left_line = <LineH> {
+                                draw_bg: { color: #C8C8C8 }
+                            }
+
+                            <Label> {
+                                width: Fit, height: Fit
+                                draw_text: {
+                                    color: #8C8C8C
+                                    text_style: <REGULAR_TEXT>{font_size: 9}
+                                }
+                                text: "Homeserver URL (optional)"
+                            }
+
+                            right_line = <LineH> {
+                                draw_bg: { color: #C8C8C8 }
+                            }
                         }
-                    }
 
-                }
-                sso_search_button = <RobrixIconButton> {
-                    width: 28, height: 28,
-                    margin: { left: 5, top: 1}
-                    draw_icon: {
-                        svg_file: (ICON_SEARCH)
                     }
-                    icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
+                    sso_search_button = <RobrixIconButton> {
+                        width: 28, height: 28,
+                        margin: { left: 5, top: 1}
+                        draw_icon: {
+                            svg_file: (ICON_SEARCH)
+                        }
+                        icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
+                    }
                 }
-            }
 
-            login_button = <RobrixIconButton> {
-                width: 250, height: 40
-                margin: {top: 5, bottom: 10}
-                draw_bg: {
-                    color: (COLOR_SELECTED_PRIMARY)
-                }
-                draw_text: {
-                    color: (COLOR_PRIMARY)
-                    text_style: <REGULAR_TEXT> {}
+                login_button = <RobrixIconButton> {
+                    width: 250, height: 40
+                    padding: 10
+                    margin: {top: 5, bottom: 10}
+                    draw_bg: {
+                        color: (COLOR_SELECTED_PRIMARY)
+                    }
+                    draw_text: {
+                        color: (COLOR_PRIMARY)
+                        text_style: <REGULAR_TEXT> {}
+                    }
+                    text: "Login"
                 }
-                text: "Login"
-            }
 
-            left_line = <LineH> {
-                margin: {bottom: -5}
-                draw_bg: { color: #C8C8C8 }
-            }
-            <Label> {
-                width: Fit, height: Fit
-                draw_text: {
-                    color: (COLOR_TEXT)
-                    text_style: <TITLE_TEXT>{font_size: 11.0}
+                left_line = <LineH> {
+                    margin: {bottom: -5}
+                    draw_bg: { color: #C8C8C8 }
                 }
-                text: "Or, login with an SSO provider:"
-            }
-
-            sso_view = <View> {
-                align: {x: 0.5}
-                width: 250, height: Fit,
-                margin: {left: 5, right: 5} // make the inner view 240 pixels wide
-                flow: RightWrap,
-                apple_button = <SsoButton> {
-                    image = <SsoImage> {
-                        source: dep("crate://self/resources/img/apple.png")
+                <Label> {
+                    width: Fit, height: Fit
+                    draw_text: {
+                        color: (COLOR_TEXT)
+                        text_style: <TITLE_TEXT>{font_size: 11.0}
                     }
+                    text: "Or, login with an SSO provider:"
                 }
-                facebook_button = <SsoButton> {
-                    image = <SsoImage> {
-                        source: dep("crate://self/resources/img/facebook.png")
+
+                sso_view = <View> {
+                    align: {x: 0.5}
+                    width: 250, height: Fit,
+                    margin: {left: 5, right: 5} // make the inner view 240 pixels wide
+                    flow: RightWrap,
+                    apple_button = <SsoButton> {
+                        image = <SsoImage> {
+                            source: dep("crate://self/resources/img/apple.png")
+                        }
                     }
-                }
-                github_button = <SsoButton> {
-                    image = <SsoImage> {
-                        source: dep("crate://self/resources/img/github.png")
+                    facebook_button = <SsoButton> {
+                        image = <SsoImage> {
+                            source: dep("crate://self/resources/img/facebook.png")
+                        }
                     }
-                }
-                github_button = <SsoButton> {
-                    image = <SsoImage> {
-                        source: dep("crate://self/resources/img/github.png")
+                    github_button = <SsoButton> {
+                        image = <SsoImage> {
+                            source: dep("crate://self/resources/img/github.png")
+                        }
                     }
-                }
-                gitlab_button = <SsoButton> {
-                    image = <SsoImage> {
-                        source: dep("crate://self/resources/img/gitlab.png")
+                    github_button = <SsoButton> {
+                        image = <SsoImage> {
+                            source: dep("crate://self/resources/img/github.png")
+                        }
+                    }
+                    gitlab_button = <SsoButton> {
+                        image = <SsoImage> {
+                            source: dep("crate://self/resources/img/gitlab.png")
+                        }
+                    }
+                    google_button = <SsoButton> {
+                        image = <SsoImage> {
+                            source: dep("crate://self/resources/img/google.png")
+                        }
                     }
                 }
-                google_button = <SsoButton> {
-                    image = <SsoImage> {
-                        source: dep("crate://self/resources/img/google.png")
+
+                <View> {
+                    width: 215,
+                    height: Fit,
+                    flow: Right,
+                    padding: 3,
+                    spacing: 0.0,
+                    align: {x: 0.5, y: 0.5} // center horizontally and vertically
+
+                    left_line = <LineH> {
+                        draw_bg: { color: #C8C8C8 }
+                    }
+
+                    <Label> {
+                        width: Fit, height: Fit
+                        draw_text: {
+                            color: #x6c6c6c
+                            text_style: <REGULAR_TEXT>{}
+                        }
+                        text: "Don't have an account?"
+                    }
+
+                    right_line = <LineH> {
+                        draw_bg: { color: #C8C8C8 }
                     }
                 }
-            }
                 
-            
-            status_label = <Label> {
-                width: 250, height: Fit,
-                padding: {left: 5, right: 5, bottom: 10}
-                draw_text: {
-                    color: (MESSAGE_TEXT_COLOR)
-                    text_style: <REGULAR_TEXT> {}
-                }
-                text: ""
-            }
+                signup_button = <Button> {
+                    width: Fit, height: Fit
+                    margin: {top: -10}
+                    padding: {left: 15, right: 15, top: 10, bottom: 10}
+                    draw_text: {
+                        // color: (MESSAGE_TEXT_COLOR)
+                        fn get_color(self) -> vec4 {
+                            return MESSAGE_TEXT_COLOR
+                        }
+                        text_style: <REGULAR_TEXT>{}
+                    }
+                    draw_bg: {
+                        bodybottom: #DDDDDD
+                    }
 
-            <Label> {
-                width: Fit, height: Fit
-                draw_text: {
-                    color: #x6c6c6c
-                    text_style: <REGULAR_TEXT>{}
+                    text: "Sign up here"
                 }
-                text: "Don't have an account?"
             }
-            signup_button = <Button> {
-                width: Fit, height: Fit
-                margin: {top: -10}
-                padding: {left: 15, right: 15, top: 10, bottom: 10}
-                draw_text: {
-                    // color: (MESSAGE_TEXT_COLOR)
-                    fn get_color(self) -> vec4 {
-                        return MESSAGE_TEXT_COLOR
-                    }
-                    text_style: <REGULAR_TEXT>{}
-                }
-                draw_bg: {
-                    bodybottom: #DDDDDD
-                }
 
-                text: "Sign up here"
+            // The modal that pops up to display login status messages,
+            // such as when the user is logging in or when there is an error.
+            login_status_modal = <Modal> {
+                height: Fit,
+                align: {x: 0.5, y: 0.5},
+
+                content: {
+                    login_status_modal_inner = <LoginStatusModal> {}
+                }
             }
         }
     }
-    
 }
 
 static MATRIX_SIGN_UP_URL: &str = "https://matrix.org/docs/chat_basics/matrix-for-im/#creating-a-matrix-account";
 
-// An unfortunate hack we must do to get the colors to work in Rust code.
-const COLOR_DANGER_RED: Vec4 = Vec4 { x: 220f32/255f32, y: 0f32, z: 5f32/255f32, w: 1f32 };
-const COLOR_ACCEPT_GREEN: Vec4 = Vec4 { x: 19f32/255f32, y: 136f32/255f32, z: 8f32/255f32, w: 1f32 };
-const MESSAGE_TEXT_COLOR: Vec4 = Vec4 { x: 68f32/255f32, y: 68f32/255f32, z: 68f32/255f32, w: 1f32 };
-
 #[derive(Live, LiveHook, Widget)]
 pub struct LoginScreen {
     #[deref] view: View,
@@ -282,7 +305,6 @@ impl Widget for LoginScreen {
 
 impl MatchEvent for LoginScreen {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
-        let status_label = self.view.label(id!(status_label));
         let login_button = self.view.button(id!(login_button));
         let signup_button = self.view.button(id!(signup_button));
         let user_id_input = self.view.text_input(id!(user_id_input));
@@ -290,6 +312,9 @@ impl MatchEvent for LoginScreen {
         let homeserver_input = self.view.text_input(id!(homeserver_input));
         let sso_search_button = self.view.button(id!(sso_search_button));
 
+        let login_status_modal = self.view.modal(id!(login_status_modal));
+        let login_status_modal_inner = self.view.login_status_modal(id!(login_status_modal_inner));
+
         if signup_button.clicked(actions) {
             log!("Opening URL \"{}\"", MATRIX_SIGN_UP_URL);
             let _ = robius_open::Uri::new(MATRIX_SIGN_UP_URL).open();
@@ -303,22 +328,25 @@ impl MatchEvent for LoginScreen {
             let user_id = user_id_input.text();
             let password = password_input.text();
             let homeserver = homeserver_input.text();
-            if user_id.is_empty() || password.is_empty() {
-                status_label.apply_over(cx, live!{
-                    draw_text: { color: (COLOR_DANGER_RED) }
-                });
-                status_label.set_text("Please enter both User ID and Password.");
+            if user_id.is_empty() {
+                login_status_modal_inner.set_title("Missing User ID");
+                login_status_modal_inner.set_status("Please enter a valid User ID.");
+                login_status_modal_inner.button_ref().set_text("Okay");
+            } else if password.is_empty() {
+                login_status_modal_inner.set_title("Missing Password");
+                login_status_modal_inner.set_status("Please enter a valid password.");
+                login_status_modal_inner.button_ref().set_text("Okay");
             } else {
-                status_label.apply_over(cx, live!{
-                    draw_text: { color: (MESSAGE_TEXT_COLOR) }
-                });
-                status_label.set_text("Waiting for login response...");
+                login_status_modal_inner.set_title("Logging in");
+                login_status_modal_inner.set_status("Waiting for a login response...");
+                login_status_modal_inner.button_ref().set_text("Cancel");
                 submit_async_request(MatrixRequest::Login(LoginRequest::LoginByPassword(LoginByPassword {
                     user_id,
                     password,
                     homeserver: homeserver.is_empty().not().then_some(homeserver),
                 })));
             }
+            login_status_modal.open(cx);
             sso_search_button.set_enabled(self.prev_homeserver_url == Some(homeserver_input.text()));
             self.redraw(cx);
         }
@@ -326,71 +354,64 @@ impl MatchEvent for LoginScreen {
         let provider_brands = ["apple", "facebook", "github", "gitlab", "google"];
         let button_set: &[&[LiveId]] = ids!(apple_button, facebook_button, github_button, gitlab_button, google_button);
         for action in actions {
+            if let LoginStatusModalAction::Close = action.as_widget_action().cast() {
+                login_status_modal.close(cx);
+            }
+
+            // Handle login-related actions received from background async tasks.
             match action.downcast_ref() {
-                Some(LoginAction::AutofillInfo { .. }) => {
-                    todo!("set user_id, password, and homeserver inputs");
+                Some(LoginAction::CliAutoLogin { user_id, homeserver }) => {
+                    user_id_input.set_text(user_id);
+                    password_input.set_text("");
+                    homeserver_input.set_text(homeserver.as_deref().unwrap_or_default());
+                    login_status_modal_inner.set_title("Logging in via CLI");
+                    login_status_modal_inner.set_status(
+                        &format!("Auto-logging in as user {user_id}...")
+                    );
+                    login_status_modal_inner.button_ref().set_text("Cancel");
+                    login_status_modal.open(cx);
                 }
-                Some(LoginAction::Status(status)) => {
-                    status_label.set_text(status);
-                    status_label.apply_over(cx, live!{
-                        draw_text: { color: (MESSAGE_TEXT_COLOR) }
-                    });
+                Some(LoginAction::Status { title, status }) => {
+                    login_status_modal_inner.set_title(title);
+                    login_status_modal_inner.set_status(status);
+                    login_status_modal_inner.button_ref().set_text("Cancel");
+                    login_status_modal.open(cx);
+
                     sso_search_button.set_enabled(true);
                     self.redraw(cx);
                 }
                 Some(LoginAction::LoginSuccess) => {
-                    // The other real action of showing the main screen
-                    // is handled by the main app, not by this login screen.
+                    // The main `App` component handles showing the main screen
+                    // and hiding the login screen & login status modal.
                     user_id_input.set_text("");
                     password_input.set_text("");
                     homeserver_input.set_text("");
-                    status_label.set_text("Login successful!");
-                    status_label.apply_over(cx, live!{
-                        draw_text: { color: (COLOR_ACCEPT_GREEN) }
-                    });
+                    login_status_modal_inner.set_title("Login Succeeded");
+                    login_status_modal_inner.set_status("You are now logged in.\n\nLoading your rooms now...");
+                    login_status_modal_inner.button_ref().set_text("Okay");
                     self.redraw(cx);
                 }
                 Some(LoginAction::LoginFailure(error)) => {
-                    let truncated_error = error.chars().take(200).collect::<String>();
-                    status_label.set_text(&truncated_error);
-                    status_label.apply_over(cx, live!{
-                        draw_text: { color: (COLOR_DANGER_RED) }
-                    });
+                    login_status_modal_inner.set_title("Login Failed");
+                    login_status_modal_inner.set_status(error);
+                    login_status_modal_inner.button_ref().set_text("Okay");
+                    login_status_modal.open(cx);
                     self.redraw(cx);
                 }
                 Some(LoginAction::SsoPending(ref pending)) => {
-                    if *pending {
-                        self.view_set(button_set).iter().for_each(|view_ref| {
-                            let Some(mut view_ref) = view_ref.borrow_mut() else {
-                                return;
-                            };
-                            view_ref.apply_over(cx,
-                                live! {
-                                    cursor: NotAllowed,
-                                    image = { 
-                                        draw_bg: {
-                                            mask: (1.0)
-                                        }
-                                    }
-                                }
-                            );
-                        });
-                    } else {
-                        self.view_set(button_set).iter().for_each(|view_ref| {
-                            let Some(mut view_ref) = view_ref.borrow_mut() else {
-                                return;
-                            };
-                            view_ref.apply_over(cx,
-                                live! {
-                                    cursor: Hand,
-                                    image = { 
-                                        draw_bg: {
-                                            mask: (0.0)
-                                        }
-                                    }
-                                },
-                            );
-                        });
+                    for view_ref in self.view_set(button_set).iter() {
+                        let Some(mut view_mut) = view_ref.borrow_mut() else { continue };
+                        if *pending {    
+                            view_mut.apply_over(cx, live! {
+                                cursor: NotAllowed,
+                                image = { draw_bg: { mask: 1.0 } }
+                            });
+                        } else {
+                            view_mut.apply_over(cx, live! {
+                                cursor: Hand,
+                                image = { draw_bg: { mask: 0.0 } }
+                            });
+                        }
                     }
                     self.sso_pending = *pending;
                     self.redraw(cx);
@@ -406,17 +427,22 @@ impl MatchEvent for LoginScreen {
                     }
                     self.identity_providers = identity_providers.clone();
                     sso_search_button.set_enabled(true);
-                    status_label.set_text("");
+                    // Hide the status modal such that the user can see the newly-populated SSO buttons.
+                    login_status_modal.close(cx);
                     self.redraw(cx);
                 }
-                _ => {
-
-                }
+                _ => { }
             }
         }
+
+        // If the homeserver "search" button was clicked, fetch supported login types.
         if sso_search_button.clicked(actions) && self.prev_homeserver_url != Some(homeserver_input.text()) {
+            login_status_modal_inner.set_title("Querying login types");
+            login_status_modal_inner.set_status("Fetching supported login types from the homeserver...");
+            login_status_modal_inner.button_ref().set_text("Cancel");
+            login_status_modal.open(cx);
+            
             self.prev_homeserver_url = Some(homeserver_input.text());
-            status_label.set_text("Fetching support login types from the homeserver...");
             submit_async_request(MatrixRequest::Login(LoginRequest::HomeserverLoginTypesQuery(homeserver_input.text())));
             sso_search_button.set_enabled(false);
             for view_ref in self.view_set(button_set).iter() {
@@ -424,6 +450,8 @@ impl MatchEvent for LoginScreen {
             }
             self.redraw(cx);
         }
+
+        // Handle any of the SSO login buttons being clicked
         for (view_ref, brand) in self.view_set(button_set).iter().zip(&provider_brands) {
             for ip in self.identity_providers.iter() {
                 if ip.id.contains(brand) {
@@ -451,13 +479,15 @@ pub enum LoginAction {
     LoginSuccess,
     /// A negative response from the backend Matrix task to the login screen.
     LoginFailure(String),
-    /// A status message to display to the user.
-    Status(String),
-    /// Login credentials that should be filled into the login screen,
-    /// which get sent from the main function that parses CLI arguments.
-    AutofillInfo {
+    /// A login-related status message to display to the user.
+    Status {
+        title: String,
+        status: String,
+    },
+    /// The given login info was specified on the command line (CLI),
+    /// and the login process is underway.
+    CliAutoLogin {
         user_id: String,
-        password: String,
         homeserver: Option<String>,
     },
     /// An acknowledgment that is sent from the backend Matrix task to the login screen
diff --git a/src/login/login_status_modal.rs b/src/login/login_status_modal.rs
new file mode 100644
index 00000000..110beadf
--- /dev/null
+++ b/src/login/login_status_modal.rs
@@ -0,0 +1,170 @@
+use makepad_widgets::*;
+
+live_design! {
+    use link::theme::*;
+    use link::widgets::*;
+
+    use crate::shared::styles::*;
+    use crate::shared::icon_button::RobrixIconButton;
+
+    pub LoginStatusModal = {{LoginStatusModal}} {
+        width: Fit
+        height: Fit
+        align: {x: 0.5}
+
+        <RoundedView> {
+            width: 250,
+            height: Fit,
+            flow: Down,
+            align: {x: 0.5}
+            padding: 25,
+            spacing: 10,
+
+            show_bg: true
+            draw_bg: {
+                color: #CCC
+                radius: 3.0
+            }
+
+            <View> {
+                width: Fill,
+                height: Fit,
+                flow: Right
+                padding: {top: 0, bottom: 10}
+                align: {x: 0.5, y: 0.0}
+
+                title = <Label> {
+                    text: "Login Status"
+                    draw_text: {
+                        text_style: <TITLE_TEXT>{font_size: 13},
+                        color: #000
+                    }
+                }
+            }
+
+            status = <Label> {
+                width: Fill
+                draw_text: {
+                    text_style: <REGULAR_TEXT>{
+                        font_size: 11.5,
+                        height_factor: 1.3
+                    },
+                    color: #000
+                    wrap: Word
+                }
+            }
+
+            <View> {
+                width: Fill,
+                height: Fit,
+                flow: Right
+                align: {x: 1.0}
+                margin: {top: 5, bottom: 10}
+
+                button = <RobrixIconButton> {
+                    width: Fit, height: Fit
+                    padding: 10
+                    draw_bg: {
+                        color: (COLOR_SELECTED_PRIMARY)
+                    }
+                    draw_text: {
+                        color: (COLOR_PRIMARY)
+                        text_style: <REGULAR_TEXT> {}
+                    }
+                    text: "Cancel"
+                }
+            }
+        }
+    }
+}
+
+#[derive(Live, LiveHook, Widget)]
+pub struct LoginStatusModal {
+    #[deref] view: View,
+}
+
+#[derive(Clone, Debug, DefaultNone)]
+pub enum LoginStatusModalAction {
+    None,
+    Close,
+}
+
+impl Widget for LoginStatusModal {
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        self.view.handle_event(cx, event, scope);
+        self.widget_match_event(cx, event, scope);
+    }
+
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        self.view.draw_walk(cx, scope, walk)
+    }
+}
+
+impl WidgetMatchEvent for LoginStatusModal {
+    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, scope: &mut Scope) {
+        let widget_uid = self.widget_uid();
+        let button = self.button(id!(button));
+
+        let mut needs_redraw = false;
+
+        let modal_dismissed = actions
+            .iter()
+            .any(|a| matches!(a.downcast_ref(), Some(ModalAction::Dismissed)));
+
+        if button.clicked(actions) || modal_dismissed {
+            // TODO: send a login request cancel action, if/when we support them
+
+
+            // If the modal was dismissed by clicking outside of it, we MUST NOT emit
+            // a `LoginStatusModalAction::Close` action, as that would cause
+            // an infinite action feedback loop.
+            if !modal_dismissed {
+                cx.widget_action(widget_uid, &scope.path, LoginStatusModalAction::Close);
+            }
+        }
+
+        if needs_redraw {
+            self.redraw(cx);
+        }
+    }
+}
+
+impl LoginStatusModal {
+    /// Sets the title text displayed in the modal.
+    fn set_title(&mut self, title: &str) {
+        self.label(id!(title)).set_text(title);
+    }
+
+    /// Sets the status text displayed in the body of the modal.
+    fn set_status(&mut self, status: &str) {
+        self.label(id!(status)).set_text(status);
+    }
+
+    /// Returns a reference to the modal's button, enabling you to set its properties.
+    fn button_ref(&self) -> ButtonRef {
+        self.button(id!(button))
+    }
+}
+
+impl LoginStatusModalRef {
+    /// See [`LoginStatusModal::set_title()`].
+    pub fn set_title(&self, title: &str) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.set_title(title);
+        }
+    }
+
+    /// See [`LoginStatusModal::set_status()`].
+    pub fn set_status(&self, status: &str) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.set_status(status);
+        }
+    }
+
+    /// See [`LoginStatusModal::button_ref()`].
+    pub fn button_ref(&self) -> ButtonRef {
+        self.borrow()
+            .map(|inner| inner.button_ref())
+            .unwrap_or_default()
+    }
+}
diff --git a/src/login/mod.rs b/src/login/mod.rs
index 64cf8399..f269c0e1 100644
--- a/src/login/mod.rs
+++ b/src/login/mod.rs
@@ -1,7 +1,9 @@
 use makepad_widgets::*;
 
 pub mod login_screen;
+pub mod login_status_modal;
 
 pub fn live_design(cx: &mut Cx) {
     login_screen::live_design(cx);
+    login_status_modal::live_design(cx);
 }
diff --git a/src/persistent_state.rs b/src/persistent_state.rs
index 480f8bba..92265496 100644
--- a/src/persistent_state.rs
+++ b/src/persistent_state.rs
@@ -99,7 +99,10 @@ pub async fn restore_session(
     }
     let status_str = format!("Loading previous session file for {user_id}...");
     log!("{status_str}: '{}'", session_file.display());
-    Cx::post_action(LoginAction::Status(status_str));
+    Cx::post_action(LoginAction::Status {
+        title: "Restoring session".into(),
+        status: status_str,
+    });
 
     // The session was serialized as JSON in a file.
     let serialized_session = fs::read_to_string(session_file).await?;
@@ -111,7 +114,10 @@ pub async fn restore_session(
         client_session.homeserver,
     );
     log!("{status_str}");
-    Cx::post_action(LoginAction::Status(status_str));
+    Cx::post_action(LoginAction::Status {
+        title: "Connecting to homeserver".into(),
+        status: status_str,
+    });
 
     // Build the client with the previous settings from the session.
     let client = Client::builder()
@@ -124,7 +130,10 @@ pub async fn restore_session(
 
     let status_str = format!("Authenticating previous login session for {}...", user_session.meta.user_id);
     log!("{status_str}");
-    Cx::post_action(LoginAction::Status(status_str));
+    Cx::post_action(LoginAction::Status {
+        title: "Authenticating session".into(),
+        status: status_str,
+    });
 
     // Restore the Matrix user session.
     client.restore_session(user_session).await?;
diff --git a/src/sliding_sync.rs b/src/sliding_sync.rs
index 0ceb7f6a..33f41e30 100644
--- a/src/sliding_sync.rs
+++ b/src/sliding_sync.rs
@@ -12,7 +12,7 @@ use matrix_sdk::{
                 message::{ForwardThread, RoomMessageEventContent}, MediaSource
             }, FullStateEventContent, MessageLikeEventType, TimelineEventType
         }, MilliSecondsSinceUnixEpoch, OwnedEventId, OwnedMxcUri, OwnedRoomAliasId, OwnedRoomId, OwnedUserId, UserId
-    }, sliding_sync::VersionBuilder, Client, Error, Room, RoomMemberships
+    }, sliding_sync::VersionBuilder, Client, ClientBuildError, Error, Room, RoomMemberships
 };
 use matrix_sdk_ui::{
     room_list_service::{self, RoomListLoadingState},
@@ -39,9 +39,9 @@ use crate::{
 
 #[derive(Parser, Debug, Default)]
 struct Cli {
-    /// The user name that should be used for the login.
+    /// The user ID to login with.
     #[clap(value_parser)]
-    username: String,
+    user_id: String,
 
     /// The password that should be used for the login.
     #[clap(value_parser)]
@@ -66,7 +66,7 @@ struct Cli {
 impl From<LoginByPassword> for Cli {
     fn from(login: LoginByPassword) -> Self {
         Self {
-            username: login.user_id,
+            user_id: login.user_id,
             password: login.password,
             homeserver: None,
             proxy: None,
@@ -81,7 +81,7 @@ impl From<LoginByPassword> for Cli {
 async fn build_client(
     cli: &Cli,
     data_dir: &Path,
-) -> anyhow::Result<(Client, ClientSessionPersisted)> {
+) -> Result<(Client, ClientSessionPersisted), ClientBuildError> {
     // Generate a unique subfolder name for the client database,
     // which allows multiple clients to run simultaneously.
     let now = chrono::Local::now();
@@ -159,14 +159,14 @@ async fn login(
             // Attempt to login using the CLI-provided username & password.
             let login_result = client
                 .matrix_auth()
-                .login_username(&cli.username, &cli.password)
+                .login_username(&cli.user_id, &cli.password)
                 .initial_device_display_name("robrix-un-pw")
                 .send()
                 .await?;
             if client.logged_in() {
                 log!("Logged in successfully? {:?}", client.logged_in());
                 enqueue_rooms_list_update(RoomsListUpdate::Status {
-                    status: format!("Logged in as {}. Loading rooms...", cli.username),
+                    status: format!("Logged in as {}. Loading rooms...", cli.user_id),
                 });
                 if let Err(e) = persistent_state::save_session(&client, client_session).await {
                     error!("Failed to save session state to storage: {e:?}");
@@ -174,9 +174,9 @@ async fn login(
                 Ok((client, None))
             } else {
                 enqueue_rooms_list_update(RoomsListUpdate::Status {
-                    status: format!("Failed to login as {}: {:?}", cli.username, login_result),
+                    status: format!("Failed to login as {}: {:?}", cli.user_id, login_result),
                 });
-                bail!("Failed to login as {}: {login_result:?}", cli.username);
+                bail!("Failed to login as {}: {login_result:?}", cli.user_id);
             }
         }
 
@@ -196,7 +196,10 @@ async fn populate_login_types(
     homeserver_url: &str,
     login_types: &mut Vec<LoginType>,
 ) -> Result<()> {
-    Cx::post_action(LoginAction::Status(String::from("Fetching Login Types ...")));
+    Cx::post_action(LoginAction::Status {
+        title: "Querying login types".into(),
+        status: "Fetching supported login types from the homeserver...".into(),
+    });
     let homeserver_url = if homeserver_url.is_empty() {
         DEFAULT_HOMESERVER
     } else {
@@ -1123,7 +1126,7 @@ async fn async_main_loop(
     log!("Most recent user ID: {most_recent_user_id:?}");
     let cli_parse_result = Cli::try_parse();
     let cli_has_valid_username_password = cli_parse_result.as_ref()
-        .is_ok_and(|cli| !cli.username.is_empty() && !cli.password.is_empty());
+        .is_ok_and(|cli| !cli.user_id.is_empty() && !cli.password.is_empty());
     log!("CLI parsing succeeded? {}. CLI has valid UN+PW? {}",
         cli_parse_result.as_ref().is_ok(),
         cli_has_valid_username_password,
@@ -1137,7 +1140,7 @@ async fn async_main_loop(
     let new_login_opt = if !wait_for_login {
         let specified_username = cli_parse_result.as_ref().ok().and_then(|cli|
             username_to_full_user_id(
-                &cli.username,
+                &cli.user_id,
                 cli.homeserver.as_deref(),
             )
         );
@@ -1147,25 +1150,31 @@ async fn async_main_loop(
         if let Ok(session) = persistent_state::restore_session(specified_username).await {
             Some(session)
         } else {
-            let status_err = "Failed to restore previous user session. Please login again.";
+            let status_err = "Could not restore previous user session.\n\nPlease login again.";
             log!("{status_err}");
-            Cx::post_action(LoginAction::Status(status_err.to_string()));
+            Cx::post_action(LoginAction::LoginFailure(status_err.to_string()));
 
             if let Ok(cli) = &cli_parse_result {
-                let status_str = format!("Attempting auto-login from CLI arguments as user '{}'...", cli.username);
-                log!("{status_str}");
-                Cx::post_action(LoginAction::Status(status_str));
+                log!("Attempting auto-login from CLI arguments as user '{}'...", cli.user_id);
+                Cx::post_action(LoginAction::CliAutoLogin {
+                    user_id: cli.user_id.clone(),
+                    homeserver: cli.homeserver.clone(),
+                });
                 let mut login_types: Vec<LoginType> = Vec::new();
                 let homeserver_url = cli.homeserver.as_deref().unwrap_or(DEFAULT_HOMESERVER);
                 if let Err(e) = populate_login_types(homeserver_url, &mut login_types).await {
                     error!("Populating Login types failed: {e:?}");
-                    Cx::post_action(LoginAction::LoginFailure(format!("Populating Login types failed {homeserver_url} {e:?}")));
+                    Cx::post_action(LoginAction::LoginFailure(
+                        format!("Failed to fetch supported login types from homeserver {homeserver_url}.\n\n{e:?}")
+                    ));
                 }
                 match login(cli, LoginRequest::LoginByCli, &login_types).await {
                     Ok(new_login) => Some(new_login),
                     Err(e) => {
                         error!("CLI-based login failed: {e:?}");
-                        Cx::post_action(LoginAction::LoginFailure(format!("Login failed: {e:?}")));
+                        Cx::post_action(LoginAction::LoginFailure(
+                            format!("Could not login with CLI-provided arguments.\n\nPlease login manually.\n\nError: {e:?}")
+                        ));
                         enqueue_rooms_list_update(RoomsListUpdate::Status {
                             status: format!("Login failed: {e:?}"),
                         });
@@ -1188,7 +1197,9 @@ async fn async_main_loop(
             // Display the available Identity providers by fetching the login types
             if let Err(e) = populate_login_types(homeserver_url, &mut login_types).await {
                 error!("Populating Login types failed for {homeserver_url}: {e:?}");
-                Cx::post_action(LoginAction::LoginFailure(format!("Populating Login types failed for {homeserver_url} {e:?}")));
+                Cx::post_action(LoginAction::LoginFailure(
+                    format!("Failed to fetch supported login types from homeserver {homeserver_url}.\n\nError: {e:?}")
+                ));
             }
             loop {
                 log!("Waiting for login request...");
@@ -1197,7 +1208,9 @@ async fn async_main_loop(
                         if let LoginRequest::HomeserverLoginTypesQuery(homeserver_url) = login_request {
                             if let Err(e) = populate_login_types(&homeserver_url, &mut login_types).await {
                                 error!("Populating Login types failed: {e:?}");
-                                Cx::post_action(LoginAction::LoginFailure(format!("Populating Login types failed {homeserver_url} {e:?}")));
+                                Cx::post_action(LoginAction::LoginFailure(
+                                    format!("Failed to fetch supported login types from homeserver {homeserver_url}.\n\nError: {e:?}")
+                                ));
                             }
                             continue
                         }
@@ -1207,7 +1220,7 @@ async fn async_main_loop(
                             }
                             Err(e) => {
                                 error!("Login failed: {e:?}");
-                                Cx::post_action(LoginAction::LoginFailure(format!("Login failed: {e:?}")));
+                                Cx::post_action(LoginAction::LoginFailure(format!("{e:?}")));
                                 enqueue_rooms_list_update(RoomsListUpdate::Status {
                                     status: format!("Login failed: {e:?}"),
                                 });
@@ -2127,15 +2140,23 @@ async fn spawn_sso_server(
     login_sender: Sender<LoginRequest>,
 ) {
     Cx::post_action(LoginAction::SsoPending(true));
-    Cx::post_action(LoginAction::Status(String::from("Opening Browser ...")));
+    Cx::post_action(LoginAction::Status {
+        title: "Opening your browser...".into(),
+        status: "Please finish logging in using your browser, and then come back to Robrix.".into(),
+    });
     let cli = Cli {
         homeserver: homeserver_url.is_empty().not().then_some(homeserver_url),
         ..Default::default()
     };
     Handle::current().spawn(async move {
-        let Ok((client, client_session)) = build_client(&cli, app_data_dir()).await else {
-            Cx::post_action(LoginAction::LoginFailure("Failed to establish client".to_string()));
-            return;
+        let (client, client_session) = match build_client(&cli, app_data_dir()).await {
+            Ok(success) => success,
+            Err(e) => {
+                Cx::post_action(LoginAction::LoginFailure(
+                    format!("Could not create client object.\n\nError: {e}")
+                ));
+                return;
+            }
         };
         let mut is_logged_in = false;
         match client
@@ -2180,8 +2201,8 @@ async fn spawn_sso_server(
             }
             Err(e) => {
                 if !is_logged_in {
-                    error!("Login by SSO failed: {e:?}");
-                    Cx::post_action(LoginAction::LoginFailure(format!("Login by SSO failed {e}")));
+                    error!("SSO Login failed: {e:?}");
+                    Cx::post_action(LoginAction::LoginFailure(format!("SSO login failed: {e}")));
                 }
             }
         }

From 922b2ce3e1a492c62a9929a345c00a93b2391d69 Mon Sep 17 00:00:00 2001
From: Kevin Boos <kevinaboos@gmail.com>
Date: Fri, 10 Jan 2025 14:01:19 -0800
Subject: [PATCH 2/5] Fix login screen and modal display.

Note: the `Cancel` button in the LoginStatusModal still doesn't do anything
---
 src/login/login_screen.rs       | 351 ++++++++++++++-------------
 src/login/login_status_modal.rs |   9 +-
 src/shared/color_tooltip.rs     |   4 +-
 src/shared/dropdown_menu.rs     | 364 ----------------------------
 src/shared/modal.rs             |  77 ------
 src/shared/popup_menu.rs        | 411 --------------------------------
 src/shared/portal.rs            | 242 -------------------
 7 files changed, 188 insertions(+), 1270 deletions(-)
 delete mode 100644 src/shared/dropdown_menu.rs
 delete mode 100644 src/shared/modal.rs
 delete mode 100644 src/shared/popup_menu.rs
 delete mode 100644 src/shared/portal.rs

diff --git a/src/login/login_screen.rs b/src/login/login_screen.rs
index 24f89266..3c5ae876 100644
--- a/src/login/login_screen.rs
+++ b/src/login/login_screen.rs
@@ -27,7 +27,7 @@ live_design! {
         visible: true,
         padding: 10,
         // margin: 10,
-        margin: { left: 15.5, right: 15.5, top: 10, bottom: 10}
+        margin: { left: 16.6, right: 16.6, top: 10, bottom: 10}
         draw_bg: {
             border_width: 0.5,
             border_color: (#6c6c6c),
@@ -48,230 +48,239 @@ live_design! {
     }
 
 
-    pub LoginScreen = {{LoginScreen}}<ScrollXYView> {
-        width: Fill, height: Fill
+    pub LoginScreen = {{LoginScreen}} {
+        width: Fill, height: Fill,
+        align: {x: 0.5, y: 0.5}
         show_bg: true,
         draw_bg: {
-            color: (COLOR_PRIMARY)
+            color: #FFF
         }
-        // Note: *do NOT* vertically center this, it will break scrolling.
-        align: {x: 0.5}
 
-        <View> {
-            width: 250, height: Fit,
+        <ScrollXYView> {
+            width: Fit, height: Fill,
+            // Note: *do NOT* vertically center this, it will break scrolling.
             align: {x: 0.5}
-            flow: Overlay,
-
+            show_bg: true,
+            draw_bg: {
+                color: (COLOR_PRIMARY)
+            }
+        
             <RoundedView> {
+                margin: 40
                 width: Fit, height: Fit
-                flow: Down
                 align: {x: 0.5, y: 0.5}
-                padding: 30
-                margin: 40
-                spacing: 15.0
+                flow: Overlay,
 
                 show_bg: true,
                 draw_bg: {
                     color: (COLOR_SECONDARY)
+                    radius: 6.0
                 }
 
-                logo_image = <Image> {
-                    fit: Smallest,
-                    width: 80
-                    source: (IMG_APP_LOGO),
-                }
-
-                title = <Label> {
+                <View> {
                     width: Fit, height: Fit
-                    margin: { bottom: 10 }
-                    draw_text: {
-                        color: (COLOR_TEXT)
-                        text_style: <TITLE_TEXT>{font_size: 16.0}
+                    flow: Down
+                    align: {x: 0.5, y: 0.5}
+                    padding: 30
+                    margin: 40
+                    spacing: 15.0
+
+                    logo_image = <Image> {
+                        fit: Smallest,
+                        width: 80
+                        source: (IMG_APP_LOGO),
                     }
-                    text: "Login to Robrix"
-                }
 
-                user_id_input = <RobrixTextInput> {
-                    width: 250, height: 40
-                    empty_message: "User ID"
-                }
+                    title = <Label> {
+                        width: Fit, height: Fit
+                        margin: { bottom: 10 }
+                        draw_text: {
+                            color: (COLOR_TEXT)
+                            text_style: <TITLE_TEXT>{font_size: 16.0}
+                        }
+                        text: "Login to Robrix"
+                    }
 
-                password_input = <RobrixTextInput> {
-                    width: 250, height: 40
-                    empty_message: "Password"
-                    draw_text: { text_style: { is_secret: true } }
-                }
+                    user_id_input = <RobrixTextInput> {
+                        width: 250, height: 40
+                        empty_message: "User ID"
+                    }
+
+                    password_input = <RobrixTextInput> {
+                        width: 250, height: 40
+                        empty_message: "Password"
+                        draw_text: { text_style: { is_secret: true } }
+                    }
 
-                <View> {
-                    width: 250, height: Fit,
-                    align: {x: 0.5}
-                    flow: Right,
                     <View> {
-                        width: 215, height: Fit,
-                        flow: Down,
+                        width: 250, height: Fit,
+                        align: {x: 0.5}
+                        flow: Right,
+                        <View> {
+                            width: 215, height: Fit,
+                            flow: Down,
 
-                        homeserver_input = <RobrixTextInput> {
-                            width: 215, height: 30,
-                            empty_message: "matrix.org"
-                            draw_text: {
-                                text_style: <TITLE_TEXT>{font_size: 10.0}
+                            homeserver_input = <RobrixTextInput> {
+                                width: 215, height: 30,
+                                empty_message: "matrix.org"
+                                draw_text: {
+                                    text_style: <TITLE_TEXT>{font_size: 10.0}
+                                }
                             }
-                        }
 
-                        <View> {
-                            width: 215,
-                            height: Fit,
-                            flow: Right,
-                            padding: {top: 3, left: 2, right: 2}
-                            spacing: 0.0,
-                            align: {x: 0.5, y: 0.5} // center horizontally and vertically
-
-                            left_line = <LineH> {
-                                draw_bg: { color: #C8C8C8 }
-                            }
+                            <View> {
+                                width: 215,
+                                height: Fit,
+                                flow: Right,
+                                padding: {top: 3, left: 2, right: 2}
+                                spacing: 0.0,
+                                align: {x: 0.5, y: 0.5} // center horizontally and vertically
 
-                            <Label> {
-                                width: Fit, height: Fit
-                                draw_text: {
-                                    color: #8C8C8C
-                                    text_style: <REGULAR_TEXT>{font_size: 9}
+                                left_line = <LineH> {
+                                    draw_bg: { color: #C8C8C8 }
+                                }
+
+                                <Label> {
+                                    width: Fit, height: Fit
+                                    draw_text: {
+                                        color: #8C8C8C
+                                        text_style: <REGULAR_TEXT>{font_size: 9}
+                                    }
+                                    text: "Homeserver URL (optional)"
+                                }
+
+                                right_line = <LineH> {
+                                    draw_bg: { color: #C8C8C8 }
                                 }
-                                text: "Homeserver URL (optional)"
                             }
 
-                            right_line = <LineH> {
-                                draw_bg: { color: #C8C8C8 }
+                        }
+                        sso_search_button = <RobrixIconButton> {
+                            width: 28, height: 28,
+                            margin: { left: 5, top: 1}
+                            draw_icon: {
+                                svg_file: (ICON_SEARCH)
                             }
+                            icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
                         }
-
                     }
-                    sso_search_button = <RobrixIconButton> {
-                        width: 28, height: 28,
-                        margin: { left: 5, top: 1}
-                        draw_icon: {
-                            svg_file: (ICON_SEARCH)
+
+                    login_button = <RobrixIconButton> {
+                        width: 250, height: 40
+                        padding: 10
+                        margin: {top: 5, bottom: 10}
+                        draw_bg: {
+                            color: (COLOR_SELECTED_PRIMARY)
                         }
-                        icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
+                        draw_text: {
+                            color: (COLOR_PRIMARY)
+                            text_style: <REGULAR_TEXT> {}
+                        }
+                        text: "Login"
                     }
-                }
 
-                login_button = <RobrixIconButton> {
-                    width: 250, height: 40
-                    padding: 10
-                    margin: {top: 5, bottom: 10}
-                    draw_bg: {
-                        color: (COLOR_SELECTED_PRIMARY)
-                    }
-                    draw_text: {
-                        color: (COLOR_PRIMARY)
-                        text_style: <REGULAR_TEXT> {}
+                    left_line = <LineH> {
+                        margin: {bottom: -5}
+                        draw_bg: { color: #C8C8C8 }
                     }
-                    text: "Login"
-                }
-
-                left_line = <LineH> {
-                    margin: {bottom: -5}
-                    draw_bg: { color: #C8C8C8 }
-                }
-                <Label> {
-                    width: Fit, height: Fit
-                    draw_text: {
-                        color: (COLOR_TEXT)
-                        text_style: <TITLE_TEXT>{font_size: 11.0}
+                    <Label> {
+                        width: Fit, height: Fit
+                        draw_text: {
+                            color: (COLOR_TEXT)
+                            text_style: <TITLE_TEXT>{font_size: 11.0}
+                        }
+                        text: "Or, login with an SSO provider:"
                     }
-                    text: "Or, login with an SSO provider:"
-                }
 
-                sso_view = <View> {
-                    align: {x: 0.5}
-                    width: 250, height: Fit,
-                    margin: {left: 5, right: 5} // make the inner view 240 pixels wide
-                    flow: RightWrap,
-                    apple_button = <SsoButton> {
-                        image = <SsoImage> {
-                            source: dep("crate://self/resources/img/apple.png")
+                    sso_view = <View> {
+                        align: {x: 0.5}
+                        width: 250, height: Fit,
+                        margin: {left: 5, right: 5} // make the inner view 240 pixels wide
+                        flow: RightWrap,
+                        apple_button = <SsoButton> {
+                            image = <SsoImage> {
+                                source: dep("crate://self/resources/img/apple.png")
+                            }
                         }
-                    }
-                    facebook_button = <SsoButton> {
-                        image = <SsoImage> {
-                            source: dep("crate://self/resources/img/facebook.png")
+                        facebook_button = <SsoButton> {
+                            image = <SsoImage> {
+                                source: dep("crate://self/resources/img/facebook.png")
+                            }
                         }
-                    }
-                    github_button = <SsoButton> {
-                        image = <SsoImage> {
-                            source: dep("crate://self/resources/img/github.png")
+                        github_button = <SsoButton> {
+                            image = <SsoImage> {
+                                source: dep("crate://self/resources/img/github.png")
+                            }
                         }
-                    }
-                    github_button = <SsoButton> {
-                        image = <SsoImage> {
-                            source: dep("crate://self/resources/img/github.png")
+                        github_button = <SsoButton> {
+                            image = <SsoImage> {
+                                source: dep("crate://self/resources/img/github.png")
+                            }
                         }
-                    }
-                    gitlab_button = <SsoButton> {
-                        image = <SsoImage> {
-                            source: dep("crate://self/resources/img/gitlab.png")
+                        gitlab_button = <SsoButton> {
+                            image = <SsoImage> {
+                                source: dep("crate://self/resources/img/gitlab.png")
+                            }
                         }
-                    }
-                    google_button = <SsoButton> {
-                        image = <SsoImage> {
-                            source: dep("crate://self/resources/img/google.png")
+                        google_button = <SsoButton> {
+                            image = <SsoImage> {
+                                source: dep("crate://self/resources/img/google.png")
+                            }
                         }
                     }
-                }
 
-                <View> {
-                    width: 215,
-                    height: Fit,
-                    flow: Right,
-                    padding: 3,
-                    spacing: 0.0,
-                    align: {x: 0.5, y: 0.5} // center horizontally and vertically
+                    <View> {
+                        width: 250,
+                        height: Fit,
+                        flow: Right,
+                        // padding: 3,
+                        spacing: 0.0,
+                        align: {x: 0.5, y: 0.5} // center horizontally and vertically
+
+                        left_line = <LineH> {
+                            draw_bg: { color: #C8C8C8 }
+                        }
 
-                    left_line = <LineH> {
-                        draw_bg: { color: #C8C8C8 }
-                    }
+                        <Label> {
+                            width: Fit, height: Fit
+                            padding: {left: 1, right: 1}
+                            draw_text: {
+                                color: #x6c6c6c
+                                text_style: <REGULAR_TEXT>{}
+                            }
+                            text: "Don't have an account?"
+                        }
 
-                    <Label> {
+                        right_line = <LineH> {
+                            draw_bg: { color: #C8C8C8 }
+                        }
+                    }
+                    
+                    signup_button = <RobrixIconButton> {
                         width: Fit, height: Fit
+                        padding: {left: 15, right: 15, top: 10, bottom: 10}
+                        margin: {bottom: 5}
+                        draw_bg: {
+                            color: (COLOR_SELECTED_PRIMARY)
+                        }
                         draw_text: {
-                            color: #x6c6c6c
-                            text_style: <REGULAR_TEXT>{}
+                            color: (COLOR_PRIMARY)
+                            text_style: <REGULAR_TEXT> {}
                         }
-                        text: "Don't have an account?"
-                    }
 
-                    right_line = <LineH> {
-                        draw_bg: { color: #C8C8C8 }
-                    }
-                }
-                
-                signup_button = <Button> {
-                    width: Fit, height: Fit
-                    margin: {top: -10}
-                    padding: {left: 15, right: 15, top: 10, bottom: 10}
-                    draw_text: {
-                        // color: (MESSAGE_TEXT_COLOR)
-                        fn get_color(self) -> vec4 {
-                            return MESSAGE_TEXT_COLOR
-                        }
-                        text_style: <REGULAR_TEXT>{}
-                    }
-                    draw_bg: {
-                        bodybottom: #DDDDDD
+                        text: "Sign up here"
                     }
-
-                    text: "Sign up here"
                 }
-            }
 
-            // The modal that pops up to display login status messages,
-            // such as when the user is logging in or when there is an error.
-            login_status_modal = <Modal> {
-                height: Fit,
-                align: {x: 0.5, y: 0.5},
+                // The modal that pops up to display login status messages,
+                // such as when the user is logging in or when there is an error.
+                login_status_modal = <Modal> {
+                    // width: Fit, height: Fit,
+                    // align: {x: 0.5, y: 0.5},
 
-                content: {
-                    login_status_modal_inner = <LoginStatusModal> {}
+                    content: {
+                        login_status_modal_inner = <LoginStatusModal> {}
+                    }
                 }
             }
         }
diff --git a/src/login/login_status_modal.rs b/src/login/login_status_modal.rs
index 110beadf..2c539b1d 100644
--- a/src/login/login_status_modal.rs
+++ b/src/login/login_status_modal.rs
@@ -8,12 +8,14 @@ live_design! {
     use crate::shared::icon_button::RobrixIconButton;
 
     pub LoginStatusModal = {{LoginStatusModal}} {
-        width: Fit
+        width: Fit,
         height: Fit
         align: {x: 0.5}
 
         <RoundedView> {
-            width: 250,
+            // Halfway between the login screen background (320 px wide)
+            // and the login screen's buttons/content (250 px wide).
+            width: ((320+250)/2),
             height: Fit,
             flow: Down,
             align: {x: 0.5}
@@ -44,6 +46,7 @@ live_design! {
 
             status = <Label> {
                 width: Fill
+                margin: {top: 5, bottom: 5}
                 draw_text: {
                     text_style: <REGULAR_TEXT>{
                         font_size: 11.5,
@@ -59,7 +62,7 @@ live_design! {
                 height: Fit,
                 flow: Right
                 align: {x: 1.0}
-                margin: {top: 5, bottom: 10}
+                margin: {top: 10}
 
                 button = <RobrixIconButton> {
                     width: Fit, height: Fit
diff --git a/src/shared/color_tooltip.rs b/src/shared/color_tooltip.rs
index 9426f40a..098f7e17 100644
--- a/src/shared/color_tooltip.rs
+++ b/src/shared/color_tooltip.rs
@@ -18,8 +18,8 @@ live_design! {
             }
         }
 
-        content : <View> {
-            width: 300
+        content: <View> {
+            width: 250
             height: Fit
             visible: false,
             padding: 2.0
diff --git a/src/shared/dropdown_menu.rs b/src/shared/dropdown_menu.rs
deleted file mode 100644
index 8b13ad04..00000000
--- a/src/shared/dropdown_menu.rs
+++ /dev/null
@@ -1,364 +0,0 @@
-use std::cell::RefCell;
-use std::rc::Rc;
-
-use makepad_widgets::makepad_derive_widget::*;
-use makepad_widgets::makepad_draw::*;
-use makepad_widgets::widget::*;
-
-use crate::shared::popup_menu::*;
-
-live_design! {
-    import makepad_draw::shader::std::*;
-    import makepad_widgets::theme_desktop_dark::*;
-    import crate::shared::popup_menu::*;
-
-    DropDown = {{WechatDropDown}} {
-        width: Fit,
-        height: Fit,
-        margin: {left: 1.0, right: 1.0, top: 1.0, bottom: 1.0},
-        align: {x: 0., y: 0.},
-        padding: {left: 5.0, top: 5.0, right: 4.0, bottom: 5.0}
-
-        draw_bg: {
-            fn pixel(self) -> vec4 {
-                let sdf = Sdf2d::viewport(self.pos * self.rect_size);
-                return sdf.result
-            }
-        }
-
-        draw_icon: {
-            instance hover: 0.0
-            instance pressed: 0.0
-            fn get_color(self) -> vec4 {
-                return mix(
-                    mix(
-                        #9,
-                        #c,
-                        self.hover
-                    ),
-                    #9,
-                    self.pressed
-                )
-            }
-        }
-
-        icon_walk: { width: 20., height: Fit}
-
-        popup_menu: <PopupMenu> {
-        }
-
-        popup_shift: vec2(-6.0,4.0)
-
-        selected_item: -1
-        animator: {
-            hover = {
-                default: off,
-                off = {
-                    from: {all: Forward {duration: 0.1}}
-                    apply: {
-                        draw_icon: {pressed: 0.0, hover: 0.0}
-                    }
-                }
-
-                on = {
-                    from: {
-                        all: Forward {duration: 0.1}
-                        pressed: Forward {duration: 0.01}
-                    }
-                    apply: {
-                        draw_icon: {pressed: 0.0, hover: [{time: 0.0, value: 1.0}],}
-                    }
-                }
-
-                pressed = {
-                    from: {all: Forward {duration: 0.2}}
-                    apply: {
-                        draw_icon: {pressed: [{time: 0.0, value: 1.0}], hover: 1.0,}
-                    }
-                }
-            }
-        }
-    }
-}
-
-#[derive(Live, Widget)]
-pub struct WechatDropDown {
-    #[animator]
-    animator: Animator,
-
-    #[walk]
-    walk: Walk,
-    #[layout]
-    layout: Layout,
-
-    #[live] #[redraw]
-    draw_bg: DrawQuad,
-    #[live]
-    draw_icon: DrawIcon,
-    #[live]
-    icon_walk: Walk,
-
-    #[live]
-    bind: String,
-    #[live]
-    bind_enum: String,
-
-    #[live]
-    popup_menu: Option<LivePtr>,
-
-    #[live]
-    labels: Vec<String>,
-    #[live]
-    values: Vec<LiveValue>,
-    #[live]
-    icons: Vec<LiveDependency>,
-
-    #[live]
-    popup_shift: DVec2,
-
-    #[rust]
-    is_open: bool,
-
-    #[live]
-    selected_item: usize,
-}
-
-impl LiveHook for WechatDropDown {
-    fn after_apply_from(&mut self, cx: &mut Cx, apply: &mut Apply) {
-        if self.popup_menu.is_none() || !apply.from.is_from_doc() {
-            return;
-        }
-        let global = cx.global::<PopupMenuGlobal>().clone();
-        let mut map = global.map.borrow_mut();
-
-        // when live styling clean up old style references
-        map.retain(|k, _| cx.live_registry.borrow().generation_valid(*k));
-
-        let list_box = self.popup_menu.unwrap();
-        map.get_or_insert(cx, list_box, |cx| {
-            PopupMenu::new_from_ptr(cx, Some(list_box))
-        });
-    }
-}
-#[derive(Clone, DefaultNone, Debug)]
-pub enum WechatDropDownAction {
-    Select(usize, LiveValue),
-    None,
-}
-
-#[derive(Default, Clone)]
-struct PopupMenuGlobal {
-    map: Rc<RefCell<ComponentMap<LivePtr, PopupMenu>>>,
-}
-
-impl WechatDropDown {
-    pub fn toggle_open(&mut self, cx: &mut Cx) {
-        if self.is_open {
-            self.set_closed(cx);
-        } else {
-            self.set_open(cx);
-        }
-    }
-
-    pub fn set_open(&mut self, cx: &mut Cx) {
-        self.is_open = true;
-        self.draw_bg.redraw(cx);
-        let global = cx.global::<PopupMenuGlobal>().clone();
-        let mut map = global.map.borrow_mut();
-        let lb = map.get_mut(&self.popup_menu.unwrap()).unwrap();
-        let node_id = LiveId(self.selected_item as u64).into();
-        lb.init_select_item(node_id);
-        cx.sweep_lock(self.draw_bg.area());
-    }
-
-    pub fn set_closed(&mut self, cx: &mut Cx) {
-        self.is_open = false;
-        self.draw_bg.redraw(cx);
-        cx.sweep_unlock(self.draw_bg.area());
-    }
-}
-
-// It is named WechatDropDown because DropDown is already a widget in makepad_widgets
-impl Widget for WechatDropDown {
-    fn widget_to_data(
-        &self,
-        _cx: &mut Cx,
-        actions: &Actions,
-        nodes: &mut LiveNodeVec,
-        path: &[LiveId],
-    ) -> bool {
-        match actions.find_widget_action(self.widget_uid()).cast() {
-            WechatDropDownAction::Select(_, value) => {
-                nodes.write_field_value(path, value.clone());
-                true
-            }
-            _ => false,
-        }
-    }
-
-    fn data_to_widget(&mut self, cx: &mut Cx, nodes: &[LiveNode], path: &[LiveId]) {
-        if let Some(value) = nodes.read_field_value(path) {
-            if let Some(index) = self.values.iter().position(|v| v == value) {
-                if self.selected_item != index {
-                    self.selected_item = index;
-                    self.redraw(cx);
-                }
-            } else {
-                // error!("Value not in values list {:?}", value);
-            }
-        }
-    }
-
-    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
-        self.animator_handle_event(cx, event);
-        let uid = self.widget_uid();
-
-        if self.is_open && self.popup_menu.is_some() {
-            let global = cx.global::<PopupMenuGlobal>().clone();
-            let mut map = global.map.borrow_mut();
-            let menu = map.get_mut(&self.popup_menu.unwrap()).unwrap();
-            let mut close = false;
-            menu.handle_event_with(
-                cx,
-                event,
-                self.draw_bg.area(),
-                &mut |cx, action| if let PopupMenuAction::WasSelected(node_id) = action {
-                    self.selected_item = node_id.0.0 as usize;
-                    cx.widget_action(
-                        uid,
-                        &scope.path,
-                        WechatDropDownAction::Select(
-                            self.selected_item,
-                            self.values
-                                .get(self.selected_item)
-                                .cloned()
-                                .unwrap_or(LiveValue::None)
-                            )
-                    );
-                    self.draw_bg.redraw(cx);
-                    close = true;
-                },
-            );
-            if close {
-                self.set_closed(cx);
-            }
-
-            // check if we touch outside of the popup menu
-            if let Event::MouseDown(e) = event {
-                if !menu.menu_contains_pos(cx, e.abs) {
-                    self.set_closed(cx);
-                    self.animator_play(cx, id!(hover.off));
-                }
-            }
-        }
-        // TODO: close on clicking outside of the popup menu
-        match event.hits_with_sweep_area(cx, self.draw_bg.area(), self.draw_bg.area()) {
-            Hit::KeyFocusLost(_) => {
-                self.set_closed(cx);
-                self.animator_play(cx, id!(hover.off));
-                self.draw_bg.redraw(cx);
-            }
-            Hit::KeyDown(ke) => match ke.key_code {
-                KeyCode::ArrowUp => {
-                    if self.selected_item > 0 {
-                        self.selected_item -= 1;
-                        cx.widget_action(
-                            uid,
-                            &scope.path,
-                            WechatDropDownAction::Select(
-                                self.selected_item,
-                                self.values
-                                    .get(self.selected_item)
-                                    .cloned()
-                                    .unwrap_or(LiveValue::None)
-                            )
-                        );
-                        self.set_closed(cx);
-                        self.draw_bg.redraw(cx);
-                    }
-                }
-                KeyCode::ArrowDown => {
-                    if !self.values.is_empty() && self.selected_item < self.values.len() - 1 {
-                        self.selected_item += 1;
-                        cx.widget_action(
-                            uid,
-                            &scope.path,
-                            WechatDropDownAction::Select(
-                                self.selected_item,
-                                self.values
-                                    .get(self.selected_item)
-                                    .cloned()
-                                    .unwrap_or(LiveValue::None)
-                            )
-                        );
-                        self.set_closed(cx);
-                        self.draw_bg.redraw(cx);
-                    }
-                }
-                _ => (),
-            },
-            Hit::FingerDown(_fe) => {
-                cx.set_key_focus(self.draw_bg.area());
-                self.toggle_open(cx);
-                self.animator_play(cx, id!(hover.pressed));
-            }
-            Hit::FingerHoverIn(_) => {
-                cx.set_cursor(MouseCursor::Hand);
-                self.animator_play(cx, id!(hover.on));
-            }
-            Hit::FingerHoverOut(_) => {
-                self.animator_play(cx, id!(hover.off));
-            }
-            Hit::FingerUp(fe) => {
-                if fe.is_over {
-                    if fe.device.has_hovers() {
-                        self.animator_play(cx, id!(hover.on));
-                    }
-                } else {
-                    self.animator_play(cx, id!(hover.off));
-                }
-            }
-            _ => (),
-        };
-    }
-
-    fn draw_walk(&mut self, cx: &mut Cx2d, _scope: &mut Scope, walk: Walk) -> DrawStep {
-        // cx.clear_sweep_lock(self.draw_bg.area());
-
-        self.draw_bg.begin(cx, walk, self.layout);
-        //let start_pos = cx.turtle().rect().pos;
-        self.draw_icon.draw_walk(cx, self.icon_walk);
-        self.draw_bg.end(cx);
-
-        cx.add_nav_stop(self.draw_bg.area(), NavRole::DropDown, Margin::default());
-
-        if self.is_open && self.popup_menu.is_some() {
-            // cx.set_sweep_lock(self.draw_bg.area());
-            let global = cx.global::<PopupMenuGlobal>().clone();
-            let mut map = global.map.borrow_mut();
-            let popup_menu = map.get_mut(&self.popup_menu.unwrap()).unwrap();
-
-            popup_menu.begin(cx);
-
-            for (i, item) in self.labels.iter().enumerate() {
-                let node_id = LiveId(i as u64).into();
-                popup_menu.draw_item(cx, node_id, item, self.icons[i].clone());
-            }
-
-            popup_menu.end(cx, self.draw_bg.area());
-        }
-
-        DrawStep::done()
-    }
-}
-
-impl WechatDropDownRef {
-    pub fn item_clicked(&mut self, item_id: &[LiveId], actions: &Actions) -> bool {
-        if let Some(item) = actions.find_widget_action(self.widget_uid()) {
-            if let WechatDropDownAction::Select(_id, value) = item.cast() {
-                return LiveValue::Bool(true) == value.enum_eq(item_id)
-            }
-        }
-        return false
-    }
-}
diff --git a/src/shared/modal.rs b/src/shared/modal.rs
deleted file mode 100644
index 372fa74f..00000000
--- a/src/shared/modal.rs
+++ /dev/null
@@ -1,77 +0,0 @@
-use makepad_widgets::*;
-
-use super::portal::PortalAction;
-
-live_design! {
-    import makepad_widgets::base::*;
-    import makepad_widgets::theme_desktop_dark::*;
-
-    import crate::shared::styles::*;
-    import crate::shared::portal::*;
-
-    Modal = {{Modal}} {
-        width: Fill
-        height: Fill
-        flow: Overlay
-        align: {x: 0.5, y: 0.5}
-
-        bg_view = <View> {
-            width: Fill
-            height: Fill
-            show_bg: true
-            draw_bg: {
-                fn pixel(self) -> vec4 {
-                    return vec4(0., 0., 0., 0.7)
-                }
-            }
-        }
-
-        content = <View> {
-            flow: Overlay
-            width: Fit
-            height: Fit
-        }
-    }
-}
-
-#[derive(Live, LiveHook, LiveRegisterWidget, WidgetRef)]
-pub struct Modal {
-    #[deref]
-    view: View,
-}
-
-impl Widget for Modal {
-    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
-        let widget_uid = self.widget_uid();
-
-        self.view(id!(content)).handle_event(cx, event, scope);
-
-        let content_rect = self.view(id!(content)).area().rect(cx);
-
-        // Check if there was a click outside of the content (bg), then close if true.
-        if let Hit::FingerUp(fe) = event.hits_with_capture_overload(cx, self.view.area(), true) {
-            if !content_rect.contains(fe.abs) {
-                cx.widget_action(widget_uid, &scope.path, PortalAction::Close);
-            }
-        }
-    }
-
-    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
-        self.view
-            .draw_walk(cx, scope, walk.with_abs_pos(DVec2 { x: 0., y: 0. }))
-    }
-}
-
-impl WidgetNode for Modal {
-    fn walk(&mut self, cx: &mut Cx) -> Walk {
-        self.view.walk(cx)
-    }
-
-    fn redraw(&mut self, cx: &mut Cx) {
-        self.view.redraw(cx);
-    }
-
-    fn find_widgets(&self, path: &[LiveId], cached: WidgetCache, results: &mut WidgetSet) {
-        self.view.find_widgets(path, cached, results);
-    }
-}
diff --git a/src/shared/popup_menu.rs b/src/shared/popup_menu.rs
deleted file mode 100644
index 58cff4f5..00000000
--- a/src/shared/popup_menu.rs
+++ /dev/null
@@ -1,411 +0,0 @@
-use makepad_widgets::makepad_derive_widget::*;
-use makepad_widgets::makepad_draw::*;
-use makepad_widgets::widget::*;
-
-live_design! {
-    import makepad_draw::shader::std::*;
-    import makepad_widgets::theme_desktop_dark::*;
-    import crate::shared::styles::*;
-
-    MenuItem = {{MenuItem}} {
-        align: {y: 0.5},
-        padding: {left: 5., top: 10., bottom: 10., right: 5.},
-        spacing: 5.,
-        width: Fill,
-        height: Fit
-
-        draw_bg: {
-            instance color: #4
-            instance color_selected: #5
-            instance border_radius: 4.0
-
-            instance selected: 0.0
-            instance hover: 0.0
-    
-            fn pixel(self) -> vec4 {
-                let sdf = Sdf2d::viewport(self.pos * self.rect_size)
-                sdf.box(
-                    1.0,
-                    1.0,
-                    self.rect_size.x,
-                    self.rect_size.y,
-                    self.border_radius
-                )
-                sdf.fill_keep(mix(self.color, self.color_selected, self.hover))
-                return sdf.result;
-            }
-        }
-    
-        draw_name: {
-            text_style: <REGULAR_TEXT>{font_size: 9},
-            instance selected: 0.0
-            instance hover: 0.0
-    
-            fn get_color(self) -> vec4 {
-                return mix(
-                    mix(
-                        THEME_COLOR_TEXT_DEFAULT,
-                        THEME_COLOR_TEXT_SELECTED,
-                        self.selected
-                    ),
-                    THEME_COLOR_TEXT_HOVER,
-                    self.hover
-                )
-            }
-        }
-
-        icon_walk: {width: 15., height: Fit, margin: {bottom: 3.}}
-        draw_icon: {
-            color: #f2f2f2;
-            brightness: 0.8;
-        }
-
-        animator: {
-            hover = {
-                default: off
-                off = {
-                    from: {all: Snap}
-                    apply: {
-                        draw_bg: {hover: 0.0}
-                        draw_name: {hover: 0.0}
-                    }
-                }
-                on = {
-                    cursor: Hand
-                    from: {all: Snap}
-                    apply: {
-                        draw_bg: {hover: 1.0}
-                        draw_name: {hover: 1.0}
-                    }
-                }
-            }
-
-            select = {
-                default: off
-                off = {
-                    from: {all: Snap}
-                    apply: {
-                        draw_bg: {selected: 0.0,}
-                        draw_name: {selected: 0.0,}
-                    }
-                }
-                on = {
-                    from: {all: Snap}
-                    apply: {
-                        draw_bg: {selected: 1.0,}
-                        draw_name: {selected: 1.0,}
-                    }
-                }
-            }
-        }
-        indent_width: 10.0
-    }
-
-    PopupMenu = {{PopupMenu}} {
-        menu_item: <MenuItem> {}
-        flow: Down,
-        padding: 5.,
-        width: 140.,
-        height: Fit,
-
-        icon_walk: {width: 20., height: Fit}
-        draw_icon:{
-            instance hover: 0.0
-            instance pressed: 0.0
-            fn get_color(self) -> vec4 {
-                return mix(
-                    mix(
-                        #9,
-                        #c,
-                        self.hover
-                    ),
-                    #9,
-                    self.pressed
-                )
-            }
-        }
-
-        draw_bg: {
-            instance color: #4
-            instance border_width: 0.0,
-            instance border_color: #4,
-            instance border_radius: 4.0
-
-            fn get_color(self) -> vec4 {
-                return self.color
-            }
-
-            fn get_border_color(self) -> vec4 {
-                return self.border_color
-            }
-
-            fn pixel(self) -> vec4 {
-
-                let sdf = Sdf2d::viewport(self.pos * self.rect_size)
-                // sdf.blur = 18.0;
-                sdf.box(
-                    self.border_width,
-                    self.border_width,
-                    self.rect_size.x - (self.border_width * 2.0),
-                    self.rect_size.y - (self.border_width * 2.0),
-                    self.border_radius
-                )
-                sdf.fill_keep(self.get_color())
-                return sdf.result;
-            }
-        }
-    }
-}
-
-#[derive(Live, LiveRegister, WidgetWrap)]
-pub struct PopupMenu {
-    #[live]
-    draw_list: DrawList2d,
-
-    #[live]
-    menu_item: Option<LivePtr>,
-
-    #[live] #[redraw]
-    draw_bg: DrawQuad,
-    #[live] #[redraw]
-    draw_icon: DrawIcon,
-    #[live]
-    icon_walk: Walk,
-
-    #[layout]
-    layout: Layout,
-    #[walk]
-    walk: Walk,
-
-    #[live]
-    labels: Vec<String>,
-    #[live]
-    values: Vec<LiveValue>,
-
-    #[live]
-    items: Vec<String>,
-    #[rust]
-    menu_items: ComponentMap<MenuItemId, MenuItem>,
-    #[rust]
-    init_select_item: Option<MenuItemId>,
-
-    #[rust]
-    first_tap: bool,
-    #[rust]
-    count: usize,
-}
-
-impl LiveHook for PopupMenu {
-    fn after_apply(&mut self, cx: &mut Cx, apply: &mut Apply, index: usize, nodes: &[LiveNode]) {
-        if let Some(index) = nodes.child_by_name(index, live_id!(list_node).as_field()) {
-            for (_, node) in self.menu_items.iter_mut() {
-                node.apply(cx, apply, index, nodes);
-            }
-        }
-        self.draw_list.redraw(cx);
-    }
-}
-
-impl Widget for PopupMenu {
-    fn handle_event(&mut self, _cx: &mut Cx, _event: &Event, _scope: &mut Scope) {
-    }
-
-    fn draw_walk(&mut self, cx: &mut Cx2d, _scope: &mut Scope, walk: Walk) -> DrawStep {
-        self.draw_bg.begin(cx, walk, self.layout);
-        self.draw_icon.draw_walk(cx, self.icon_walk);
-        self.draw_bg.end(cx);
-        DrawStep::done()
-    }
-}
-
-impl PopupMenu {
-    pub fn menu_contains_pos(&self, cx: &mut Cx, pos: DVec2) -> bool {
-        self.draw_bg.area().clipped_rect(cx).contains(pos)
-    }
-
-    pub fn begin(&mut self, cx: &mut Cx2d) {
-        self.draw_list.begin_overlay_reuse(cx);
-
-        cx.begin_pass_sized_turtle(Layout::flow_down());
-
-        self.draw_bg.begin(cx, self.walk, self.layout);
-        self.count = 0;
-    }
-
-    pub fn end(&mut self, cx: &mut Cx2d, shift_area: Area) {
-        self.draw_bg.end(cx);
-        let area = self.draw_bg.area().rect(cx);
-        let shift = DVec2 {
-            x: -area.size.x + (shift_area.rect(cx).size.x * 0.7),
-            y: 30.,
-        };
-
-        cx.end_pass_sized_turtle_with_shift(shift_area, shift);
-        self.draw_list.end(cx);
-
-        self.menu_items.retain_visible();
-        if let Some(init_select_item) = self.init_select_item.take() {
-            self.select_item_state(cx, init_select_item);
-        }
-    }
-
-    pub fn draw_item(
-        &mut self,
-        cx: &mut Cx2d,
-        item_id: MenuItemId,
-        label: &str,
-        icon: LiveDependency,
-    ) {
-        self.count += 1;
-
-        let menu_item = self.menu_item;
-        let menu_item = self
-            .menu_items
-            .get_or_insert(cx, item_id, |cx| MenuItem::new_from_ptr(cx, menu_item));
-        menu_item.draw_item(cx, label, icon);
-    }
-
-    pub fn init_select_item(&mut self, which_id: MenuItemId) {
-        self.init_select_item = Some(which_id);
-        self.first_tap = true;
-    }
-
-    fn select_item_state(&mut self, cx: &mut Cx, which_id: MenuItemId) {
-        for (id, item) in &mut *self.menu_items {
-            if *id == which_id {
-                item.animator_cut(cx, id!(select.on));
-                item.animator_cut(cx, id!(hover.on));
-            } else {
-                item.animator_cut(cx, id!(select.off));
-                item.animator_cut(cx, id!(hover.off));
-            }
-        }
-    }
-
-    pub fn handle_event_with(
-        &mut self,
-        cx: &mut Cx,
-        event: &Event,
-        sweep_area: Area,
-        dispatch_action: &mut dyn FnMut(&mut Cx, PopupMenuAction),
-    ) {
-        let mut actions = Vec::new();
-        for (item_id, node) in self.menu_items.iter_mut() {
-            node.handle_event_with(cx, event, sweep_area, &mut |_, e| {
-                actions.push((*item_id, e))
-            });
-        }
-
-        for (node_id, action) in actions {
-            match action {
-                MenuItemAction::WasSweeped => {
-                    self.select_item_state(cx, node_id);
-                    dispatch_action(cx, PopupMenuAction::WasSweeped(node_id));
-                }
-                MenuItemAction::WasSelected => {
-                    self.select_item_state(cx, node_id);
-                    dispatch_action(cx, PopupMenuAction::WasSelected(node_id));
-                }
-                _ => (),
-            }
-        }
-    }
-}
-
-#[derive(Live, LiveHook, LiveRegister, WidgetWrap)]
-pub struct MenuItem {
-    #[layout]
-    layout: Layout,
-    #[walk]
-    walk: Walk,
-
-    #[live] #[redraw]
-    draw_bg: DrawQuad,
-    #[live] #[redraw]
-    draw_name: DrawText,
-
-    #[live] #[redraw]
-    draw_icon: DrawIcon,
-    #[live]
-    icon_walk: Walk,
-
-    #[live]
-    indent_width: f32,
-
-    #[animator]
-    animator: Animator,
-    #[live]
-    opened: f32,
-    #[live]
-    hover: f32,
-    #[live]
-    selected: f32,
-}
-
-#[derive(Default, Clone, Debug)]
-pub enum MenuItemAction {
-    WasSweeped,
-    WasSelected,
-    #[default]
-    None,
-}
-
-#[derive(Clone, DefaultNone, Debug)]
-pub enum PopupMenuAction {
-    WasSweeped(MenuItemId),
-    WasSelected(MenuItemId),
-    None,
-}
-
-#[derive(Clone, Debug, Default, Eq, Hash, Copy, PartialEq, FromLiveId)]
-pub struct MenuItemId(pub LiveId);
-
-impl MenuItem {
-    pub fn draw_item(&mut self, cx: &mut Cx2d, label: &str, icon: LiveDependency) {
-        self.draw_bg.begin(cx, self.walk, self.layout);
-        self.draw_icon.svg_file = icon;
-        self.draw_icon.draw_walk(cx, self.icon_walk);
-        self.draw_name
-            .draw_walk(cx, Walk::fit(), Align { x: 0., y: 0.5 }, label);
-        self.draw_bg.end(cx);
-    }
-
-    pub fn handle_event_with(
-        &mut self,
-        cx: &mut Cx,
-        event: &Event,
-        sweep_area: Area,
-        dispatch_action: &mut dyn FnMut(&mut Cx, MenuItemAction),
-    ) {
-        if self.animator_handle_event(cx, event).must_redraw() {
-            self.draw_bg.area().redraw(cx);
-        }
-
-        match event.hits_with_options(
-            cx,
-            self.draw_bg.area(),
-            HitOptions::new().with_sweep_area(sweep_area),
-        ) {
-            Hit::FingerHoverIn(_) => {
-                self.animator_play(cx, id!(hover.on));
-            }
-            Hit::FingerHoverOut(_) => {
-                self.animator_play(cx, id!(hover.off));
-            }
-            Hit::FingerDown(_) => {
-                dispatch_action(cx, MenuItemAction::WasSweeped);
-                self.animator_play(cx, id!(hover.on));
-                self.animator_play(cx, id!(select.on));
-            }
-            Hit::FingerUp(se) => {
-                if !se.is_sweep {
-                    dispatch_action(cx, MenuItemAction::WasSelected);
-                } else {
-                    self.animator_play(cx, id!(hover.off));
-                    self.animator_play(cx, id!(select.off));
-                }
-            }
-            _ => {}
-        }
-    }
-}
diff --git a/src/shared/portal.rs b/src/shared/portal.rs
deleted file mode 100644
index e5cfebc2..00000000
--- a/src/shared/portal.rs
+++ /dev/null
@@ -1,242 +0,0 @@
-use std::fmt::Debug;
-
-use makepad_widgets::*;
-
-live_design! {
-    import makepad_widgets::base::*;
-    import makepad_widgets::theme_desktop_dark::*;
-
-    import crate::shared::styles::*;
-
-    PortalView = {{PortalView}} {
-        width: Fill
-        height: Fill
-        flow: Overlay
-    }
-
-    Portal = {{Portal}} {
-        width: Fill
-        height: Fill
-
-        flow: Right
-    }
-}
-
-#[derive(Live, LiveHook, LiveRegisterWidget, WidgetRef)]
-pub struct PortalView {
-    #[deref]
-    view: View,
-}
-
-impl Widget for PortalView {
-    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
-        self.view.handle_event(cx, event, scope);
-    }
-
-    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
-        self.view
-            .draw_walk(cx, scope, walk.with_abs_pos(DVec2 { x: 0., y: 0. }))
-    }
-}
-
-impl WidgetNode for PortalView {
-    fn walk(&mut self, cx: &mut Cx) -> Walk {
-        self.view.walk(cx)
-    }
-
-    fn redraw(&mut self, cx: &mut Cx) {
-        self.view.redraw(cx);
-    }
-
-    fn find_widgets(&self, path: &[LiveId], cached: WidgetCache, results: &mut WidgetSet) {
-        self.view.find_widgets(path, cached, results);
-    }
-}
-
-impl PortalView {
-    pub fn show(&mut self, cx: &mut Cx) {
-        self.apply_over(cx, live! {visible: true});
-        self.redraw(cx);
-    }
-
-    pub fn hide(&mut self, cx: &mut Cx) {
-        self.apply_over(cx, live! {visible: false});
-        self.redraw(cx);
-    }
-
-    pub fn is_showing(&self) -> bool {
-        self.view.is_visible()
-    }
-}
-
-impl PortalViewRef {
-    pub fn show(&mut self, cx: &mut Cx) {
-        if let Some(mut inner) = self.borrow_mut() {
-            inner.show(cx);
-        }
-    }
-
-    pub fn hide(&mut self, cx: &mut Cx) {
-        if let Some(mut inner) = self.borrow_mut() {
-            inner.hide(cx)
-        }
-    }
-
-    pub fn is_showing(&self) -> bool {
-        if let Some(inner) = self.borrow() {
-            inner.is_showing()
-        } else {
-            false
-        }
-    }
-}
-
-#[derive(Clone, DefaultNone, Eq, PartialEq, Debug)]
-pub enum PortalAction {
-    ShowPortalView(LiveId),
-    Close,
-    None,
-}
-
-#[derive(Default)]
-enum ActivePortalView {
-    #[default]
-    None,
-    Active(LiveId),
-}
-
-#[derive(Live, LiveRegisterWidget, WidgetRef)]
-pub struct Portal {
-    #[deref]
-    view: View,
-
-    #[rust]
-    active_portal_view: ActivePortalView,
-}
-
-impl Widget for Portal {
-    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
-        if let Some(widget_ref) = self.get_active_portal_view(cx) {
-            widget_ref.handle_event(cx, event, scope);
-        }
-
-        self.widget_match_event(cx, event, scope);
-    }
-
-    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
-        if let Some(widget_ref) = self.get_active_portal_view(cx) {
-            widget_ref.draw_walk(cx, scope, walk)?;
-        }
-
-        DrawStep::done()
-    }
-}
-
-impl LiveHook for Portal {
-    fn after_new_from_doc(&mut self, _cx: &mut Cx) {}
-}
-
-impl WidgetNode for Portal {
-    fn walk(&mut self, cx: &mut Cx) -> Walk {
-        self.view.walk(cx)
-    }
-
-    fn redraw(&mut self, cx: &mut Cx) {
-        if let Some(widget_ref) = self.get_active_portal_view(cx) {
-            widget_ref.redraw(cx);
-        }
-    }
-
-    fn find_widgets(&self, path: &[LiveId], cached: WidgetCache, results: &mut WidgetSet) {
-        self.view.find_widgets(path, cached, results);
-    }
-}
-
-impl WidgetMatchEvent for Portal {
-    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, _scope: &mut Scope) {
-        for action in actions {
-            match action.as_widget_action().cast::<PortalAction>() {
-                PortalAction::ShowPortalView(portal_view_id) => {
-                    if let Err(err) = self.show_portal_view_by_id(cx, portal_view_id) {
-                        error!("{err}")
-                    }
-                }
-                PortalAction::Close => {
-                    self.close(cx);
-                }
-                PortalAction::None => {}
-            }
-        }
-    }
-}
-
-impl Portal {
-    fn get_active_portal_view(&mut self, _cx: &mut Cx) -> Option<PortalViewRef> {
-        match self.active_portal_view {
-            ActivePortalView::None => None,
-            ActivePortalView::Active(portal_view_id) => {
-                let portal_view_ref = self.portal_view(&[portal_view_id]);
-
-                if portal_view_ref.is_showing() {
-                    Some(portal_view_ref)
-                } else {
-                    None
-                }
-            }
-        }
-    }
-
-    pub fn show_portal_view_by_id(
-        &mut self,
-        cx: &mut Cx,
-        portal_view_id: LiveId,
-    ) -> Result<(), &'static str> {
-        let mut portal_view_ref = self.portal_view(&[portal_view_id]);
-
-        if portal_view_ref.is_empty() {
-            return Err("PortalView not found");
-        }
-
-        if let Some(mut current_active_portal_view_ref) = self.get_active_portal_view(cx) {
-            current_active_portal_view_ref.hide(cx);
-        }
-
-        portal_view_ref.show(cx);
-        self.active_portal_view = ActivePortalView::Active(portal_view_id);
-
-        self.redraw(cx);
-        Ok(())
-    }
-
-    pub fn close(&mut self, cx: &mut Cx) {
-        if let Some(mut current_active_portal_view_ref) = self.get_active_portal_view(cx) {
-            current_active_portal_view_ref.hide(cx);
-        }
-
-        self.apply_over(cx, live! {visible: false});
-    }
-}
-
-#[allow(dead_code)]
-impl PortalRef {
-    pub fn show_portal_view_by_id(
-        &mut self,
-        cx: &mut Cx,
-        stack_view_id: LiveId,
-    ) -> Result<(), &'static str> {
-        if let Some(mut inner) = self.borrow_mut() {
-            inner.show_portal_view_by_id(cx, stack_view_id)
-        } else {
-            Err("Widget not found in the document")
-        }
-    }
-
-    pub fn close(&mut self, cx: &mut Cx) -> Result<(), &'static str> {
-        if let Some(mut inner) = self.borrow_mut() {
-            inner.close(cx);
-            Ok(())
-        } else {
-            Err("Widget not found in the document")
-        }
-    }
-}

From 2b852da0fa9c466133d0aaeddc0ed4239cf27761 Mon Sep 17 00:00:00 2001
From: Kevin Boos <kevinaboos@gmail.com>
Date: Fri, 10 Jan 2025 14:54:08 -0800
Subject: [PATCH 3/5] Disable login modal's button when showing Cancel
 (unsupported)

Address clippy issues (mostly using `is_some_and()`) and warnings
---
 src/home/room_screen.rs         |  2 +-
 src/home/rooms_list.rs          | 16 +++++++++-------
 src/login/login_screen.rs       | 20 +++++++++++++++-----
 src/login/login_status_modal.rs | 12 ++++--------
 src/profile/user_profile.rs     |  6 ++----
 src/utils.rs                    |  4 ++--
 6 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 8e7c3585..ce6f3218 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -2521,7 +2521,7 @@ fn populate_message_view(
                 prev_msg_sender == event_tl_item.sender()
                     && ts_millis.0
                         .checked_sub(prev_event_tl_item.timestamp().0)
-                        .map_or(false, |d| d < uint!(600000)) // 10 mins in millis
+                        .is_some_and(|d| d < uint!(600000)) // 10 mins in millis
             }
             _ => false,
         },
diff --git a/src/home/rooms_list.rs b/src/home/rooms_list.rs
index 2b596d57..f6cdad05 100644
--- a/src/home/rooms_list.rs
+++ b/src/home/rooms_list.rs
@@ -277,16 +277,18 @@ impl RoomDisplayFilterBuilder {
     fn matches_room_name(room: &RoomsListEntry, keywords: &str) -> bool {
         room.room_name
             .as_ref()
-            .map_or(false, |name| name.to_lowercase().contains(keywords))
+            .is_some_and(|name| name.to_lowercase().contains(keywords))
     }
 
     fn matches_room_alias(room: &RoomsListEntry, keywords: &str) -> bool {
-        room.canonical_alias
+        let matches_canonical_alias = room.canonical_alias
             .as_ref()
-            .map_or(false, |alias| alias.as_str().eq_ignore_ascii_case(keywords))
-            || room.alt_aliases
-                .iter()
-                .any(|alias| alias.as_str().eq_ignore_ascii_case(keywords))
+            .is_some_and(|alias| alias.as_str().eq_ignore_ascii_case(keywords));
+        let matches_alt_aliases = room.alt_aliases
+            .iter()
+            .any(|alias| alias.as_str().eq_ignore_ascii_case(keywords));
+
+        matches_canonical_alias || matches_alt_aliases
     }
 
     fn matches_room_tags(room: &RoomsListEntry, keywords: &str) -> bool {
@@ -305,7 +307,7 @@ impl RoomDisplayFilterBuilder {
             }
         }
 
-        room.tags.as_ref().map_or(false, |room_tags| {
+        room.tags.as_ref().is_some_and(|room_tags| {
             search_tags.iter().all(|search_tag| {
                 room_tags.iter().any(|(tag_name, _)| is_tag_match(search_tag, tag_name))
             })
diff --git a/src/login/login_screen.rs b/src/login/login_screen.rs
index 3c5ae876..c5a29f06 100644
--- a/src/login/login_screen.rs
+++ b/src/login/login_screen.rs
@@ -377,13 +377,17 @@ impl MatchEvent for LoginScreen {
                     login_status_modal_inner.set_status(
                         &format!("Auto-logging in as user {user_id}...")
                     );
-                    login_status_modal_inner.button_ref().set_text("Cancel");
+                    let login_status_modal_button = login_status_modal_inner.button_ref();
+                    login_status_modal_button.set_text("Cancel");
+                    login_status_modal_button.set_enabled(false); // Login cancel not yet supported
                     login_status_modal.open(cx);
                 }
                 Some(LoginAction::Status { title, status }) => {
                     login_status_modal_inner.set_title(title);
                     login_status_modal_inner.set_status(status);
-                    login_status_modal_inner.button_ref().set_text("Cancel");
+                    let login_status_modal_button = login_status_modal_inner.button_ref();
+                    login_status_modal_button.set_text("Cancel");
+                    login_status_modal_button.set_enabled(false); // Login cancel not yet supported
                     login_status_modal.open(cx);
 
                     sso_search_button.set_enabled(true);
@@ -397,13 +401,17 @@ impl MatchEvent for LoginScreen {
                     homeserver_input.set_text("");
                     login_status_modal_inner.set_title("Login Succeeded");
                     login_status_modal_inner.set_status("You are now logged in.\n\nLoading your rooms now...");
-                    login_status_modal_inner.button_ref().set_text("Okay");
+                    let login_status_modal_button = login_status_modal_inner.button_ref();
+                    login_status_modal_button.set_text("Okay");
+                    login_status_modal_button.set_enabled(true);
                     self.redraw(cx);
                 }
                 Some(LoginAction::LoginFailure(error)) => {
                     login_status_modal_inner.set_title("Login Failed");
                     login_status_modal_inner.set_status(error);
-                    login_status_modal_inner.button_ref().set_text("Okay");
+                    let login_status_modal_button = login_status_modal_inner.button_ref();
+                    login_status_modal_button.set_text("Okay");
+                    login_status_modal_button.set_enabled(true);
                     login_status_modal.open(cx);
                     self.redraw(cx);
                 }
@@ -448,7 +456,9 @@ impl MatchEvent for LoginScreen {
         if sso_search_button.clicked(actions) && self.prev_homeserver_url != Some(homeserver_input.text()) {
             login_status_modal_inner.set_title("Querying login types");
             login_status_modal_inner.set_status("Fetching supported login types from the homeserver...");
-            login_status_modal_inner.button_ref().set_text("Cancel");
+            let login_status_modal_button = login_status_modal_inner.button_ref();
+            login_status_modal_button.set_text("Cancel");
+            login_status_modal_button.set_enabled(false); // Login cancel not yet supported
             login_status_modal.open(cx);
             
             self.prev_homeserver_url = Some(homeserver_input.text());
diff --git a/src/login/login_status_modal.rs b/src/login/login_status_modal.rs
index 2c539b1d..38bd1032 100644
--- a/src/login/login_status_modal.rs
+++ b/src/login/login_status_modal.rs
@@ -7,6 +7,7 @@ live_design! {
     use crate::shared::styles::*;
     use crate::shared::icon_button::RobrixIconButton;
 
+    // A modal dialog that displays the status of a login attempt.
     pub LoginStatusModal = {{LoginStatusModal}} {
         width: Fit,
         height: Fit
@@ -81,6 +82,7 @@ live_design! {
     }
 }
 
+/// A modal dialog that displays the status of a login attempt.
 #[derive(Live, LiveHook, Widget)]
 pub struct LoginStatusModal {
     #[deref] view: View,
@@ -108,15 +110,13 @@ impl WidgetMatchEvent for LoginStatusModal {
         let widget_uid = self.widget_uid();
         let button = self.button(id!(button));
 
-        let mut needs_redraw = false;
-
         let modal_dismissed = actions
             .iter()
             .any(|a| matches!(a.downcast_ref(), Some(ModalAction::Dismissed)));
 
         if button.clicked(actions) || modal_dismissed {
-            // TODO: send a login request cancel action, if/when we support them
-
+            // Here, we could optionally attempt to cancel the in-flight login request.
+            // But our background async task doesn't yet support that, so we do nothing atm.
 
             // If the modal was dismissed by clicking outside of it, we MUST NOT emit
             // a `LoginStatusModalAction::Close` action, as that would cause
@@ -125,10 +125,6 @@ impl WidgetMatchEvent for LoginStatusModal {
                 cx.widget_action(widget_uid, &scope.path, LoginStatusModalAction::Close);
             }
         }
-
-        if needs_redraw {
-            self.redraw(cx);
-        }
     }
 }
 
diff --git a/src/profile/user_profile.rs b/src/profile/user_profile.rs
index d0a95c43..24bc7e48 100644
--- a/src/profile/user_profile.rs
+++ b/src/profile/user_profile.rs
@@ -2,7 +2,7 @@ use std::{borrow::Cow, ops::{Deref, DerefMut}, sync::Arc};
 use makepad_widgets::*;
 use matrix_sdk::{room::{RoomMember, RoomMemberRole}, ruma::{events::room::member::MembershipState, OwnedMxcUri, OwnedRoomId, OwnedUserId}};
 use crate::{
-    avatar_cache::{self, AvatarCacheEntry}, shared::avatar::AvatarWidgetExt, sliding_sync::{get_client, is_user_ignored, submit_async_request, MatrixRequest}, utils
+    avatar_cache::{self, AvatarCacheEntry}, shared::avatar::AvatarWidgetExt, sliding_sync::{current_user_id, get_client, is_user_ignored, submit_async_request, MatrixRequest}, utils
 };
 
 use super::user_profile_cache::{self, get_user_profile_and_room_member};
@@ -545,9 +545,7 @@ impl Widget for UserProfileSlidingPane {
         //    * The button text changes to "Unignore" if the user is already ignored.
         let is_pane_showing_current_account = info.room_member.as_ref()
             .map(|rm| rm.is_account_user())
-            .unwrap_or_else(|| get_client()
-                .map_or(false, |client| client.user_id() == Some(&info.user_id))
-            );
+            .unwrap_or_else(|| current_user_id() == Some(&info.user_id));
 
         // TODO: uncomment the line below once the `direct_message_button` logic is implemented.
         // self.button(id!(direct_message_button)).set_enabled(!is_pane_showing_current_account);
diff --git a/src/utils.rs b/src/utils.rs
index c180190b..97ef2929 100644
--- a/src/utils.rs
+++ b/src/utils.rs
@@ -233,9 +233,9 @@ pub fn linkify(text: &str, is_html: bool) -> Cow<'_, str> {
         let link_txt = link.as_str();
         // Only linkify the URL if it's not already part of an HTML href attribute.
         let is_link_within_href_attr = text.get(..link.start())
-            .map_or(false, ends_with_href);
+            .is_some_and(ends_with_href);
         let is_link_within_html_tag = text.get(link.end() ..)
-            .map_or(false, |after| after.trim_end().starts_with("</a>"));
+            .is_some_and(|after| after.trim_end().starts_with("</a>"));
 
         if is_link_within_href_attr || is_link_within_html_tag {
             linkified_text = format!(

From 6db6aeeaa90baa528460a4fa1cdb8b0e98bdb550 Mon Sep 17 00:00:00 2001
From: Kevin Boos <kevinaboos@gmail.com>
Date: Fri, 10 Jan 2025 14:57:27 -0800
Subject: [PATCH 4/5] fix more warnings

---
 src/profile/user_profile.rs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/profile/user_profile.rs b/src/profile/user_profile.rs
index 24bc7e48..a1606be1 100644
--- a/src/profile/user_profile.rs
+++ b/src/profile/user_profile.rs
@@ -2,7 +2,7 @@ use std::{borrow::Cow, ops::{Deref, DerefMut}, sync::Arc};
 use makepad_widgets::*;
 use matrix_sdk::{room::{RoomMember, RoomMemberRole}, ruma::{events::room::member::MembershipState, OwnedMxcUri, OwnedRoomId, OwnedUserId}};
 use crate::{
-    avatar_cache::{self, AvatarCacheEntry}, shared::avatar::AvatarWidgetExt, sliding_sync::{current_user_id, get_client, is_user_ignored, submit_async_request, MatrixRequest}, utils
+    avatar_cache::{self, AvatarCacheEntry}, shared::avatar::AvatarWidgetExt, sliding_sync::{current_user_id, is_user_ignored, submit_async_request, MatrixRequest}, utils
 };
 
 use super::user_profile_cache::{self, get_user_profile_and_room_member};
@@ -545,7 +545,7 @@ impl Widget for UserProfileSlidingPane {
         //    * The button text changes to "Unignore" if the user is already ignored.
         let is_pane_showing_current_account = info.room_member.as_ref()
             .map(|rm| rm.is_account_user())
-            .unwrap_or_else(|| current_user_id() == Some(&info.user_id));
+            .unwrap_or_else(|| current_user_id().is_some_and(|uid| &uid == &info.user_id));
 
         // TODO: uncomment the line below once the `direct_message_button` logic is implemented.
         // self.button(id!(direct_message_button)).set_enabled(!is_pane_showing_current_account);

From 0fe07d524e2d505e5425c1e519a1952fa29e67a7 Mon Sep 17 00:00:00 2001
From: Kevin Boos <1139460+kevinaboos@users.noreply.github.com>
Date: Fri, 10 Jan 2025 16:20:48 -0800
Subject: [PATCH 5/5] Fix clippy double borrow

---
 src/profile/user_profile.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/profile/user_profile.rs b/src/profile/user_profile.rs
index a1606be1..b051ddc0 100644
--- a/src/profile/user_profile.rs
+++ b/src/profile/user_profile.rs
@@ -545,7 +545,7 @@ impl Widget for UserProfileSlidingPane {
         //    * The button text changes to "Unignore" if the user is already ignored.
         let is_pane_showing_current_account = info.room_member.as_ref()
             .map(|rm| rm.is_account_user())
-            .unwrap_or_else(|| current_user_id().is_some_and(|uid| &uid == &info.user_id));
+            .unwrap_or_else(|| current_user_id().is_some_and(|uid| uid == info.user_id));
 
         // TODO: uncomment the line below once the `direct_message_button` logic is implemented.
         // self.button(id!(direct_message_button)).set_enabled(!is_pane_showing_current_account);