@striae-org/striae 4.1.0 → 4.2.1

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

@@ -11,6 +11,7 @@
 }
 
 .modal {
+  position: relative;
   background: var(--backgroundLight);
   border-radius: var(--spaceXS);
   width: 90%;

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

@@ -2,7 +2,7 @@ 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 { ensureCaseConfirmationSummary, getConfirmationSummaryDocument } from '~/utils/data';
 import { fetchFiles } from '~/components/actions/image-manage';
 import styles from './cases-modal.module.css';
 
@@ -12,16 +12,25 @@ interface CasesModalProps {
   onSelectCase: (caseNum: string) => void;
   currentCase: string;
   user: User;
+  confirmationSaveVersion?: number;
 }
 
-export const CasesModal = ({ isOpen, onClose, onSelectCase, currentCase, user }: CasesModalProps) => {
+export const CasesModal = ({
+  isOpen,
+  onClose,
+  onSelectCase,
+  currentCase,
+  user,
+  confirmationSaveVersion = 0
+}: CasesModalProps) => {
   const [cases, setCases] = useState<string[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string>('');
   const [currentPage, setCurrentPage] = useState(0);
   const {
-    handleOverlayMouseDown,
-    handleOverlayKeyDown
+    requestClose,
+    overlayProps,
+    getCloseButtonProps
   } = useOverlayDismiss({
     isOpen,
     onClose
@@ -69,6 +78,43 @@ export const CasesModal = ({ isOpen, onClose, onSelectCase, currentCase, user }:
 
   // Fetch confirmation status only for currently visible paginated cases
   useEffect(() => {
+    let isCancelled = false;
+
+    const loadConfirmationSummary = async () => {
+      if (!isOpen) {
+        return;
+      }
+
+      const summary = await getConfirmationSummaryDocument(user).catch((err) => {
+        console.error('Failed to load confirmation summary:', err);
+        return null;
+      });
+
+      if (!summary || isCancelled) {
+        return;
+      }
+
+      const statuses: { [caseNum: string]: { includeConfirmation: boolean; isConfirmed: boolean } } = {};
+      for (const [caseNum, entry] of Object.entries(summary.cases)) {
+        statuses[caseNum] = {
+          includeConfirmation: entry.includeConfirmation,
+          isConfirmed: entry.isConfirmed
+        };
+      }
+
+      setCaseConfirmationStatus(statuses);
+    };
+
+    loadConfirmationSummary();
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [isOpen, user, confirmationSaveVersion]);
+
+  useEffect(() => {
+    let isCancelled = false;
+
     const fetchCaseConfirmationStatuses = async () => {
       const visibleCases = cases.slice(
         currentPage * CASES_PER_PAGE,
@@ -79,34 +125,21 @@ export const CasesModal = ({ isOpen, onClose, onSelectCase, currentCase, user }:
         return;
       }
 
-      // Fetch case statuses in parallel for only visible cases
-      const caseStatusPromises = visibleCases.map(async (caseNum) => {
+      const missingCaseNumbers = visibleCases.filter((caseNum) => !caseConfirmationStatus[caseNum]);
+      if (missingCaseNumbers.length === 0) {
+        return;
+      }
+
+      const caseStatusPromises = missingCaseNumbers.map(async (caseNum) => {
         try {
           const files = await fetchFiles(user, caseNum, { skipValidation: true });
-          
-          // Fetch annotations for each file in the case (in parallel)
-          const fileStatuses = await Promise.all(
-            files.map(async (file) => {
-              try {
-                const annotations = await getFileAnnotations(user, caseNum, file.id);
-                return {
-                  includeConfirmation: annotations?.includeConfirmation ?? false,
-                  isConfirmed: !!(annotations?.includeConfirmation && annotations?.confirmationData),
-                };
-              } catch {
-                return { includeConfirmation: false, isConfirmed: false };
-              }
-            })
-          );
-
-          // Calculate case status
-          const filesRequiringConfirmation = fileStatuses.filter(s => s.includeConfirmation);
-          const allConfirmedFiles = filesRequiringConfirmation.every(s => s.isConfirmed);
+
+          const caseSummary = await ensureCaseConfirmationSummary(user, caseNum, files);
 
           return {
             caseNum,
-            includeConfirmation: filesRequiringConfirmation.length > 0,
-            isConfirmed: filesRequiringConfirmation.length > 0 ? allConfirmedFiles : false,
+            includeConfirmation: caseSummary.includeConfirmation,
+            isConfirmed: caseSummary.isConfirmed,
           };
         } catch (err) {
           console.error(`Error fetching confirmation status for case ${caseNum}:`, err);
@@ -121,36 +154,42 @@ export const CasesModal = ({ isOpen, onClose, onSelectCase, currentCase, user }:
       // Wait for all case status fetches to complete
       const results = await Promise.all(caseStatusPromises);
 
-      // Build the statuses map from results
-      const statuses: { [caseNum: string]: { includeConfirmation: boolean; isConfirmed: boolean } } = {};
-      results.forEach((result) => {
-        statuses[result.caseNum] = {
-          includeConfirmation: result.includeConfirmation,
-          isConfirmed: result.isConfirmed,
-        };
-      });
+      if (isCancelled) {
+        return;
+      }
 
-      setCaseConfirmationStatus(statuses);
+      setCaseConfirmationStatus((previous) => {
+        const next = { ...previous };
+        results.forEach((result) => {
+          next[result.caseNum] = {
+            includeConfirmation: result.includeConfirmation,
+            isConfirmed: result.isConfirmed,
+          };
+        });
+
+        return next;
+      });
     };
 
     fetchCaseConfirmationStatuses();
-  }, [isOpen, currentPage, cases, user]);
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [isOpen, currentPage, cases, user, caseConfirmationStatus]);
 
   if (!isOpen) return null;
 
   return (
     <div
       className={styles.modalOverlay}
-      onMouseDown={handleOverlayMouseDown}
-      onKeyDown={handleOverlayKeyDown}
-      role="button"
-      tabIndex={0}
       aria-label="Close cases dialog"
+      {...overlayProps}
     >
       <div className={styles.modal}>
         <header className={styles.modalHeader}>
           <h2>All Cases</h2>
-          <button onClick={onClose} className={styles.closeButton}>&times;</button>
+          <button className={styles.closeButton} {...getCloseButtonProps({ ariaLabel: 'Close cases dialog' })}>&times;</button>
         </header>
         
         <div className={styles.modalContent}>
@@ -178,7 +217,7 @@ export const CasesModal = ({ isOpen, onClose, onSelectCase, currentCase, user }:
                       className={`${styles.caseItem} ${currentCase === caseNum ? styles.active : ''} ${confirmationClass}`}
                       onClick={() => {
                         onSelectCase(caseNum);
-                        onClose();
+                        requestClose();
                       }}
                     >
                       {caseNum}

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

@@ -1,6 +1,11 @@
 /* Case Management */
 .caseSection {
-  margin-bottom: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  height: 100%;
+  min-height: 0;
+  margin-bottom: 0;
 }
 
 .caseSection h4 {
@@ -141,17 +146,18 @@
 }
 
 .filesModalSection {
-  margin: 1rem 0;
+  margin: 0.25rem 0 0;
 }
 
 .filesModalButton {
   width: 100%;
-  padding: 0.75rem;
+  padding: 0.625rem 0.75rem;
   background-color: #17a2b8;
   color: white;
   border: none;
   border-radius: 6px;
   font-weight: 500;
+  font-size: 0.9rem;
   cursor: pointer;
   transition: all 0.2s;
   box-sizing: border-box;
@@ -179,16 +185,57 @@
 
 /* Files Section */
 .filesSection {
-  margin-top: 2rem;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 0.625rem;
+  min-height: 0;
+  margin-top: 0.25rem;
 }
 
 .filesSection h4 {
-  margin-bottom: 1rem;
-  font-size: 1.3rem;
+  margin-bottom: 0;
+  font-size: 1.1rem;
   font-weight: 900;
   text-align: center;
 }
 
+.emptyCaseHeader {
+  margin-top: 0.75rem;
+}
+
+.openCaseButton {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  background-color: var(--primary);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  font-size: 0.95rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-sizing: border-box;
+}
+
+.openCaseButton:hover {
+  background-color: color-mix(in lab, var(--primary) 85%, var(--black));
+}
+
+.fileListPlaceholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 5rem;
+  padding: 0.875rem;
+  border: 1px dashed #dee2e6;
+  border-radius: 6px;
+  background: #f8f9fa;
+  color: #6c757d;
+  font-size: 0.875rem;
+  text-align: center;
+}
+
 .emptyState {
   color: #6c757d;
   font-size: 0.9rem;
@@ -207,10 +254,20 @@
   border: 1px solid #dee2e6;
   border-radius: 6px;
   overflow: hidden;
-  max-height: calc(5 * 3.5rem);
+  flex: 1;
+  min-height: 0;
+  max-height: none;
   overflow-y: auto;
 }
 
+.fileListMessage {
+  padding: 0.875rem;
+  color: #6c757d;
+  font-size: 0.875rem;
+  text-align: center;
+  background: #f8f9fa;
+}
+
 .fileList::-webkit-scrollbar {
   width: 6px;
 }
@@ -231,7 +288,7 @@
 .fileItem {
   display: flex;
   align-items: center;
-  padding: 0.5rem 1rem;
+  padding: 0.375rem 0.625rem;
   border-bottom: 1px solid #dee2e6;
   background: white;
   transition: background-color 0.2s;
@@ -240,13 +297,14 @@
 .fileButton {
   flex: 1;
   text-align: left;
-  padding: 0.5rem;
+  padding: 0.375rem;
   background: none;
   border: none;
   cursor: pointer;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  font-size: 0.875rem;
 }
 
 .fileItem:last-child {
@@ -335,14 +393,14 @@
   background: none;
   border: none;
   color: #dc3545;
-  font-size: 1.2rem;
+  font-size: 1rem;
   cursor: pointer;
-  padding: 0.5rem;
+  padding: 0.375rem;
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 32px;
-  height: 32px;
+  min-width: 28px;
+  height: 28px;
 }
 
 .deleteButton:hover {
@@ -404,18 +462,19 @@
 /* Notes Toggle */
 
 .sidebarToggle {
-  margin-bottom: 1rem;
-  padding: 1rem 1rem;
+  margin-top: 0;
+  padding: 0;
 }
 
 .sidebarToggle button {
   width: 100%;
-  padding: 0.75rem;
+  padding: 0.625rem 0.75rem;
   background-color: var(--primary);
   color: white;
   border: none;
   border-radius: 6px;
   font-weight: 500;
+  font-size: 0.9rem;
   cursor: pointer;
   transition: all 0.2s;
 }
@@ -637,33 +696,35 @@
 /* Case Header Container */
 .caseHeader {
   /* Normal case header styling (no background) */
+  margin-top: 0.75rem;
 }
 
 .readOnlyContainer {
   background: #fff3cd;
   border: 1px solid #ffeaa7;
   border-radius: 4px;
-  padding: 0.75rem;
-  margin-bottom: 1rem;
+  padding: 0.625rem 0.75rem;
+  margin-top: 0.75rem;
+  margin-bottom: 0;
 }
 
 .caseNumber {
   margin: 0;
-  font-size: 1rem;
+  font-size: 0.95rem;
   font-weight: 600;
 }
 
 /* Case Confirmation Status Indicators */
 .caseNumber.caseNotConfirmed {
   background-color: #fffacd;
-  padding: 0.75rem;
+  padding: 0.625rem 0.75rem;
   border-radius: 4px;
   margin: 0;
 }
 
 .caseNumber.caseConfirmed {
   background-color: #c8e6c9;
-  padding: 0.75rem;
+  padding: 0.625rem 0.75rem;
   border-radius: 4px;
   margin: 0;
 }

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

@@ -11,6 +11,7 @@
 }
 
 .modal {
+  position: relative;
   background: var(--backgroundLight);
   border-radius: var(--spaceXS);
   width: 90%;

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,15 +29,26 @@ 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);
   const [deletingFileId, setDeletingFileId] = useState<string | null>(null);
   const [fileConfirmationStatus, setFileConfirmationStatus] = useState<FileConfirmationStatus>({});
   const {
-    handleOverlayMouseDown,
-    handleOverlayKeyDown
+    requestClose,
+    overlayProps,
+    getCloseButtonProps
   } = useOverlayDismiss({
     isOpen,
     onClose
@@ -47,58 +59,40 @@ 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);
-    onClose();
+    requestClose();
   };
 
   const handleDeleteFile = async (fileId: string, event: React.MouseEvent) => {
@@ -116,10 +110,20 @@ export const FilesModal = ({ isOpen, onClose, onFileSelect, currentCase, files,
     setDeletingFileId(fileId);
     
     try {
-      await deleteFile(user, currentCase, fileId);
+      const deleteResult = await deleteFile(user, currentCase, fileId);
       // 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.`);
+        setTimeout(() => setError(null), 4000);
+      }
       
       // Adjust page if needed
       const newTotalPages = Math.ceil(updatedFiles.length / FILES_PER_PAGE);
@@ -161,20 +165,13 @@ export const FilesModal = ({ isOpen, onClose, onFileSelect, currentCase, files,
   return (
     <div
       className={styles.modalOverlay}
-      onMouseDown={handleOverlayMouseDown}
-      onKeyDown={handleOverlayKeyDown}
-      role="button"
-      tabIndex={0}
       aria-label="Close files dialog"
+      {...overlayProps}
     >
       <div className={styles.modal}>
         <div className={styles.modalHeader}>
           <h2>Files in Case {currentCase}</h2>
-          <button
-            className={styles.closeButton}
-            onClick={onClose}
-            aria-label="Close modal"
-          >
+          <button className={styles.closeButton} {...getCloseButtonProps({ ariaLabel: 'Close files dialog' })}>
             ×
           </button>
         </div>

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>
+  );
+};