Add the Modal/Cart Dismissal Interaction for the Esc key

Author: bryanngongeh

src/components/bucket-modal.tsx

@@ -3,6 +3,7 @@
 import { useStore } from '@/lib/store';
 import { X, Trash2, Package } from 'lucide-react';
 import { VersionNote } from './version-note';
+import { useEffect } from 'react';
 
 interface BucketModalProps {
   onClose: () => void;
@@ -16,11 +17,19 @@ export function BucketModal({ onClose }: BucketModalProps) {
     setCurrentStep('output');
   };
 
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', handleKey);
+    return () => window.removeEventListener('keydown', handleKey);
+  }, [onClose]);
+
   return (
     <>
       {/* Backdrop */}
       <div
-        className="fixed inset-0 z-40"
+        className="fixed inset-0 z-40 bg-black/40 backdrop-blur-[2px]"
         onClick={onClose}
       />
 

src/components/presets-modal.tsx

@@ -4,7 +4,7 @@ import { useStore } from '@/lib/store';
 import { presets } from '@/lib/presets';
 import { appCatalog } from '@/lib/apps';
 import { X, Clock, Layers, Check } from 'lucide-react';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { estimateInstallTime } from '@/lib/script-generator';
 import { Package } from '@/types';
 
@@ -16,6 +16,14 @@ export function PresetsModal({ onClose }: PresetsModalProps) {
   const { loadPreset, bucket, os } = useStore();
   const [applied, setApplied] = useState<string | null>(null);
 
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', handleKey);
+    return () => window.removeEventListener('keydown', handleKey);
+  }, [onClose]);
+
   const handleApply = (presetId: string, packageIds: string[]) => {
     loadPreset(packageIds);
     setApplied(presetId);