@striae-org/striae 4.0.3 → 4.2.0

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

@@ -6,16 +6,20 @@
   justify-content: center;
   align-items: center;
   z-index: var(--zIndex5);
+  cursor: default;
   transition: background-color var(--durationM) var(--bezierFastoutSlowin);
 }
 
 .modal {
+  position: relative;
   background: var(--backgroundLight);
   border-radius: var(--spaceXS);
   width: 90%;
   max-width: var(--maxWidthL);
   max-height: 80vh;
-  box-shadow: 0 var(--spaceXS) var(--spaceL) color-mix(in lab, var(--black) 10%, transparent);
+  box-shadow: 0 var(--spaceXS) var(--spaceL)
+    color-mix(in lab, var(--black) 10%, transparent);
+  cursor: default;
   transition: background-color var(--durationM) var(--bezierFastoutSlowin);
   display: flex;
   flex-direction: column;
@@ -134,33 +138,65 @@
 
 /* Case Confirmation Status Indicators */
 .caseItemNotConfirmed {
-  background-color: color-mix(in lab, var(--warning) 15%, var(--backgroundLight));
+  background-color: color-mix(
+    in lab,
+    var(--warning) 15%,
+    var(--backgroundLight)
+  );
 }
 
 .caseItemNotConfirmed:hover {
-  background-color: color-mix(in lab, var(--warning) 20%, var(--backgroundLight));
+  background-color: color-mix(
+    in lab,
+    var(--warning) 20%,
+    var(--backgroundLight)
+  );
 }
 
 .caseItem.active.caseItemNotConfirmed {
-  background-color: color-mix(in lab, var(--warning) 15%, var(--backgroundLight));
+  background-color: color-mix(
+    in lab,
+    var(--warning) 15%,
+    var(--backgroundLight)
+  );
 }
 
 .caseItem.active.caseItemNotConfirmed:hover {
-  background-color: color-mix(in lab, var(--warning) 20%, var(--backgroundLight));
+  background-color: color-mix(
+    in lab,
+    var(--warning) 20%,
+    var(--backgroundLight)
+  );
 }
 
 .caseItemConfirmed {
-  background-color: color-mix(in lab, var(--success) 20%, var(--backgroundLight));
+  background-color: color-mix(
+    in lab,
+    var(--success) 20%,
+    var(--backgroundLight)
+  );
 }
 
 .caseItemConfirmed:hover {
-  background-color: color-mix(in lab, var(--success) 28%, var(--backgroundLight));
+  background-color: color-mix(
+    in lab,
+    var(--success) 28%,
+    var(--backgroundLight)
+  );
 }
 
 .caseItem.active.caseItemConfirmed {
-  background-color: color-mix(in lab, var(--success) 20%, var(--backgroundLight));
+  background-color: color-mix(
+    in lab,
+    var(--success) 20%,
+    var(--backgroundLight)
+  );
 }
 
 .caseItem.active.caseItemConfirmed:hover {
-  background-color: color-mix(in lab, var(--success) 28%, var(--backgroundLight));
+  background-color: color-mix(
+    in lab,
+    var(--success) 28%,
+    var(--backgroundLight)
+  );
 }

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

@@ -1,5 +1,6 @@
 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 { fetchFiles } from '~/components/actions/image-manage';
@@ -18,6 +19,14 @@ export const CasesModal = ({ isOpen, onClose, onSelectCase, currentCase, user }:
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string>('');
   const [currentPage, setCurrentPage] = useState(0);
+  const {
+    requestClose,
+    overlayProps,
+    getCloseButtonProps
+  } = useOverlayDismiss({
+    isOpen,
+    onClose
+  });
   const [caseConfirmationStatus, setCaseConfirmationStatus] = useState<{
     [caseNum: string]: { includeConfirmation: boolean; isConfirmed: boolean }
   }>({});
@@ -28,19 +37,6 @@ export const CasesModal = ({ isOpen, onClose, onSelectCase, currentCase, user }:
     setError('');
   };
 
-  useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onClose();
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('keydown', handleEscape);
-      return () => document.removeEventListener('keydown', handleEscape);
-    }
-  }, [isOpen, onClose]);
-
   useEffect(() => {
     if (isOpen) {
       const loadingTimer = window.setTimeout(() => {
@@ -144,11 +140,15 @@ export const CasesModal = ({ isOpen, onClose, onSelectCase, currentCase, user }:
   if (!isOpen) return null;
 
   return (
-    <div className={styles.modalOverlay}>
+    <div
+      className={styles.modalOverlay}
+      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}>
@@ -176,7 +176,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,39 @@
 
 /* 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;
+}
+
+.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 +236,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 +270,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 +279,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 +375,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 +444,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;
 }
@@ -643,27 +684,27 @@
   background: #fff3cd;
   border: 1px solid #ffeaa7;
   border-radius: 4px;
-  padding: 0.75rem;
-  margin-bottom: 1rem;
+  padding: 0.625rem 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

@@ -6,16 +6,20 @@
   justify-content: center;
   align-items: center;
   z-index: var(--zIndex5);
+  cursor: default;
   transition: background-color var(--durationM) var(--bezierFastoutSlowin);
 }
 
 .modal {
+  position: relative;
   background: var(--backgroundLight);
   border-radius: var(--spaceXS);
   width: 90%;
   max-width: var(--maxWidthL);
   max-height: 80vh;
-  box-shadow: 0 var(--spaceXS) var(--spaceL) color-mix(in lab, var(--black) 10%, transparent);
+  box-shadow: 0 var(--spaceXS) var(--spaceL)
+    color-mix(in lab, var(--black) 10%, transparent);
+  cursor: default;
   transition: background-color var(--durationM) var(--bezierFastoutSlowin);
   display: flex;
   flex-direction: column;
@@ -177,33 +181,65 @@
 }
 /* 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)
+  );
+}

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

@@ -1,6 +1,7 @@
 import type React from 'react';
 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 { type FileData } from '~/types';
@@ -33,6 +34,14 @@ export const FilesModal = ({ isOpen, onClose, onFileSelect, currentCase, files,
   const [currentPage, setCurrentPage] = useState(0);
   const [deletingFileId, setDeletingFileId] = useState<string | null>(null);
   const [fileConfirmationStatus, setFileConfirmationStatus] = useState<FileConfirmationStatus>({});
+  const {
+    requestClose,
+    overlayProps,
+    getCloseButtonProps
+  } = useOverlayDismiss({
+    isOpen,
+    onClose
+  });
 
   const totalPages = Math.ceil(files.length / FILES_PER_PAGE);
   const startIndex = currentPage * FILES_PER_PAGE;
@@ -88,24 +97,9 @@ export const FilesModal = ({ isOpen, onClose, onFileSelect, currentCase, files,
     fetchConfirmationStatuses();
   }, [isOpen, currentCase, currentPage, files, user]);
 
-  useEffect(() => {
-    const handleEscape = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && isOpen) {
-        onClose();
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('keydown', handleEscape);
-      return () => {
-        document.removeEventListener('keydown', handleEscape);
-      };
-    }
-  }, [isOpen, onClose]);
-
   const handleFileSelect = (file: FileData) => {
     onFileSelect?.(file);
-    onClose();
+    requestClose();
   };
 
   const handleDeleteFile = async (fileId: string, event: React.MouseEvent) => {
@@ -123,10 +117,15 @@ 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);
+
+      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);
@@ -166,15 +165,15 @@ export const FilesModal = ({ isOpen, onClose, onFileSelect, currentCase, files,
   if (!isOpen) return null;
 
   return (
-    <div className={styles.modalOverlay}>
+    <div
+      className={styles.modalOverlay}
+      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/notes-editor-modal.module.css

@@ -0,0 +1,49 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background-color: color-mix(in lab, var(--background) 56%, transparent);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: var(--zIndex5);
+}
+
+.modal {
+  position: relative;
+  width: min(900px, calc(100vw - 2rem));
+  max-height: calc(100vh - 4rem);
+  background: var(--backgroundLight);
+  border-radius: var(--spaceXS);
+  box-shadow: 0 var(--spaceXS) var(--spaceL)
+    color-mix(in lab, var(--black) 16%, transparent);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spaceM) var(--spaceL);
+  border-bottom: 1px solid color-mix(in lab, var(--text) 12%, transparent);
+}
+
+.title {
+  margin: 0;
+  color: var(--textTitle);
+  font-size: var(--fontSizeBodyM);
+  font-weight: var(--fontWeightMedium);
+}
+
+.closeButton {
+  background: none;
+  border: none;
+  color: var(--textLight);
+}
+
+.content {
+  padding: var(--spaceM) var(--spaceL);
+  overflow-y: auto;
+  max-height: calc(100vh - 11rem);
+}

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

@@ -0,0 +1,66 @@
+import type { User } from 'firebase/auth';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
+import { NotesSidebar } from './notes-sidebar';
+import styles from './notes-editor-modal.module.css';
+
+interface NotesEditorModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  currentCase: string;
+  user: User;
+  imageId: string;
+  originalFileName?: string;
+  onAnnotationRefresh?: () => void;
+  isUploading?: boolean;
+}
+
+export const NotesEditorModal = ({
+  isOpen,
+  onClose,
+  currentCase,
+  user,
+  imageId,
+  originalFileName,
+  onAnnotationRefresh,
+  isUploading = false,
+}: NotesEditorModalProps) => {
+  const {
+    requestClose,
+    overlayProps,
+    getCloseButtonProps,
+  } = useOverlayDismiss({
+    isOpen,
+    onClose,
+  });
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div className={styles.overlay} aria-label="Close image notes dialog" {...overlayProps}>
+      <div className={styles.modal} role="dialog" aria-modal="true" aria-label="Image Notes">
+        <div className={styles.header}>
+          <h2 className={styles.title}>Image Notes</h2>
+          <button className={styles.closeButton} {...getCloseButtonProps({ ariaLabel: 'Close image notes dialog' })}>
+            ×
+          </button>
+        </div>
+        <div className={styles.content}>
+          <NotesSidebar
+            currentCase={currentCase}
+            onReturn={requestClose}
+            user={user}
+            imageId={imageId}
+            onAnnotationRefresh={onAnnotationRefresh}
+            originalFileName={originalFileName}
+            isUploading={isUploading}
+            showReturnButton={false}
+            stickyActionBar={true}
+            compactLayout={true}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};