@striae-org/striae 4.0.3 → 4.1.0

package/app/components/auth/mfa-verification.module.css

@@ -9,6 +9,7 @@
   justify-content: center;
   align-items: center;
   z-index: 1000;
+  cursor: default;
 }
 
 .modal {
@@ -18,6 +19,7 @@
   width: 100%;
   max-width: 400px;
   box-shadow: 0 var(--spaceM) var(--spaceXL) rgba(0, 0, 0, 0.2);
+  cursor: default;
 }
 
 .title {
@@ -63,7 +65,8 @@
 }
 
 .errorMessage {
-  background: linear-gradient(135deg, 
+  background: linear-gradient(
+    135deg,
     color-mix(in lab, var(--error) 12%, transparent),
     color-mix(in lab, var(--error) 8%, transparent)
   );
@@ -83,13 +86,17 @@
 }
 
 .errorMessage::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
-  background: linear-gradient(90deg, var(--error), color-mix(in lab, var(--error) 60%, transparent));
+  background: linear-gradient(
+    90deg,
+    var(--error),
+    color-mix(in lab, var(--error) 60%, transparent)
+  );
   animation: shimmer 2s ease-in-out infinite;
 }
 
@@ -229,7 +236,8 @@
 }
 
 @keyframes shimmer {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 0.6;
     transform: translateX(-100%);
   }
@@ -244,7 +252,7 @@
   .errorMessage {
     animation: none;
   }
-  
+
   .errorMessage::before {
     animation: none;
   }

package/app/components/canvas/canvas.tsx

@@ -10,6 +10,7 @@ interface CanvasProps {
   imageUrl?: string;
   filename?: string;
   company?: string;
+  badgeId?: string;
   firstName?: string;
   error?: string;
   activeAnnotations?: Set<string>;
@@ -32,6 +33,7 @@ export const Canvas = ({
   imageUrl, 
   filename, 
   company, 
+  badgeId,
   firstName, 
   error, 
   activeAnnotations, 
@@ -453,6 +455,7 @@ export const Canvas = ({
         onClose={() => setIsConfirmationModalOpen(false)}
         onConfirm={handleConfirmation}
         company={company}
+        defaultBadgeId={badgeId}
         existingConfirmation={annotationData?.confirmationData || null}
       />
     </div>    

package/app/components/canvas/confirmation/confirmation.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useContext } from 'react';
 import { type ConfirmationData } from '~/types/annotations';
 import { AuthContext } from '~/contexts/auth.context';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 import { generateConfirmationId } from '~/utils/common';
 import styles from './confirmation.module.css';
 
@@ -9,6 +10,7 @@ interface ConfirmationModalProps {
   onClose: () => void;
   onConfirm?: (confirmationData: ConfirmationData) => void;
   company?: string;
+  defaultBadgeId?: string;
   existingConfirmation?: ConfirmationData | null;
 }
 
@@ -26,7 +28,7 @@ const formatTimestamp = (): string => {
   });
 };
 
-export const ConfirmationModal = ({ isOpen, onClose, onConfirm, company, existingConfirmation }: ConfirmationModalProps) => {
+export const ConfirmationModal = ({ isOpen, onClose, onConfirm, company, defaultBadgeId, existingConfirmation }: ConfirmationModalProps) => {
   const { user } = useContext(AuthContext);
   const [badgeId, setBadgeId] = useState('');
   const [error, setError] = useState('');
@@ -38,38 +40,29 @@ export const ConfirmationModal = ({ isOpen, onClose, onConfirm, company, existin
   const timestamp = formatTimestamp();
   const confirmationId = generateConfirmationId();
 
+  const {
+    handleOverlayMouseDown,
+    handleOverlayKeyDown
+  } = useOverlayDismiss({
+    isOpen,
+    onClose
+  });
+
   // Check if this is an existing confirmation
   const hasExistingConfirmation = !!existingConfirmation;
 
-  // Handle Escape key to close modal
-  useEffect(() => {
-    const handleEscapeKey = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && isOpen) {
-        onClose();
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('keydown', handleEscapeKey);
-    }
-
-    return () => {
-      document.removeEventListener('keydown', handleEscapeKey);
-    };
-  }, [isOpen, onClose]);
-
   // Reset form when modal opens
   useEffect(() => {
     if (isOpen) {
       if (existingConfirmation) {
         setBadgeId(existingConfirmation.badgeId);
       } else {
-        setBadgeId('');
+        setBadgeId(defaultBadgeId || '');
       }
       setError('');
       setIsConfirming(false);
     }
-  }, [isOpen, existingConfirmation]);
+  }, [isOpen, defaultBadgeId, existingConfirmation]);
 
   if (!isOpen) return null;
 
@@ -104,23 +97,6 @@ export const ConfirmationModal = ({ isOpen, onClose, onConfirm, company, existin
     }
   };
 
-  const handleOverlayMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (e.target === e.currentTarget) {
-      onClose();
-    }
-  };
-
-  const handleOverlayKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    if (e.target !== e.currentTarget) {
-      return;
-    }
-
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      onClose();
-    }
-  };
-
   return (
     <div
       className={styles.overlay}

package/app/components/public-signing-key-modal/public-signing-key-modal.module.css

@@ -7,6 +7,7 @@
   align-items: center;
   z-index: var(--zIndex5);
   padding: var(--spaceL);
+  cursor: default;
 }
 
 .modal {

package/app/components/public-signing-key-modal/public-signing-key-modal.tsx

@@ -5,10 +5,9 @@ import {
   useState,
   type ChangeEvent,
   type DragEvent,
-  type KeyboardEvent,
-  type MouseEvent
 } from 'react';
 import styles from './public-signing-key-modal.module.css';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 import { verifyExportFile } from '~/utils/forensics';
 
 const NO_PUBLIC_KEY_MESSAGE = 'No public signing key is configured for this environment.';
@@ -230,6 +229,13 @@ export const PublicSigningKeyModal = ({
   const publicSigningKeyTitleId = useId();
   const publicKeyInputId = useId();
   const exportFileInputId = useId();
+  const {
+    handleOverlayMouseDown,
+    handleOverlayKeyDown
+  } = useOverlayDismiss({
+    isOpen,
+    onClose
+  });
 
   useEffect(() => {
     if (!isOpen) {
@@ -242,45 +248,10 @@ export const PublicSigningKeyModal = ({
     }
   }, [isOpen]);
 
-  useEffect(() => {
-    if (!isOpen) {
-      return;
-    }
-
-    const handleEscapeKey = (event: globalThis.KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        onClose();
-      }
-    };
-
-    document.addEventListener('keydown', handleEscapeKey);
-
-    return () => {
-      document.removeEventListener('keydown', handleEscapeKey);
-    };
-  }, [isOpen, onClose]);
-
   if (!isOpen) {
     return null;
   }
 
-  const handleOverlayMouseDown = (event: MouseEvent<HTMLDivElement>) => {
-    if (event.target === event.currentTarget) {
-      onClose();
-    }
-  };
-
-  const handleOverlayKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
-    if (event.target !== event.currentTarget) {
-      return;
-    }
-
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      onClose();
-    }
-  };
-
   const resetVerificationState = () => {
     setVerificationOutcome(null);
   };

package/app/components/sidebar/case-export/case-export.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useContext } from 'react';
 import styles from './case-export.module.css';
 import { AuthContext } from '~/contexts/auth.context';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 import { PublicSigningKeyModal } from '~/components/public-signing-key-modal/public-signing-key-modal';
 import { getCurrentPublicSigningKeyDetails } from '~/utils/forensics';
 import { getCaseConfirmations, exportConfirmationData } from '../../actions/confirm-export';
@@ -36,6 +37,14 @@ export const CaseExport = ({
   const [hasConfirmationData, setHasConfirmationData] = useState(false);
   const [isPublicKeyModalOpen, setIsPublicKeyModalOpen] = useState(false);
   const { keyId: publicSigningKeyId, publicKeyPem } = getCurrentPublicSigningKeyDetails();
+  const {
+    handleOverlayMouseDown,
+    handleOverlayKeyDown
+  } = useOverlayDismiss({
+    isOpen,
+    onClose,
+    canDismiss: !isPublicKeyModalOpen
+  });
 
   // Update caseNumber when currentCaseNumber prop changes
   useEffect(() => {
@@ -100,23 +109,6 @@ export const CaseExport = ({
     }
   }, [isOpen]);
 
-  // Handle Escape key to close modal
-  useEffect(() => {
-    const handleEscapeKey = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && isOpen && !isPublicKeyModalOpen) {
-        onClose();
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('keydown', handleEscapeKey);
-    }
-
-    return () => {
-      document.removeEventListener('keydown', handleEscapeKey);
-    };
-  }, [isOpen, isPublicKeyModalOpen, onClose]);
-
   if (!isOpen) return null;
 
   const handleExport = async () => {
@@ -182,23 +174,6 @@ export const CaseExport = ({
     }
   };
 
-  const handleOverlayMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (e.target === e.currentTarget) {
-      onClose();
-    }
-  };
-
-  const handleOverlayKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    if (e.target !== e.currentTarget) {
-      return;
-    }
-
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      onClose();
-    }
-  };
-
   return (
     <div
       className={styles.overlay}

package/app/components/sidebar/case-import/case-import.module.css

@@ -521,6 +521,7 @@
   justify-content: center;
   align-items: center;
   z-index: 9999;
+  cursor: default;
 }
 
 .confirmationModal {
@@ -530,6 +531,7 @@
   max-width: 400px;
   box-shadow: 0 var(--spaceM) var(--spaceXL)
     color-mix(in lab, var(--black) 20%, transparent);
+  cursor: default;
 }
 
 .confirmationContent {

package/app/components/sidebar/case-import/case-import.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef, useContext, useCallback } from 'react';
 import { AuthContext } from '~/contexts/auth.context';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 import { 
   listReadOnlyCases, 
   deleteReadOnlyCase
@@ -49,6 +50,15 @@ export const CaseImport = ({
     resetImportState,
     setImportProgress
   } = useImportState();
+  const canDismissOverlay = !importState.isImporting && !importState.isClearing;
+  const {
+    handleOverlayMouseDown,
+    handleOverlayKeyDown
+  } = useOverlayDismiss({
+    isOpen,
+    onClose,
+    canDismiss: canDismissOverlay
+  });
   
   const [existingReadOnlyCase, setExistingReadOnlyCase] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -229,23 +239,6 @@ export const CaseImport = ({
     onClose();
   }, [clearImportData, onClose]);
 
-  const handleOverlayMouseDown = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
-    if (e.target === e.currentTarget && !importState.isImporting && !importState.isClearing) {
-      onClose();
-    }
-  }, [importState.isImporting, importState.isClearing, onClose]);
-
-  const handleOverlayKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
-    if (e.target !== e.currentTarget || importState.isImporting || importState.isClearing) {
-      return;
-    }
-
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      onClose();
-    }
-  }, [importState.isImporting, importState.isClearing, onClose]);
-
   // Effects
   useEffect(() => {
     if (user && isOpen) {
@@ -253,23 +246,6 @@ export const CaseImport = ({
     }
   }, [user, isOpen, checkForExistingReadOnlyCase]);
 
-  // Handle keyboard events
-  useEffect(() => {
-    const handleEscapeKey = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && isOpen && !importState.isImporting && !importState.isClearing) {
-        onClose();
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('keydown', handleEscapeKey);
-    }
-
-    return () => {
-      document.removeEventListener('keydown', handleEscapeKey);
-    };
-  }, [isOpen, onClose, importState.isImporting, importState.isClearing]);
-
   // Reset state when modal closes
   useEffect(() => {
     if (!isOpen) {

package/app/components/sidebar/cases/cases-modal.module.css

@@ -6,6 +6,7 @@
   justify-content: center;
   align-items: center;
   z-index: var(--zIndex5);
+  cursor: default;
   transition: background-color var(--durationM) var(--bezierFastoutSlowin);
 }
 
@@ -15,7 +16,9 @@
   width: 90%;
   max-width: var(--maxWidthL);
   max-height: 80vh;
-  box-shadow: 0 var(--spaceXS) var(--spaceL) color-mix(in lab, var(--black) 10%, transparent);
+  box-shadow: 0 var(--spaceXS) var(--spaceL)
+    color-mix(in lab, var(--black) 10%, transparent);
+  cursor: default;
   transition: background-color var(--durationM) var(--bezierFastoutSlowin);
   display: flex;
   flex-direction: column;
@@ -134,33 +137,65 @@
 
 /* Case Confirmation Status Indicators */
 .caseItemNotConfirmed {
-  background-color: color-mix(in lab, var(--warning) 15%, var(--backgroundLight));
+  background-color: color-mix(
+    in lab,
+    var(--warning) 15%,
+    var(--backgroundLight)
+  );
 }
 
 .caseItemNotConfirmed:hover {
-  background-color: color-mix(in lab, var(--warning) 20%, var(--backgroundLight));
+  background-color: color-mix(
+    in lab,
+    var(--warning) 20%,
+    var(--backgroundLight)
+  );
 }
 
 .caseItem.active.caseItemNotConfirmed {
-  background-color: color-mix(in lab, var(--warning) 15%, var(--backgroundLight));
+  background-color: color-mix(
+    in lab,
+    var(--warning) 15%,
+    var(--backgroundLight)
+  );
 }
 
 .caseItem.active.caseItemNotConfirmed:hover {
-  background-color: color-mix(in lab, var(--warning) 20%, var(--backgroundLight));
+  background-color: color-mix(
+    in lab,
+    var(--warning) 20%,
+    var(--backgroundLight)
+  );
 }
 
 .caseItemConfirmed {
-  background-color: color-mix(in lab, var(--success) 20%, var(--backgroundLight));
+  background-color: color-mix(
+    in lab,
+    var(--success) 20%,
+    var(--backgroundLight)
+  );
 }
 
 .caseItemConfirmed:hover {
-  background-color: color-mix(in lab, var(--success) 28%, var(--backgroundLight));
+  background-color: color-mix(
+    in lab,
+    var(--success) 28%,
+    var(--backgroundLight)
+  );
 }
 
 .caseItem.active.caseItemConfirmed {
-  background-color: color-mix(in lab, var(--success) 20%, var(--backgroundLight));
+  background-color: color-mix(
+    in lab,
+    var(--success) 20%,
+    var(--backgroundLight)
+  );
 }
 
 .caseItem.active.caseItemConfirmed:hover {
-  background-color: color-mix(in lab, var(--success) 28%, var(--backgroundLight));
+  background-color: color-mix(
+    in lab,
+    var(--success) 28%,
+    var(--backgroundLight)
+  );
 }

package/app/components/sidebar/cases/cases-modal.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import type { User } from 'firebase/auth';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 import { listCases } from '~/components/actions/case-manage';
 import { getFileAnnotations } from '~/utils/data';
 import { fetchFiles } from '~/components/actions/image-manage';
@@ -18,6 +19,13 @@ export const CasesModal = ({ isOpen, onClose, onSelectCase, currentCase, user }:
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string>('');
   const [currentPage, setCurrentPage] = useState(0);
+  const {
+    handleOverlayMouseDown,
+    handleOverlayKeyDown
+  } = useOverlayDismiss({
+    isOpen,
+    onClose
+  });
   const [caseConfirmationStatus, setCaseConfirmationStatus] = useState<{
     [caseNum: string]: { includeConfirmation: boolean; isConfirmed: boolean }
   }>({});
@@ -28,19 +36,6 @@ export const CasesModal = ({ isOpen, onClose, onSelectCase, currentCase, user }:
     setError('');
   };
 
-  useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onClose();
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('keydown', handleEscape);
-      return () => document.removeEventListener('keydown', handleEscape);
-    }
-  }, [isOpen, onClose]);
-
   useEffect(() => {
     if (isOpen) {
       const loadingTimer = window.setTimeout(() => {
@@ -144,7 +139,14 @@ export const CasesModal = ({ isOpen, onClose, onSelectCase, currentCase, user }:
   if (!isOpen) return null;
 
   return (
-    <div className={styles.modalOverlay}>
+    <div
+      className={styles.modalOverlay}
+      onMouseDown={handleOverlayMouseDown}
+      onKeyDown={handleOverlayKeyDown}
+      role="button"
+      tabIndex={0}
+      aria-label="Close cases dialog"
+    >
       <div className={styles.modal}>
         <header className={styles.modalHeader}>
           <h2>All Cases</h2>

package/app/components/sidebar/files/files-modal.module.css

@@ -6,6 +6,7 @@
   justify-content: center;
   align-items: center;
   z-index: var(--zIndex5);
+  cursor: default;
   transition: background-color var(--durationM) var(--bezierFastoutSlowin);
 }
 
@@ -15,7 +16,9 @@
   width: 90%;
   max-width: var(--maxWidthL);
   max-height: 80vh;
-  box-shadow: 0 var(--spaceXS) var(--spaceL) color-mix(in lab, var(--black) 10%, transparent);
+  box-shadow: 0 var(--spaceXS) var(--spaceL)
+    color-mix(in lab, var(--black) 10%, transparent);
+  cursor: default;
   transition: background-color var(--durationM) var(--bezierFastoutSlowin);
   display: flex;
   flex-direction: column;
@@ -177,33 +180,65 @@
 }
 /* Confirmation Status Indicators */
 .fileItemNotConfirmed {
-  background-color: color-mix(in lab, var(--warning) 15%, var(--backgroundLight));
+  background-color: color-mix(
+    in lab,
+    var(--warning) 15%,
+    var(--backgroundLight)
+  );
 }
 
 .fileItemNotConfirmed:hover {
-  background-color: color-mix(in lab, var(--warning) 20%, var(--backgroundLight));
+  background-color: color-mix(
+    in lab,
+    var(--warning) 20%,
+    var(--backgroundLight)
+  );
 }
 
 .fileItem.active.fileItemNotConfirmed {
-  background-color: color-mix(in lab, var(--warning) 15%, var(--backgroundLight));
+  background-color: color-mix(
+    in lab,
+    var(--warning) 15%,
+    var(--backgroundLight)
+  );
 }
 
 .fileItem.active.fileItemNotConfirmed:hover {
-  background-color: color-mix(in lab, var(--warning) 20%, var(--backgroundLight));
+  background-color: color-mix(
+    in lab,
+    var(--warning) 20%,
+    var(--backgroundLight)
+  );
 }
 
 .fileItemConfirmed {
-  background-color: color-mix(in lab, var(--success) 20%, var(--backgroundLight));
+  background-color: color-mix(
+    in lab,
+    var(--success) 20%,
+    var(--backgroundLight)
+  );
 }
 
 .fileItemConfirmed:hover {
-  background-color: color-mix(in lab, var(--success) 28%, var(--backgroundLight));
+  background-color: color-mix(
+    in lab,
+    var(--success) 28%,
+    var(--backgroundLight)
+  );
 }
 
 .fileItem.active.fileItemConfirmed {
-  background-color: color-mix(in lab, var(--success) 20%, var(--backgroundLight));
+  background-color: color-mix(
+    in lab,
+    var(--success) 20%,
+    var(--backgroundLight)
+  );
 }
 
 .fileItem.active.fileItemConfirmed:hover {
-  background-color: color-mix(in lab, var(--success) 28%, var(--backgroundLight));
-}
+  background-color: color-mix(
+    in lab,
+    var(--success) 28%,
+    var(--backgroundLight)
+  );
+}