@striae-org/striae 4.2.0 → 4.2.1

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

@@ -3,7 +3,7 @@ import { useState, useContext, useEffect } from 'react';
 import { AuthContext } from '~/contexts/auth.context';
 import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 import { deleteFile } from '~/components/actions/image-manage';
-import { getFileAnnotations } from '~/utils/data';
+import { ensureCaseConfirmationSummary } from '~/utils/data';
 import { type FileData } from '~/types';
 import styles from './files-modal.module.css';
 
@@ -16,6 +16,7 @@ interface FilesModalProps {
   setFiles: React.Dispatch<React.SetStateAction<FileData[]>>;
   isReadOnly?: boolean;
   selectedFileId?: string;
+  confirmationSaveVersion?: number;
 }
 
 const FILES_PER_PAGE = 10;
@@ -28,7 +29,17 @@ interface FileConfirmationStatus {
   };
 }
 
-export const FilesModal = ({ isOpen, onClose, onFileSelect, currentCase, files, setFiles, isReadOnly = false, selectedFileId }: FilesModalProps) => {
+export const FilesModal = ({
+  isOpen,
+  onClose,
+  onFileSelect,
+  currentCase,
+  files,
+  setFiles,
+  isReadOnly = false,
+  selectedFileId,
+  confirmationSaveVersion = 0
+}: FilesModalProps) => {
   const { user } = useContext(AuthContext);
   const [error, setError] = useState<string | null>(null);
   const [currentPage, setCurrentPage] = useState(0);
@@ -48,54 +59,36 @@ export const FilesModal = ({ isOpen, onClose, onFileSelect, currentCase, files,
   const endIndex = startIndex + FILES_PER_PAGE;
   const currentFiles = files.slice(startIndex, endIndex);
 
-  // Fetch confirmation status only for currently visible paginated files
+  // Hydrate confirmation status from shared summary document.
   useEffect(() => {
-    const fetchConfirmationStatuses = async () => {
-      const visibleFiles = files.slice(
-        currentPage * FILES_PER_PAGE,
-        currentPage * FILES_PER_PAGE + FILES_PER_PAGE
-      );
+    let isCancelled = false;
 
-      if (!isOpen || !currentCase || !user || visibleFiles.length === 0) {
+    const fetchConfirmationStatuses = async () => {
+      if (!isOpen || !currentCase || !user || files.length === 0) {
+        if (!isCancelled) {
+          setFileConfirmationStatus({});
+        }
         return;
       }
 
-      // Fetch annotations in parallel for only visible files
-      const annotationPromises = visibleFiles.map(async (file) => {
-        try {
-          const annotations = await getFileAnnotations(user, currentCase, file.id);
-          return {
-            fileId: file.id,
-            includeConfirmation: annotations?.includeConfirmation ?? false,
-            isConfirmed: !!(annotations?.includeConfirmation && annotations?.confirmationData),
-          };
-        } catch (err) {
-          console.error(`Error fetching annotations for file ${file.id}:`, err);
-          return {
-            fileId: file.id,
-            includeConfirmation: false,
-            isConfirmed: false,
-          };
-        }
+      const caseSummary = await ensureCaseConfirmationSummary(user, currentCase, files).catch((err) => {
+        console.error(`Error fetching confirmation summary for case ${currentCase}:`, err);
+        return null;
       });
 
-      // Wait for all fetches to complete
-      const results = await Promise.all(annotationPromises);
-
-      // Build the statuses map from results
-      const statuses: FileConfirmationStatus = {};
-      results.forEach((result) => {
-        statuses[result.fileId] = {
-          includeConfirmation: result.includeConfirmation,
-          isConfirmed: result.isConfirmed,
-        };
-      });
+      if (!caseSummary || isCancelled) {
+        return;
+      }
 
-      setFileConfirmationStatus(statuses);
+      setFileConfirmationStatus(caseSummary.filesById);
     };
 
     fetchConfirmationStatuses();
-  }, [isOpen, currentCase, currentPage, files, user]);
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [isOpen, currentCase, files, user, confirmationSaveVersion]);
 
   const handleFileSelect = (file: FileData) => {
     onFileSelect?.(file);
@@ -121,6 +114,11 @@ export const FilesModal = ({ isOpen, onClose, onFileSelect, currentCase, files,
       // Remove the deleted file from the list
       const updatedFiles = files.filter(f => f.id !== fileId);
       setFiles(updatedFiles);
+      setFileConfirmationStatus((previous) => {
+        const next = { ...previous };
+        delete next[fileId];
+        return next;
+      });
 
       if (deleteResult.imageMissing) {
         setError(`File record deleted. Image asset "${deleteResult.fileName}" was not found and was skipped.`);

package/app/components/sidebar/notes/addl-notes-modal.tsx

@@ -0,0 +1,82 @@
+import { useState, useEffect } from 'react';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
+import styles from './notes.module.css';
+
+interface AddlNotesModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  notes: string;
+  onSave: (notes: string) => void;
+  showNotification?: (message: string, type: 'success' | 'error' | 'warning') => void;
+}
+
+export const AddlNotesModal = ({ isOpen, onClose, notes, onSave, showNotification }: AddlNotesModalProps) => {
+  const [tempNotes, setTempNotes] = useState(notes);
+  const [isSaving, setIsSaving] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      setTempNotes(notes);
+    }
+  }, [isOpen, notes]);
+  const {
+    requestClose,
+    overlayProps,
+    getCloseButtonProps
+  } = useOverlayDismiss({
+    isOpen,
+    onClose
+  });
+
+  if (!isOpen) return null;  
+
+  const handleSave = async () => {
+    setIsSaving(true);
+    try {
+      await Promise.resolve(onSave(tempNotes));
+      showNotification?.('Notes saved successfully.', 'success');
+      requestClose();
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to save notes.';
+      showNotification?.(message, 'error');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <div
+      className={styles.modalOverlay}
+      aria-label="Close notes dialog"
+      {...overlayProps}
+    >
+      <div className={styles.modal}>
+        <button {...getCloseButtonProps({ ariaLabel: 'Close notes dialog' })}>×</button>
+        <h5 className={styles.modalTitle}>Additional Notes</h5>
+        <textarea
+          value={tempNotes}
+          onChange={(e) => setTempNotes(e.target.value)}
+          className={styles.modalTextarea}
+          placeholder="Enter additional notes..."
+        />
+        <div className={styles.modalButtons}>
+          <button 
+            onClick={handleSave} 
+            className={styles.saveButton}
+            disabled={isSaving}
+            aria-busy={isSaving}
+          >
+            {isSaving ? 'Saving...' : 'Save'}
+          </button>
+          <button 
+            onClick={requestClose} 
+            className={styles.cancelButton}
+            disabled={isSaving}
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

package/app/components/sidebar/notes/{notes-sidebar.tsx → notes-editor-form.tsx}

@@ -1,36 +1,31 @@
 import { useState, useEffect } from 'react';
 import type { User } from 'firebase/auth';
 import { ColorSelector } from '~/components/colors/colors';
-import { NotesModal } from './notes-modal';
+import { AddlNotesModal } from './addl-notes-modal';
 import { getNotes, saveNotes } from '~/components/actions/notes-manage';
 import { type AnnotationData } from '~/types/annotations';
 import { resolveEarliestAnnotationTimestamp } from '~/utils/ui';
 import { auditService } from '~/services/audit';
 import styles from './notes.module.css';
 
-interface NotesSidebarProps {
+interface NotesEditorFormProps {
   currentCase: string;
-  onReturn: () => void;
   user: User;
   imageId: string;
   onAnnotationRefresh?: () => void;
   originalFileName?: string;
   isUploading?: boolean;
-  showReturnButton?: boolean;
-  stickyActionBar?: boolean;
-  compactLayout?: boolean;
+  showNotification?: (message: string, type: 'success' | 'error' | 'warning') => void;
 }
 
 type SupportLevel = 'ID' | 'Exclusion' | 'Inconclusive';
 type ClassType = 'Bullet' | 'Cartridge Case' | 'Other';
 type IndexType = 'number' | 'color';
 
-export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotationRefresh, originalFileName, isUploading = false, showReturnButton = true, stickyActionBar = false, compactLayout = false }: NotesSidebarProps) => {
+export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefresh, originalFileName, isUploading = false, showNotification: externalShowNotification }: NotesEditorFormProps) => {
   // Loading/Saving Notes States
   const [isLoading, setIsLoading] = useState(false);
   const [loadError, setLoadError] = useState<string>();
-  const [saveError, setSaveError] = useState<string>();
-  const [saveSuccess, setSaveSuccess] = useState(false);
   const [isConfirmedImage, setIsConfirmedImage] = useState(false);
   // Case numbers state
   const [leftCase, setLeftCase] = useState('');
@@ -65,14 +60,18 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
   const [isSupportOpen, setIsSupportOpen] = useState(true);
   const areInputsDisabled = isUploading || isConfirmedImage;
 
+  const notificationHandler = (message: string, type: 'success' | 'error' | 'warning' = 'success') => {
+    if (externalShowNotification) {
+      externalShowNotification(message, type);
+    }
+  };
+
   useEffect(() => {
     const loadExistingNotes = async () => {
       if (!imageId || !currentCase) return;
       
       setIsLoading(true);
       setLoadError(undefined);
-      setSaveError(undefined);
-      setSaveSuccess(false);
       setIsConfirmedImage(false);
       
       try {
@@ -128,9 +127,6 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
       return;
     }
 
-    setSaveError(undefined);
-    setSaveSuccess(false);
-
     let existingData: AnnotationData | null = null;
     
     try {
@@ -139,7 +135,7 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
 
       if (existingData?.confirmationData) {
         setIsConfirmedImage(true);
-        setSaveError('This image is confirmed. Notes cannot be modified.');
+        notificationHandler('This image is confirmed. Notes cannot be modified.', 'error');
         return;
       }
       
@@ -193,13 +189,12 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
         existingData,
         annotationData,
         currentCase,
-        'notes-sidebar',
+        'notes-editor-form',
         imageId,
         originalFileName
       );
       
-      setSaveSuccess(true);
-      setTimeout(() => setSaveSuccess(false), 3000);
+      notificationHandler('Notes saved successfully.', 'success');
       
       // Refresh annotation data after saving notes
       if (onAnnotationRefresh) {
@@ -210,9 +205,9 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
       const errorMessage = error instanceof Error ? error.message : '';
       if (errorMessage.toLowerCase().includes('confirmed image')) {
         setIsConfirmedImage(true);
-        setSaveError('This image is confirmed. Notes cannot be modified.');
+        notificationHandler('This image is confirmed. Notes cannot be modified.', 'error');
       } else {
-        setSaveError('Failed to save notes. Please try again.');
+        notificationHandler('Failed to save notes. Please try again.', 'error');
       }
       
       // Audit logging for failed annotation save
@@ -223,7 +218,7 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
           existingData,
           null, // Failed save, no new value
           currentCase,
-          'notes-sidebar',
+          'notes-editor-form',
           imageId,
           originalFileName
         );
@@ -234,7 +229,7 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
   };
 
   return (
-    <div className={`${styles.notesSidebar} ${compactLayout ? styles.compactLayout : ''}`}>
+    <div className={`${styles.notesEditorForm} ${styles.editorLayout}`}>
       {isLoading ? (
         <div className={styles.loading}>Loading notes...</div>
       ) : loadError ? (
@@ -247,10 +242,6 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
         </div>
       )}
 
-      {saveError && (
-        <div className={styles.errorMessage}>{saveError}</div>
-      )}
-
       <div className={styles.section}>
         <button
           type="button"
@@ -297,17 +288,7 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
                 disabled={areInputsDisabled}
               />
             </div>
-            {compactLayout && (
-              <div className={styles.caseInput}>
-                <label htmlFor="colorSelect">Font</label>
-                <ColorSelector
-                  selectedColor={caseFontColor}
-                  onColorSelect={setCaseFontColor}
-                />
-              </div>
-            )}
           </div>
-          {!compactLayout && <hr />}
           {/* Right side inputs */}
           <div className={styles.inputGroup}>
             <div className={styles.caseInput}>
@@ -342,21 +323,20 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
             </div>            
           </div>
         </div>
-        {!compactLayout && (
-          <>
-            <label htmlFor="colorSelect">Font</label>
-            <ColorSelector
-              selectedColor={caseFontColor}
-              onColorSelect={setCaseFontColor}
-            />
-          </>
-        )}
+        <hr />
+        <div className={styles.fontColorRow}>
+          <label htmlFor="colorSelect">Font</label>
+          <ColorSelector
+            selectedColor={caseFontColor}
+            onColorSelect={setCaseFontColor}
+          />
+        </div>
           </>
         )}
       </div>
 
-      <div className={compactLayout ? styles.compactSectionGrid : undefined}>
-      <div className={`${styles.section} ${compactLayout ? styles.compactFullSection : ''}`}>
+      <div className={styles.compactSectionGrid}>
+      <div className={`${styles.section} ${styles.compactFullSection}`}>
         <button
           type="button"
           className={styles.sectionToggle}
@@ -368,7 +348,7 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
         </button>
         {isClassOpen && (
           <>
-            <div className={compactLayout ? styles.classCharacteristicsColumns : undefined}>
+            <div className={styles.classCharacteristicsColumns}>
               <div className={styles.classCharacteristicsMain}>
                 <div className={styles.classCharacteristics}>
                   <select
@@ -415,18 +395,16 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
                 </label>
             </div>
 
-              {compactLayout && (
-                <div className={styles.characteristicsPlaceholder}>
-                  <h6 className={styles.placeholderTitle}>Characteristics Details</h6>
-                  <p className={styles.placeholderText}>This section is reserved for future development.</p>
-                </div>
-              )}
+              <div className={styles.characteristicsPlaceholder}>
+                <h6 className={styles.placeholderTitle}>Characteristics Details</h6>
+                <p className={styles.placeholderText}>This section is reserved for future development.</p>
+              </div>
             </div>
           </>
         )}
       </div>
 
-      <div className={`${styles.section} ${compactLayout ? styles.compactHalfSection : ''}`}>
+      <div className={`${styles.section} ${styles.compactHalfSection}`}>
         <button
           type="button"
           className={styles.sectionToggle}
@@ -477,7 +455,7 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
         )}
       </div>
 
-      <div className={`${styles.section} ${compactLayout ? styles.compactHalfSection : ''}`}>
+      <div className={`${styles.section} ${styles.compactHalfSection}`}>
         <button
           type="button"
           className={styles.sectionToggle}
@@ -538,7 +516,7 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
           </button>
         </div>
 
-        <div className={`${styles.notesActionBar} ${stickyActionBar ? styles.notesActionBarSticky : ''}`}>
+        <div className={`${styles.notesActionBar} ${styles.notesActionBarSticky}`}>
           <button 
               onClick={handleSave}
               className={styles.saveButton}
@@ -547,28 +525,13 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
             >
               Save Notes
             </button>
-          {showReturnButton && (
-            <button 
-              onClick={onReturn}
-              className={styles.returnButton}
-              disabled={isUploading}
-              title={isUploading ? "Cannot return while uploading" : undefined}
-            >
-              Return to Case Management
-            </button>
-          )}
         </div>
-          
-          {saveSuccess && (
-            <div className={styles.successMessage}>
-              Notes saved successfully!
-            </div>
-          )}
-      <NotesModal
+      <AddlNotesModal
         isOpen={isModalOpen}
         onClose={() => setIsModalOpen(false)}
         notes={additionalNotes}
         onSave={setAdditionalNotes}
+        showNotification={notificationHandler}
       />
       </>
         )}

package/app/components/sidebar/notes/notes-editor-modal.tsx

@@ -1,6 +1,6 @@
 import type { User } from 'firebase/auth';
 import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
-import { NotesSidebar } from './notes-sidebar';
+import { NotesEditorForm } from './notes-editor-form';
 import styles from './notes-editor-modal.module.css';
 
 interface NotesEditorModalProps {
@@ -12,6 +12,7 @@ interface NotesEditorModalProps {
   originalFileName?: string;
   onAnnotationRefresh?: () => void;
   isUploading?: boolean;
+  showNotification?: (message: string, type: 'success' | 'error' | 'warning') => void;
 }
 
 export const NotesEditorModal = ({
@@ -23,9 +24,9 @@ export const NotesEditorModal = ({
   originalFileName,
   onAnnotationRefresh,
   isUploading = false,
+  showNotification,
 }: NotesEditorModalProps) => {
   const {
-    requestClose,
     overlayProps,
     getCloseButtonProps,
   } = useOverlayDismiss({
@@ -47,17 +48,14 @@ export const NotesEditorModal = ({
           </button>
         </div>
         <div className={styles.content}>
-          <NotesSidebar
+          <NotesEditorForm
             currentCase={currentCase}
-            onReturn={requestClose}
             user={user}
             imageId={imageId}
             onAnnotationRefresh={onAnnotationRefresh}
             originalFileName={originalFileName}
             isUploading={isUploading}
-            showReturnButton={false}
-            stickyActionBar={true}
-            compactLayout={true}
+            showNotification={showNotification}
           />
         </div>
       </div>

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

@@ -1,20 +1,20 @@
-.notesSidebar {
+.notesEditorForm {
   padding: 0.3rem;
 }
 
-.compactLayout .caseNumbers {
+.editorLayout .caseNumbers {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 1.25rem;
   align-items: start;
 }
 
-.compactLayout .caseNumbers > .inputGroup + .inputGroup {
+.editorLayout .caseNumbers > .inputGroup + .inputGroup {
   border-left: 1px solid #dee2e6;
   padding-left: 1.25rem;
 }
 
-.compactLayout .inputGroup {
+.editorLayout .inputGroup {
   margin-bottom: 0;
 }
 
@@ -35,11 +35,11 @@
   margin-bottom: 1.5rem;
 }
 
-.compactLayout .notesActionBarSticky {
+.editorLayout .notesActionBarSticky {
   margin-top: 0.25rem;
 }
 
-.compactLayout .compactSectionGrid > .compactHalfSection + .compactHalfSection {
+.editorLayout .compactSectionGrid > .compactHalfSection + .compactHalfSection {
   border-left: 1px solid #dee2e6;
   padding-left: 1.25rem;
 }
@@ -49,19 +49,19 @@
   padding-left: 1.25rem;
 }
 
-.compactLayout .additionalNotesRow {
+.editorLayout .additionalNotesRow {
   border-top: 1px solid #dee2e6;
   padding-top: 1.25rem;
 }
 
 @media (max-width: 980px) {
-  .compactLayout .caseNumbers,
+  .editorLayout .caseNumbers,
   .compactSectionGrid {
     grid-template-columns: 1fr;
   }
 
-  .compactLayout .caseNumbers > .inputGroup + .inputGroup,
-  .compactLayout
+  .editorLayout .caseNumbers > .inputGroup + .inputGroup,
+  .editorLayout
     .compactSectionGrid
     > .compactHalfSection
     + .compactHalfSection,
@@ -152,9 +152,25 @@ textarea:focus {
 }
 
 .caseNumbers {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5rem;
   margin-bottom: 2rem;
 }
 
+.fontColorRow {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-bottom: 2rem;
+}
+
+.fontColorRow label {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #212529;
+}
+
 .caseInput {
   display: flex;
   flex-direction: column;
@@ -382,7 +398,7 @@ textarea:focus {
   width: 100%;
 }
 
-.compactLayout .additionalNotesRow {
+.editorLayout .additionalNotesRow {
   grid-column: 1 / -1;
 }
 

package/app/components/sidebar/sidebar-container.tsx

@@ -13,6 +13,7 @@ import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 interface SidebarContainerProps {
   user: User;
   onImageSelect: (file: FileData) => void;
+  onOpenCase: () => void;
   imageId?: string;
   currentCase: string;
   files: FileData[];

package/app/components/sidebar/sidebar.tsx

@@ -8,6 +8,7 @@ import { type FileData } from '~/types';
 interface SidebarProps {
   user: User;
   onImageSelect: (file: FileData) => void;
+  onOpenCase: () => void;
   imageId?: string;
   currentCase: string;
   files: FileData[];
@@ -27,6 +28,7 @@ interface SidebarProps {
 export const Sidebar = ({ 
   user, 
   onImageSelect,
+  onOpenCase,
   imageId, 
   currentCase,
   imageLoaded,
@@ -74,6 +76,7 @@ export const Sidebar = ({
       <CaseSidebar 
         user={user} 
         onImageSelect={onImageSelect}
+        onOpenCase={onOpenCase}
         currentCase={currentCase}
         imageLoaded={imageLoaded}
         setImageLoaded={setImageLoaded}

package/app/{tailwind.css → global.css}

@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "modern-normalize";
 
 @layer base {
   :root {

package/app/hooks/useOverlayDismiss.ts

@@ -85,11 +85,13 @@ export const useOverlayDismiss = ({
     }
   }, [closeOnBackdrop, requestClose]);
 
+  const isBackdropDismissInteractive = closeOnBackdrop && canDismiss;
+
   const overlayProps = {
-    role: 'button' as const,
-    tabIndex: 0,
-    onMouseDown: handleOverlayMouseDown,
-    onKeyDown: handleOverlayKeyDown,
+    role: isBackdropDismissInteractive ? 'button' : 'presentation',
+    tabIndex: isBackdropDismissInteractive ? 0 : undefined,
+    onMouseDown: isBackdropDismissInteractive ? handleOverlayMouseDown : undefined,
+    onKeyDown: isBackdropDismissInteractive ? handleOverlayKeyDown : undefined,
     style: { cursor: 'default' as const },
   };
 

package/app/root.tsx

@@ -16,7 +16,7 @@ import {
 import { AuthProvider } from '~/components/auth/auth-provider';
 import { auth } from '~/services/firebase';
 import styles from '~/styles/root.module.css';
-import './tailwind.css';
+import './global.css';
 
 export const links: LinksFunction = () => [
   { rel: "preconnect", href: "https://fonts.googleapis.com" },