Merge a741bbe7e3 into 31ea366e51

This reverts commit dc7791c245.

ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kvm-ui",
   "private": true,
-  "version": "2025.10.24.2140",
+  "version": "2025.11.07.2130",
   "type": "module",
   "engines": {
     "node": "^22.20.0"
@@ -38,7 +38,7 @@
     "@xterm/addon-webgl": "^0.18.0",
     "@xterm/xterm": "^5.5.0",
     "cva": "^1.0.0-beta.4",
-    "dayjs": "^1.11.18",
+    "dayjs": "^1.11.19",
     "eslint-import-resolver-alias": "^1.1.2",
     "focus-trap-react": "^11.0.4",
     "framer-motion": "^12.23.24",
@@ -47,52 +47,52 @@
     "react": "^19.2.0",
     "react-animate-height": "^3.2.3",
     "react-dom": "^19.2.0",
-    "react-hook-form": "^7.65.0",
+    "react-hook-form": "^7.66.0",
     "react-hot-toast": "^2.6.0",
     "react-icons": "^5.5.0",
     "react-router": "^7.9.5",
-    "react-simple-keyboard": "^3.8.131",
+    "react-simple-keyboard": "^3.8.132",
     "react-use-websocket": "^4.13.0",
     "react-xtermjs": "^1.0.10",
     "recharts": "^3.3.0",
     "tailwind-merge": "^3.3.1",
     "usehooks-ts": "^3.1.1",
-    "validator": "^13.15.15",
+    "validator": "^13.15.20",
     "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@eslint/compat": "^1.4.1",
     "@eslint/eslintrc": "^3.3.1",
-    "@eslint/js": "^9.39.0",
+    "@eslint/js": "^9.39.1",
     "@inlang/cli": "^3.0.12",
     "@inlang/paraglide-js": "^2.4.0",
     "@inlang/plugin-m-function-matcher": "^2.1.0",
     "@inlang/plugin-message-format": "^4.0.0",
     "@inlang/sdk": "^2.4.9",
     "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/postcss": "^4.1.16",
+    "@tailwindcss/postcss": "^4.1.17",
     "@tailwindcss/typography": "^0.5.19",
-    "@tailwindcss/vite": "^4.1.16",
+    "@tailwindcss/vite": "^4.1.17",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
     "@types/semver": "^7.7.1",
-    "@types/validator": "^13.15.3",
-    "@typescript-eslint/eslint-plugin": "^8.46.2",
-    "@typescript-eslint/parser": "^8.46.2",
-    "@vitejs/plugin-react-swc": "^4.2.0",
+    "@types/validator": "^13.15.4",
+    "@typescript-eslint/eslint-plugin": "^8.46.3",
+    "@typescript-eslint/parser": "^8.46.3",
+    "@vitejs/plugin-react-swc": "^4.2.1",
     "autoprefixer": "^10.4.21",
-    "eslint": "^9.38.0",
+    "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
-    "globals": "^16.4.0",
+    "globals": "^16.5.0",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.7.1",
-    "tailwindcss": "^4.1.16",
+    "tailwindcss": "^4.1.17",
     "typescript": "^5.9.3",
     "vite": "^7.1.12",
     "vite-tsconfig-paths": "^5.1.4"

ui/src/components/WebRTCVideo.tsx

@@ -417,7 +417,7 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu
       });
 
       if (isRelativeMouseMode) {
-        videoElmRefValue.addEventListener("click",
+        containerRef.current?.addEventListener("click",
           () => {
             if (isPointerLockPossible && !isPointerLockActive && !document.pointerLockElement) {
               requestPointerLock();

ui/src/hooks/stores.ts

@@ -603,6 +603,9 @@ export interface UpdateState {
 
   updateErrorMessage: string | null;
   setUpdateErrorMessage: (errorMessage: string) => void;
+
+  shouldReload: boolean;
+  setShouldReload: (reloadRequired: boolean) => void;
 }
 
 export const useUpdateStore = create<UpdateState>(set => ({
@@ -640,6 +643,9 @@ export const useUpdateStore = create<UpdateState>(set => ({
   updateErrorMessage: null,
   setUpdateErrorMessage: (errorMessage: string) =>
     set({ updateErrorMessage: errorMessage }),
+
+  shouldReload: false,
+  setShouldReload: (reloadRequired: boolean) => set({ shouldReload: reloadRequired }),
 }));
 
 export type UsbConfigModalViews = "updateUsbConfig" | "updateUsbConfigSuccess";
@@ -850,12 +856,12 @@ export interface MacrosState {
   loadMacros: () => Promise<void>;
   saveMacros: (macros: KeySequence[]) => Promise<void>;
   sendFn:
-    | ((
-        method: string,
-        params: unknown,
-        callback?: ((resp: JsonRpcResponse) => void) | undefined,
-      ) => void)
-    | null;
+  | ((
+    method: string,
+    params: unknown,
+    callback?: ((resp: JsonRpcResponse) => void) | undefined,
+  ) => void)
+  | null;
   setSendFn: (
     sendFn: (
       method: string,

ui/src/routes/devices.$id.settings.general.update.tsx

@@ -18,20 +18,24 @@ export default function SettingsGeneralUpdateRoute() {
   const location = useLocation();
   const { updateSuccess } = location.state || {};
 
-  const { setModalView, otaState } = useUpdateStore();
+  const { setModalView, otaState, shouldReload, setShouldReload } = useUpdateStore();
   const { send } = useJsonRpc();
 
   const onClose = useCallback(async () => {
     navigate(".."); // back to the devices.$id.settings page
-    // Add 1s delay between navigation and calling reload() to prevent reload from interrupting the navigation.
-    await sleep(1000);
-    window.location.reload(); // force a full reload to ensure the current device/cloud UI version is loaded
-  }, [navigate]);
+
+    if (shouldReload) {
+      setShouldReload(false);
+      await sleep(1000);      // Add 1s delay between navigation and calling reload() to prevent reload from interrupting the navigation.
+      window.location.reload(); // force a full reload to ensure the current device/cloud UI version is loaded
+    }
+  }, [navigate, setShouldReload, shouldReload]);
 
   const onConfirmUpdate = useCallback(() => {
+    setShouldReload(true);
     send("tryUpdate", {});
     setModalView("updating");
-  }, [send, setModalView]);
+  }, [send, setModalView, setShouldReload]);
 
   useEffect(() => {
     if (otaState.updating) {
@@ -133,6 +137,7 @@ function LoadingState({
   const { setModalView } = useUpdateStore();
 
   const progressBarRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     abortControllerRef.current = new AbortController();
     const signal = abortControllerRef.current.signal;