@striae-org/striae 4.1.0 → 4.2.0

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

@@ -20,8 +20,9 @@ export const CasesModal = ({ isOpen, onClose, onSelectCase, currentCase, user }:
   const [error, setError] = useState<string>('');
   const [currentPage, setCurrentPage] = useState(0);
   const {
-    handleOverlayMouseDown,
-    handleOverlayKeyDown
+    requestClose,
+    overlayProps,
+    getCloseButtonProps
   } = useOverlayDismiss({
     isOpen,
     onClose
@@ -141,16 +142,13 @@ export const CasesModal = ({ isOpen, onClose, onSelectCase, currentCase, user }:
   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 +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

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

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

@@ -35,8 +35,9 @@ export const FilesModal = ({ isOpen, onClose, onFileSelect, currentCase, files,
   const [deletingFileId, setDeletingFileId] = useState<string | null>(null);
   const [fileConfirmationStatus, setFileConfirmationStatus] = useState<FileConfirmationStatus>({});
   const {
-    handleOverlayMouseDown,
-    handleOverlayKeyDown
+    requestClose,
+    overlayProps,
+    getCloseButtonProps
   } = useOverlayDismiss({
     isOpen,
     onClose
@@ -98,7 +99,7 @@ export const FilesModal = ({ isOpen, onClose, onFileSelect, currentCase, files,
 
   const handleFileSelect = (file: FileData) => {
     onFileSelect?.(file);
-    onClose();
+    requestClose();
   };
 
   const handleDeleteFile = async (fileId: string, event: React.MouseEvent) => {
@@ -116,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);
@@ -161,20 +167,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/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>
+  );
+};

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

@@ -12,8 +12,9 @@ interface NotesModalProps {
 export const NotesModal = ({ isOpen, onClose, notes, onSave }: NotesModalProps) => {
   const [tempNotes, setTempNotes] = useState(notes);
   const {
-    handleOverlayMouseDown,
-    handleOverlayKeyDown
+    requestClose,
+    overlayProps,
+    getCloseButtonProps
   } = useOverlayDismiss({
     isOpen,
     onClose
@@ -23,19 +24,17 @@ export const NotesModal = ({ isOpen, onClose, notes, onSave }: NotesModalProps)
 
   const handleSave = () => {
     onSave(tempNotes);
-    onClose();
+    requestClose();
   };
 
   return (
     <div
       className={styles.modalOverlay}
-      onMouseDown={handleOverlayMouseDown}
-      onKeyDown={handleOverlayKeyDown}
-      role="button"
-      tabIndex={0}
       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}
@@ -45,7 +44,7 @@ export const NotesModal = ({ isOpen, onClose, notes, onSave }: NotesModalProps)
         />
         <div className={styles.modalButtons}>
           <button onClick={handleSave} className={styles.saveButton}>Save</button>
-          <button onClick={onClose} className={styles.cancelButton}>Cancel</button>
+          <button onClick={requestClose} className={styles.cancelButton}>Cancel</button>
         </div>
       </div>
     </div>