Scale box bounderies

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>

.gitea/workflows/build-release.yaml

@@ -18,7 +18,7 @@ jobs:
         run: curl -L --proto '=https' --tlsv1.2 -sSf https://raw.githubusercontent.com/cargo-bins/cargo-binstall/main/install-from-binstall-release.sh | bash
 
       - name: Install dioxus-cli
-        run: cargo binstall dioxus-cli --version 0.7.1
+        run: cargo binstall dioxus-cli --version 0.7.2
 
       - uses: Swatinem/rust-cache@v2
 

.vscode/settings.json

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

Cargo.lock

@@ -914,9 +914,9 @@ dependencies = [
 
 [[package]]
 name = "const-serialize"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fd339aa356cc6452308fad2ee56623f900a8e68bc0ab9360a0ddb8270e5640c8"
+checksum = "ad7154afa56de2f290e3c82c2c6dc4f5b282b6870903f56ef3509aba95866edc"
 dependencies = [
  "const-serialize-macro",
  "serde",
@@ -924,9 +924,9 @@ dependencies = [
 
 [[package]]
 name = "const-serialize-macro"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "797d158acb331e2a89d696343a27cd39bf7e36aaef33ba4799a5ef1526e24861"
+checksum = "4f160aad86b4343e8d4e261fee9965c3005b2fd6bc117d172ab65948779e4acf"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -1479,9 +1479,9 @@ dependencies = [
 
 [[package]]
 name = "dioxus"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f76e820919058a685a1fdbb2ef4888c73ac77d623c39a7dfde2aa812947246be"
+checksum = "3a115f9dbe5900c6044ee6a791e1b160c29989c6a8721eec099e01a964e5dae4"
 dependencies = [
  "dioxus-asset-resolver",
  "dioxus-cli-config",
@@ -1507,9 +1507,9 @@ dependencies = [
 
 [[package]]
 name = "dioxus-asset-resolver"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7f6a124667ce5565c39fe2f33af45c21fe459c5bfcf7a8074ad12c9e9da5817c"
+checksum = "6851ae49ba3988f1b77f6ef826eb142e811602129841c24bf5a4e103708d9844"
 dependencies = [
  "dioxus-cli-config",
  "http",
@@ -1528,18 +1528,18 @@ dependencies = [
 
 [[package]]
 name = "dioxus-cli-config"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "babc8eaf90379352bc4820830749fd231feb9312433d4094b4e7b79d912b3d96"
+checksum = "c59e9d9da2e7334fdae5d77e3989207aa549062f74ff1ca2171393bbdd7fda90"
 dependencies = [
  "wasm-bindgen",
 ]
 
 [[package]]
 name = "dioxus-config-macro"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "30018b5b95567cee42febbb444d5e5e47dbe3e91fa6e44b9e571edad0184cd36"
+checksum = "9bd56be5ea6c9f416b25e9e3adc910c02127be75b6d1ecd567661f31920b27ba"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -1547,15 +1547,15 @@ dependencies = [
 
 [[package]]
 name = "dioxus-config-macros"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0a16b25f8761253ed5ffa4d0789376310fbbc1bbaa8190fc2f374db82c6285a1"
+checksum = "c49327465c2d434d00fb4c86bd35ae72155b479622e09352b950d9ab4807bf23"
 
 [[package]]
 name = "dioxus-core"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "75468d08468919f783b0f7ee826802f4e8e66c5b5a0451245d861c211ca18216"
+checksum = "7400cbd21a98e585a13f8c29574da9b8afb2fd343f712618042b6c71761f0933"
 dependencies = [
  "anyhow",
  "const_format",
@@ -1571,14 +1571,13 @@ dependencies = [
  "slotmap",
  "subsecond",
  "tracing",
- "warnings",
 ]
 
 [[package]]
 name = "dioxus-core-macro"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f145abdb2a3f858456cb4382390863cf0398c228ad0733618f48891da7687be3"
+checksum = "e51c0eb7eb76dd5a0b9a116d94d29ca78924a1ed1fcb7ea072eda5045d3ac056"
 dependencies = [
  "convert_case 0.8.0",
  "dioxus-rsx",
@@ -1589,15 +1588,15 @@ dependencies = [
 
 [[package]]
 name = "dioxus-core-types"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "36f5ecf5a51de06d78aded3b5f7516a258f53117cba718bc5706317a3c04c844"
+checksum = "0652ab5f9c2c32261d44a3155debbfd909ed03d03434d7f70f5a796bf255c519"
 
 [[package]]
 name = "dioxus-desktop"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f493c74ff09410c5eadf42abd031d4b3d4032a4d5a2411c77d1d0d5156ca3687"
+checksum = "b24aa7e4aa87fce202c5e67d560cddd9ed67ad533f16b7d922916c04993766ff"
 dependencies = [
  "async-trait",
  "base64",
@@ -1650,9 +1649,9 @@ dependencies = [
 
 [[package]]
 name = "dioxus-devtools"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4eb2c5019b7fa72e8e6b21ba99e9263bd390c9a30bbf09793b72f4b57ed7c3d7"
+checksum = "9748128bcd102b10e58c765939807053ccab542206a939b8bab228077455c259"
 dependencies = [
  "dioxus-cli-config",
  "dioxus-core",
@@ -1664,14 +1663,13 @@ dependencies = [
  "thiserror 2.0.17",
  "tracing",
  "tungstenite 0.27.0",
- "warnings",
 ]
 
 [[package]]
 name = "dioxus-devtools-types"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7b007cec5b8548281921c4e4678926a3936e9d6757e951380685cc6121a6f974"
+checksum = "48540ca8a0ab1ec81cd4db35f0c9713d43b158647fc1dcb0d79965fc3b41d96c"
 dependencies = [
  "dioxus-core",
  "serde",
@@ -1680,9 +1678,9 @@ dependencies = [
 
 [[package]]
 name = "dioxus-document"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8c55bcae9aaf150d4a141c61b3826da5a7ac23dfff09726568525cd46336e9a2"
+checksum = "501a189b391d091c9aa02c05f5b25f5d0d17fa0e1016e000b0fdbb073d77cd6a"
 dependencies = [
  "dioxus-core",
  "dioxus-core-macro",
@@ -1699,9 +1697,9 @@ dependencies = [
 
 [[package]]
 name = "dioxus-fullstack"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ff04cef82d6639eb15186f626298645dbd92978bf66dc3efd2e5984a2ff4a1ff"
+checksum = "54150804265defdb21a6f2d8914a45316a1e7fb70ab22c30cf836e8fe2f8081b"
 dependencies = [
  "anyhow",
  "async-stream",
@@ -1756,9 +1754,9 @@ dependencies = [
 
 [[package]]
 name = "dioxus-fullstack-core"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "41281c7cd4d311a50933256e19a5d91d0d950ad350dd3232bd4321fdd3a59fb0"
+checksum = "d0a9be2ef4d701520eefef284d218fb35b159dccd6bccc02b5bad42945e2599d"
 dependencies = [
  "anyhow",
  "axum-core",
@@ -1784,9 +1782,9 @@ dependencies = [
 
 [[package]]
 name = "dioxus-fullstack-macro"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ae73023c8b8fee2692fc50a28063336f0b6930e86727e30c1047c92d30805b49"
+checksum = "a31ea4451fe8c9d2af24fb718a94966d5fd7e11325777e5b5a59085c5c85e5fb"
 dependencies = [
  "const_format",
  "convert_case 0.8.0",
@@ -1798,9 +1796,9 @@ dependencies = [
 
 [[package]]
 name = "dioxus-history"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dac73657da5c7a20629482d774b52f4a4f7cb57a520649f1d855d4073e809c98"
+checksum = "55d704b3ba9504cb3c9cde49499b75546d1faaff2736f4c368aca6c061c48ac3"
 dependencies = [
  "dioxus-core",
  "tracing",
@@ -1808,9 +1806,9 @@ dependencies = [
 
 [[package]]
 name = "dioxus-hooks"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7ffd445f16d64939e06cd71a1c63a665f383fda6b7882f4c6f8f1bd6efca2046"
+checksum = "79c6d68be372eca8186a1c57ec49be67a6ea46022150b5e85ab6a6acde52d272"
 dependencies = [
  "dioxus-core",
  "dioxus-signals",
@@ -1820,14 +1818,13 @@ dependencies = [
  "rustversion",
  "slab",
  "tracing",
- "warnings",
 ]
 
 [[package]]
 name = "dioxus-html"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9f407fc73a9554a644872fcccc9faf762acad8f45158e3d67e42ab8dd42f4586"
+checksum = "3aa87ecfa0f38ec286be25789a7f2d6c30778111f1fbff563da4bae41d171496"
 dependencies = [
  "async-trait",
  "bytes",
@@ -1852,9 +1849,9 @@ dependencies = [
 
 [[package]]
 name = "dioxus-html-internal-macro"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a968aae4bc92de87cbac3d0d043803b25a7c62c187841e61adcc9b49917c2b2a"
+checksum = "49301d0e389378e8070b8b704110339a0d3358efad9f5ad483ffab3a8d406dae"
 dependencies = [
  "convert_case 0.8.0",
  "proc-macro2",
@@ -1864,9 +1861,9 @@ dependencies = [
 
 [[package]]
 name = "dioxus-interpreter-js"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "83ab170d89308399205f8ad3d43d8d419affe317016b41ca0695186f7593cba2"
+checksum = "f5437a89d3ef7edfebc0f10acb065f1709cb7ffb678e3a4bb1416706d71f7c67"
 dependencies = [
  "dioxus-core",
  "dioxus-core-types",
@@ -1884,9 +1881,9 @@ dependencies = [
 
 [[package]]
 name = "dioxus-logger"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "42237934c6a67f5ed9a8c37e47ca980ee7cfec9e783a9a1f8c2e36c8b96ae74b"
+checksum = "2b25ebfbc193cebcf5af5e19b8ee7c6adee486fbd1c12f11aea058b464da16f9"
 dependencies = [
  "dioxus-cli-config",
  "tracing",
@@ -1896,21 +1893,22 @@ dependencies = [
 
 [[package]]
 name = "dioxus-rsx"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f026380dfda8b93ad995c0a90a62a17b8afeb246baff1b781a52c7b1b3ebd791"
+checksum = "19d97c02689beff55767ba5f6e185ffd204c6a193e372f0fead8a3722c6f7eea"
 dependencies = [
  "proc-macro2",
  "proc-macro2-diagnostics",
  "quote",
+ "rustversion",
  "syn 2.0.108",
 ]
 
 [[package]]
 name = "dioxus-signals"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3895cc17ff5b43ada07743111be586e7a927ed7ec511457020e4235e13e63fe6"
+checksum = "27fc4df7a31a7f02e5a0b40884bb66ee165226a05d75fce03baa44029e438762"
 dependencies = [
  "dioxus-core",
  "futures-channel",
@@ -1924,20 +1922,21 @@ dependencies = [
 
 [[package]]
 name = "dioxus-stores"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8521729ac35f362476ac4eb7d1c4ab79e7e92a0facfdea3ee978c0ddf7108d37"
+checksum = "e2dec3cd677078824a733de25ddbe8e987cfc8d98aec29b7d199e1fdb8452b96"
 dependencies = [
  "dioxus-core",
  "dioxus-signals",
  "dioxus-stores-macro",
+ "generational-box",
 ]
 
 [[package]]
 name = "dioxus-stores-macro"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "23a733d2684dc843e81954f6176b3353e4cfc71b6978a8e464591bb5536f610b"
+checksum = "c9b7f085e374aaaa78403227b9bd83675c4078388d41a41b67dfbe4aa0bb64d5"
 dependencies = [
  "convert_case 0.8.0",
  "proc-macro2",
@@ -1947,9 +1946,9 @@ dependencies = [
 
 [[package]]
 name = "dioxus-web"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "76155ecd44535e7c096ec8c5aac4a945899e47567ead4869babdaa74f3f9bca0"
+checksum = "315009f3a77c3c813415b3b8a8ea62a4d7a32dde9a666664b30862d4386e8456"
 dependencies = [
  "dioxus-cli-config",
  "dioxus-core",
@@ -2271,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"
@@ -2664,9 +2674,9 @@ dependencies = [
 
 [[package]]
 name = "generational-box"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b3c1ae09dfd2d455484a54b56129b9821241c4b0e412227806b6c3730cd18a29"
+checksum = "e658d10252a15200ca4a1c67c7180fc0baffa3f92869bbd903025daf6f70fd65"
 dependencies = [
  "parking_lot",
  "tracing",
@@ -3158,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"
@@ -3669,9 +3688,9 @@ dependencies = [
 
 [[package]]
 name = "lazy-js-bundle"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "409273b42d0e3ae7c8ce6b8cfbc6a27b7c7d83bbb94fc7f93f22cc9b90eea078"
+checksum = "21972afec4627b7ba0de60b5269585b5ac2f56d559b0696f57eee6daf8a51b68"
 
 [[package]]
 name = "lazy_static"
@@ -3974,9 +3993,9 @@ dependencies = [
 
 [[package]]
 name = "manganis"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "124f8f094eb75783b38209ce4d534b9617da4efac652802d9bafe05043a3ec95"
+checksum = "97c63ae68d25457a579b7714806088c5cb44c536cf624a53a17184878f9f0bcd"
 dependencies = [
  "const-serialize",
  "manganis-core",
@@ -3985,9 +4004,9 @@ dependencies = [
 
 [[package]]
 name = "manganis-core"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "41fbd1fb8c5aabcc54c6b02dbc968e1c89c28f3e543f2789ef9e3ce45dbdf5df"
+checksum = "88d071660b149f985cbab8b23f2004ea6dd5cf947b63a0843f0e2f46e6af7229"
 dependencies = [
  "const-serialize",
  "dioxus-cli-config",
@@ -3997,9 +4016,9 @@ dependencies = [
 
 [[package]]
 name = "manganis-macro"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "45d6fec2a8249739bb30b53a08ecbb217f76096c08f1053f38ec3981ba424c11"
+checksum = "9793d1d33778245b4240c330a8f575d208ce077c7e7bab1c79064252ddd4a162"
 dependencies = [
  "dunce",
  "macro-string",
@@ -4262,6 +4281,7 @@ dependencies = [
  "dioxus",
  "dioxus-asset-resolver",
  "dioxus-web",
+ "etcetera",
  "futures",
  "futures-channel",
  "gloo-timers",
@@ -5841,12 +5861,12 @@ dependencies = [
 [[package]]
 name = "rfd"
 version = "0.16.0"
-source = "git+https://github.com/samsartor/rfd.git#d8ffa02ecc5071f44a514ec7736dc0c1296a9845"
+source = "git+https://github.com/PolyMeilex/rfd.git#f3258c56e7099572f1a3cffc30b3677dba88142c"
 dependencies = [
- "ashpd",
  "block2",
  "dispatch2",
  "js-sys",
+ "libc",
  "log",
  "objc2",
  "objc2-app-kit",
@@ -5854,11 +5874,10 @@ dependencies = [
  "objc2-foundation",
  "pollster",
  "raw-window-handle 0.6.2",
- "urlencoding",
  "wasm-bindgen",
  "wasm-bindgen-futures",
  "web-sys",
- "windows-sys 0.60.2",
+ "windows-sys 0.61.2",
 ]
 
 [[package]]
@@ -6996,9 +7015,9 @@ dependencies = [
 
 [[package]]
 name = "subsecond"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "834e8caec50249083ee6972a2f7645c4baadcb39d49ea801da1dc1d5e1c2ccb9"
+checksum = "c09bc2c9ef0381b403ab8b58122961cb83266d16b1f55f9486d5857ba4a9ae26"
 dependencies = [
  "js-sys",
  "libc",
@@ -7015,9 +7034,9 @@ dependencies = [
 
 [[package]]
 name = "subsecond-types"
-version = "0.7.1"
+version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c6beffea67e72a7a530990b270fd0277971eae564fdc10c1e0080e928b477fab"
+checksum = "d07aa455c66ddfdbb51507537402b961e027846468954ef8d974bce65dff9eb0"
 dependencies = [
  "serde",
 ]

docker/windows-release-builder.Dockerfile

@@ -44,10 +44,14 @@ RUN choco install rustup.install -y --no-progress
 RUN rustup toolchain install stable-x86_64-pc-windows-msvc
 RUN rustup default stable-x86_64-pc-windows-msvc
 
+# Install carog binstall
+RUN Set-ExecutionPolicy Unrestricted -Scope Process; `
+  iex (Invoke-WebRequest "https://raw.githubusercontent.com/cargo-bins/cargo-binstall/main/install-from-binstall-release.ps1" -UseBasicParsing).Content
+
 SHELL ["C:\\Program Files (x86)\\Microsoft Visual Studio\\2022\\BuildTools\\Common7\\Tools\\VsDevCmd.bat", "&&", "powershell.exe", "-NoLogo", "-ExecutionPolicy", "Bypass"]
 # Install dioxus-cli from git HEAD with cargo
 # This is to work around a bug in the windows builder upstream.
 # Dioxus has released 0.7.2, but it seems to be broken for now.
-RUN cargo install --git https://github.com/DioxusLabs/dioxus dioxus-cli
+RUN cargo binstall dioxus-cli
 
 ENTRYPOINT ["C:\\Program Files (x86)\\Microsoft Visual Studio\\2022\\BuildTools\\Common7\\Tools\\VsDevCmd.bat", "&&", "powershell.exe", "-NoLogo", "-ExecutionPolicy", "Bypass"]

gui/Cargo.toml

@@ -63,10 +63,11 @@ 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
 # ================
-dioxus = { version = "0.7.1" }
+dioxus = { version = "0.7.2" }
 once_cell = "1.19.0"
 asynchronous-codec = { workspace = true }
 futures = "^0.3.30"
@@ -87,12 +88,12 @@ tracing = "^0.1.40"
 color-eyre = "^0.6.3"
 crossbeam-queue = "^0.3.11"
 lol_html = "^2.2.0"
-rfd = { git = "https://github.com/samsartor/rfd.git", version = "^0.16.0", default-features = false }
+rfd = { git = "https://github.com/PolyMeilex/rfd.git", version = "^0.16.0", default-features = false }
 base64 = "^0.22"
 mime_guess = "^2.0.5"
 async_cell = "^0.2.3"
 reqwest = { version = "^0.12.22", features = ["json"] }
-dioxus-asset-resolver = "0.7.1"
+dioxus-asset-resolver = "0.7.2"
 
 # Denoising
 # =========
@@ -130,6 +131,5 @@ desktop = [
   "cpal",
   "dasp_ring_buffer",
   "rfd/xdg-portal",
-  "rfd/tokio",
+  "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/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/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

@@ -341,81 +341,71 @@ pub fn ControlView(config: Resource<ClientConfig>) -> Element {
     let connection_status = match &*status.read() {
         Connecting => rsx! {
             div {
-                style: "color: \"{connecting_color}\";",
+                class: "connection_status",
+                style: "color: {connecting_color};",
+                div {
                     span {
                         class: "material-symbols-outlined",
-                    style: "vertical-align: middle; font-size: 30px;",
                         "signal_cellular_alt_2_bar"
                     }
                     span {
-                    style: "width: 5px; display: inline-block;"
+                        class: "status_text",
-                }
-                span {
-                    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",
-                    }
-                    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",
+                style: "color: {disconnected_color};",
+                div {
                     span {
                         class: "material-symbols-outlined",
-                    style: "vertical-align: middle;",
                         "signal_disconnected"
                     }
                     span {
-                    style: "width: 5px; display: inline-block;"
+                        class: "status_text",
-                }
-                span {
-                    style: "vertical-align: middle;",
                         " Disconnected"
                     }
                 }
+            }
         },
         Failed(_) => rsx! {
             div {
-                style: "color: \"{failed_color}\";",
+                class: "connection_status",
+                style: "color: {failed_color};",
+                div {
                     span {
                         class: "material-symbols-outlined",
-                    style: "vertical-align: middle;",
                         "error"
                     }
                     span {
-                    style: "width: 5px; display: inline-block;"
+                        class: "status_text",
-                }
-                span {
-                    style: "vertical-align: middle;",
                         " Failed"
                     }
                 }
+            }
         },
     };
 
@@ -445,16 +435,17 @@ pub fn ControlView(config: Resource<ClientConfig>) -> 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" }
@@ -558,7 +549,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 +566,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(),

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 std::collections::HashMap;
 use std::mem::replace;
 use std::net::ToSocketAddrs;
 use std::sync::Arc;
@@ -147,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(),
@@ -314,12 +316,54 @@ 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 fn load_server_url() -> Option<String> {
+    let config = load_config_map();
+    config.get("server").cloned()
 }
 
 pub async fn load_config() -> color_eyre::Result<ClientConfig> {

gui/src/imp/web.rs

@@ -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,6 +412,10 @@ 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();