feat: Adds a multi monitor toggle (#230)

* Adds a multi monitor toggle

* Make multimonitor a drop down to switch between span/multimon for compatibility

* hyphenate multi-monitor

Author: alexankitty

src/renderer/lib/config.ts

@@ -11,6 +11,7 @@ export type WinboatConfigObj = {
     passedThroughDevices: PTSerializableDeviceInfo[];
     customApps: WinApp[]
     experimentalFeatures: boolean
+    multiMonitor: number
 };
 
 const defaultConfig: WinboatConfigObj = {
@@ -19,7 +20,8 @@ const defaultConfig: WinboatConfigObj = {
     rdpMonitoringEnabled: false,
     passedThroughDevices: [],
     customApps: [],
-    experimentalFeatures: false
+    experimentalFeatures: false,
+    multiMonitor: 0,
 };
 
 export class WinboatConfig { 

src/renderer/lib/winboat.ts

@@ -609,11 +609,13 @@ export class Winboat {
         /v:127.0.0.1\
         /port:${rdpPort}\
         /cert:ignore\
+        ${this.#wbConfig?.config.multiMonitor == 2 ? '+span' : ''}\
         +clipboard\
         -wallpaper\
         /sound:sys:pulse\
         /microphone:sys:pulse\
         /floatbar\
+        ${this.#wbConfig?.config.multiMonitor == 1 ? '/multimon' : ''}\
         ${this.#wbConfig?.config.smartcardEnabled ? '/smartcard' : ''}\
         /compression\
         /scale:${this.#wbConfig?.config.scale ?? 100}\

src/renderer/views/Config.vue

@@ -290,6 +290,39 @@
                     </div>
                 </x-card>
 
+                <!-- Multi Monitor -->
+                <x-card
+                    class="flex flex-row justify-between items-center p-2 py-3 my-0 w-full backdrop-blur-xl backdrop-brightness-150 bg-neutral-800/20">
+                    <div>
+                        <div class="flex flex-row gap-2 items-center mb-2">
+                            <Icon class="inline-flex text-violet-400 size-8" icon="uil:monitor"></Icon>
+                            <h1 class="my-0 text-lg font-semibold">
+                                Multi-Monitor Support
+                            </h1>
+                        </div>
+                        <p class="text-neutral-400 text-[0.9rem] !pt-0 !mt-0">
+                            Controls how multiple monitors are handled. MultiMon creates separate displays for each monitor, while Span stretches the display across all monitors. Note: Span or MultiMon may work better depending on your setup.
+                        </p>
+                    </div>
+                    <div class="flex flex-row gap-2 justify-center items-center">
+                        <x-select class="w-20" @change="(e: any) => wbConfig.config.multiMonitor = Number(e.detail.newValue)">
+                            <x-menu>
+                                <x-menuitem value="0" :toggled="wbConfig.config.multiMonitor === 0">
+                                    <x-label>None</x-label>
+                                </x-menuitem>
+
+                                <x-menuitem value="1" :toggled="wbConfig.config.multiMonitor === 1">
+                                    <x-label>MultiMon</x-label>
+                                </x-menuitem>
+
+                                <x-menuitem value="2" :toggled="wbConfig.config.multiMonitor === 2">
+                                    <x-label>Span</x-label>
+                                </x-menuitem>
+                            </x-menu>
+                        </x-select>
+                    </div>
+                </x-card>
+
                 <!-- Smartcard Passthrough -->
                 <x-card
                     class="flex flex-row justify-between items-center p-2 py-3 my-0 w-full backdrop-blur-xl backdrop-brightness-150 bg-neutral-800/20">