fixing small issues in the project

components/ModalShell.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useId, useRef } from 'react';
 
 interface ModalShellProps {
   title: string;
@@ -6,10 +6,23 @@ interface ModalShellProps {
   onClose: () => void;
   onSave: () => void;
   onDelete?: () => void;
+  canSave?: boolean;
   children: React.ReactNode;
 }
 
-const ModalShell: React.FC<ModalShellProps> = ({ title, edit, onClose, onSave, onDelete, children }) => {
+const ModalShell: React.FC<ModalShellProps> = ({ title, edit, onClose, onSave, onDelete, canSave = true, children }) => {
+  const titleId = useId();
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onCloseRef.current();
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
   const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
     if (e.target === e.currentTarget) {
       onClose();
@@ -18,8 +31,8 @@ const ModalShell: React.FC<ModalShellProps> = ({ title, edit, onClose, onSave, o
 
   return (
     <div className="liquid-modal-backdrop fixed inset-0 flex items-center justify-center z-50 p-4" onClick={handleOverlayClick}>
-      <div className="liquid-panel liquid-modal-card rounded-3xl p-6 sm:p-8 w-full max-w-lg text-white">
-        <h2 className="liquid-title-text text-3xl font-extrabold mb-6">{title}</h2>
+      <div className="liquid-panel liquid-modal-card rounded-3xl p-6 sm:p-8 w-full max-w-lg text-white" role="dialog" aria-modal="true" aria-labelledby={titleId}>
+        <h2 id={titleId} className="liquid-title-text text-3xl font-extrabold mb-6">{title}</h2>
         <div className="flex flex-col gap-4">{children}</div>
         <div className="flex justify-between items-center mt-8">
           <div>
@@ -30,7 +43,11 @@ const ModalShell: React.FC<ModalShellProps> = ({ title, edit, onClose, onSave, o
             )}
           </div>
           <div className="flex justify-end gap-3">
-            <button onClick={onSave} className="liquid-button liquid-button-success liquid-focus py-2.5 px-5">
+            <button
+              onClick={onSave}
+              disabled={!canSave}
+              className="liquid-button liquid-button-success liquid-focus py-2.5 px-5 disabled:opacity-40 disabled:cursor-not-allowed"
+            >
               Save
             </button>
             <button onClick={onClose} className="liquid-button liquid-button-secondary liquid-focus py-2.5 px-5">
@@ -43,4 +60,4 @@ const ModalShell: React.FC<ModalShellProps> = ({ title, edit, onClose, onSave, o
   );
 };
 
-export default ModalShell;
+export default ModalShell;