change login screen ui

gui/src/app.rs

@@ -752,83 +752,73 @@ pub fn LoginView(config: Resource<ClientConfig>) -> Element {
         ),
         Connected => unreachable!(),
     };
+
+    struct Server {
+        name: String,
+        username: String,
+        address: String,
+    }
+
+    let servers: [Server; 3] = [
+        Server {
+            name: "name0".to_string(),
+            username: "username0".to_string(),
+            address: "address0".to_string(),
+        },
+        Server {
+            name: "name1".to_string(),
+            username: "username1".to_string(),
+            address: "address1".to_string(),
+        },
+        Server {
+            name: "name2".to_string(),
+            username: "username2".to_string(),
+            address: "address2".to_string(),
+        },
+    ];
+
     let version = option_env!("MUMBLE_WEB2_VERSION");
     rsx!(
         div {
-            class: "login",
+            class: "server-list-page",
             h1 {
                 "Mumble Web"
                 match version {
-                    Some(v) => rsx!(" " span { class: "login_version", "({v})" }),
+                    Some(v) => rsx!(div { class: "login_version", "({v})" }),
                     None => rsx!(),
                 }
             }
-            if config.read().as_ref().is_some_and(|cfg| cfg.any_server) {
-                div {
-                    label {
-                        for: "address-entry",
-                        "Server Address:"
-                    }
-                    input {
-                        id: "address-entry",
-                        placeholder: "address",
-                        value: "{address.read()}",
-                        autofocus: "true",
-                        oninput: move |evt| address_input.set(Some(evt.value().clone())),
+            div {
+                class: "server-list",
+                for server in servers {
+                    div {
+                        key: "{server.address}",      // use the most unique field
+                        class: "server-card",
+                        img {
+                            class: "server-card__icon",
+                            src: asset!("assets/earth-14-svgrepo-com.svg"),
+                            alt: "Server icon",
+                        }
+                        div {
+                            class: "server-card__info",
+                            span { class: "server-card__name",    "{server.name}" }
+                            span { class: "server-card__address", "{server.address}" }
+                        }
+                        button {
+                            class: "server-card__connect",
+                            onclick: move |_| { /* TODO: initiate connection */ },
+                            img {
+                                src: asset!("assets/arrow-right-svgrepo-com.svg"),
+                                alt: "Connect",
+                            }
+                        }
                     }
                 }
             }
-            div {
-                label {
-                    for: "username-entry",
-                    "Username:"
-                    //style: "color: rgba(255, 255, 255, 0.5); font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48; vertical-align: middle; font-size: 35px; user-select: none;",
-                }
-                input {
-                    id: "username-entry",
-                    placeholder: "username",
-                    value: "{username.read()}",
-                    autofocus: "true",
-                    oninput: move |evt| username.set(evt.value().clone()),
-                }
-            }
-            div {
-                match &*last_status.read() {
-                    None => rsx!(div {
-                        class: "login_status",
-                        span {"···"}
-                    }),
-                    Some(Ok(ServerStatus { success: false, .. })) => rsx!(div {
-                        class: "login_status is_error",
-                        span {
-                            "Could not reach server"
-                        }
-                    }),
-                    Some(Ok(status)) => rsx!(div {
-                        class: "login_status",
-                        if let (Some(users), Some(max_users)) = (status.users, status.max_users) {
-                            span {"{users}/{max_users} Online"}
-                        } else {
-                            span {"Unknown Online"}
-                        }
-                        span {"-"}
-                        if let Some((maj, min, pat)) = status.version {
-                            span {"Version: {maj}.{min}.{pat}"}
-                        } else {
-                            span {"Unknown Version"}
-                        }
-                    }),
-                    Some(Err(_)) => rsx!(div {
-                        class: "login_status is_error",
-                        span {
-                            "Could not reach proxy server"
-                        }
-                    }),
-                }
-                div {
-                    {bottom}
-                }
-
+            button {
+                class: "add-server-btn",
+                onclick: move |_| {},
+                "+ Add Server"
             }
         }
     )

gui/src/imp/desktop.rs

@@ -81,8 +81,8 @@ impl super::PlatformInterface for DesktopPlatform {
 
 fn get_config_path() -> std::path::PathBuf {
     let strategy = choose_app_strategy(AppStrategyArgs {
-        top_level_domain: "com".to_string(),
-        author: "Ohea Corp".to_string(),
+        top_level_domain: "xyz".to_string(),
+        author: "ohea".to_string(),
         app_name: "Mumble Web2".to_string(),
     })
     .expect("failed to choose app strategy");