@striae-org/striae 3.2.2 → 3.3.0

package/app/components/sidebar/case-import/utils/file-validation.ts

@@ -1,5 +1,14 @@
 import { isConfirmationDataFile } from '~/components/actions/case-review';
 
+const CASE_EXPORT_DATA_FILE_REGEX = /_data\.(json|csv)$/i;
+const CONFIRMATION_EXPORT_FILE_REGEX = /^confirmation-data-.*\.json$/i;
+const FORENSIC_MANIFEST_FILE_NAME = 'forensic_manifest.json';
+
+function getLeafFileName(path: string): string {
+  const segments = path.split('/').filter(Boolean);
+  return segments.length > 0 ? segments[segments.length - 1] : path;
+}
+
 /**
  * Check if a file is a valid ZIP file
  */
@@ -13,8 +22,10 @@ export const isValidZipFile = (file: File): boolean => {
  * Check if a file is a valid confirmation JSON file
  */
 export const isValidConfirmationFile = (file: File): boolean => {
-  return file.type === 'application/json' && 
-         isConfirmationDataFile(file.name);
+  const lowerName = file.name.toLowerCase();
+  const jsonType = file.type === 'application/json' || file.type === '';
+
+  return lowerName.endsWith('.json') && jsonType && isConfirmationDataFile(file.name);
 };
 
 /**
@@ -33,6 +44,50 @@ export const getImportType = (file: File): 'case' | 'confirmation' | null => {
   return null;
 };
 
+/**
+ * Resolve import type, including ZIP package inspection.
+ * Case ZIPs are identified by case data files or FORENSIC_MANIFEST.json.
+ * Confirmation ZIPs are identified by confirmation-data-*.json.
+ */
+export const resolveImportType = async (file: File): Promise<'case' | 'confirmation' | null> => {
+  if (isValidConfirmationFile(file)) {
+    return 'confirmation';
+  }
+
+  if (!isValidZipFile(file)) {
+    return null;
+  }
+
+  try {
+    const JSZip = (await import('jszip')).default;
+    const zip = await JSZip.loadAsync(file);
+    const fileEntries = Object.keys(zip.files).filter((path) => !zip.files[path].dir);
+
+    const hasCaseData = fileEntries.some((path) =>
+      CASE_EXPORT_DATA_FILE_REGEX.test(getLeafFileName(path))
+    );
+    const hasManifest = fileEntries.some(
+      (path) => getLeafFileName(path).toLowerCase() === FORENSIC_MANIFEST_FILE_NAME
+    );
+
+    if (hasCaseData || hasManifest) {
+      return 'case';
+    }
+
+    const hasConfirmationData = fileEntries.some((path) =>
+      CONFIRMATION_EXPORT_FILE_REGEX.test(getLeafFileName(path))
+    );
+
+    if (hasConfirmationData) {
+      return 'confirmation';
+    }
+
+    return null;
+  } catch {
+    return null;
+  }
+};
+
 /**
  * Reset file input element
  */

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

@@ -2,6 +2,7 @@ import type { User } from 'firebase/auth';
 import type * as CaseExportActions from '../../actions/case-export';
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import styles from './cases.module.css';
+import { Toast } from '~/components/toast/toast';
 import { CasesModal } from './cases-modal';
 import { FilesModal } from '../files/files-modal';
 import { CaseExport, type ExportFormat } from '../case-export/case-export';
@@ -103,7 +104,11 @@ export const CaseSidebar = ({
   const [, setFileError] = useState('');
   const [newCaseName, setNewCaseName] = useState('');
   const [showCaseActions, setShowCaseActions] = useState(false);
+  const [showCaseManagement, setShowCaseManagement] = useState(false);
   const [canCreateNewCase, setCanCreateNewCase] = useState(true);
+  const [isToastVisible, setIsToastVisible] = useState(false);
+  const [toastMessage, setToastMessage] = useState('');
+  const [toastType, setToastType] = useState<'success' | 'error' | 'warning'>('success');
   const [canUploadNewFile, setCanUploadNewFile] = useState(true);
   const [createCaseError, setCreateCaseError] = useState('');
   const [uploadFileError, setUploadFileError] = useState('');
@@ -313,6 +318,24 @@ export const CaseSidebar = ({
       isCancelled = true;
     };
   }, [currentCase, fileIdsKey, user, selectedFileId, confirmationSaveVersion, files.length, calculateCaseConfirmationStatus]);
+
+  useEffect(() => {
+    if (error) {
+      setToastMessage(error);
+      setToastType('error');
+      setIsToastVisible(true);
+    }
+  }, [error]);
+
+  useEffect(() => {
+    if (successAction) {
+      setToastMessage(`Case ${currentCase} ${successAction} successfully!`);
+      setToastType('success');
+      setIsToastVisible(true);
+    }
+    // currentCase intentionally omitted: we capture its value at the time successAction changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [successAction]);
   
   const handleCase = async () => {
     setIsLoading(true);
@@ -336,6 +359,7 @@ export const CaseSidebar = ({
         setFiles(files);
         setCaseNumber('');
         setSuccessAction('loaded');
+        setShowCaseManagement(false);
         setTimeout(() => setSuccessAction(null), SUCCESS_MESSAGE_TIMEOUT);
         return;
       }
@@ -362,6 +386,7 @@ export const CaseSidebar = ({
       setFiles([]);
       setCaseNumber('');
       setSuccessAction('created');
+      setShowCaseManagement(false);
       setTimeout(() => setSuccessAction(null), SUCCESS_MESSAGE_TIMEOUT);
       
       // Refresh permissions after successful case creation
@@ -564,53 +589,73 @@ const handleImageSelect = (file: FileData) => {
   };
 
 return (
+    <>
     <div className={styles.caseSection}>
-     <div className={styles.caseSection}>
-        <h4>Case Management</h4>
-        {limitsDescription && (
-          <p className={styles.limitsInfo}>
-            {limitsDescription}
-          </p>
-        )}
-        <div className={`${styles.caseInput} mb-4`}>
-          <input
-            type="text"
-            value={caseNumber}
-            onChange={(e) => setCaseNumber(e.target.value)}
-            placeholder="Case #"
-          />
-          </div>
+        {currentCase && !showCaseManagement ? (
           <div className={`${styles.caseLoad} mb-4`}>
-          <button
-        onClick={handleCase}
-        disabled={isLoading || !caseNumber || permissionChecking || (isReadOnly && !!currentCase) || isUploading}
-        title={
-          isUploading
-            ? "Cannot load/create cases while uploading files"
-            : (isReadOnly && currentCase)
-            ? "Cannot load/create cases while reviewing a read-only case. Clear the current case first." 
-            : (!canCreateNewCase ? createCaseError : undefined)
-        }
-      >
-            {isLoading ? 'Loading...' : permissionChecking ? 'Checking permissions...' : 'Load/Create Case'}
-      </button>      
-      </div>
-      <div className={styles.caseInput}>            
-      <button 
-            onClick={() => setIsModalOpen(true)}
-            className={styles.listButton}
-            disabled={isUploading}
-            title={isUploading ? "Cannot list cases while uploading files" : undefined}
-          >
-            List All Cases
-          </button>
-    </div>
-    {error && <p className={styles.error}>{error}</p>}
-    {successAction && (
-      <p className={styles.success}>
-        Case {currentCase} {successAction} successfully!
-      </p>
-    )}  
+            <button
+              className={styles.switchCaseButton}
+              onClick={() => setShowCaseManagement(true)}
+              disabled={isUploading}
+              title={isUploading ? "Cannot switch cases while uploading files" : undefined}
+            >
+              Switch Case
+            </button>
+          </div>
+        ) : (
+          <>
+            <h4>Case Management</h4>
+            {limitsDescription && (
+              <p className={styles.limitsInfo}>
+                {limitsDescription}
+              </p>
+            )}
+            <div className={`${styles.caseInput} mb-4`}>
+              <input
+                type="text"
+                value={caseNumber}
+                onChange={(e) => setCaseNumber(e.target.value)}
+                placeholder="Case #"
+              />
+            </div>
+            <div className={`${styles.caseLoad} mb-4`}>
+              <button
+                onClick={handleCase}
+                disabled={isLoading || !caseNumber || permissionChecking || (isReadOnly && !!currentCase) || isUploading}
+                title={
+                  isUploading
+                    ? "Cannot load/create cases while uploading files"
+                    : (isReadOnly && currentCase)
+                    ? "Cannot load/create cases while reviewing a read-only case. Clear the current case first."
+                    : (!canCreateNewCase ? createCaseError : undefined)
+                }
+              >
+                {isLoading ? 'Loading...' : permissionChecking ? 'Checking permissions...' : 'Load/Create Case'}
+              </button>
+            </div>
+            <div className={styles.caseInput}>
+              <button
+                onClick={() => setIsModalOpen(true)}
+                className={styles.listButton}
+                disabled={isUploading}
+                title={isUploading ? "Cannot list cases while uploading files" : undefined}
+              >
+                List All Cases
+              </button>
+            </div>
+            {currentCase && (
+              <div className="mb-4">
+                <button
+                  className={styles.cancelSwitchButton}
+                  onClick={() => setShowCaseManagement(false)}
+                  disabled={isUploading}
+                >
+                  Cancel
+                </button>
+              </div>
+            )}
+          </>
+        )}
     <CasesModal
         isOpen={isModalOpen}
         onClose={() => setIsModalOpen(false)}
@@ -830,6 +875,16 @@ return (
       />
       
       </div>
-    </div>
+    <Toast
+      message={toastMessage}
+      type={toastType}
+      isVisible={isToastVisible}
+      onClose={() => {
+        setIsToastVisible(false);
+        setError('');
+        setSuccessAction(null);
+      }}
+    />
+    </>
   );
 };

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

@@ -50,7 +50,7 @@
 .caseInput input:focus {
   outline: none;
   border-color: #0d6efd;
-  box-shadow: 0 0 0 2px rgba(13,110,253,.25);
+  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
 }
 
 /* Buttons */
@@ -126,7 +126,7 @@
   background-color: #0d6efd;
   color: white;
   border: none;
-  border-radius: 6px;  
+  border-radius: 6px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s;
@@ -174,7 +174,7 @@
   padding: 0.5rem;
   border-radius: 4px;
   color: #198754;
-  background-color: rgba(25,135,84,0.1);
+  background-color: rgba(25, 135, 84, 0.1);
 }
 
 /* Files Section */
@@ -182,7 +182,7 @@
   margin-top: 2rem;
 }
 
-.filesSection h4 {  
+.filesSection h4 {
   margin-bottom: 1rem;
   font-size: 1.3rem;
   font-weight: 900;
@@ -274,8 +274,6 @@
   background-color: #dee2e6;
 }
 
-
-
 /* Files and Case Management */
 
 .fileName {
@@ -285,7 +283,6 @@
   white-space: nowrap;
 }
 
-
 /* Rename and Delete Cases */
 
 .caseRename {
@@ -307,12 +304,12 @@
 .caseRename input:focus {
   outline: none;
   border-color: #0d6efd;
-  box-shadow: 0 0 0 2px rgba(13,110,253,.25);
+  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
 }
 
 /* Buttons */
 .caseRename button {
-   width: 100%;
+  width: 100%;
   padding: 0.75rem;
   background-color: #ffc107;
   color: #000;
@@ -681,33 +678,119 @@
 }
 /* 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)
+  );
+}
+
+/* Switch/Cancel Case buttons */
+.switchCaseButton {
+  width: 100%;
+  padding: 0.75rem;
+  background-color: #198754;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  margin-top: 0.5rem;
+  box-sizing: border-box;
+}
+
+.switchCaseButton:hover:not(:disabled) {
+  background-color: #105032;
+}
+
+.switchCaseButton:disabled {
+  background-color: #e9ecef;
+  color: #6c757d;
+  cursor: not-allowed;
+}
+
+.cancelSwitchButton {
+  width: 100%;
+  padding: 0.75rem;
+  margin-top: 0.75rem;
+  background-color: #dc3545;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-sizing: border-box;
+}
+
+.cancelSwitchButton:hover:not(:disabled) {
+  background-color: #bd2130;
+}
+
+.cancelSwitchButton:disabled {
+  background-color: #e9ecef;
+  color: #6c757d;
+  cursor: not-allowed;
+}
+
+.cancelSwitchButton:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}

package/app/components/sidebar/notes/notes.module.css

@@ -10,12 +10,12 @@ hr {
 }
 
 .section {
-  margin-bottom: 2rem;  
+  margin-bottom: 2rem;
 }
 
 .sectionTitle {
   font-size: 1.3rem;
-  font-weight: 600;  
+  font-weight: 600;
   color: #495057;
   margin-bottom: 1rem;
 }
@@ -50,7 +50,7 @@ input[type="color"]:focus,
 textarea:focus {
   outline: none;
   border-color: #0d6efd;
-  box-shadow: 0 0 0 2px rgba(13,110,253,.25);
+  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
 }
 
 .caseNumbers {
@@ -74,10 +74,14 @@ textarea:focus {
   box-sizing: border-box;
 }
 
+.caseInput input:not(:disabled) {
+  background-color: #ffffff;
+}
+
 .caseInput input:focus {
   outline: none;
   border-color: #0d6efd;
-  box-shadow: 0 0 0 2px rgba(13,110,253,.25);
+  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
 }
 
 .checkboxLabel {
@@ -108,6 +112,11 @@ textarea:focus {
   transition: border-color 0.2s;
 }
 
+.classCharacteristics input:not(:disabled),
+.classCharacteristics textarea:not(:disabled) {
+  background-color: #ffffff;
+}
+
 .classCharacteristics select,
 .support select {
   width: 100%;
@@ -124,7 +133,7 @@ textarea:focus {
 .support select:focus {
   outline: none;
   border-color: #0d6efd;
-  box-shadow: 0 0 0 2px rgba(13,110,253,.25);
+  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
 }
 
 .classCharacteristics textarea {
@@ -138,11 +147,14 @@ textarea:focus {
   box-sizing: border-box;
 }
 
+.classCharacteristics input + textarea {
+  margin-top: 1rem;
+}
+
 .classCharacteristics textarea:focus {
   outline: none;
   border-color: #0d6efd;
-  box-shadow: 0 0 0 2px rgba(13,110,253,.25);
-  margin-top: 1rem;
+  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
   resize: vertical;
 }
 
@@ -188,13 +200,17 @@ textarea:focus {
   box-sizing: border-box;
 }
 
+.indexing input[type="text"]:not(:disabled) {
+  background-color: #ffffff;
+}
+
 .indexing input[type="text"]:focus {
   outline: none;
   border-color: #0d6efd;
-  box-shadow: 0 0 0 2px rgba(13,110,253,.25);
+  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
 }
 
-.confirmation {  
+.confirmation {
   padding: 0.75rem;
   background-color: #f8f9fa;
   border-radius: 6px;
@@ -232,7 +248,7 @@ textarea:focus {
 }
 
 .notesButton:hover {
-  background-color: color-mix(in lab, var(--primary) 95%, transparent);  
+  background-color: color-mix(in lab, var(--primary) 95%, transparent);
 }
 
 .modalOverlay {
@@ -355,6 +371,10 @@ textarea:focus {
 }
 
 @keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/app/components/user/manage-profile.tsx

@@ -234,7 +234,7 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
             <FormButton variant="primary" type="submit" isLoading={isLoading} loadingText="Updating...">
               Update Profile
             </FormButton>
-            <FormButton variant="secondary" type="button" onClick={() => setShowAuditViewer(true)}>
+            <FormButton variant="audit" type="button" onClick={() => setShowAuditViewer(true)}>
               View My Audit Trail
             </FormButton>
             <FormButton variant="secondary" type="button" onClick={() => setShowResetForm(true)}>

package/app/components/user/mfa-phone-update.tsx

@@ -58,6 +58,7 @@ export const MfaPhoneUpdateSection = ({
   const [recaptchaVerifier, setRecaptchaVerifier] = useState<RecaptchaVerifier | null>(null);
 
   const isMfaBusy = isMfaLoading || isMfaReauthLoading;
+  const hasMfaPhoneInput = mfaPhoneInput.trim().length > 0;
 
   const resetMfaReauthFlow = useCallback(() => {
     setShowMfaReauthPrompt(false);
@@ -665,18 +666,20 @@ export const MfaPhoneUpdateSection = ({
           )}
         </div>
       ) : !isMfaCodeSent ? (
-        <div className={styles.mfaButtonGroup}>
-          <FormButton
-            variant="secondary"
-            type="button"
-            onClick={handleSendMfaVerificationCode}
-            isLoading={isMfaLoading}
-            loadingText="Sending Code..."
-            disabled={!mfaPhoneInput.trim()}
-          >
-            Send Verification Code
-          </FormButton>
-        </div>
+        hasMfaPhoneInput ? (
+          <div className={styles.mfaButtonGroup}>
+            <FormButton
+              variant="secondary"
+              type="button"
+              onClick={handleSendMfaVerificationCode}
+              isLoading={isMfaLoading}
+              loadingText="Sending Code..."
+              disabled={!hasMfaPhoneInput}
+            >
+              Send Verification Code
+            </FormButton>
+          </div>
+        ) : null
       ) : (
         <div className={styles.mfaVerificationSection}>
           <input

package/app/root.tsx

@@ -30,8 +30,8 @@ export const links: LinksFunction = () => [
     rel: "stylesheet",
     href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
   },
+  { rel: 'manifest', href: '/manifest.json' },
   { rel: 'icon', href: '/favicon.ico' },
-  { rel: 'icon', href: '/favicon.svg', type: 'image/svg+xml' },
 ];
 
 type AppTheme = 'dark' | 'light';
@@ -61,7 +61,7 @@ const resolveRouteTheme = (matches: ReturnType<typeof useMatches>): AppTheme =>
 export function Layout({ children }: { children: React.ReactNode }) {
   const matches = useMatches();
   const theme = resolveRouteTheme(matches);
-  const themeColor = theme === 'dark' ? '#000000' : '#f5f5f5';
+  const themeColor = theme === 'dark' ? '#000000' : '#377087';
 
   return (
     <html lang="en" data-theme={theme}>