Merge pull request #24 from bryandino673/modal-cart-dismissal-interaction

Implement Esc key interaction for modal/cart dismissal

Author: Ngha-Boris

src/components/bucket-modal.tsx

@@ -3,29 +3,47 @@
 import { useStore } from '@/lib/store';
 import { X, Trash2, Package } from 'lucide-react';
 import { VersionNote } from './version-note';
+import { useEffect, useRef } from 'react';
 
 interface BucketModalProps {
   onClose: () => void;
 }
 
 export function BucketModal({ onClose }: BucketModalProps) {
   const { bucket, removeFromBucket, clearBucket, setCurrentStep, updatePackageNote } = useStore();
+  const modalRef = useRef<HTMLDivElement>(null);
 
   const handleGenerateScript = () => {
     onClose();
     setCurrentStep('output');
   };
 
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    
+    const handleClickOutside = (e: MouseEvent) => {
+      if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+
+    window.addEventListener('keydown', handleKey);
+    document.addEventListener('mousedown', handleClickOutside);
+    
+    return () => {
+      window.removeEventListener('keydown', handleKey);
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [onClose]);
+
   return (
     <>
-      {/* Backdrop */}
-      <div
-        className="fixed inset-0 z-40"
-        onClick={onClose}
-      />
-
       {/* Modal */}
-      <div className="absolute right-0 top-full mt-2 w-88 max-h-[520px]
+      <div 
+        ref={modalRef}
+        className="absolute right-0 top-full mt-2 w-88 max-h-[520px]
           terminal-card rounded-lg shadow-2xl z-50 border border-border flex flex-col"
         style={{ width: '22rem' }}>
         {/* Header */}

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, useRef } from 'react';
 import { estimateInstallTime } from '@/lib/script-generator';
 import { Package } from '@/types';
 
@@ -15,6 +15,27 @@ interface PresetsModalProps {
 export function PresetsModal({ onClose }: PresetsModalProps) {
   const { loadPreset, bucket, os } = useStore();
   const [applied, setApplied] = useState<string | null>(null);
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+
+    const handleClickOutside = (e: MouseEvent) => {
+      if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+
+    window.addEventListener('keydown', handleKey);
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => {
+      window.removeEventListener('keydown', handleKey);
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [onClose]);
 
   const handleApply = (presetId: string, packageIds: string[]) => {
     loadPreset(packageIds);
@@ -26,9 +47,11 @@ export function PresetsModal({ onClose }: PresetsModalProps) {
 
   return (
     <>
-      <div className="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm" onClick={onClose} />
+      <div className="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm" />
       <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-        <div className="w-full max-w-3xl terminal-card rounded-xl overflow-hidden shadow-2xl"
+        <div 
+          ref={modalRef}
+          className="w-full max-w-3xl terminal-card rounded-xl overflow-hidden shadow-2xl"
           style={{ boxShadow: '0 0 60px rgba(0,255,128,0.15)' }}>
           {/* Header */}
           <div className="flex items-center justify-between p-5 border-b border-border bg-card">