@striae-org/striae 4.0.3 → 4.2.0

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

@@ -1,8 +1,7 @@
 import { useState, useEffect, useContext } from 'react';
 import styles from './case-export.module.css';
 import { AuthContext } from '~/contexts/auth.context';
-import { PublicSigningKeyModal } from '~/components/public-signing-key-modal/public-signing-key-modal';
-import { getCurrentPublicSigningKeyDetails } from '~/utils/forensics';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 import { getCaseConfirmations, exportConfirmationData } from '../../actions/confirm-export';
 
 export type ExportFormat = 'json' | 'csv';
@@ -34,8 +33,14 @@ export const CaseExport = ({
   const [selectedFormat, setSelectedFormat] = useState<ExportFormat>('json');
   const [includeImages, setIncludeImages] = useState(false);
   const [hasConfirmationData, setHasConfirmationData] = useState(false);
-  const [isPublicKeyModalOpen, setIsPublicKeyModalOpen] = useState(false);
-  const { keyId: publicSigningKeyId, publicKeyPem } = getCurrentPublicSigningKeyDetails();
+  const {
+    requestClose,
+    overlayProps,
+    getCloseButtonProps
+  } = useOverlayDismiss({
+    isOpen,
+    onClose,
+  });
 
   // Update caseNumber when currentCaseNumber prop changes
   useEffect(() => {
@@ -94,29 +99,6 @@ export const CaseExport = ({
     }
   }, [isReadOnly]);
 
-  useEffect(() => {
-    if (!isOpen) {
-      setIsPublicKeyModalOpen(false);
-    }
-  }, [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 () => {
@@ -133,7 +115,7 @@ export const CaseExport = ({
       await onExport(caseNumber.trim(), selectedFormat, includeImages, (progress, label) => {
         setExportProgress({ current: progress, total: 100, caseName: label, mode: 'single' });
       });
-      onClose();
+      requestClose();
     } catch (error) {
       console.error('Export failed:', error);
       setError(error instanceof Error ? error.message : 'Export failed. Please try again.');
@@ -152,7 +134,7 @@ export const CaseExport = ({
       await onExportAll((current: number, total: number, caseName: string) => {
         setExportProgress({ current, total, caseName });
       }, selectedFormat);
-      onClose();
+      requestClose();
     } catch (error) {
       console.error('Export all failed:', error);
       setError(error instanceof Error ? error.message : 'Export all cases failed. Please try again.');
@@ -173,7 +155,7 @@ export const CaseExport = ({
     
     try {
       await exportConfirmationData(user, caseNumber.trim());
-      onClose();
+      requestClose();
     } catch (error) {
       console.error('Confirmation export failed:', error);
       setError(error instanceof Error ? error.message : 'Confirmation export failed. Please try again.');
@@ -182,40 +164,16 @@ 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}
-      onMouseDown={handleOverlayMouseDown}
-      onKeyDown={handleOverlayKeyDown}
-      role="button"
-      tabIndex={0}
       aria-label="Close case export dialog"
+      {...overlayProps}
     >
       <div className={styles.modal}>
         <div className={styles.header}>
           <h2 className={styles.title}>Export Case Data</h2>
-          <button 
-            className={styles.closeButton}
-            onClick={onClose}
-            aria-label="Close modal"
-          >
+          <button className={styles.closeButton} {...getCloseButtonProps({ ariaLabel: 'Close case export dialog' })}>
             ×
           </button>
         </div>
@@ -338,20 +296,6 @@ export const CaseExport = ({
                 </div>
               </div>
             )}
-
-            <div className={styles.divider}>
-              <span>Verification</span>
-            </div>
-
-            <div className={styles.publicKeySection}>
-              <button
-                type="button"
-                className={styles.publicKeyButton}
-                onClick={() => setIsPublicKeyModalOpen(true)}
-              >
-                View Public Signing Key
-              </button>
-            </div>
             
             {error && (
               <div className={styles.error}>
@@ -361,13 +305,6 @@ export const CaseExport = ({
           </div>
         </div>
       </div>
-
-      <PublicSigningKeyModal
-        isOpen={isPublicKeyModalOpen}
-        onClose={() => setIsPublicKeyModalOpen(false)}
-        publicSigningKeyId={publicSigningKeyId}
-        publicKeyPem={publicKeyPem}
-      />
     </div>
   );
 };

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

@@ -11,6 +11,7 @@
 }
 
 .modal {
+  position: relative;
   background: var(--backgroundLight);
   border-radius: var(--spaceXS);
   width: 90%;
@@ -424,6 +425,28 @@
   color: var(--textTitle);
 }
 
+.archivedImportNote {
+  margin-bottom: var(--spaceM);
+  padding: var(--spaceS) var(--spaceM);
+  border-radius: var(--spaceXS);
+  background: color-mix(in lab, var(--success) 10%, transparent);
+  border: 1px solid color-mix(in lab, var(--success) 25%, transparent);
+  color: color-mix(in lab, var(--success) 80%, var(--black));
+  font-size: var(--fontSizeBodyXS);
+  font-weight: var(--fontWeightMedium);
+}
+
+.archivedRegularCaseRiskNote {
+  margin-bottom: var(--spaceM);
+  padding: var(--spaceS) var(--spaceM);
+  border-radius: var(--spaceXS);
+  background: color-mix(in lab, var(--warning) 12%, transparent);
+  border: 1px solid color-mix(in lab, var(--warning) 30%, transparent);
+  color: color-mix(in lab, var(--warning) 85%, var(--black));
+  font-size: var(--fontSizeBodyXS);
+  font-weight: var(--fontWeightMedium);
+}
+
 /* Validation Section - Green/Red Based on Status */
 .validationSection {
   border-radius: var(--spaceXS);
@@ -521,6 +544,7 @@
   justify-content: center;
   align-items: center;
   z-index: 9999;
+  cursor: default;
 }
 
 .confirmationModal {
@@ -530,6 +554,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,9 +1,11 @@
 import { useState, useEffect, useRef, useContext, useCallback } from 'react';
 import { AuthContext } from '~/contexts/auth.context';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 import { 
   listReadOnlyCases, 
   deleteReadOnlyCase
 } from '~/components/actions/case-review';
+import { listCases } from '~/components/actions/case-manage';
 import {
   type ImportResult,  
   type ConfirmationImportResult
@@ -49,13 +51,25 @@ export const CaseImport = ({
     resetImportState,
     setImportProgress
   } = useImportState();
+  const canDismissOverlay = !importState.isImporting && !importState.isClearing;
+  const {
+    requestClose,
+    overlayProps,
+    getCloseButtonProps
+  } = useOverlayDismiss({
+    isOpen,
+    onClose,
+    canDismiss: canDismissOverlay
+  });
   
   const [existingReadOnlyCase, setExistingReadOnlyCase] = useState<string | null>(null);
+  const [showArchivedRegularCaseRiskWarning, setShowArchivedRegularCaseRiskWarning] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
   
   // Clear import selection state (used by preview hook on validation failure)
   const clearImportSelection = useCallback(() => {
     updateImportState({ selectedFile: null, importType: null });
+    setShowArchivedRegularCaseRiskWarning(false);
     resetFileInput(fileInputRef);
   }, [updateImportState]);
 
@@ -113,10 +127,21 @@ export const CaseImport = ({
     updateImportState({ isClearing: true });
     
     try {
-      await deleteReadOnlyCase(user, existingReadOnlyCase);
-      
       const clearedCaseName = existingReadOnlyCase;
-      setExistingReadOnlyCase(null);
+      const deleteSuccess = await deleteReadOnlyCase(user, clearedCaseName);
+      const remainingReadOnlyCases = await listReadOnlyCases(user);
+      const stillExists = remainingReadOnlyCases.some((caseMeta) => caseMeta.caseNumber === clearedCaseName);
+
+      setExistingReadOnlyCase(remainingReadOnlyCases.length > 0 ? remainingReadOnlyCases[0].caseNumber : null);
+
+      if (!deleteSuccess || stillExists) {
+        setError(
+          `Failed to fully clear read-only case "${clearedCaseName}". ` +
+          'Please try again. If this was an archived import that overlaps a regular case, verify that all case images are accessible before retrying.'
+        );
+        return;
+      }
+
       setSuccess(`Removed read-only case "${clearedCaseName}"`);
       
       onImportComplete?.({ 
@@ -226,25 +251,8 @@ export const CaseImport = ({
 
   const handleModalCancel = useCallback(() => {
     clearImportData();
-    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]);
+    requestClose();
+  }, [clearImportData, requestClose]);
 
   // Effects
   useEffect(() => {
@@ -253,22 +261,41 @@ export const CaseImport = ({
     }
   }, [user, isOpen, checkForExistingReadOnlyCase]);
 
-  // Handle keyboard events
   useEffect(() => {
-    const handleEscapeKey = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && isOpen && !importState.isImporting && !importState.isClearing) {
-        onClose();
+    let isMounted = true;
+
+    const checkArchivedRegularCaseRisk = async () => {
+      if (
+        !user ||
+        !isOpen ||
+        importState.importType !== 'case' ||
+        !casePreview?.archived ||
+        !casePreview.caseNumber
+      ) {
+        if (isMounted) {
+          setShowArchivedRegularCaseRiskWarning(false);
+        }
+        return;
+      }
+
+      try {
+        const regularCases = await listCases(user);
+        if (isMounted) {
+          setShowArchivedRegularCaseRiskWarning(regularCases.includes(casePreview.caseNumber));
+        }
+      } catch {
+        if (isMounted) {
+          setShowArchivedRegularCaseRiskWarning(false);
+        }
       }
     };
 
-    if (isOpen) {
-      document.addEventListener('keydown', handleEscapeKey);
-    }
+    void checkArchivedRegularCaseRisk();
 
     return () => {
-      document.removeEventListener('keydown', handleEscapeKey);
+      isMounted = false;
     };
-  }, [isOpen, onClose, importState.isImporting, importState.isClearing]);
+  }, [user, isOpen, importState.importType, casePreview?.archived, casePreview?.caseNumber]);
 
   // Reset state when modal closes
   useEffect(() => {
@@ -289,20 +316,15 @@ export const CaseImport = ({
     <>
       <div
         className={styles.overlay}
-        onMouseDown={handleOverlayMouseDown}
-        onKeyDown={handleOverlayKeyDown}
-        role="button"
-        tabIndex={0}
         aria-label="Close case import dialog"
+        {...overlayProps}
       >
         <div className={styles.modal}>
         <div className={styles.header}>
-          <h2 className={styles.title}>Import RO Case or Confirmations</h2>
-          <button 
+          <h2 className={styles.title}>Import Case or Confirmations</h2>
+          <button
             className={styles.closeButton}
-            onClick={onClose}
-            aria-label="Close modal"
-            disabled={importState.isImporting || importState.isClearing}
+            {...getCloseButtonProps({ ariaLabel: 'Close case import dialog' })}
           >
             ×
           </button>
@@ -340,6 +362,7 @@ export const CaseImport = ({
                   <CasePreviewSection 
                     casePreview={casePreview} 
                     isLoadingPreview={importState.isLoadingPreview} 
+                    showArchivedRegularCaseRiskWarning={showArchivedRegularCaseRiskWarning}
                   />
                 )}
                 
@@ -431,6 +454,7 @@ export const CaseImport = ({
     <ConfirmationDialog 
       showConfirmation={importState.showConfirmation}
       casePreview={casePreview}
+      showArchivedRegularCaseRiskWarning={showArchivedRegularCaseRiskWarning}
       onConfirm={handleConfirmImport}
       onCancel={handleCancelImport}
     />

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

@@ -4,9 +4,14 @@ import styles from '../case-import.module.css';
 interface CasePreviewSectionProps {
   casePreview: CaseImportPreview | null;
   isLoadingPreview: boolean;
+  showArchivedRegularCaseRiskWarning?: boolean;
 }
 
-export const CasePreviewSection = ({ casePreview, isLoadingPreview }: CasePreviewSectionProps) => {
+export const CasePreviewSection = ({
+  casePreview,
+  isLoadingPreview,
+  showArchivedRegularCaseRiskWarning = false
+}: CasePreviewSectionProps) => {
   if (isLoadingPreview) {
     return (
       <div className={styles.previewSection}>
@@ -24,6 +29,16 @@ export const CasePreviewSection = ({ casePreview, isLoadingPreview }: CasePrevie
       {/* Case Information - Always Blue */}
       <div className={styles.previewSection}>
         <h3 className={styles.previewTitle}>Case Information</h3>
+        {casePreview.archived && (
+          <div className={styles.archivedImportNote}>
+            Archived export detected. Original exporter imports are allowed for archived cases.
+          </div>
+        )}
+        {showArchivedRegularCaseRiskWarning && (
+          <div className={styles.archivedRegularCaseRiskNote}>
+            Warning: This archived import matches a case already in your regular case list. If you later clear the imported read-only case, the regular case images will be deleted and become inaccessible.
+          </div>
+        )}
         <div className={styles.previewGrid}>
           <div className={styles.previewItem}>
             <span className={styles.previewLabel}>Case Number:</span>
@@ -49,6 +64,10 @@ export const CasePreviewSection = ({ casePreview, isLoadingPreview }: CasePrevie
             <span className={styles.previewLabel}>Total Images:</span>
             <span className={styles.previewValue}>{casePreview.totalFiles}</span>
           </div>
+          <div className={styles.previewItem}>
+            <span className={styles.previewLabel}>Archived Export:</span>
+            <span className={styles.previewValue}>{casePreview.archived ? 'Yes' : 'No'}</span>
+          </div>
         </div>
       </div>
 

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

@@ -4,6 +4,7 @@ import styles from '../case-import.module.css';
 interface ConfirmationDialogProps {
   showConfirmation: boolean;
   casePreview: CaseImportPreview | null;
+  showArchivedRegularCaseRiskWarning?: boolean;
   onConfirm: () => void;
   onCancel: () => void;
 }
@@ -11,6 +12,7 @@ interface ConfirmationDialogProps {
 export const ConfirmationDialog = ({ 
   showConfirmation, 
   casePreview, 
+  showArchivedRegularCaseRiskWarning = false,
   onConfirm, 
   onCancel 
 }: ConfirmationDialogProps) => {
@@ -41,6 +43,19 @@ export const ConfirmationDialog = ({
             <div className={styles.confirmationItem}>
               <strong>Total Images:</strong> {casePreview.totalFiles}
             </div>
+            <div className={styles.confirmationItem}>
+              <strong>Archived Export:</strong> {casePreview.archived ? 'Yes' : 'No'}
+            </div>
+            {casePreview.archived && (
+              <div className={styles.archivedImportNote}>
+                Archived export detected. Original exporter imports are allowed for archived cases.
+              </div>
+            )}
+            {showArchivedRegularCaseRiskWarning && (
+              <div className={styles.archivedRegularCaseRiskNote}>
+                Warning: This archived import matches a case in your regular case list. If you clear the imported read-only case later, the regular case images will be deleted and inaccessible.
+              </div>
+            )}
             {casePreview.hashValid !== undefined && (
               <div className={`${styles.confirmationItem} ${casePreview.hashValid ? styles.confirmationItemValid : styles.confirmationItemInvalid}`}>
                 <strong>Data Integrity:</strong>