chore: Implement additional improvements to the USB passthrough feature and UI

Co-authored-by: Levev <levvevv@gmail.com>

Author: TibixDev

src/renderer/App.vue

@@ -133,6 +133,7 @@ import { isInstalled } from './lib/install';
 import { Winboat } from './lib/winboat';
 import { openAnchorLink } from './utils/openLink';
 import { WinboatConfig } from './lib/config';
+import { USBManager } from './lib/usbmanager';
 const { BrowserWindow }: typeof import('@electron/remote') = require('@electron/remote')
 const os: typeof import('os') = require('os')
 const path: typeof import('path') = require('path')
@@ -152,13 +153,15 @@ const rerenderCounter = ref(0); // TODO: Hack for non-reactive data
 
 onMounted(async () => {
     console.log("WinBoat app path:", path.join(remote.app.getAppPath(), "..", ".."));
+
+    new USBManager(); // Instantiate singleton class
     const winboatInstalled = await isInstalled();
     if (!winboatInstalled) {
         console.log("Not installed, redirecting to setup...")
         $router.push('/setup');
     } else {
-        winboat = new Winboat();
-        wbConfig = new WinboatConfig();
+        winboat = new Winboat(); // Instantiate singleton class
+        wbConfig = new WinboatConfig(); // Instantiate singleton class
         $router.push('/home');
     }
 

src/renderer/lib/usbmanager.ts

@@ -387,8 +387,6 @@ export class USBManager {
     }
 }
 
-new USBManager();
-
 /**
  * Reads the Linux USB device database from the specified file path and returns a JSON representation.
  * @param filePath Path to the usb.ids file

src/renderer/lib/winboat.ts

@@ -198,11 +198,6 @@ export class Winboat {
         this.#containerInterval = setInterval(async () => {
             const _containerStatus = await this.getContainerStatus();
 
-            // TODO: Remove if statement once this feature gets rolled out.
-            if (this.#wbConfig?.config.experimentalFeatures && !this.#qmpInterval) {
-                this.createQMPInterval();
-            }
-
             if (_containerStatus !== this.containerStatus.value) {
                 this.containerStatus.value = _containerStatus;
                 logger.info(`Winboat Container state changed to ${_containerStatus}`);
@@ -671,4 +666,11 @@ export class Winboat {
         // Done!
         this.isUpdatingGuestServer.value = false;
     }
+
+    /**
+     * Whether or not the Winboat singleton has a QMP interval active
+     */
+    get hasQMPInterval() {
+        return this.#qmpInterval !== null;
+    }
 }

src/renderer/views/Config.vue

@@ -162,7 +162,7 @@
                             <TransitionGroup name="devices" tag="x-box" class="flex-col gap-2 mt-4">
                                 <x-card 
                                     class="flex justify-between items-center px-2 py-0 m-0 bg-white/5"
-                                    v-for="device, k of usbManager.ptDevices.value" 
+                                    v-for="device of usbManager.ptDevices.value" 
                                     :key="`${device.vendorId}-${device.productId}`"
                                     :class="{ 'bg-white/[calc(0.05*0.75)] [&_*:not(div):not(span)]:opacity-75': !usbManager.isPTDeviceConnected(device) }"
                                 >
@@ -200,7 +200,8 @@
                             </TransitionGroup>
                             <x-button 
                                 v-if="availableDevices.length > 0"
-                                class="mt-4 !bg-gradient-to-tl from-blue-400/20 shadow-md shadow-blue-950/20 to-transparent hover:from-blue-400/30 transition"
+                                class="!bg-gradient-to-tl from-blue-400/20 shadow-md shadow-blue-950/20 to-transparent hover:from-blue-400/30 transition"
+                                :class="{ 'mt-4': usbManager.ptDevices.value.length }"
                                 @click="refreshAvailableDevices()"
                             >
                                 <x-icon href="#add"></x-icon>
@@ -355,19 +356,17 @@
 </template>
 
 <script setup lang="ts">
-import { computed, getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue';
-import { Winboat } from '../lib/winboat';
-import type { ComposeConfig, USBDevice } from '../../types';
+import { computed, onMounted, ref } from 'vue';
+import { ContainerStatus, Winboat } from '../lib/winboat';
+import type { ComposeConfig } from '../../types';
 import { getSpecs } from '../lib/specs';
 import { Icon } from '@iconify/vue';
 import { WinboatConfig } from '../lib/config';
 import { USBManager, type PTSerializableDeviceInfo } from '../lib/usbmanager';
-import { type Device, type Interface } from "usb";
+import { type Device } from "usb";
 import {
     RDP_PORT,
     PORT_MAX,
-    USB_CLASS_IMAGING,
-    USB_INTERFACE_MTP,
     USB_VID_BLACKLIST
 } from '../lib/constants';
 const { app }: typeof import('@electron/remote') = require('@electron/remote');
@@ -605,9 +604,18 @@ async function toggleExperimentalFeatures() {
     rerenderExperimental.value++;
     $emit("rerender");
 
-    // Remove all passthrough USB devices since USB is still experimental
-    if (wbConfig.config.experimentalFeatures) {
+    // Remove all passthrough USB devices if we're disabling experimental features
+    // since USB passthrough is an experimental feature
+    if (!wbConfig.config.experimentalFeatures) {
         await usbManager.removeAllPassthroughDevicesAndConfig();
+    // Create the QMP interval if experimental features are enabled
+    // This would get created by default since we're changing the compose and re-deploying,
+    // but a scenario could also occur where the user is re-enabling experimental features
+    // after the compose changes, which then would cause a bug
+    // TODO: Remove after USB passthrough is no longer experimental
+    } else if (winboat.containerStatus.value == ContainerStatus.Running && !winboat.hasQMPInterval) {
+        console.log("Creating QMP interval because experimental features were turned on");
+        winboat.createQMPInterval();
     }
 }