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

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

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

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