Scale box bounderies

common/src/lib.rs

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

gui/assets/main.scss

@@ -168,26 +168,68 @@ a:visited {
   background-color: oklch(0.53 0.1431 264.18);
   border-radius: 50%;
   aspect-ratio: 1 / 1;
+  flex-shrink: 0;
+
+  .material-symbols-outlined {
+    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
+  }
 }
 
 .button_row {
   display: flex;
-  gap: 10px;
+  gap: clamp(4px, 1vw, 10px);
+  align-items: center;
+  flex-wrap: nowrap;
+  min-height: 0;
 
   .spacer {
     flex-grow: 1;
+    flex-shrink: 1;
+    min-width: 0;
+  }
+
+  .connection_status {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    flex-shrink: 1;
+
+    .material-symbols-outlined {
+      font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
+      vertical-align: middle;
+    }
+  }
+
+  .user_info {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    overflow: hidden;
+    flex-shrink: 1;
+
+    .user_name {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .user_data {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
 }
 
 .toggle_button {
-  padding: 8px;
+  padding: clamp(4px, 0.5vw, 8px);
-  height: 100%;
   aspect-ratio: 1 / 1;
+  flex-shrink: 0;
 
   background-color: unset;
 
-  border: solid rgb(255 255 255 / 0.1) 3px;
+  border: solid rgb(255 255 255 / 0.1) clamp(1px, 0.3vw, 3px);
-  border-radius: 10px;
+  border-radius: clamp(4px, 0.8vw, 10px);
   color: rgb(255 255 255 / 50%);
 
   transition: all 0.5s ease-in-out;
@@ -200,7 +242,6 @@ a:visited {
   .material-symbols-outlined {
     font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
     vertical-align: middle;
-    font-size: 35px;
   }
 }
 
@@ -245,16 +286,60 @@ a:visited {
   }
 
   &_control_box {
-    padding: 16px;
+    padding: clamp(6px, 0.8vw, 12px);
-    margin: 16px;
+    margin: clamp(6px, 0.8vw, 12px);
     background-color: var(--light-bg-color);
-    border-radius: 10px;
+    border-radius: clamp(6px, 1vw, 10px);
     overflow: hidden;
     grid-area: control;
 
     display: flex;
-    gap: 10px;
+    gap: clamp(4px, 0.8vw, 8px);
     flex-direction: column;
+
+    // Dynamic font sizing for control elements
+    --control-icon-size: clamp(16px, 2.5vw, 30px);
+    --control-text-size: clamp(12px, 2vw, 25px);
+    --control-small-text-size: clamp(10px, 1.5vw, 20px);
+    --user-icon-size: clamp(24px, 4vw, 45px);
+    --toggle-icon-size: clamp(18px, 3vw, 35px);
+
+    .connection_status {
+      .material-symbols-outlined {
+        font-size: var(--control-icon-size);
+      }
+      .status_text {
+        font-size: var(--control-text-size);
+      }
+      .channel_text {
+        font-size: var(--control-small-text-size);
+      }
+    }
+
+    .user_edit_button {
+      .material-symbols-outlined {
+        font-size: var(--user-icon-size);
+      }
+    }
+
+    .user_info {
+      .user_name {
+        font-size: var(--control-text-size);
+      }
+      .user_data {
+        font-size: var(--control-small-text-size);
+      }
+    }
+
+    .toggle_button {
+      .material-symbols-outlined {
+        font-size: var(--toggle-icon-size);
+      }
+    }
+
+    hr {
+      margin: 0;
+    }
   }
 }
 

gui/src/app.rs

@@ -2,7 +2,7 @@
 
 use dioxus::prelude::*;
 use mime_guess::Mime;
-use mumble_web2_common::{ProxyOverides, ServerStatus};
+use mumble_web2_common::{ClientConfig, ServerStatus};
 use ordermap::OrderSet;
 use std::collections::HashMap;
 
@@ -23,7 +23,7 @@ pub enum Command {
     Connect {
         address: String,
         username: String,
-        config: ProxyOverides,
+        config: ClientConfig,
     },
     SendChat {
         markdown: String,
@@ -309,7 +309,7 @@ pub fn ChatView() -> Element {
 }
 
 #[component]
-pub fn ControlView(config: Resource<ProxyOverides>) -> Element {
+pub fn ControlView(config: Resource<ClientConfig>) -> Element {
     let net: Coroutine<Command> = use_coroutine_handle();
     let status = &STATE.status;
     let server = STATE.server.read();
@@ -341,79 +341,69 @@ pub fn ControlView(config: Resource<ProxyOverides>) -> Element {
     let connection_status = match &*status.read() {
         Connecting => rsx! {
             div {
-                style: "color: \"{connecting_color}\";",
+                class: "connection_status",
-                span {
+                style: "color: {connecting_color};",
-                    class: "material-symbols-outlined",
+                div {
-                    style: "vertical-align: middle; font-size: 30px;",
+                    span {
-                    "signal_cellular_alt_2_bar"
+                        class: "material-symbols-outlined",
-                }
+                        "signal_cellular_alt_2_bar"
-                span {
+                    }
-                    style: "width: 5px; display: inline-block;"
+                    span {
-                }
+                        class: "status_text",
-                span {
+                        " Connecting"
-                    style: "vertical-align: middle; font-size: 30px;",
+                    }
-                    "Connecting"
                 }
             }
         },
         Connected => rsx! {
             div {
+                class: "connection_status",
                 div {
-                    style: "color: \"{connected_color}\";",
+                    style: "color: {connected_color};",
                     span {
                         class: "material-symbols-outlined",
-                        style: "vertical-align: middle; font-size: 30px;",
                         "signal_cellular_alt"
                     }
                     span {
-                        style: "width: 5px; display: inline-block;"
+                        class: "status_text",
-                    }
+                        " Connected"
-                    span {
-                        style: "vertical-align: middle; font-size: 25px;",
-                        "Connected"
                     }
                 }
                 div {
-                    span { style: "width: 3px; display: inline-block;"}
+                    class: "channel_text",
                     span { "{current_channel_name}" }
-                    if let Some(proxy_url) = proxy_url {
-                        span { " — " }
-                        span { "{proxy_url}" }
-                    }
                 }
             }
         },
         Disconnected => rsx! {
             div {
-                style: "color: \"{disconnected_color}\";",
+                class: "connection_status",
-                span {
+                style: "color: {disconnected_color};",
-                    class: "material-symbols-outlined",
+                div {
-                    style: "vertical-align: middle;",
+                    span {
-                    "signal_disconnected"
+                        class: "material-symbols-outlined",
-                }
+                        "signal_disconnected"
-                span {
+                    }
-                    style: "width: 5px; display: inline-block;"
+                    span {
-                }
+                        class: "status_text",
-                span {
+                        " Disconnected"
-                    style: "vertical-align: middle;",
+                    }
-                    "Disconnected"
                 }
             }
         },
         Failed(_) => rsx! {
             div {
-                style: "color: \"{failed_color}\";",
+                class: "connection_status",
-                span {
+                style: "color: {failed_color};",
-                    class: "material-symbols-outlined",
+                div {
-                    style: "vertical-align: middle;",
+                    span {
-                    "error"
+                        class: "material-symbols-outlined",
-                }
+                        "error"
-                span {
+                    }
-                    style: "width: 5px; display: inline-block;"
+                    span {
-                }
+                        class: "status_text",
-                span {
+                        " Failed"
-                    style: "vertical-align: middle;",
+                    }
-                    "Failed"
                 }
             }
         },
@@ -445,16 +435,17 @@ pub fn ControlView(config: Resource<ProxyOverides>) -> Element {
                 class: "user_edit_button",
                 span {
                     class: "material-symbols-outlined",
-                    style: "color: oklch(0.65 0.2245 28.06); font-size: 45px; font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;",
+                    style: "color: oklch(0.65 0.2245 28.06);",
                     "person_edit"
                 }
             }
             div {
+                class: "user_info",
                 div {
-                    span { style: "font-size: 25px;", "{name}" }
+                    span { class: "user_name", "{name}" }
                 }
                 div {
-                    span { style: "font-size: 20px; color: gray;", "some data" }
+                    span { class: "user_data", "some data" }
                 }
             }
             span { class: "spacer" }
@@ -508,7 +499,7 @@ pub fn ControlView(config: Resource<ProxyOverides>) -> Element {
 }
 
 #[component]
-pub fn ServerView(config: Resource<ProxyOverides>) -> Element {
+pub fn ServerView(config: Resource<ClientConfig>) -> Element {
     let net: Coroutine<Command> = use_coroutine_handle();
     let server = STATE.server.read();
     let Some(&UserState {
@@ -546,7 +537,7 @@ pub fn ServerView(config: Resource<ProxyOverides>) -> Element {
 }
 
 #[component]
-pub fn LoginView(config: Resource<ProxyOverides>) -> Element {
+pub fn LoginView(config: Resource<ClientConfig>) -> Element {
     let net: Coroutine<Command> = use_coroutine_handle();
 
     let last_status = use_signal(|| None::<color_eyre::Result<ServerStatus>>);
@@ -723,9 +714,9 @@ pub fn app() -> Element {
 
     use_coroutine(|rx: UnboundedReceiver<Command>| super::network_entrypoint(rx));
     let config = use_resource(|| async move {
-        match imp::load_proxy_overides().await {
+        match imp::load_config().await {
             Ok(config) => config,
-            Err(_) => ProxyOverides::default(),
+            Err(_) => ClientConfig::default(),
         }
     });
 

gui/src/imp/desktop.rs

@@ -6,7 +6,7 @@ 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::{ProxyOverides, ServerStatus};
+use mumble_web2_common::{ClientConfig, ServerStatus};
 use std::collections::HashMap;
 use std::mem::replace;
 use std::net::ToSocketAddrs;
@@ -149,7 +149,7 @@ impl AudioSystem {
     }
 
     pub fn create_player(&mut self) -> Result<AudioPlayer, Error> {
-        let config = self.choose_config(self.input.supported_input_configs()?)?;
+        let config = self.choose_config(self.output.supported_output_configs()?)?;
         info!(
             "creating player on {:?} with {:#?}",
             self.output.name().ok(),
@@ -284,7 +284,7 @@ pub async fn network_connect(
     address: String,
     username: String,
     event_rx: &mut UnboundedReceiver<Command>,
-    proxy_overides: &ProxyOverides,
+    gui_config: &ClientConfig,
 ) -> Result<(), Error> {
     info!("connecting");
 
@@ -366,8 +366,8 @@ pub fn load_server_url() -> Option<String> {
     config.get("server").cloned()
 }
 
-pub async fn load_proxy_overides() -> color_eyre::Result<ProxyOverides> {
+pub async fn load_config() -> color_eyre::Result<ClientConfig> {
-    Ok(ProxyOverides {
+    Ok(ClientConfig {
         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::{ProxyOverides, ServerStatus};
+use mumble_web2_common::{ClientConfig, 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>,
-    proxy_overides: &ProxyOverides,
+    gui_config: &ClientConfig,
 ) -> Result<(), Error> {
     info!("connecting");
 
@@ -342,7 +342,7 @@ pub async fn network_connect(
     )
     .ey()?;
 
-    if let Some(server_hash) = &proxy_overides.cert_hash {
+    if let Some(server_hash) = &gui_config.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()?;
     }
@@ -422,7 +422,7 @@ pub fn absolute_url(path: &str) -> Result<Url, Error> {
     Ok(Url::parse(&location.href().ey()?)?.join(path)?)
 }
 
-pub async fn load_proxy_overides() -> color_eyre::Result<ProxyOverides> {
+pub async fn load_config() -> color_eyre::Result<ClientConfig> {
     let config_url = match option_env!("MUMBLE_WEB2_GUI_CONFIG_URL") {
         Some(url) => Url::parse(url)?,
         None => absolute_url("config")?,
@@ -431,7 +431,7 @@ pub async fn load_proxy_overides() -> color_eyre::Result<ProxyOverides> {
 
     let config = reqwest::get(config_url)
         .await?
-        .json::<ProxyOverides>()
+        .json::<ClientConfig>()
         .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::ProxyOverides;
+use mumble_web2_common::ClientConfig;
 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::{ProxyOverides, ServerStatus};
+use mumble_web2_common::{ClientConfig, 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 proxy_overides = ProxyOverides {
+    let mut client_config = ClientConfig {
         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());
-            proxy_overides.cert_hash = Some(hash.into());
+            client_config.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!(
-        "proxy overides:\n{}",
+        "client config:\n{}",
-        toml::to_string_pretty(&proxy_overides)?
+        toml::to_string_pretty(&client_config)?
     );
 
     let config_craft = ConfigCraft {
         server_config: server_config.clone(),
-        proxy_overides,
+        client_config,
     };
 
     let status_craft = StatusCraft {
@@ -252,14 +252,14 @@ impl StatusCraft {
 #[derive(Clone)]
 pub struct ConfigCraft {
     server_config: Arc<Config>,
-    proxy_overides: ProxyOverides,
+    client_config: ClientConfig,
 }
 
 #[craft]
 impl ConfigCraft {
     #[craft(handler)]
-    async fn get_config(&self) -> Json<ProxyOverides> {
+    async fn get_config(&self) -> Json<ClientConfig> {
-        Json(self.proxy_overides.clone())
+        Json(self.client_config.clone())
     }
 
     #[craft(handler)]