feat(CommandPalette): Add backdrop

1 files changed, 39 insertions, 2 deletions

diff --git a/src/lib/CommandPalette/CommandPalette.svelte b/src/lib/CommandPalette/CommandPalette.svelte
index 56c5f441..02616ba9 100644
--- a/src/lib/CommandPalette/CommandPalette.svelte
+++ b/src/lib/CommandPalette/CommandPalette.svelte
@@ -57,7 +57,13 @@
   });
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (!event.target.closest('.dropdown')) open = false;
+    const target = event.target as HTMLElement;
+
+    if (target.classList.contains('command-palette-overlay')) {
+      open = false;
+    } else if (!target.closest('.dropdown')) {
+      open = false;
+    }
   };
 
   const handleGlobalKey = (e: KeyboardEvent) => {
@@ -74,6 +80,12 @@
 <svelte:window on:click={handleClickOutside} />
 
 {#if open}
+  <div
+    class="command-palette-overlay"
+    on:click={() => (open = false)}
+    on:keydown={(e) => e.key === 'Escape' && (open = false)}
+  />
+
   <div class="dropdown">
     <div class="dropdown-content card card-small">
       <input
@@ -119,12 +131,37 @@
     outline: none;
   }
 
+  .command-palette-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.6);
+    z-index: 100;
+    backdrop-filter: blur(3px);
+    animation: fadeIn 0.15s ease-in-out;
+    cursor: pointer;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      backdrop-filter: blur(0px);
+    }
+
+    to {
+      opacity: 1;
+      backdrop-filter: blur(3px);
+    }
+  }
+
   .dropdown {
     position: fixed;
     top: 15%;
     left: 50%;
     transform: translateX(-50%);
-    z-index: 1;
+    z-index: 101;
     width: min(600px, 90%);
     font-size: 1.05em;
   }