Update to latest GUI dependencies

flake.nix

@@ -94,6 +94,7 @@
               librsvg
               freetype
               expat
+              libusb1
             ])
             ++ lib.optionals pkgs.stdenv.isDarwin [
               pkgs.darwin.apple_sdk.frameworks.Security

gui/package.json

@@ -3,45 +3,43 @@
   "version": "0.5.1",
   "private": true,
   "dependencies": {
-    "@fluent/bundle": "^0.17.1",
-    "@fluent/react": "^0.14.1",
-    "@fontsource/poppins": "^4.5.8",
-    "@formatjs/intl-localematcher": "^0.2.32",
-    "@react-three/drei": "^9.80.3",
-    "@react-three/fiber": "^8.13.6",
-    "@tauri-apps/api": "=2.0.0-alpha.8",
-    "@tauri-apps/plugin-app": "=2.0.0-alpha.1",
-    "@tauri-apps/plugin-dialog": "=2.0.0-alpha.1",
-    "@tauri-apps/plugin-fs": "=2.0.0-alpha.1",
-    "@tauri-apps/plugin-os": "=2.0.0-alpha.2",
-    "@tauri-apps/plugin-shell": "=2.0.0-alpha.1",
-    "@tauri-apps/plugin-window": "=2.0.0-alpha.1",
-    "@vitejs/plugin-react": "^3.0.0",
-    "browser-fs-access": "^0.34.1",
-    "browserslist": "^4.18.1",
-    "classnames": "^2.3.1",
-    "eslint-config-react-app": "^7.0.0",
+    "@fluent/bundle": "^0.18.0",
+    "@fluent/react": "^0.15.2",
+    "@fontsource/poppins": "^5.0.8",
+    "@formatjs/intl-localematcher": "^0.5.4",
+    "@react-three/drei": "^9.97.0",
+    "@react-three/fiber": "^8.15.16",
+    "@tauri-apps/api": "=2.0.0-alpha.14",
+    "@tauri-apps/plugin-dialog": "=2.0.0-alpha.5",
+    "@tauri-apps/plugin-fs": "=2.0.0-alpha.6",
+    "@tauri-apps/plugin-os": "=2.0.0-alpha.6",
+    "@tauri-apps/plugin-shell": "=2.0.0-alpha.5",
+    "@vitejs/plugin-react": "^4.2.1",
+    "browser-fs-access": "^0.35.0",
+    "browserslist": "^4.22.3",
+    "classnames": "^2.5.1",
+    "eslint-config-react-app": "^7.0.1",
     "flatbuffers": "^22.10.26",
     "identity-obj-proxy": "^3.0.0",
-    "intl-pluralrules": "^1.3.1",
-    "ip-num": "^1.4.1",
+    "intl-pluralrules": "^2.0.1",
+    "ip-num": "^1.5.1",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-normalize": "^10.0.1",
-    "postcss-preset-env": "^7.0.1",
+    "postcss-preset-env": "^9.3.0",
     "prompts": "^2.4.2",
-    "react": "^18.0.0",
-    "react-dev-utils": "^12.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^18.2.0",
+    "react-dev-utils": "^12.0.1",
+    "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
-    "react-hook-form": "^7.29.0",
-    "react-modal": "^3.15.1",
+    "react-hook-form": "^7.50.0",
+    "react-modal": "^3.16.1",
     "react-responsive": "^9.0.2",
-    "react-router-dom": "^6.2.2",
-    "semver": "^7.5.3",
+    "react-router-dom": "^6.22.0",
+    "semver": "^7.5.4",
     "solarxr-protocol": "file:../solarxr-protocol",
-    "three": "^0.155.0",
-    "ts-pattern": "^5.0.1",
-    "typescript": "^5.1.6"
+    "three": "^0.161.0",
+    "ts-pattern": "^5.0.6",
+    "typescript": "^5.3.3"
   },
   "scripts": {
     "start": "vite --force",
@@ -73,32 +71,32 @@
     ]
   },
   "devDependencies": {
-    "@dword-design/eslint-plugin-import-alias": "^4.0.8",
-    "@tailwindcss/forms": "^0.5.3",
-    "@tauri-apps/cli": "=2.0.0-alpha.17",
-    "@types/file-saver": "^2.0.5",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.5",
-    "@types/react-helmet": "^6.1.6",
-    "@types/react-modal": "3.13.1",
-    "@types/three": "^0.155.0",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
-    "@typescript-eslint/parser": "^5.60.1",
-    "autoprefixer": "^10.4.4",
+    "@dword-design/eslint-plugin-import-alias": "^4.0.9",
+    "@tailwindcss/forms": "^0.5.7",
+    "@tauri-apps/cli": "=2.0.0-alpha.21",
+    "@types/file-saver": "^2.0.7",
+    "@types/react": "^18.2.51",
+    "@types/react-dom": "^18.2.18",
+    "@types/react-helmet": "^6.1.11",
+    "@types/react-modal": "3.16.3",
+    "@types/three": "^0.161.2",
+    "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "@typescript-eslint/parser": "^6.20.0",
+    "autoprefixer": "^10.4.17",
     "cross-env": "^7.0.3",
-    "eslint": "^8.44.0",
+    "eslint": "^8.56.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-import-resolver-typescript": "^3.5.5",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "postcss": "^8.4.31",
-    "prettier": "^2.8.8",
-    "pretty-quick": "^3.1.3",
-    "rollup-plugin-visualizer": "^5.9.2",
-    "tailwind-gradient-mask-image": "^1.0.0",
-    "tailwindcss": "^3.3.2",
-    "vite": "^4.3.9"
+    "postcss": "^8.4.33",
+    "prettier": "^3.2.4",
+    "pretty-quick": "^4.0.0",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "tailwind-gradient-mask-image": "^1.1.0",
+    "tailwindcss": "^3.4.1",
+    "vite": "^5.0.12"
   }
 }

gui/src-tauri/Cargo.toml

@@ -21,35 +21,34 @@ default = ["custom-protocol"]
 custom-protocol = ["tauri/custom-protocol"]
 
 [build-dependencies]
-tauri-build = { version = "2.0.0-alpha", features = [] }
-cfg_aliases = "0.1"
-shadow-rs = "0.23"
+tauri-build = { version = "=2.0.0-alpha.14", features = [] }
+cfg_aliases = "0.2"
+shadow-rs = "0.26"
 
 [dependencies]
 serde_json = "1"
 serde = { version = "1", features = ["derive"] }
-tauri = { version = "2.0.0-alpha", features = ["devtools"] }
-tauri-runtime = "1.0.0-alpha"
-tauri-plugin-dialog = "2.0.0-alpha"
-tauri-plugin-fs = "2.0.0-alpha"
-tauri-plugin-os = "2.0.0-alpha"
-tauri-plugin-shell = "2.0.0-alpha"
-tauri-plugin-window = { version = "2.0.0-alpha", features = ["devtools"] }
-flexi_logger = "0.25"
+tauri = { version = "=2.0.0-alpha.21", features = ["devtools"] }
+tauri-runtime = "=1.0.0-alpha.8"
+tauri-plugin-dialog = "=2.0.0-alpha.7"
+tauri-plugin-fs = "=2.0.0-alpha.7"
+tauri-plugin-os = "=2.0.0-alpha.6"
+tauri-plugin-shell = "=2.0.0-alpha.6"
+flexi_logger = "0.27"
 log-panics = { version = "2", features = ["with-backtrace"] }
 log = "0.4"
 clap = { version = "4.0.29", features = ["derive"] }
 clap-verbosity-flag = "2"
 rand = "0.8.5"
 tempfile = "3"
-which = "4.3"
+which = "6.0"
 glob = "0.3"
 open = "5"
-shadow-rs = { version = "0.23", default-features = false }
+shadow-rs = { version = "0.26", default-features = false }
 const_format = "0.2.30"
 cfg-if = "1"
 color-eyre = "0.6"
-rfd = "0.11.4"
+rfd = "0.12"
 dirs-next = "2.0.0"
 
 [target.'cfg(windows)'.dependencies]

gui/src-tauri/src/main.rs

@@ -122,15 +122,17 @@ fn main() -> Result<()> {
 		if !webview2_exists() {
 			// This makes a dialog appear which let's you press Ok or Cancel
 			// If you press Ok it will open the SlimeVR installer documentation
-			use rfd::{MessageButtons, MessageDialog, MessageLevel};
+			use rfd::{
+				MessageButtons, MessageDialog, MessageDialogResult, MessageLevel,
+			};
 
 			let confirm = MessageDialog::new()
 				.set_title("SlimeVR")
 				.set_description("Couldn't find WebView2 installed. You can install it with the SlimeVR installer")
 				.set_buttons(MessageButtons::OkCancel)
 				.set_level(MessageLevel::Error)
 				.show();
-			if confirm {
+			if confirm == MessageDialogResult::Ok {
 				open::that("https://docs.slimevr.dev/server-setup/installing-and-connecting.html#install-the-latest-slimevr-installer").unwrap();
 			}
 			return Ok(());
@@ -170,7 +172,6 @@ fn main() -> Result<()> {
 		.plugin(tauri_plugin_fs::init())
 		.plugin(tauri_plugin_os::init())
 		.plugin(tauri_plugin_shell::init())
-		.plugin(tauri_plugin_window::init())
 		.invoke_handler(tauri::generate_handler![
 			update_window_state,
 			logging,
@@ -236,21 +237,21 @@ fn main() -> Result<()> {
 							_ => ("other", "".to_string()),
 						};
 						app_handle
-							.emit_all("server-status", emit_me)
+							.emit("server-status", emit_me)
 							.expect("Check server log files. \nFailed to emit");
 					}
 					log::error!("Java server receiver died");
 					app_handle
-						.emit_all("server-status", ("other", "receiver cancelled"))
+						.emit("server-status", ("other", "receiver cancelled"))
 						.expect("Failed to emit");
 				});
 			}
 			Ok(())
 		})
-		.on_window_event(|e| match e.event() {
+		.on_window_event(|w, e| match e {
 			WindowEvent::CloseRequested { .. } => {
-				let window_state = e.window().state::<Mutex<WindowState>>();
-				if let Err(e) = update_window_state(e.window().clone(), window_state) {
+				let window_state = w.state::<Mutex<WindowState>>();
+				if let Err(e) = update_window_state(w.clone(), window_state) {
 					log::error!("failed to update window state {}", e)
 				}
 			}
@@ -298,15 +299,17 @@ fn main() -> Result<()> {
 			// I should log this anyways, don't want to dig a grave by not logging the error.
 			log::error!("CreateWebview error {}", error);
 
-			use rfd::{MessageButtons, MessageDialog, MessageLevel};
+			use rfd::{
+				MessageButtons, MessageDialog, MessageDialogResult, MessageLevel,
+			};
 
 			let confirm = MessageDialog::new()
 				.set_title("SlimeVR")
 				.set_description("You seem to have a faulty installation of WebView2. You can check a guide on how to fix that in the docs!")
 				.set_buttons(MessageButtons::OkCancel)
 				.set_level(MessageLevel::Error)
 				.show();
-			if confirm {
+			if confirm == MessageDialogResult::Ok {
 				open::that("https://docs.slimevr.dev/common-issues.html#webview2-is-missing--slimevr-gui-crashes-immediately--panicked-at--webview2error").unwrap();
 			}
 		}

gui/src-tauri/src/util.rs

@@ -95,17 +95,17 @@ pub fn spawn_java(java: &OsStr, java_version: &OsStr) -> std::io::Result<Child>
 #[cfg(desktop)]
 pub fn show_error(text: &str) -> bool {
 	use rand::{seq::SliceRandom, thread_rng};
-	use rfd::{MessageButtons, MessageDialog, MessageLevel};
+	use rfd::{MessageButtons, MessageDialog, MessageDialogResult, MessageLevel};
 
 	MessageDialog::new()
-		.set_title(&format!(
+		.set_title(format!(
 			"SlimeVR GUI crashed - {}",
 			POSSIBLE_TITLES.choose(&mut thread_rng()).unwrap()
 		))
 		.set_description(text)
 		.set_buttons(MessageButtons::Ok)
 		.set_level(MessageLevel::Error)
-		.show()
+		.show() == MessageDialogResult::Ok
 }
 
 #[cfg(mobile)]

gui/src/App.tsx

@@ -47,7 +47,7 @@ import { CalibrationTutorialPage } from './components/onboarding/pages/Calibrati
 import { AssignmentTutorialPage } from './components/onboarding/pages/assignment-preparation/AssignmentTutorial';
 import { open } from '@tauri-apps/plugin-shell';
 import semver from 'semver';
-import { useBreakpoint } from './hooks/breakpoint';
+import { useBreakpoint, useIsTauri } from './hooks/breakpoint';
 import { VRModePage } from './components/vr-mode/VRModePage';
 import { InterfaceSettings } from './components/settings/pages/InterfaceSettings';
 import { error, log } from './utils/logging';
@@ -157,6 +157,7 @@ export default function App() {
   const websocketAPI = useProvideWebsocketApi();
   const { l10n } = useLocalization();
   const [updateFound, setUpdateFound] = useState('');
+  const isTauri = useIsTauri();
   useEffect(() => {
     async function fetchReleases() {
       const releases = await fetch(
@@ -176,7 +177,7 @@ export default function App() {
     fetchReleases().catch(() => error('failed to fetch releases'));
   }, []);
 
-  if (window.__TAURI_METADATA__) {
+  if (isTauri) {
     useEffect(() => {
       os.type()
         .then((type) => document.body.classList.add(type.toLowerCase()))
@@ -190,7 +191,7 @@ export default function App() {
     }, []);
   }
 
-  if (window.__TAURI_METADATA__) {
+  if (isTauri) {
     useEffect(() => {
       const unlisten = listen(
         'server-status',

gui/src/components/TopBar.tsx

@@ -1,4 +1,4 @@
-import { getCurrent } from '@tauri-apps/plugin-window';
+import { getCurrent } from '@tauri-apps/api/window';
 import { ReactNode, useContext, useEffect, useState } from 'react';
 import { NavLink, useMatch } from 'react-router-dom';
 import {
@@ -21,7 +21,7 @@ import classNames from 'classnames';
 import { QuestionIcon } from './commons/icon/QuestionIcon';
 import { useBreakpoint, useIsTauri } from '@/hooks/breakpoint';
 import { GearIcon } from './commons/icon/GearIcon';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import { useTrackers } from '@/hooks/tracker';
 import { TrackersStillOnModal } from './TrackersStillOnModal';
 import { useConfig } from '@/hooks/config';

gui/src/components/commons/Input.tsx

@@ -78,8 +78,8 @@ export const InputInside = forwardRef<
   const computedValue = disabled
     ? placeholder
     : value !== undefined
-    ? value
-    : '';
+      ? value
+      : '';
 
   return (
     <label className="flex flex-col gap-1">

gui/src/components/onboarding/pages/CalibrationTutorial.tsx

@@ -102,8 +102,8 @@ export function CalibrationTutorialPage() {
                     isCounting
                       ? (IMU_CALIBRATION_TIME - timer) / IMU_CALIBRATION_TIME
                       : calibrationStatus === CalibrationStatus.SUCCESS
-                      ? 1
-                      : 0
+                        ? 1
+                        : 0
                   }
                   height={14}
                   animated={true}

gui/src/components/onboarding/pages/ConnectTracker.tsx

@@ -210,8 +210,8 @@ export function ConnectTrackersPage() {
                 state.alonePage
                   ? '/'
                   : bnoExists
-                  ? '/onboarding/calibration-tutorial'
-                  : '/onboarding/assign-tutorial'
+                    ? '/onboarding/calibration-tutorial'
+                    : '/onboarding/assign-tutorial'
               }
               className="ml-auto"
             >

gui/src/components/onboarding/pages/body-proportions/ManualProportions.tsx

@@ -53,13 +53,15 @@ export function ManualProportionsPage() {
 
   const savedValue = useMemo(() => localStorage.getItem('ratioMode'), []);
 
+  const defaultValues = { precise: false, ratio: savedValue !== 'false' };
+
   const { control, watch } = useForm<{ precise: boolean; ratio: boolean }>({
-    defaultValues: { precise: false, ratio: savedValue !== 'false' },
+    defaultValues,
   });
   const { precise, ratio } = watch();
 
   useEffect(() => {
-    localStorage.setItem('ratioMode', ratio.toString());
+    localStorage.setItem('ratioMode', ratio?.toString() ?? 'true');
   }, [ratio]);
 
   return (
@@ -94,7 +96,7 @@ export function ManualProportionsPage() {
               </div>
               <div className="w-full px-2">
                 <BodyProportions
-                  precise={precise}
+                  precise={precise ?? defaultValues.precise}
                   type={ratio ? 'ratio' : 'linear'}
                   variant={state.alonePage ? 'alone' : 'onboarding'}
                 ></BodyProportions>