@striae-org/striae 4.0.3 → 4.2.0

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

@@ -1,4 +1,5 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 import styles from './notes.module.css';
 
 interface NotesModalProps {
@@ -10,30 +11,30 @@ interface NotesModalProps {
 
 export const NotesModal = ({ isOpen, onClose, notes, onSave }: NotesModalProps) => {
   const [tempNotes, setTempNotes] = useState(notes);
-
-  useEffect(() => {
-      const handleEscape = (e: KeyboardEvent) => {
-        if (e.key === 'Escape') {
-          onClose();
-        }
-      };
-  
-      if (isOpen) {
-        document.addEventListener('keydown', handleEscape);
-        return () => document.removeEventListener('keydown', handleEscape);
-      }
-    }, [isOpen, onClose]);
+  const {
+    requestClose,
+    overlayProps,
+    getCloseButtonProps
+  } = useOverlayDismiss({
+    isOpen,
+    onClose
+  });
 
   if (!isOpen) return null;  
 
   const handleSave = () => {
     onSave(tempNotes);
-    onClose();
+    requestClose();
   };
 
   return (
-    <div className={styles.modalOverlay}>
+    <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}
@@ -43,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>

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

@@ -16,13 +16,16 @@ interface NotesSidebarProps {
   onAnnotationRefresh?: () => void;
   originalFileName?: string;
   isUploading?: boolean;
+  showReturnButton?: boolean;
+  stickyActionBar?: boolean;
+  compactLayout?: boolean;
 }
 
 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 NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotationRefresh, originalFileName, isUploading = false, showReturnButton = true, stickyActionBar = false, compactLayout = false }: NotesSidebarProps) => {
   // Loading/Saving Notes States
   const [isLoading, setIsLoading] = useState(false);
   const [loadError, setLoadError] = useState<string>();
@@ -56,6 +59,10 @@ 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;
 
   useEffect(() => {
@@ -227,7 +234,7 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
   };
 
   return (
-    <div className={styles.notesSidebar}>
+    <div className={`${styles.notesSidebar} ${compactLayout ? styles.compactLayout : ''}`}>
       {isLoading ? (
         <div className={styles.loading}>Loading notes...</div>
       ) : loadError ? (
@@ -245,7 +252,17 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
       )}
 
       <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 +296,18 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
                 onChange={(e) => setLeftItem(e.target.value)}
                 disabled={areInputsDisabled}
               />
-            </div>            
+            </div>
+            {compactLayout && (
+              <div className={styles.caseInput}>
+                <label htmlFor="colorSelect">Font</label>
+                <ColorSelector
+                  selectedColor={caseFontColor}
+                  onColorSelect={setCaseFontColor}
+                />
+              </div>
+            )}
           </div>
-          <hr />
+          {!compactLayout && <hr />}
           {/* Right side inputs */}
           <div className={styles.inputGroup}>
             <div className={styles.caseInput}>
@@ -316,63 +342,102 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
             </div>            
           </div>
         </div>
-         <label htmlFor="colorSelect">Font</label>                  
-          <ColorSelector            
-            selectedColor={caseFontColor}
-            onColorSelect={setCaseFontColor}
-          />        
+        {!compactLayout && (
+          <>
+            <label htmlFor="colorSelect">Font</label>
+            <ColorSelector
+              selectedColor={caseFontColor}
+              onColorSelect={setCaseFontColor}
+            />
+          </>
+        )}
+          </>
+        )}
       </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={compactLayout ? styles.compactSectionGrid : undefined}>
+      <div className={`${styles.section} ${compactLayout ? 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={compactLayout ? styles.classCharacteristicsColumns : undefined}>
+              <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>
+
+              {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>
+          </>
+        )}
       </div>
 
-      <div className={styles.section}>
-        <h5 className={styles.sectionTitle}>Index Type</h5>
-        <div className={styles.indexing}>
+      <div className={`${styles.section} ${compactLayout ? 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,75 +474,96 @@ 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} ${compactLayout ? 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>
+        </div>
+
+        <div className={`${styles.notesActionBar} ${stickyActionBar ? 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>
+          {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>
           )}
-
-        <button 
-          onClick={onReturn}
-          className={styles.returnButton}
-          disabled={isUploading}
-          title={isUploading ? "Cannot return while uploading" : undefined}
-        >
-          Return to Case Management
-        </button>            
       <NotesModal
         isOpen={isModalOpen}
         onClose={() => setIsModalOpen(false)}

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

@@ -2,6 +2,84 @@
   padding: 0.3rem;
 }
 
+.compactLayout .caseNumbers {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1.25rem;
+  align-items: start;
+}
+
+.compactLayout .caseNumbers > .inputGroup + .inputGroup {
+  border-left: 1px solid #dee2e6;
+  padding-left: 1.25rem;
+}
+
+.compactLayout .inputGroup {
+  margin-bottom: 0;
+}
+
+.compactSectionGrid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1.25rem;
+  align-items: start;
+  border-top: 1px solid #dee2e6;
+  padding-top: 1.25rem;
+}
+
+.compactFullSection {
+  grid-column: 1 / -1;
+}
+
+.compactHalfSection {
+  margin-bottom: 1.5rem;
+}
+
+.compactLayout .notesActionBarSticky {
+  margin-top: 0.25rem;
+}
+
+.compactLayout .compactSectionGrid > .compactHalfSection + .compactHalfSection {
+  border-left: 1px solid #dee2e6;
+  padding-left: 1.25rem;
+}
+
+.classCharacteristicsColumns > .characteristicsPlaceholder {
+  border-left: 1px solid #dee2e6;
+  padding-left: 1.25rem;
+}
+
+.compactLayout .additionalNotesRow {
+  border-top: 1px solid #dee2e6;
+  padding-top: 1.25rem;
+}
+
+@media (max-width: 980px) {
+  .compactLayout .caseNumbers,
+  .compactSectionGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .compactLayout .caseNumbers > .inputGroup + .inputGroup,
+  .compactLayout
+    .compactSectionGrid
+    > .compactHalfSection
+    + .compactHalfSection,
+  .classCharacteristicsColumns > .characteristicsPlaceholder {
+    border-left: none;
+    padding-left: 0;
+  }
+
+  .classCharacteristicsColumns {
+    grid-template-columns: 1fr;
+  }
+
+  .compactFullSection,
+  .compactHalfSection {
+    grid-column: auto;
+  }
+}
+
 hr {
   padding-bottom: 0.5rem;
   margin: 0.5rem 0;
@@ -13,6 +91,26 @@ hr {
   margin-bottom: 2rem;
 }
 
+.sectionToggle {
+  width: 100%;
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  text-align: left;
+}
+
+.sectionToggleIcon {
+  color: #6c757d;
+  font-size: 1.2rem;
+  line-height: 1;
+  font-weight: 500;
+}
+
 .sectionTitle {
   font-size: 1.3rem;
   font-weight: 600;
@@ -103,6 +201,39 @@ textarea:focus {
   margin-bottom: 2rem;
 }
 
+.classCharacteristicsColumns {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1.25rem;
+  align-items: start;
+}
+
+.classCharacteristicsMain {
+  min-width: 0;
+}
+
+.characteristicsPlaceholder {
+  border: 1px dashed #ced4da;
+  border-radius: 8px;
+  padding: 0.85rem;
+  background: #f8f9fa;
+  min-height: 150px;
+}
+
+.placeholderTitle {
+  margin: 0 0 0.5rem;
+  color: #495057;
+  font-size: 0.92rem;
+  font-weight: 600;
+}
+
+.placeholderText {
+  margin: 0;
+  color: #6c757d;
+  font-size: 0.85rem;
+  line-height: 1.4;
+}
+
 .classCharacteristics input {
   width: 100%;
   padding: 0.75rem;
@@ -247,6 +378,14 @@ textarea:focus {
   margin-top: 1rem;
 }
 
+.additionalNotesRow {
+  width: 100%;
+}
+
+.compactLayout .additionalNotesRow {
+  grid-column: 1 / -1;
+}
+
 .notesButton:hover {
   background-color: color-mix(in lab, var(--primary) 95%, transparent);
 }
@@ -262,15 +401,18 @@ textarea:focus {
   justify-content: center;
   align-items: center;
   z-index: 1000;
+  cursor: default;
 }
 
 .modal {
+  position: relative;
   background: white;
   padding: 2rem;
   border-radius: 8px;
   width: 90%;
   max-width: 500px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  cursor: default;
 }
 
 .modalTitle {
@@ -330,6 +472,19 @@ textarea:focus {
   box-sizing: border-box;
 }
 
+.notesActionBar {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.notesActionBarSticky {
+  position: sticky;
+  bottom: 0;
+  padding: 0.75rem 0 0.25rem;
+  background: linear-gradient(to top, white 72%, rgba(255, 255, 255, 0));
+}
+
 .saveButton:hover {
   background-color: color-mix(in lab, var(--accent) 95%, transparent);
 }