@striae-org/striae 5.4.5 → 5.5.1

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

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback, useLayoutEffect } from 'react';
 import type { User } from 'firebase/auth';
 import { ColorSelector } from '~/components/colors/colors';
 import { AddlNotesModal } from './addl-notes-modal';
@@ -18,13 +18,71 @@ interface NotesEditorFormProps {
   originalFileName?: string;
   isUploading?: boolean;
   showNotification?: (message: string, type: 'success' | 'error' | 'warning') => void;
+  onDirtyChange?: (isDirty: boolean) => void;
+  onRegisterSaveHandler?: (saveHandler: (() => Promise<boolean>) | null) => void;
 }
 
 type SupportLevel = 'ID' | 'Exclusion' | 'Inconclusive';
 type ClassType = 'Bullet' | 'Cartridge Case' | 'Shotshell' | 'Other';
 type IndexType = 'number' | 'color';
 
-export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefresh, originalFileName, isUploading = false, showNotification: externalShowNotification }: NotesEditorFormProps) => {
+interface NotesFormSnapshot {
+  leftCase: string;
+  rightCase: string;
+  leftItem: string;
+  rightItem: string;
+  caseFontColor: string;
+  classType: ClassType | '';
+  customClass: string;
+  classNote: string;
+  hasSubclass: boolean;
+  bulletData: BulletAnnotationData | undefined;
+  cartridgeCaseData: CartridgeCaseAnnotationData | undefined;
+  shotshellData: ShotshellAnnotationData | undefined;
+  indexType: IndexType;
+  indexNumber: string;
+  indexColor: string;
+  supportLevel: SupportLevel | '';
+  includeConfirmation: boolean;
+  additionalNotes: string;
+}
+
+const hasMeaningfulValue = (value: unknown): boolean => {
+  if (value === undefined || value === null) {
+    return false;
+  }
+
+  if (Array.isArray(value)) {
+    return value.some(hasMeaningfulValue);
+  }
+
+  if (typeof value === 'object') {
+    return Object.values(value as Record<string, unknown>).some(hasMeaningfulValue);
+  }
+
+  return true;
+};
+
+const normalizeNestedAnnotationData = <T extends object>(data: T | undefined): T | undefined => {
+  if (data === undefined || data === null) {
+    return undefined;
+  }
+
+  return hasMeaningfulValue(data) ? data : undefined;
+};
+
+const normalizeNotesSnapshot = (snapshot: NotesFormSnapshot): NotesFormSnapshot => ({
+  ...snapshot,
+  bulletData: normalizeNestedAnnotationData(snapshot.bulletData),
+  cartridgeCaseData: normalizeNestedAnnotationData(snapshot.cartridgeCaseData),
+  shotshellData: normalizeNestedAnnotationData(snapshot.shotshellData),
+});
+
+const serializeNotesSnapshot = (snapshot: NotesFormSnapshot): string => JSON.stringify(normalizeNotesSnapshot(snapshot));
+const DIRTY_CHECK_DEBOUNCE_MS = 180;
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefresh, originalFileName, isUploading = false, showNotification: externalShowNotification, onDirtyChange, onRegisterSaveHandler }: NotesEditorFormProps) => {
   // Loading/Saving Notes States
   const [isLoading, setIsLoading] = useState(false);
   const [loadError, setLoadError] = useState<string>();
@@ -64,13 +122,72 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
   const [isClassOpen, setIsClassOpen] = useState(true);
   const [isIndexOpen, setIsIndexOpen] = useState(true);
   const [isSupportOpen, setIsSupportOpen] = useState(true);
+  const [savedSnapshot, setSavedSnapshot] = useState<string>('');
+  const [hasLoadedSnapshot, setHasLoadedSnapshot] = useState(false);
+  const [isDirty, setIsDirty] = useState(false);
   const areInputsDisabled = isUploading || isConfirmedImage;
 
-  const notificationHandler = (message: string, type: 'success' | 'error' | 'warning' = 'success') => {
+  const notificationHandler = useCallback((message: string, type: 'success' | 'error' | 'warning' = 'success') => {
     if (externalShowNotification) {
       externalShowNotification(message, type);
     }
-  };
+  }, [externalShowNotification]);
+
+  useEffect(() => {
+    if (!hasLoadedSnapshot) {
+      return;
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      const nextSnapshot = serializeNotesSnapshot({
+        leftCase,
+        rightCase,
+        leftItem,
+        rightItem,
+        caseFontColor,
+        classType,
+        customClass,
+        classNote,
+        hasSubclass,
+        bulletData,
+        cartridgeCaseData,
+        shotshellData,
+        indexType,
+        indexNumber,
+        indexColor,
+        supportLevel,
+        includeConfirmation,
+        additionalNotes,
+      });
+
+      setIsDirty(nextSnapshot !== savedSnapshot);
+    }, DIRTY_CHECK_DEBOUNCE_MS);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [
+    additionalNotes,
+    bulletData,
+    cartridgeCaseData,
+    caseFontColor,
+    classNote,
+    classType,
+    customClass,
+    hasLoadedSnapshot,
+    hasSubclass,
+    includeConfirmation,
+    indexColor,
+    indexNumber,
+    indexType,
+    leftCase,
+    leftItem,
+    rightCase,
+    rightItem,
+    savedSnapshot,
+    shotshellData,
+    supportLevel,
+  ]);
 
   useEffect(() => {
     const loadExistingNotes = async () => {
@@ -79,6 +196,9 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
       setIsLoading(true);
       setLoadError(undefined);
       setIsConfirmedImage(false);
+      setHasLoadedSnapshot(false);
+      setIsDirty(false);
+      onDirtyChange?.(false);
       
       try {
         const existingNotes = await getNotes(user, currentCase, imageId);
@@ -106,19 +226,66 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
           setSupportLevel(existingNotes.supportLevel || '');
           setIncludeConfirmation(existingNotes.includeConfirmation);
           setAdditionalNotes(existingNotes.additionalNotes || '');
+
+          setSavedSnapshot(serializeNotesSnapshot({
+            leftCase: existingNotes.leftCase || '',
+            rightCase: existingNotes.rightCase || '',
+            leftItem: existingNotes.leftItem || '',
+            rightItem: existingNotes.rightItem || '',
+            caseFontColor: existingNotes.caseFontColor || '',
+            classType: existingNotes.classType || '',
+            customClass: existingNotes.customClass || '',
+            classNote: existingNotes.classNote || '',
+            hasSubclass: existingNotes.hasSubclass ?? false,
+            bulletData: existingNotes.bulletData,
+            cartridgeCaseData: existingNotes.cartridgeCaseData,
+            shotshellData: existingNotes.shotshellData,
+            indexType: existingNotes.indexType || 'color',
+            indexNumber: existingNotes.indexNumber || '',
+            indexColor: existingNotes.indexColor || '',
+            supportLevel: existingNotes.supportLevel || '',
+            includeConfirmation: existingNotes.includeConfirmation,
+            additionalNotes: existingNotes.additionalNotes || ''
+          }));
         } else {
           setIsConfirmedImage(false);
+
+          setSavedSnapshot(serializeNotesSnapshot({
+            leftCase: '',
+            rightCase: '',
+            leftItem: '',
+            rightItem: '',
+            caseFontColor: '',
+            classType: '',
+            customClass: '',
+            classNote: '',
+            hasSubclass: false,
+            bulletData: undefined,
+            cartridgeCaseData: undefined,
+            shotshellData: undefined,
+            indexType: 'color',
+            indexNumber: '',
+            indexColor: '',
+            supportLevel: '',
+            includeConfirmation: false,
+            additionalNotes: ''
+          }));
         }
       } catch (error) {
         setLoadError('Failed to load existing notes');
         console.error('Error loading notes:', error);
       } finally {
         setIsLoading(false);
+        setHasLoadedSnapshot(true);
       }
     };
 
     loadExistingNotes();
-  }, [imageId, currentCase, user]);
+  }, [imageId, currentCase, onDirtyChange, user]);
+
+  useIsomorphicLayoutEffect(() => {
+    onDirtyChange?.(isDirty);
+  }, [isDirty, onDirtyChange]);
 
  useEffect(() => {
     if (useCurrentCaseLeft) {
@@ -129,11 +296,11 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
     }
   }, [useCurrentCaseLeft, useCurrentCaseRight, currentCase]);
 
-  const handleSave = async () => {
+  const handleSave = useCallback(async (): Promise<boolean> => {
 
     if (!imageId) {
       console.error('No image selected');
-      return;
+      return false;
     }
 
     let existingData: AnnotationData | null = null;
@@ -145,8 +312,12 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
       if (existingData?.confirmationData) {
         setIsConfirmedImage(true);
         notificationHandler('This image is confirmed. Notes cannot be modified.', 'error');
-        return;
+        return false;
       }
+
+      const normalizedBulletData = normalizeNestedAnnotationData(bulletData);
+      const normalizedCartridgeCaseData = normalizeNestedAnnotationData(cartridgeCaseData);
+      const normalizedShotshellData = normalizeNestedAnnotationData(shotshellData);
       
       // Create updated annotation data, preserving box annotations and earliest timestamp
       const now = new Date().toISOString();
@@ -163,9 +334,9 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
         customClass: customClass,
         classNote: classNote || undefined,
         hasSubclass: hasSubclass,
-        bulletData: bulletData,
-        cartridgeCaseData: cartridgeCaseData,
-        shotshellData: shotshellData,
+        bulletData: normalizedBulletData,
+        cartridgeCaseData: normalizedCartridgeCaseData,
+        shotshellData: normalizedShotshellData,
         
         // Index Information
         indexType: indexType,
@@ -207,11 +378,36 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
       );
       
       notificationHandler('Notes saved successfully.', 'success');
+
+      setSavedSnapshot(serializeNotesSnapshot({
+        leftCase,
+        rightCase,
+        leftItem,
+        rightItem,
+        caseFontColor,
+        classType,
+        customClass,
+        classNote,
+        hasSubclass,
+        bulletData,
+        cartridgeCaseData,
+        shotshellData,
+        indexType,
+        indexNumber,
+        indexColor,
+        supportLevel,
+        includeConfirmation,
+        additionalNotes,
+      }));
+      setIsDirty(false);
+      onDirtyChange?.(false);
       
       // Refresh annotation data after saving notes
       if (onAnnotationRefresh) {
         onAnnotationRefresh();
       }
+
+      return true;
     } catch (error) {
       console.error('Failed to save notes:', error);
       const errorMessage = error instanceof Error ? error.message : '';
@@ -237,8 +433,44 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
       } catch (auditError) {
         console.error('Failed to log annotation edit audit:', auditError);
       }
+
+      return false;
     }
-  };
+  }, [
+    additionalNotes,
+    bulletData,
+    cartridgeCaseData,
+    caseFontColor,
+    classNote,
+    classType,
+    currentCase,
+    customClass,
+    hasSubclass,
+    imageId,
+    includeConfirmation,
+    indexColor,
+    indexNumber,
+    indexType,
+    leftCase,
+    leftItem,
+    notificationHandler,
+    onAnnotationRefresh,
+    onDirtyChange,
+    originalFileName,
+    rightCase,
+    rightItem,
+    shotshellData,
+    supportLevel,
+    user,
+  ]);
+
+  useEffect(() => {
+    onRegisterSaveHandler?.(handleSave);
+
+    return () => {
+      onRegisterSaveHandler?.(null);
+    };
+  }, [handleSave, onRegisterSaveHandler]);
 
   return (
     <div className={`${styles.notesEditorForm} ${styles.editorLayout}`}>

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

@@ -1,4 +1,5 @@
 import type { User } from 'firebase/auth';
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
 import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 import { NotesEditorForm } from './notes-editor-form';
 import styles from './notes.module.css';
@@ -26,21 +27,151 @@ export const NotesEditorModal = ({
   isUploading = false,
   showNotification,
 }: NotesEditorModalProps) => {
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+  const [isCloseAlertOpen, setIsCloseAlertOpen] = useState(false);
+  const [isSavingBeforeClose, setIsSavingBeforeClose] = useState(false);
+  const [saveHandler, setSaveHandler] = useState<(() => Promise<boolean>) | null>(null);
+  const closeAlertRef = useRef<HTMLDivElement | null>(null);
+  const saveAndCloseButtonRef = useRef<HTMLButtonElement | null>(null);
+  const closeAlertTitleId = useId();
+  const closeAlertDescriptionId = useId();
+
+  const handleCloseAttempt = useCallback(() => {
+    if (hasUnsavedChanges) {
+      setIsCloseAlertOpen(true);
+      return;
+    }
+
+    onClose();
+  }, [hasUnsavedChanges, onClose]);
+
+  const handleDirtyChange = useCallback((isDirty: boolean) => {
+    setHasUnsavedChanges((previous) => (previous === isDirty ? previous : isDirty));
+  }, []);
+
+  const handleRegisterSaveHandler = useCallback((handler: (() => Promise<boolean>) | null) => {
+    setSaveHandler((previous) => (previous === handler ? previous : handler));
+  }, []);
+
   const {
     overlayProps,
     getCloseButtonProps,
   } = useOverlayDismiss({
     isOpen,
-    onClose,
+    onClose: handleCloseAttempt,
+    closeOnEscape: !isCloseAlertOpen,
   });
 
+  const handleDiscardAndClose = () => {
+    setHasUnsavedChanges(false);
+    setIsCloseAlertOpen(false);
+    onClose();
+  };
+
+  const handleCancelClose = () => {
+    setIsCloseAlertOpen(false);
+  };
+
+  const canSaveBeforeClose = !!saveHandler && !isSavingBeforeClose;
+
+  const handleSaveBeforeClose = async () => {
+    if (!saveHandler) {
+      showNotification?.('Save is not ready yet. Please wait a moment and try again.', 'warning');
+      return;
+    }
+
+    setIsSavingBeforeClose(true);
+    let didSave = false;
+
+    try {
+      didSave = await saveHandler();
+    } catch (error) {
+      console.error('Failed to save notes before closing:', error);
+      showNotification?.('Failed to save notes. Please try again.', 'error');
+      didSave = false;
+    } finally {
+      setIsSavingBeforeClose(false);
+    }
+
+    if (!didSave) {
+      return;
+    }
+
+    setHasUnsavedChanges(false);
+    setIsCloseAlertOpen(false);
+    onClose();
+  };
+
+  useEffect(() => {
+    if (!isCloseAlertOpen) {
+      return;
+    }
+
+    const previouslyFocused = document.activeElement as HTMLElement | null;
+    saveAndCloseButtonRef.current?.focus();
+
+    const handleAlertKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        setIsCloseAlertOpen(false);
+        return;
+      }
+
+      if (event.key !== 'Tab') {
+        return;
+      }
+
+      const focusContainer = closeAlertRef.current;
+      if (!focusContainer) {
+        return;
+      }
+
+      const focusableElements = Array.from(
+        focusContainer.querySelectorAll<HTMLElement>(
+          'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+        )
+      );
+
+      if (focusableElements.length === 0) {
+        event.preventDefault();
+        return;
+      }
+
+      const first = focusableElements[0];
+      const last = focusableElements[focusableElements.length - 1];
+      const active = document.activeElement as HTMLElement | null;
+
+      if (event.shiftKey && active === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+
+    document.addEventListener('keydown', handleAlertKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleAlertKeyDown);
+      previouslyFocused?.focus();
+    };
+  }, [isCloseAlertOpen]);
+
   if (!isOpen) {
     return null;
   }
 
   return (
     <div className={styles.overlay} aria-label="Close image notes dialog" {...overlayProps}>
-      <div className={styles.editorModal} role="dialog" aria-modal="true" aria-label="Image Notes">
+      <div
+        className={styles.editorModal}
+        role="dialog"
+        aria-modal={isCloseAlertOpen ? undefined : true}
+        aria-label="Image Notes"
+        aria-hidden={isCloseAlertOpen}
+        inert={isCloseAlertOpen}
+      >
         <div className={styles.editorModalHeader}>
           <h2 className={styles.editorModalTitle}>Image Notes</h2>
           <button className={styles.editorModalCloseButton} {...getCloseButtonProps({ ariaLabel: 'Close image notes dialog' })}>
@@ -56,9 +187,57 @@ export const NotesEditorModal = ({
             originalFileName={originalFileName}
             isUploading={isUploading}
             showNotification={showNotification}
+            onDirtyChange={handleDirtyChange}
+            onRegisterSaveHandler={handleRegisterSaveHandler}
           />
         </div>
       </div>
+      {isCloseAlertOpen && (
+        <div className={styles.modalOverlay}>
+          <div
+            className={`${styles.modal} ${styles.unsavedChangesModal}`}
+            ref={closeAlertRef}
+            role="alertdialog"
+            aria-modal="true"
+            aria-labelledby={closeAlertTitleId}
+            aria-describedby={closeAlertDescriptionId}
+          >
+            <h3 id={closeAlertTitleId} className={styles.modalTitle}>You have unsaved notes!</h3>
+            <p id={closeAlertDescriptionId} className={styles.unsavedChangesMessage}>
+              You have unsaved changes to notes and data. Save before closing?
+            </p>
+            <div className={styles.unsavedChangesActions}>
+              <div className={styles.unsavedChangesPrimaryRow}>
+                <button
+                  ref={saveAndCloseButtonRef}
+                  type="button"
+                  onClick={handleSaveBeforeClose}
+                  className={`${styles.saveButton} ${styles.unsavedChangesPrimaryAction}`}
+                  disabled={!canSaveBeforeClose}
+                >
+                  {isSavingBeforeClose ? 'Saving...' : 'Save and Close'}
+                </button>
+                <button
+                  type="button"
+                  onClick={handleDiscardAndClose}
+                  className={`${styles.cancelButton} ${styles.unsavedChangesPrimaryAction}`}
+                  disabled={isSavingBeforeClose}
+                >
+                  Close Without Saving
+                </button>
+              </div>
+              <button
+                type="button"
+                onClick={handleCancelClose}
+                className={styles.secondaryButton}
+                disabled={isSavingBeforeClose}
+              >
+                Continue Editing
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };

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

@@ -688,6 +688,76 @@ textarea:focus {
   justify-content: flex-end;
 }
 
+.modalButtons .saveButton,
+.modalButtons .cancelButton {
+  min-height: 42px;
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.classDetailsModalButtons .classDetailsModalAction {
+  min-height: 42px;
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.unsavedChangesModal {
+  max-width: 520px;
+}
+
+.unsavedChangesModal .modalTitle {
+  margin-top: 0;
+}
+
+.unsavedChangesMessage {
+  margin: 0.75rem;
+  color: #495057;
+  line-height: 1.5;
+}
+
+.unsavedChangesActions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.unsavedChangesPrimaryRow {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
+.unsavedChangesPrimaryAction {
+  width: 100%;
+  margin: 0;
+}
+
+.unsavedChangesPrimaryRow .cancelButton,
+.unsavedChangesPrimaryRow .saveButton {
+  width: 100%;
+  margin: 0;
+}
+
+.secondaryButton {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1.5px solid #ced4da;
+  border-radius: 6px;
+  background: white;
+  color: #495057;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.secondaryButton:hover {
+  background-color: #f8f9fa;
+}
+
 .cancelButton {
   width: 30%;
   padding: 0.75rem;
@@ -705,6 +775,13 @@ textarea:focus {
   background-color: #bd2130;
 }
 
+.cancelButton:disabled,
+.saveButton:disabled,
+.secondaryButton:disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+}
+
 .saveButton {
   width: 100%;
   padding: 0.75rem;
@@ -730,7 +807,13 @@ textarea:focus {
   position: sticky;
   bottom: 0;
   padding: 0.75rem 0 0.25rem;
-  background: linear-gradient(to top, white 72%, rgba(255, 255, 255, 0));
+  background: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0),
+    white 28%,
+    white 72%,
+    rgba(255, 255, 255, 0)
+  );
 }
 
 .saveButton:hover {

package/app/components/user/user.module.css

@@ -156,7 +156,7 @@
 .sectionLabel {
   display: block;
   font-weight: 600;
-  color: var(--textBody);
+  color: var(--textTitle);
   margin-bottom: var(--spaceS);
 }