From 8d9e54f5f532eaddd2fa4ffa45cb722d0acd9a2c Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 17 Aug 2023 14:39:09 +0100
Subject: [PATCH] toggleable debug overlay

---
 src/lib/commandCenter/commandCenter.svelte | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/lib/commandCenter/commandCenter.svelte b/src/lib/commandCenter/commandCenter.svelte
index 72a7bcd72..e13498a25 100644
--- a/src/lib/commandCenter/commandCenter.svelte
+++ b/src/lib/commandCenter/commandCenter.svelte
@@ -33,6 +33,9 @@
     import { commandCenterKeyDownHandler, disableCommands, registerCommands } from './commands';
     import { RootPanel } from './panels';
     import { addSubPanel, clearSubPanels, subPanels } from './subPanels';
+    import { addNotification } from '$lib/stores/notifications';
+
+    let debugOverlayEnabled = false;
 
     $: $registerCommands([
         {
@@ -40,6 +43,20 @@
             keys: ['k'],
             ctrl: true,
             forceEnable: true
+        },
+        {
+            label: 'Toggle debug overlay',
+            callback: () => {
+                debugOverlayEnabled = !debugOverlayEnabled;
+                addNotification({
+                    title: 'Debug overlay',
+                    message: debugOverlayEnabled ? 'Enabled' : 'Disabled',
+                    type: 'info'
+                });
+            },
+            keys: ['d', 'o'],
+            group: 'misc',
+            disabled: !dev
         }
     ]);
 
@@ -100,7 +117,7 @@
     </div>
 {/if}
 
-{#if dev}
+{#if dev && debugOverlayEnabled}
     <div class="debug-keys" use:portal>
         {#each keys as key, i (i)}
             <kbd class="kbd" transition:fade|local={{ duration: 150 }}>