From 7602aefe98d723156ed020767471791f424b44af Mon Sep 17 00:00:00 2001
From: Cameron Fleming <cameron@nevexo.space>
Date: Sat, 4 Jan 2025 00:10:56 +0000
Subject: [PATCH 1/2] feat(ui/ActionBar): add Ctrl + Alt + Del button to Action
 Bar

This commit adds a CTRL + ALT + DEL button to the Action Bar allowing
you to send the combination to the target machine without launching the
Virtual Keyboard, or sending the signal to the computer you're accessing
the KVM from. This is useful for people installing OS', or potentially
debugging kernel issues.
---
 ui/src/components/ActionBar.tsx | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/ActionBar.tsx b/ui/src/components/ActionBar.tsx
index cd5432c..8507737 100644
--- a/ui/src/components/ActionBar.tsx
+++ b/ui/src/components/ActionBar.tsx
@@ -10,12 +10,14 @@ import Container from "@components/Container";
 import { LuHardDrive, LuMaximize, LuSettings, LuSignal } from "react-icons/lu";
 import { cx } from "@/cva.config";
 import PasteModal from "@/components/popovers/PasteModal";
-import { FaKeyboard } from "react-icons/fa6";
+import { FaKeyboard, FaLock } from "react-icons/fa6";
 import WakeOnLanModal from "@/components/popovers/WakeOnLan/Index";
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
 import MountPopopover from "./popovers/MountPopover";
 import { Fragment, useCallback, useRef } from "react";
 import { CommandLineIcon } from "@heroicons/react/20/solid";
+import useKeyboard from "@/hooks/useKeyboard";
+import { keys, modifiers } from "@/keyboardMappings";
 
 export default function Actionbar({
   requestFullscreen,
@@ -52,6 +54,8 @@ export default function Actionbar({
     [setDisableFocusTrap],
   );
 
+  const { sendKeyboardEvent, resetKeyboardState } = useKeyboard();
+
   return (
     <Container className="bg-white border-b border-b-slate-800/20 dark:bg-slate-900 dark:border-b-slate-300/20">
       <div
@@ -203,6 +207,22 @@ export default function Actionbar({
               onClick={() => setVirtualKeyboard(!virtualKeyboard)}
             />
           </div>
+          <div className="hidden lg:block">
+            <Button
+              size="XS"
+              theme="light"
+              text="Ctrl + Alt + Del"
+              LeadingIcon={FaLock}
+              onClick={() => {
+                sendKeyboardEvent(
+                  [keys["Delete"]],
+                  [modifiers["ControlLeft"], modifiers["AltLeft"]],
+                )
+                setTimeout(resetKeyboardState, 100);
+              }
+              }
+            />
+          </div>
         </div>
 
         <div className="flex flex-wrap items-center gap-x-2 gap-y-2">

From a8197397902f46cbca67f00a32cd1118bf6bc76e Mon Sep 17 00:00:00 2001
From: Cameron Fleming <cameron@nevexo.space>
Date: Sat, 4 Jan 2025 00:22:08 +0000
Subject: [PATCH 2/2] feat(ui): make Ctrl + Alt + Del button a setting

This commit makes the Action Bar Ctrl + Alt + Del button a setting,
which is off by default.
---
 ui/src/components/ActionBar.tsx        | 19 ++++++++++---------
 ui/src/components/sidebar/settings.tsx |  9 +++++++++
 ui/src/hooks/stores.ts                 |  6 ++++++
 3 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/ui/src/components/ActionBar.tsx b/ui/src/components/ActionBar.tsx
index 8507737..1a39e78 100644
--- a/ui/src/components/ActionBar.tsx
+++ b/ui/src/components/ActionBar.tsx
@@ -207,22 +207,23 @@ export default function Actionbar({
               onClick={() => setVirtualKeyboard(!virtualKeyboard)}
             />
           </div>
-          <div className="hidden lg:block">
-            <Button
+            {useSettingsStore().actionBarCtrlAltDel && (
+            <div className="hidden lg:block">
+              <Button
               size="XS"
               theme="light"
               text="Ctrl + Alt + Del"
               LeadingIcon={FaLock}
               onClick={() => {
                 sendKeyboardEvent(
-                  [keys["Delete"]],
-                  [modifiers["ControlLeft"], modifiers["AltLeft"]],
-                )
+                [keys["Delete"]],
+                [modifiers["ControlLeft"], modifiers["AltLeft"]],
+                );
                 setTimeout(resetKeyboardState, 100);
-              }
-              }
-            />
-          </div>
+              }}
+              />
+            </div>
+            )}
         </div>
 
         <div className="flex flex-wrap items-center gap-x-2 gap-y-2">
diff --git a/ui/src/components/sidebar/settings.tsx b/ui/src/components/sidebar/settings.tsx
index ec606a6..bbde099 100644
--- a/ui/src/components/sidebar/settings.tsx
+++ b/ui/src/components/sidebar/settings.tsx
@@ -796,6 +796,15 @@ export default function SettingsSidebar() {
             }}
           />
         </SettingsItem>
+        <SettingsItem
+          title="Ctrl + Alt + Del Button"
+          description="Display Ctrl + Alt + Del button on the Action Bar"
+        >
+          <Checkbox
+            checked={settings.actionBarCtrlAltDel}
+            onChange={e => settings.setActionBarCtrlAltDel(e.target.checked)}
+          />
+        </SettingsItem>
         <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
         <div className="pb-2 space-y-4">
           <SectionHeader
diff --git a/ui/src/hooks/stores.ts b/ui/src/hooks/stores.ts
index b4cfbec..7f33844 100644
--- a/ui/src/hooks/stores.ts
+++ b/ui/src/hooks/stores.ts
@@ -270,6 +270,9 @@ interface SettingsState {
   // Add new developer mode state
   developerMode: boolean;
   setDeveloperMode: (enabled: boolean) => void;
+
+  actionBarCtrlAltDel: boolean;
+  setActionBarCtrlAltDel: (enabled: boolean) => void;
 }
 
 export const useSettingsStore = create(
@@ -287,6 +290,9 @@ export const useSettingsStore = create(
       // Add developer mode with default value
       developerMode: false,
       setDeveloperMode: enabled => set({ developerMode: enabled }),
+
+      actionBarCtrlAltDel: false,
+      setActionBarCtrlAltDel: enabled => set({ actionBarCtrlAltDel: enabled }),
     }),
     {
       name: "settings",