@striae-org/striae 4.1.0 → 4.2.1

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

@@ -1,33 +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;
+  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 }: 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('');
@@ -56,16 +54,24 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
   // Additional Notes Modal
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [additionalNotes, setAdditionalNotes] = useState('');
+  const [isCaseInfoOpen, setIsCaseInfoOpen] = useState(true);
+  const [isClassOpen, setIsClassOpen] = useState(true);
+  const [isIndexOpen, setIsIndexOpen] = useState(true);
+  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 {
@@ -121,9 +127,6 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
       return;
     }
 
-    setSaveError(undefined);
-    setSaveSuccess(false);
-
     let existingData: AnnotationData | null = null;
     
     try {
@@ -132,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;
       }
       
@@ -186,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) {
@@ -203,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
@@ -216,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
         );
@@ -227,7 +229,7 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
   };
 
   return (
-    <div className={styles.notesSidebar}>
+    <div className={`${styles.notesEditorForm} ${styles.editorLayout}`}>
       {isLoading ? (
         <div className={styles.loading}>Loading notes...</div>
       ) : loadError ? (
@@ -240,12 +242,18 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
         </div>
       )}
 
-      {saveError && (
-        <div className={styles.errorMessage}>{saveError}</div>
-      )}
-
       <div className={styles.section}>
-        <h5 className={styles.sectionTitle}>Case Information</h5>
+        <button
+          type="button"
+          className={styles.sectionToggle}
+          onClick={() => setIsCaseInfoOpen((prev) => !prev)}
+          aria-expanded={isCaseInfoOpen}
+        >
+          <span className={styles.sectionTitle}>Case Information</span>
+          <span className={styles.sectionToggleIcon}>{isCaseInfoOpen ? '−' : '+'}</span>
+        </button>
+        {isCaseInfoOpen && (
+          <>
         <hr />
         <div className={styles.caseNumbers}>
           {/* Left side inputs */}
@@ -279,9 +287,8 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
                 onChange={(e) => setLeftItem(e.target.value)}
                 disabled={areInputsDisabled}
               />
-            </div>            
+            </div>
           </div>
-          <hr />
           {/* Right side inputs */}
           <div className={styles.inputGroup}>
             <div className={styles.caseInput}>
@@ -316,63 +323,99 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
             </div>            
           </div>
         </div>
-         <label htmlFor="colorSelect">Font</label>                  
-          <ColorSelector            
+        <hr />
+        <div className={styles.fontColorRow}>
+          <label htmlFor="colorSelect">Font</label>
+          <ColorSelector
             selectedColor={caseFontColor}
             onColorSelect={setCaseFontColor}
-          />        
+          />
+        </div>
+          </>
+        )}
       </div>
 
-      <div className={styles.section}>
-        <h5 className={styles.sectionTitle}>Class Characteristics</h5>
-        <div className={styles.classCharacteristics}>
-          <select
-            id="classType"
-            aria-label="Class Type"
-            value={classType}
-            onChange={(e) => setClassType(e.target.value as ClassType)}
-            className={styles.select}
-            disabled={areInputsDisabled}
-          >
-            <option value="">Select class type...</option>
-            <option value="Bullet">Bullet</option>
-            <option value="Cartridge Case">Cartridge Case</option>
-            <option value="Other">Other</option>
-          </select>
+      <div className={styles.compactSectionGrid}>
+      <div className={`${styles.section} ${styles.compactFullSection}`}>
+        <button
+          type="button"
+          className={styles.sectionToggle}
+          onClick={() => setIsClassOpen((prev) => !prev)}
+          aria-expanded={isClassOpen}
+        >
+          <span className={styles.sectionTitle}>Class Characteristics</span>
+          <span className={styles.sectionToggleIcon}>{isClassOpen ? '−' : '+'}</span>
+        </button>
+        {isClassOpen && (
+          <>
+            <div className={styles.classCharacteristicsColumns}>
+              <div className={styles.classCharacteristicsMain}>
+                <div className={styles.classCharacteristics}>
+                  <select
+                    id="classType"
+                    aria-label="Class Type"
+                    value={classType}
+                    onChange={(e) => setClassType(e.target.value as ClassType)}
+                    className={styles.select}
+                    disabled={areInputsDisabled}
+                  >
+                    <option value="">Select class type...</option>
+                    <option value="Bullet">Bullet</option>
+                    <option value="Cartridge Case">Cartridge Case</option>
+                    <option value="Other">Other</option>
+                  </select>
 
-          {classType === 'Other' && (
-            <input
-              type="text"
-              value={customClass}
-              onChange={(e) => setCustomClass(e.target.value)}
-              placeholder="Specify object type"
-              disabled={areInputsDisabled}
-            />
-          )}
+                  {classType === 'Other' && (
+                    <input
+                      type="text"
+                      value={customClass}
+                      onChange={(e) => setCustomClass(e.target.value)}
+                      placeholder="Specify object type"
+                      disabled={areInputsDisabled}
+                    />
+                  )}
 
-          <textarea
-            value={classNote}
-            onChange={(e) => setClassNote(e.target.value)}
-            placeholder="Enter class characteristic details..."
-            className={styles.textarea}
-            disabled={areInputsDisabled}
-          />          
-        </div>
-        <label className={`${styles.checkboxLabel} mb-4`}>
-          <input
-            type="checkbox"
-            checked={hasSubclass}
-            onChange={(e) => setHasSubclass(e.target.checked)}
-            className={styles.checkbox}
-            disabled={areInputsDisabled}
-          />
-          <span>Potential subclass?</span>
-        </label>
+                  <textarea
+                    value={classNote}
+                    onChange={(e) => setClassNote(e.target.value)}
+                    placeholder="Enter class characteristic details..."
+                    className={styles.textarea}
+                    disabled={areInputsDisabled}
+                  />
+                </div>
+                <label className={`${styles.checkboxLabel} mb-4`}>
+                  <input
+                    type="checkbox"
+                    checked={hasSubclass}
+                    onChange={(e) => setHasSubclass(e.target.checked)}
+                    className={styles.checkbox}
+                    disabled={areInputsDisabled}
+                  />
+                  <span>Potential subclass?</span>
+                </label>
+            </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}>
-        <h5 className={styles.sectionTitle}>Index Type</h5>
-        <div className={styles.indexing}>
+      <div className={`${styles.section} ${styles.compactHalfSection}`}>
+        <button
+          type="button"
+          className={styles.sectionToggle}
+          onClick={() => setIsIndexOpen((prev) => !prev)}
+          aria-expanded={isIndexOpen}
+        >
+          <span className={styles.sectionTitle}>Index Type</span>
+          <span className={styles.sectionToggleIcon}>{isIndexOpen ? '−' : '+'}</span>
+        </button>
+        {isIndexOpen && (
+          <div className={styles.indexing}>
           <div className={styles.radioGroup}>
             <label className={styles.radioLabel}>
               <input
@@ -409,80 +452,86 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
             />            
           ) : null}
         </div>
+        )}
       </div>
 
-      <div className={styles.section}>
-        <h5 className={styles.sectionTitle}>Support Level</h5>
-        <div className={styles.support}>
-          <select
-            id="supportLevel"
-            aria-label="Support Level"
-            value={supportLevel}
-            onChange={(e) => {
-              const newSupportLevel = e.target.value as SupportLevel;
-              setSupportLevel(newSupportLevel);
-              
-              // Automatically check confirmation field when ID is selected
-              if (newSupportLevel === 'ID') {
-                setIncludeConfirmation(true);
-              }
-            }}
-            className={styles.select}
-            disabled={areInputsDisabled}
-          >
-            <option value="">Select support level...</option>
-            <option value="ID">Identification</option>
-            <option value="Exclusion">Exclusion</option>
-            <option value="Inconclusive">Inconclusive</option>
-          </select>
-          <label className={`${styles.checkboxLabel} mb-4`}>
-          <input
-            type="checkbox"
-            checked={includeConfirmation}
-            onChange={(e) => setIncludeConfirmation(e.target.checked)}
-            className={styles.checkbox}
-            disabled={areInputsDisabled}
-          />
-          <span>Include confirmation field</span>
-        </label>
-        </div>
-        <button 
-        onClick={() => setIsModalOpen(true)}
-        className={styles.notesButton}
-        disabled={areInputsDisabled}
-        title={isConfirmedImage ? "Cannot edit notes for confirmed images" : isUploading ? "Cannot add notes while uploading" : undefined}
-      >
-        Additional Notes
-      </button>
+      <div className={`${styles.section} ${styles.compactHalfSection}`}>
+        <button
+          type="button"
+          className={styles.sectionToggle}
+          onClick={() => setIsSupportOpen((prev) => !prev)}
+          aria-expanded={isSupportOpen}
+        >
+          <span className={styles.sectionTitle}>Support Level</span>
+          <span className={styles.sectionToggleIcon}>{isSupportOpen ? '−' : '+'}</span>
+        </button>
+        {isSupportOpen && (
+          <>
+            <div className={styles.support}>
+              <select
+                id="supportLevel"
+                aria-label="Support Level"
+                value={supportLevel}
+                onChange={(e) => {
+                  const newSupportLevel = e.target.value as SupportLevel;
+                  setSupportLevel(newSupportLevel);
+                  
+                  // Automatically check confirmation field when ID is selected
+                  if (newSupportLevel === 'ID') {
+                    setIncludeConfirmation(true);
+                  }
+                }}
+                className={styles.select}
+                disabled={areInputsDisabled}
+              >
+                <option value="">Select support level...</option>
+                <option value="ID">Identification</option>
+                <option value="Exclusion">Exclusion</option>
+                <option value="Inconclusive">Inconclusive</option>
+              </select>
+              <label className={`${styles.checkboxLabel} mb-4`}>
+                <input
+                  type="checkbox"
+                  checked={includeConfirmation}
+                  onChange={(e) => setIncludeConfirmation(e.target.checked)}
+                  className={styles.checkbox}
+                  disabled={areInputsDisabled}
+                />
+                <span>Include confirmation field</span>
+              </label>
+            </div>
+          </>
+        )}
       </div>            
-        <button 
-            onClick={handleSave}
-            className={styles.saveButton}
+      </div>
+
+        <div className={styles.additionalNotesRow}>
+          <button 
+            onClick={() => setIsModalOpen(true)}
+            className={styles.notesButton}
             disabled={areInputsDisabled}
-            title={isConfirmedImage ? "Cannot save notes for confirmed images" : isUploading ? "Cannot save notes while uploading" : undefined}
+            title={isConfirmedImage ? "Cannot edit notes for confirmed images" : isUploading ? "Cannot add notes while uploading" : undefined}
           >
-            Save Notes
+            Additional Notes
           </button>
-          
-          {saveSuccess && (
-            <div className={styles.successMessage}>
-              Notes saved successfully!
-            </div>
-          )}
+        </div>
 
-        <button 
-          onClick={onReturn}
-          className={styles.returnButton}
-          disabled={isUploading}
-          title={isUploading ? "Cannot return while uploading" : undefined}
-        >
-          Return to Case Management
-        </button>            
-      <NotesModal
+        <div className={`${styles.notesActionBar} ${styles.notesActionBarSticky}`}>
+          <button 
+              onClick={handleSave}
+              className={styles.saveButton}
+              disabled={areInputsDisabled}
+              title={isConfirmedImage ? "Cannot save notes for confirmed images" : isUploading ? "Cannot save notes while uploading" : undefined}
+            >
+              Save Notes
+            </button>
+        </div>
+      <AddlNotesModal
         isOpen={isModalOpen}
         onClose={() => setIsModalOpen(false)}
         notes={additionalNotes}
         onSave={setAdditionalNotes}
+        showNotification={notificationHandler}
       />
       </>
         )}

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,64 @@
+import type { User } from 'firebase/auth';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
+import { NotesEditorForm } from './notes-editor-form';
+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;
+  showNotification?: (message: string, type: 'success' | 'error' | 'warning') => void;
+}
+
+export const NotesEditorModal = ({
+  isOpen,
+  onClose,
+  currentCase,
+  user,
+  imageId,
+  originalFileName,
+  onAnnotationRefresh,
+  isUploading = false,
+  showNotification,
+}: NotesEditorModalProps) => {
+  const {
+    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}>
+          <NotesEditorForm
+            currentCase={currentCase}
+            user={user}
+            imageId={imageId}
+            onAnnotationRefresh={onAnnotationRefresh}
+            originalFileName={originalFileName}
+            isUploading={isUploading}
+            showNotification={showNotification}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};