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] 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">