@striae-org/striae 4.3.2 → 4.3.4

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

@@ -1,6 +1,12 @@
 import { useState, useEffect, useRef, useContext, useCallback } from 'react';
 import { AuthContext } from '~/contexts/auth.context';
 import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
+import {
+  ARCHIVED_REGULAR_CASE_BLOCK_MESSAGE,
+  IMPORT_FILE_TYPE_NOT_ALLOWED,
+  IMPORT_FILE_TYPE_NOT_SUPPORTED,
+  DATA_INTEGRITY_BLOCKED_TAMPERING
+} from '~/utils/ui';
 import { 
   listReadOnlyCases, 
   deleteReadOnlyCase
@@ -63,13 +69,13 @@ export const CaseImport = ({
   });
   
   const [existingReadOnlyCase, setExistingReadOnlyCase] = useState<string | null>(null);
-  const [showArchivedRegularCaseRiskWarning, setShowArchivedRegularCaseRiskWarning] = useState(false);
+  const [isArchivedRegularCaseImportBlocked, setIsArchivedRegularCaseImportBlocked] = 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);
+    setIsArchivedRegularCaseImportBlocked(false);
     resetFileInput(fileInputRef);
   }, [updateImportState]);
 
@@ -203,14 +209,14 @@ export const CaseImport = ({
     clearMessages();
 
     if (!isValidImportFile(file)) {
-      setError('Only Striae case ZIP files, confirmation ZIP files, or confirmation JSON files are allowed.');
+      setError(IMPORT_FILE_TYPE_NOT_ALLOWED);
       clearImportData();
       return;
     }
 
     const importType = await resolveImportType(file);
     if (!importType) {
-      setError('The selected file is not a supported Striae case or confirmation import package.');
+      setError(IMPORT_FILE_TYPE_NOT_SUPPORTED);
       clearImportData();
       return;
     }
@@ -232,6 +238,11 @@ export const CaseImport = ({
   // Handle import action
   const handleImport = useCallback(() => {
     if (!user || !importState.selectedFile || !importState.importType) return;
+
+    if (importState.importType === 'case' && isArchivedRegularCaseImportBlocked) {
+      setError(ARCHIVED_REGULAR_CASE_BLOCK_MESSAGE);
+      return;
+    }
     
     // For case imports, show confirmation dialog with preview
     // For confirmation imports, proceed directly to import
@@ -242,7 +253,16 @@ export const CaseImport = ({
       // Direct import for confirmations
       executeImport();
     }
-  }, [user, importState.selectedFile, importState.importType, casePreview, updateImportState, executeImport]);
+  }, [
+    user,
+    importState.selectedFile,
+    importState.importType,
+    isArchivedRegularCaseImportBlocked,
+    casePreview,
+    updateImportState,
+    executeImport,
+    setError,
+  ]);
 
   const handleCancelImport = useCallback(() => {
     updateImportState({ showConfirmation: false });
@@ -273,7 +293,7 @@ export const CaseImport = ({
         !casePreview.caseNumber
       ) {
         if (isMounted) {
-          setShowArchivedRegularCaseRiskWarning(false);
+          setIsArchivedRegularCaseImportBlocked(false);
         }
         return;
       }
@@ -281,11 +301,12 @@ export const CaseImport = ({
       try {
         const regularCases = await listCases(user);
         if (isMounted) {
-          setShowArchivedRegularCaseRiskWarning(regularCases.includes(casePreview.caseNumber));
+          const hasConflict = regularCases.includes(casePreview.caseNumber);
+          setIsArchivedRegularCaseImportBlocked(hasConflict);
         }
       } catch {
         if (isMounted) {
-          setShowArchivedRegularCaseRiskWarning(false);
+          setIsArchivedRegularCaseImportBlocked(false);
         }
       }
     };
@@ -295,7 +316,13 @@ export const CaseImport = ({
     return () => {
       isMounted = false;
     };
-  }, [user, isOpen, importState.importType, casePreview?.archived, casePreview?.caseNumber]);
+  }, [
+    user,
+    isOpen,
+    importState.importType,
+    casePreview?.archived,
+    casePreview?.caseNumber,
+  ]);
 
   // Reset state when modal closes
   useEffect(() => {
@@ -306,9 +333,19 @@ export const CaseImport = ({
 
   // Handle confirmation import
   const handleConfirmImport = useCallback(() => {
+    if (isArchivedRegularCaseImportBlocked) {
+      setError(ARCHIVED_REGULAR_CASE_BLOCK_MESSAGE);
+      return;
+    }
+
     executeImport();
     updateImportState({ showConfirmation: false });
-  }, [executeImport, updateImportState]);
+  }, [
+    isArchivedRegularCaseImportBlocked,
+    executeImport,
+    updateImportState,
+    setError,
+  ]);
 
   if (!isOpen) return null;
 
@@ -362,7 +399,7 @@ export const CaseImport = ({
                   <CasePreviewSection 
                     casePreview={casePreview} 
                     isLoadingPreview={importState.isLoadingPreview} 
-                    showArchivedRegularCaseRiskWarning={showArchivedRegularCaseRiskWarning}
+                    isArchivedRegularCaseImportBlocked={isArchivedRegularCaseImportBlocked}
                   />
                 )}
                 
@@ -381,11 +418,14 @@ export const CaseImport = ({
             {/* Hash validation warning */}
             {casePreview?.hashValid === false && (
               <div className={styles.hashWarning}>
-                <strong>⚠️ Import Blocked:</strong> Data hash validation failed. 
-                This file may have been tampered with or corrupted and cannot be imported.
+                <strong>⚠️ Import Blocked:</strong> {DATA_INTEGRITY_BLOCKED_TAMPERING}
               </div>
             )}
 
+            {isArchivedRegularCaseImportBlocked && (
+              <div className={styles.error}>{ARCHIVED_REGULAR_CASE_BLOCK_MESSAGE}</div>
+            )}
+
             {/* Success message */}
             {messages.success && (
               <div className={styles.success}>
@@ -411,6 +451,7 @@ export const CaseImport = ({
                   importState.isImporting || 
                   importState.isClearing || 
                   importState.isLoadingPreview ||
+                  (importState.importType === 'case' && isArchivedRegularCaseImportBlocked) ||
                   (importState.importType === 'case' && (!casePreview || casePreview.hashValid !== true))
                 }
               >
@@ -454,7 +495,8 @@ export const CaseImport = ({
     <ConfirmationDialog 
       showConfirmation={importState.showConfirmation}
       casePreview={casePreview}
-      showArchivedRegularCaseRiskWarning={showArchivedRegularCaseRiskWarning}
+      isArchivedRegularCaseImportBlocked={isArchivedRegularCaseImportBlocked}
+      archivedRegularCaseBlockMessage={ARCHIVED_REGULAR_CASE_BLOCK_MESSAGE}
       onConfirm={handleConfirmImport}
       onCancel={handleCancelImport}
     />

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

@@ -1,16 +1,17 @@
 import { type CaseImportPreview } from '~/types';
+import { ARCHIVED_REGULAR_CASE_BLOCK_MESSAGE, DATA_INTEGRITY_VALIDATION_PASSED, DATA_INTEGRITY_VALIDATION_FAILED } from '~/utils/ui';
 import styles from '../case-import.module.css';
 
 interface CasePreviewSectionProps {
   casePreview: CaseImportPreview | null;
   isLoadingPreview: boolean;
-  showArchivedRegularCaseRiskWarning?: boolean;
+  isArchivedRegularCaseImportBlocked?: boolean;
 }
 
 export const CasePreviewSection = ({
   casePreview,
   isLoadingPreview,
-  showArchivedRegularCaseRiskWarning = false
+  isArchivedRegularCaseImportBlocked = false
 }: CasePreviewSectionProps) => {
   if (isLoadingPreview) {
     return (
@@ -34,9 +35,9 @@ export const CasePreviewSection = ({
             Archived export detected. Original exporter imports are allowed for archived cases.
           </div>
         )}
-        {showArchivedRegularCaseRiskWarning && (
+        {isArchivedRegularCaseImportBlocked && (
           <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.
+            {ARCHIVED_REGULAR_CASE_BLOCK_MESSAGE}
           </div>
         )}
         <div className={styles.previewGrid}>
@@ -78,9 +79,9 @@ export const CasePreviewSection = ({
           <div className={styles.validationItem}>            
             <span className={`${styles.validationValue} ${casePreview.hashValid ? styles.validationSuccess : styles.validationError}`}>
               {casePreview.hashValid ? (
-                <>✓ Validation passed</>
+                <>{DATA_INTEGRITY_VALIDATION_PASSED}</>
               ) : (
-                <>✗ Validation failed</>
+                <>{DATA_INTEGRITY_VALIDATION_FAILED}</>
               )}
             </span>
           </div>

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

@@ -1,10 +1,12 @@
 import { type CaseImportPreview } from '~/types';
+import { ARCHIVED_REGULAR_CASE_BLOCK_MESSAGE, DATA_INTEGRITY_VALIDATION_PASSED, DATA_INTEGRITY_VALIDATION_FAILED } from '~/utils/ui';
 import styles from '../case-import.module.css';
 
 interface ConfirmationDialogProps {
   showConfirmation: boolean;
   casePreview: CaseImportPreview | null;
-  showArchivedRegularCaseRiskWarning?: boolean;
+  isArchivedRegularCaseImportBlocked?: boolean;
+  archivedRegularCaseBlockMessage?: string;
   onConfirm: () => void;
   onCancel: () => void;
 }
@@ -12,7 +14,8 @@ interface ConfirmationDialogProps {
 export const ConfirmationDialog = ({ 
   showConfirmation, 
   casePreview, 
-  showArchivedRegularCaseRiskWarning = false,
+  isArchivedRegularCaseImportBlocked = false,
+  archivedRegularCaseBlockMessage = ARCHIVED_REGULAR_CASE_BLOCK_MESSAGE,
   onConfirm, 
   onCancel 
 }: ConfirmationDialogProps) => {
@@ -51,16 +54,16 @@ export const ConfirmationDialog = ({
                 Archived export detected. Original exporter imports are allowed for archived cases.
               </div>
             )}
-            {showArchivedRegularCaseRiskWarning && (
+            {isArchivedRegularCaseImportBlocked && (
               <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.
+                {archivedRegularCaseBlockMessage}
               </div>
             )}
             {casePreview.hashValid !== undefined && (
               <div className={`${styles.confirmationItem} ${casePreview.hashValid ? styles.confirmationItemValid : styles.confirmationItemInvalid}`}>
                 <strong>Data Integrity:</strong> 
                 <span className={casePreview.hashValid ? styles.confirmationSuccess : styles.confirmationError}>
-                  {casePreview.hashValid ? '✓ Verified' : '✗ Failed'}
+                  {casePreview.hashValid ? DATA_INTEGRITY_VALIDATION_PASSED : DATA_INTEGRITY_VALIDATION_FAILED}
                 </span>
               </div>
             )}
@@ -70,6 +73,7 @@ export const ConfirmationDialog = ({
             <button
               className={styles.confirmButton}
               onClick={onConfirm}
+              disabled={isArchivedRegularCaseImportBlocked}
             >
               Confirm Import
             </button>

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

@@ -260,6 +260,19 @@
   white-space: nowrap;
 }
 
+.badgeColumn {
+  justify-self: end;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--spaceXS);
+}
+
+.archivedBadge {
+  background-color: color-mix(in lab, #6c757d 18%, var(--backgroundLight));
+  border-color: color-mix(in lab, #6c757d 30%, transparent);
+}
+
 .footerActions {
   display: flex;
   justify-content: space-between;
@@ -489,6 +502,12 @@
     justify-self: start;
   }
 
+  .badgeColumn {
+    grid-column: 1 / -1;
+    justify-self: start;
+    align-items: flex-start;
+  }
+
   .footerActions {
     flex-direction: column;
     align-items: stretch;

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

@@ -169,7 +169,7 @@ export const CasesModal = ({
       return allCases.filter((entry) => entry.archived && !entry.isReadOnly);
     }
 
-    return allCases.filter((entry) => !entry.archived && !entry.isReadOnly);
+    return allCases.filter((entry) => !entry.isReadOnly);
   }, [allCases, preferences.showArchivedOnly]);
 
   const visibleCases = useMemo(() => {
@@ -185,6 +185,11 @@ export const CasesModal = ({
     );
   }, [allCases, preferences, caseConfirmationStatus, searchQuery]);
 
+  const totalRegularCases = useMemo(
+    () => allCases.filter((entry) => !entry.isReadOnly).length,
+    [allCases]
+  );
+
   const totalPages = Math.max(1, Math.ceil(visibleCases.length / CASES_PER_PAGE));
 
   useEffect(() => {
@@ -653,7 +658,7 @@ export const CasesModal = ({
               </div>
 
               <p className={styles.caseCount}>
-                {visibleCases.length} shown of {allCases.length} total cases
+                {visibleCases.length} shown of {totalRegularCases} total cases
               </p>
 
               {actionNotice && (
@@ -720,12 +725,22 @@ export const CasesModal = ({
                             </span>
                           </div>
 
-                          <span
-                            className={`${styles.confirmationBadge} ${confirmationClass}`}
-                            aria-label={`Confirmation status: ${confirmationLabel}`}
-                          >
-                            {confirmationLabel}
-                          </span>
+                          <div className={styles.badgeColumn}>
+                            {caseEntry.archived && (
+                              <span
+                                className={`${styles.confirmationBadge} ${styles.archivedBadge}`}
+                                aria-label="Archived case"
+                              >
+                                Archived
+                              </span>
+                            )}
+                            <span
+                              className={`${styles.confirmationBadge} ${confirmationClass}`}
+                              aria-label={`Confirmation status: ${confirmationLabel}`}
+                            >
+                              {confirmationLabel}
+                            </span>
+                          </div>
                         </div>
                       </li>
                     );

package/app/routes/striae/hooks/use-striae-reset-helpers.ts

@@ -0,0 +1,102 @@
+import { useCallback, type Dispatch, type SetStateAction } from 'react';
+import { type AnnotationData, type FileData } from '~/types';
+
+interface ArchiveDetailsState {
+  archived: boolean;
+  archivedAt?: string;
+  archivedBy?: string;
+  archivedByDisplay?: string;
+  archiveReason?: string;
+}
+
+interface UseStriaeResetHelpersProps {
+  setSelectedImage: Dispatch<SetStateAction<string | undefined>>;
+  setSelectedFilename: Dispatch<SetStateAction<string | undefined>>;
+  setImageId: Dispatch<SetStateAction<string | undefined>>;
+  setAnnotationData: Dispatch<SetStateAction<AnnotationData | null>>;
+  setError: Dispatch<SetStateAction<string | undefined>>;
+  setImageLoaded: Dispatch<SetStateAction<boolean>>;
+  setCurrentCase: Dispatch<SetStateAction<string>>;
+  setFiles: Dispatch<SetStateAction<FileData[]>>;
+  setActiveAnnotations: Dispatch<SetStateAction<Set<string>>>;
+  setIsBoxAnnotationMode: Dispatch<SetStateAction<boolean>>;
+  setIsReadOnlyCase: Dispatch<SetStateAction<boolean>>;
+  setIsReviewOnlyCase: Dispatch<SetStateAction<boolean>>;
+  setArchiveDetails: Dispatch<SetStateAction<ArchiveDetailsState>>;
+  setShowNotes: Dispatch<SetStateAction<boolean>>;
+  setIsAuditTrailOpen: Dispatch<SetStateAction<boolean>>;
+  setIsRenameCaseModalOpen: Dispatch<SetStateAction<boolean>>;
+}
+
+export const useStriaeResetHelpers = ({
+  setSelectedImage,
+  setSelectedFilename,
+  setImageId,
+  setAnnotationData,
+  setError,
+  setImageLoaded,
+  setCurrentCase,
+  setFiles,
+  setActiveAnnotations,
+  setIsBoxAnnotationMode,
+  setIsReadOnlyCase,
+  setIsReviewOnlyCase,
+  setArchiveDetails,
+  setShowNotes,
+  setIsAuditTrailOpen,
+  setIsRenameCaseModalOpen,
+}: UseStriaeResetHelpersProps) => {
+  const clearSelectedImageState = useCallback(() => {
+    setSelectedImage('/clear.jpg');
+    setSelectedFilename(undefined);
+    setImageId(undefined);
+    setAnnotationData(null);
+    setError(undefined);
+    setImageLoaded(false);
+  }, [
+    setSelectedImage,
+    setSelectedFilename,
+    setImageId,
+    setAnnotationData,
+    setError,
+    setImageLoaded,
+  ]);
+
+  const clearCaseContextState = useCallback(() => {
+    setActiveAnnotations(new Set());
+    setIsBoxAnnotationMode(false);
+    setIsReadOnlyCase(false);
+    setIsReviewOnlyCase(false);
+    setArchiveDetails({ archived: false });
+  }, [
+    setActiveAnnotations,
+    setIsBoxAnnotationMode,
+    setIsReadOnlyCase,
+    setIsReviewOnlyCase,
+    setArchiveDetails,
+  ]);
+
+  const clearLoadedCaseState = useCallback(() => {
+    setCurrentCase('');
+    setFiles([]);
+    clearCaseContextState();
+    clearSelectedImageState();
+    setShowNotes(false);
+    setIsAuditTrailOpen(false);
+    setIsRenameCaseModalOpen(false);
+  }, [
+    setCurrentCase,
+    setFiles,
+    clearCaseContextState,
+    clearSelectedImageState,
+    setShowNotes,
+    setIsAuditTrailOpen,
+    setIsRenameCaseModalOpen,
+  ]);
+
+  return {
+    clearSelectedImageState,
+    clearCaseContextState,
+    clearLoadedCaseState,
+  };
+};