Update logs and variable names

Add background color to #main in loader styles to prevent white flash
while app CSS loads after WASM initialization.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+    "rust-analyzer.cargo.features": ["desktop","web"],
+    "rust-analyzer.cargo.noDefaultFeatures": false
+}

Cargo.lock

@@ -2270,6 +2270,17 @@ dependencies = [
  "xxhash-rust",
 ]
 
+[[package]]
+name = "etcetera"
+version = "0.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "26c7b13d0780cb82722fd59f6f57f925e143427e4a75313a6c77243bf5326ae6"
+dependencies = [
+ "cfg-if",
+ "home",
+ "windows-sys 0.59.0",
+]
+
 [[package]]
 name = "euclid"
 version = "0.22.11"
@@ -3157,6 +3168,15 @@ version = "1.1.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ad6880c8d4a9ebf39c6e8b77007ce223f646a4d21ce29d99f70cb16420545425"
 
+[[package]]
+name = "home"
+version = "0.5.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cc627f471c528ff0c4a49e1d5e60450c8f6461dd6d10ba9dcd3a61d3dff7728d"
+dependencies = [
+ "windows-sys 0.61.2",
+]
+
 [[package]]
 name = "html-purifier"
 version = "0.3.0"
@@ -4261,6 +4281,7 @@ dependencies = [
  "dioxus",
  "dioxus-asset-resolver",
  "dioxus-web",
+ "etcetera",
  "futures",
  "futures-channel",
  "gloo-timers",

common/src/lib.rs

@@ -1,7 +1,7 @@
 use serde::{Deserialize, Serialize};
 
 #[derive(Debug, Clone, Deserialize, Serialize, Default)]
-pub struct ClientConfig {
+pub struct ProxyOverides {
     pub proxy_url: Option<String>,
     pub cert_hash: Option<Vec<u8>>,
     pub any_server: bool,

gui/Cargo.toml

@@ -63,6 +63,7 @@ tokio-rustls = { version = "^0.26.0", optional = true }
 opus = { version = "0.3.0", optional = true }
 cpal = { version = "0.15.3", optional = true }
 dasp_ring_buffer = { version = "0.11.0", optional = true }
+etcetera = { version = "0.10.0", optional = true }
 
 # Base Dependencies
 # ================
@@ -130,4 +131,5 @@ desktop = [
   "cpal",
   "dasp_ring_buffer",
   "rfd/xdg-portal",
+  "etcetera",
 ]

gui/Dioxus.toml

@@ -23,7 +23,7 @@ watch_path = ["src", "assets"]
 # CSS style file
 style = []
 # Javascript code file
-script = []
+script = ["loader.js"]
 
 [web.resource.dev]
 # serve: [dev-server] only

gui/public/loader.js

@@ -0,0 +1,68 @@
+// Loading screen that displays while WASM loads
+(function() {
+  // Create and inject loader styles immediately (head exists)
+  var style = document.createElement('style');
+  style.textContent =
+    '.wasm-loader {' +
+      'position: fixed;' +
+      'top: 0;' +
+      'left: 0;' +
+      'width: 100%;' +
+      'height: 100%;' +
+      'background-color: oklch(0.15 0.01 338.64);' +
+      'display: flex;' +
+      'align-items: center;' +
+      'justify-content: center;' +
+      'z-index: 9999;' +
+      'transition: opacity 0.3s ease-out;' +
+    '}' +
+    '.wasm-loader.hidden {' +
+      'opacity: 0;' +
+      'pointer-events: none;' +
+    '}' +
+    '.wasm-spinner {' +
+      'width: 48px;' +
+      'height: 48px;' +
+      'border: 4px solid rgba(123, 173, 159, 0.2);' +
+      'border-top-color: #7bad9f;' +
+      'border-radius: 50%;' +
+      'animation: wasm-spin 1s linear infinite;' +
+    '}' +
+    '@keyframes wasm-spin {' +
+      'to { transform: rotate(360deg); }' +
+    '}' +
+    '#main {' +
+      'background-color: oklch(0.15 0.01 338.64);' +
+    '}';
+  document.head.appendChild(style);
+
+  function init() {
+    // Create loader element
+    var loader = document.createElement('div');
+    loader.className = 'wasm-loader';
+    loader.innerHTML = '<div class="wasm-spinner"></div>';
+    document.body.appendChild(loader);
+
+    // Watch for Dioxus to mount content in #main
+    var observer = new MutationObserver(function(mutations, obs) {
+      var main = document.getElementById('main');
+      if (main && main.children.length > 0) {
+        loader.classList.add('hidden');
+        setTimeout(function() { loader.remove(); }, 300);
+        obs.disconnect();
+      }
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+  }
+
+  // Wait for body to exist
+  if (document.body) {
+    init();
+  } else {
+    document.addEventListener('DOMContentLoaded', init);
+  }
+})();

gui/src/app.rs

@@ -2,7 +2,7 @@
 
 use dioxus::prelude::*;
 use mime_guess::Mime;
-use mumble_web2_common::{ClientConfig, ServerStatus};
+use mumble_web2_common::{ProxyOverides, ServerStatus};
 use ordermap::OrderSet;
 use std::collections::HashMap;
 
@@ -23,7 +23,7 @@ pub enum Command {
     Connect {
         address: String,
         username: String,
-        config: ClientConfig,
+        config: ProxyOverides,
     },
     SendChat {
         markdown: String,
@@ -309,7 +309,7 @@ pub fn ChatView() -> Element {
 }
 
 #[component]
-pub fn ControlView(config: Resource<ClientConfig>) -> Element {
+pub fn ControlView(config: Resource<ProxyOverides>) -> Element {
     let net: Coroutine<Command> = use_coroutine_handle();
     let status = &STATE.status;
     let server = STATE.server.read();
@@ -508,7 +508,7 @@ pub fn ControlView(config: Resource<ClientConfig>) -> Element {
 }
 
 #[component]
-pub fn ServerView(config: Resource<ClientConfig>) -> Element {
+pub fn ServerView(config: Resource<ProxyOverides>) -> Element {
     let net: Coroutine<Command> = use_coroutine_handle();
     let server = STATE.server.read();
     let Some(&UserState {
@@ -546,7 +546,7 @@ pub fn ServerView(config: Resource<ClientConfig>) -> Element {
 }
 
 #[component]
-pub fn LoginView(config: Resource<ClientConfig>) -> Element {
+pub fn LoginView(config: Resource<ProxyOverides>) -> Element {
     let net: Coroutine<Command> = use_coroutine_handle();
 
     let last_status = use_signal(|| None::<color_eyre::Result<ServerStatus>>);
@@ -558,7 +558,7 @@ pub fn LoginView(config: Resource<ClientConfig>) -> Element {
         }
     });
 
-    let mut address_input = use_signal(|| None::<String>);
+    let mut address_input = use_signal(|| imp::load_server_url());
     let address = use_memo(move || {
         if let Some(addr) = address_input() {
             addr.clone()
@@ -575,6 +575,9 @@ pub fn LoginView(config: Resource<ClientConfig>) -> Element {
     let do_connect = move |_| {
         //let _ = set_default_username(&username.read());
         let _ = imp::set_default_username(&username.read());
+        if config.read().as_ref().is_some_and(|cfg| cfg.any_server) {
+            imp::set_default_server(&address.read());
+        }
         net.send(Connect {
             address: address.read().clone(),
             username: username.read().clone(),
@@ -720,9 +723,9 @@ pub fn app() -> Element {
 
     use_coroutine(|rx: UnboundedReceiver<Command>| super::network_entrypoint(rx));
     let config = use_resource(|| async move {
-        match imp::load_config().await {
+        match imp::load_proxy_overides().await {
             Ok(config) => config,
-            Err(_) => ClientConfig::default(),
+            Err(_) => ProxyOverides::default(),
         }
     });
 

gui/src/imp/desktop.rs

@@ -1,11 +1,13 @@
 use crate::app::Command;
 use crate::effects::{AudioProcessor, AudioProcessorSender};
-use color_eyre::eyre::{bail, eyre, Context, Error};
+use color_eyre::eyre::{bail, eyre, Error};
 use cpal::traits::{DeviceTrait, HostTrait, StreamTrait as _};
 use dioxus::hooks::UnboundedReceiver;
+use etcetera::{choose_app_strategy, AppStrategy, AppStrategyArgs};
 use futures::io::{AsyncRead, AsyncWrite};
 use mumble_protocol::control::ClientControlCodec;
-use mumble_web2_common::{ClientConfig, ServerStatus};
+use mumble_web2_common::{ProxyOverides, ServerStatus};
+use std::collections::HashMap;
 use std::mem::replace;
 use std::net::ToSocketAddrs;
 use std::sync::Arc;
@@ -282,7 +284,7 @@ pub async fn network_connect(
     address: String,
     username: String,
     event_rx: &mut UnboundedReceiver<Command>,
-    gui_config: &ClientConfig,
+    proxy_overides: &ProxyOverides,
 ) -> Result<(), Error> {
     info!("connecting");
 
@@ -314,16 +316,58 @@ pub async fn network_connect(
     crate::network_loop(username, event_rx, reader, writer).await
 }
 
+fn get_config_path() -> std::path::PathBuf {
+    let strategy = choose_app_strategy(AppStrategyArgs {
+        top_level_domain: "com".to_string(),
+        author: "Ohea Corp".to_string(),
+        app_name: "Mumble Web2".to_string(),
+    })
+    .expect("failed to choose app strategy");
+    strategy.config_dir().join("config.json")
+}
+
+fn load_config_map() -> HashMap<String, String> {
+    let config_path = get_config_path();
+    match std::fs::read_to_string(&config_path) {
+        Ok(contents) => serde_json::from_str(&contents).unwrap_or_default(),
+        Err(_) => HashMap::new(),
+    }
+}
+
+fn save_config_map(config: &HashMap<String, String>) -> color_eyre::Result<()> {
+    let config_path = get_config_path();
+    if let Some(parent) = config_path.parent() {
+        std::fs::create_dir_all(parent)?;
+    }
+    let contents = serde_json::to_string_pretty(config)?;
+    std::fs::write(&config_path, contents)?;
+    Ok(())
+}
+
 pub fn set_default_username(username: &str) -> Option<()> {
-    None
+    let mut config = load_config_map();
+    config.insert("username".to_string(), username.to_string());
+    save_config_map(&config).ok()
+}
+
+pub fn set_default_server(server: &str) -> Option<()> {
+    let mut config = load_config_map();
+    config.insert("server".to_string(), server.to_string());
+    save_config_map(&config).ok()
 }
 
 pub fn load_username() -> Option<String> {
-    return None;
+    let config = load_config_map();
+    config.get("username").cloned()
 }
 
-pub async fn load_config() -> color_eyre::Result<ClientConfig> {
-    Ok(ClientConfig {
+pub fn load_server_url() -> Option<String> {
+    let config = load_config_map();
+    config.get("server").cloned()
+}
+
+pub async fn load_proxy_overides() -> color_eyre::Result<ProxyOverides> {
+    Ok(ProxyOverides {
         proxy_url: None,
         cert_hash: None,
         any_server: true,

gui/src/imp/web.rs

@@ -6,7 +6,7 @@ use futures::{AsyncRead, AsyncWrite};
 use gloo_timers::future::TimeoutFuture;
 use js_sys::Float32Array;
 use mumble_protocol::control::ClientControlCodec;
-use mumble_web2_common::{ClientConfig, ServerStatus};
+use mumble_web2_common::{ProxyOverides, ServerStatus};
 use reqwest::Url;
 use std::future::Future;
 use std::time::Duration;
@@ -329,7 +329,7 @@ pub async fn network_connect(
     address: String,
     username: String,
     event_rx: &mut UnboundedReceiver<Command>,
-    gui_config: &ClientConfig,
+    proxy_overides: &ProxyOverides,
 ) -> Result<(), Error> {
     info!("connecting");
 
@@ -342,7 +342,7 @@ pub async fn network_connect(
     )
     .ey()?;
 
-    if let Some(server_hash) = &gui_config.cert_hash {
+    if let Some(server_hash) = &proxy_overides.cert_hash {
         let hash = web_sys::js_sys::Uint8Array::from(server_hash.as_slice());
         web_sys::js_sys::Reflect::set(&object, &"value".into(), &hash).ey()?;
     }
@@ -399,6 +399,10 @@ pub fn set_default_username(username: &str) -> Option<()> {
         .ok()
 }
 
+pub fn set_default_server(username: &str) -> Option<()> {
+    None
+}
+
 pub fn load_username() -> Option<String> {
     web_sys::window()
         .unwrap()
@@ -408,13 +412,17 @@ pub fn load_username() -> Option<String> {
         .ok()?
 }
 
+pub fn load_server_url() -> Option<String> {
+    None
+}
+
 pub fn absolute_url(path: &str) -> Result<Url, Error> {
     let window: web_sys::Window = web_sys::window().expect("no global `window` exists");
     let location = window.location();
     Ok(Url::parse(&location.href().ey()?)?.join(path)?)
 }
 
-pub async fn load_config() -> color_eyre::Result<ClientConfig> {
+pub async fn load_proxy_overides() -> color_eyre::Result<ProxyOverides> {
     let config_url = match option_env!("MUMBLE_WEB2_GUI_CONFIG_URL") {
         Some(url) => Url::parse(url)?,
         None => absolute_url("config")?,
@@ -423,7 +431,7 @@ pub async fn load_config() -> color_eyre::Result<ClientConfig> {
 
     let config = reqwest::get(config_url)
         .await?
-        .json::<ClientConfig>()
+        .json::<ProxyOverides>()
         .await?;
 
     Ok(config)

gui/src/lib.rs

@@ -20,7 +20,7 @@ use mumble_protocol::voice::VoicePacket;
 use mumble_protocol::voice::VoicePacketPayload;
 use mumble_protocol::Clientbound;
 use mumble_protocol::Serverbound;
-use mumble_web2_common::ClientConfig;
+use mumble_web2_common::ProxyOverides;
 use once_cell::sync::Lazy;
 use std::collections::hash_map::Entry;
 use std::collections::HashMap;

proxy/src/main.rs

@@ -1,5 +1,5 @@
 use color_eyre::eyre::{anyhow, bail, Context, Result};
-use mumble_web2_common::{ClientConfig, ServerStatus};
+use mumble_web2_common::{ProxyOverides, ServerStatus};
 use rand::Rng;
 use salvo::conn::rustls::{Keycert, RustlsConfig};
 use salvo::cors::{AllowOrigin, Cors};
@@ -77,7 +77,7 @@ async fn main() -> Result<()> {
         .install_default()
         .map_err(|e| anyhow!("could not install crypto provider {e:?}"))?;
 
-    let mut client_config = ClientConfig {
+    let mut proxy_overides = ProxyOverides {
         proxy_url: match &server_config.proxy_url {
             Some(url) => Some(url.to_string()),
             None => None,
@@ -102,7 +102,7 @@ async fn main() -> Result<()> {
             let cert = cert_params.self_signed(&key_pair)?;
 
             let hash = hmac_sha256::Hash::hash(cert.der().as_ref());
-            client_config.cert_hash = Some(hash.into());
+            proxy_overides.cert_hash = Some(hash.into());
 
             (cert.pem().into(), key_pair.serialize_pem().into())
         }
@@ -123,13 +123,13 @@ async fn main() -> Result<()> {
     let rustls_config = RustlsConfig::new(Keycert::new().cert(cert.as_slice()).key(key.as_slice()));
 
     info!(
-        "client config:\n{}",
-        toml::to_string_pretty(&client_config)?
+        "proxy overides:\n{}",
+        toml::to_string_pretty(&proxy_overides)?
     );
 
     let config_craft = ConfigCraft {
         server_config: server_config.clone(),
-        client_config,
+        proxy_overides,
     };
 
     let status_craft = StatusCraft {
@@ -252,14 +252,14 @@ impl StatusCraft {
 #[derive(Clone)]
 pub struct ConfigCraft {
     server_config: Arc<Config>,
-    client_config: ClientConfig,
+    proxy_overides: ProxyOverides,
 }
 
 #[craft]
 impl ConfigCraft {
     #[craft(handler)]
-    async fn get_config(&self) -> Json<ClientConfig> {
-        Json(self.client_config.clone())
+    async fn get_config(&self) -> Json<ProxyOverides> {
+        Json(self.proxy_overides.clone())
     }
 
     #[craft(handler)]