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