@striae-org/striae 4.2.0 → 4.3.0

package/app/components/sidebar/notes/class-details-shared.ts

@@ -0,0 +1,239 @@
+import type { BulletAnnotationData, CartridgeCaseAnnotationData, ShotshellAnnotationData } from '~/types/annotations';
+
+export type ClassType = 'Bullet' | 'Cartridge Case' | 'Shotshell' | 'Other';
+
+export const CUSTOM = '__custom__';
+
+export const PISTOL_CALIBERS: string[] = [
+  '.22 LR',
+  '.25 ACP',
+  '.32 ACP',
+  '.380 ACP (9 mm Kurz, 9×17)',
+  '9 mm Luger / 9×19 (9 mm Parabellum, 9 mm NATO)',
+  '.38 Special',
+  '.357 Magnum',
+  '.40 S&W',
+  '10 mm Auto',
+  '.44 Special',
+  '.44 Magnum',
+  '.45 ACP',
+  '.45 Colt (.45 Long Colt)',
+  '.454 Casull',
+  '.50 AE',
+];
+
+export const RIFLE_CALIBERS: string[] = [
+  '.22 LR',
+  '.17 HMR',
+  '.22 WMR (.22 Magnum)',
+  '.223 Remington / 5.56×45 NATO',
+  '.243 Winchester',
+  '6 mm Creedmoor / .243 class',
+  '6.5×55 Swedish',
+  '6.5 Creedmoor',
+  '.270 Winchester',
+  '7 mm-08 Remington / 7 mm Remington Magnum',
+  '.30-30 Winchester',
+  '.308 Winchester / 7.62×51 NATO',
+  '.30-06 Springfield',
+  '7.62×39 (AK family)',
+  '7.62×54R',
+  '.300 Winchester Magnum',
+  '.300 AAC Blackout',
+  '.338 Winchester Magnum',
+  '.45-70 Government',
+  '.50 BMG (12.7×99)',
+];
+
+export const SHOTSHELL_GAUGES: string[] = [
+  '10 gauge',
+  '12 gauge',
+  '16 gauge',
+  '20 gauge',
+  '28 gauge',
+  '.410 bore',
+];
+
+export const SHOTSHELL_BIRDSHOT_OPTIONS = [
+  '#9',
+  '#8 1/2',
+  '#8',
+  '#7 1/2',
+  '#7',
+  '#6',
+  '#5',
+  '#4',
+  '#3',
+  '#2',
+  '#1',
+] as const;
+
+export const SHOTSHELL_STEEL_WATERFOWL_OPTIONS = [
+  '#4',
+  '#3',
+  '#2',
+  '#1',
+  'B',
+  'BB',
+  'BBB',
+  'T',
+] as const;
+
+export const SHOTSHELL_BUCKSHOT_OPTIONS = [
+  '#4 buck',
+  '#1 buck',
+  '0 buck',
+  '00 buck',
+  '000 buck',
+] as const;
+
+export const ALL_CALIBERS: string[] = [...PISTOL_CALIBERS, ...RIFLE_CALIBERS];
+export const BULLET_JACKET_METAL_OPTIONS = ['Cu', 'Brass', 'Ni-plated', 'Al', 'Steel', 'None'] as const;
+export const BULLET_CORE_METAL_OPTIONS = ['Pb', 'Steel'] as const;
+export const BULLET_TYPE_OPTIONS = ['FMJ', 'TMJ', 'HP', 'WC'] as const;
+export const BULLET_BARREL_TYPE_OPTIONS = ['Conventional', 'Polygonal'] as const;
+export const CARTRIDGE_METAL_OPTIONS = ['Brass', 'Ni-plated', 'Al', 'Steel'] as const;
+export const CARTRIDGE_PRIMER_TYPE_OPTIONS = ['CF', 'RF'] as const;
+export const CARTRIDGE_FPI_SHAPE_OPTIONS = ['Circular', 'Elliptical', 'Rectangular/Square', 'Tear-drop'] as const;
+export const CARTRIDGE_APERTURE_SHAPE_OPTIONS = ['Circular', 'Rectangular'] as const;
+
+export const handleSelectWithCustom = (
+  value: string,
+  setValue: (nextValue: string) => void,
+  setIsCustom: (nextValue: boolean) => void,
+) => {
+  if (value === CUSTOM) {
+    setIsCustom(true);
+    setValue('');
+    return;
+  }
+
+  setIsCustom(false);
+  setValue(value);
+};
+
+export const isCustomValue = (value: string | undefined, knownValues: readonly string[]): boolean =>
+  value !== undefined && value !== '' && !knownValues.includes(value);
+
+export const parseMeasurementValue = (value: string): number | null => {
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+
+  const parsed = Number.parseFloat(trimmed);
+  return Number.isFinite(parsed) ? parsed : null;
+};
+
+export const formatCalculatedDiameter = (value: number): string =>
+  value.toFixed(4).replace(/\.0+$/, '').replace(/(\.\d*?)0+$/, '$1');
+
+const avgWidth = (widths: string[] | undefined): number | null => {
+  if (!widths || widths.length === 0) return null;
+  const vals = widths.map(parseMeasurementValue).filter((n): n is number => n !== null);
+  if (vals.length === 0) return null;
+  return vals.reduce((a, b) => a + b, 0) / vals.length;
+};
+
+export const buildClassDetailsSummary = (
+  bulletData: BulletAnnotationData | undefined,
+  cartridgeCaseData: CartridgeCaseAnnotationData | undefined,
+  shotshellData: ShotshellAnnotationData | undefined,
+  classType: string,
+): string => {
+  const showBullet = classType === 'Bullet' || classType === 'Other' || classType === '';
+  const showCartridge = classType === 'Cartridge Case' || classType === 'Other' || classType === '';
+  const showShotshell = classType === 'Shotshell' || classType === 'Other' || classType === '';
+  const showHeaders = classType === 'Other' || classType === '';
+
+  const allLines: string[] = [];
+
+  const pushSection = (header: string, sectionRows: string[]) => {
+    if (sectionRows.length === 0) return;
+    if (allLines.length > 0) allLines.push('');
+    if (showHeaders) allLines.push(header);
+    allLines.push(...sectionRows);
+  };
+
+  const r = (label: string, value: string | number | undefined): string | null =>
+    value ? `${label}: ${value}` : null;
+
+  if (showBullet && bulletData) {
+    const rows: string[] = [];
+    const add = (v: string | null) => { if (v) rows.push(v); };
+    add(r('Caliber', bulletData.caliber));
+    add(r('Mass', bulletData.mass));
+    add(r('Diameter', bulletData.diameter));
+    add(r('L/G Count', bulletData.lgNumber));
+    add(r('L/G Direction', bulletData.lgDirection));
+    if (bulletData.lgNumber && bulletData.calcDiameter) {
+      const avgL = avgWidth(bulletData.lWidths);
+      const avgG = avgWidth(bulletData.gWidths);
+      if (avgL !== null) add(r('Avg L Width', `${parseFloat(avgL.toFixed(4))}"`));
+      if (avgG !== null) add(r('Avg G Width', `${parseFloat(avgG.toFixed(4))}"`));
+      add(r('Calc. Diameter', `${bulletData.calcDiameter}"`));
+    }
+    add(r('Jacket Metal', bulletData.jacketMetal));
+    add(r('Core Metal', bulletData.coreMetal));
+    add(r('Bullet Type', bulletData.bulletType));
+    add(r('Barrel Type', bulletData.barrelType));
+    pushSection('[Bullet]', rows);
+  }
+
+  if (showCartridge && cartridgeCaseData) {
+    const rows: string[] = [];
+    const add = (v: string | null) => { if (v) rows.push(v); };
+    add(r('Caliber', cartridgeCaseData.caliber));
+    add(r('Brand', cartridgeCaseData.brand));
+    add(r('Metal', cartridgeCaseData.metal));
+    add(r('Primer Type', cartridgeCaseData.primerType));
+    add(r('FPI Shape', cartridgeCaseData.fpiShape));
+    add(r('Aperture Shape', cartridgeCaseData.apertureShape));
+    if (cartridgeCaseData.hasFpDrag) rows.push('FP Drag: Yes');
+    if (cartridgeCaseData.hasExtractorMarks) rows.push('Extractor Marks: Yes');
+    if (cartridgeCaseData.hasEjectorMarks) rows.push('Ejector Marks: Yes');
+    if (cartridgeCaseData.hasChamberMarks) rows.push('Chamber Marks: Yes');
+    if (cartridgeCaseData.hasMagazineLipMarks) rows.push('Magazine Lip Marks: Yes');
+    if (cartridgeCaseData.hasPrimerShear) rows.push('Primer Shear: Yes');
+    if (cartridgeCaseData.hasEjectionPortMarks) rows.push('Ejection Port Marks: Yes');
+    pushSection('[Cartridge Case]', rows);
+  }
+
+  if (showShotshell && shotshellData) {
+    const rows: string[] = [];
+    const add = (v: string | null) => { if (v) rows.push(v); };
+    add(r('Gauge', shotshellData.gauge));
+    add(r('Shot Size', shotshellData.shotSize));
+    add(r('Metal', shotshellData.metal));
+    add(r('Brand', shotshellData.brand));
+    add(r('FPI Shape', shotshellData.fpiShape));
+    if (shotshellData.hasExtractorMarks) rows.push('Extractor Marks: Yes');
+    if (shotshellData.hasEjectorMarks) rows.push('Ejector Marks: Yes');
+    if (shotshellData.hasChamberMarks) rows.push('Chamber Marks: Yes');
+    pushSection('[Shotshell]', rows);
+  }
+
+  if (allLines.length === 0) return '';
+  return ['--- Class Details ---', ...allLines].join('\n');
+};
+
+export const calculateBulletDiameter = (
+  lgCount: number,
+  lWidths: string[],
+  gWidths: string[],
+): number | null => {
+  if (lgCount <= 0) return null;
+
+  const lWidthValues = lWidths.slice(0, lgCount).map(parseMeasurementValue);
+  const gWidthValues = gWidths.slice(0, lgCount).map(parseMeasurementValue);
+  const hasAllMeasurements = lWidthValues.length === lgCount
+    && gWidthValues.length === lgCount
+    && lWidthValues.every((value) => value !== null)
+    && gWidthValues.every((value) => value !== null);
+
+  if (!hasAllMeasurements) return null;
+
+  const lAverage = lWidthValues.reduce((sum, value) => sum + (value ?? 0), 0) / lgCount;
+  const gAverage = gWidthValues.reduce((sum, value) => sum + (value ?? 0), 0) / lgCount;
+  const circumference = (lAverage + gAverage) * lgCount;
+
+  return circumference / Math.PI;
+};

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

@@ -1,36 +1,33 @@
 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 { ClassDetailsModal } from './class-details-modal';
+import { buildClassDetailsSummary } from './class-details-shared';
 import { getNotes, saveNotes } from '~/components/actions/notes-manage';
-import { type AnnotationData } from '~/types/annotations';
+import { type AnnotationData, type BulletAnnotationData, type CartridgeCaseAnnotationData, type ShotshellAnnotationData } 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;
-  showReturnButton?: boolean;
-  stickyActionBar?: boolean;
-  compactLayout?: boolean;
+  showNotification?: (message: string, type: 'success' | 'error' | 'warning') => void;
 }
 
 type SupportLevel = 'ID' | 'Exclusion' | 'Inconclusive';
-type ClassType = 'Bullet' | 'Cartridge Case' | 'Other';
+type ClassType = 'Bullet' | 'Cartridge Case' | 'Shotshell' | 'Other';
 type IndexType = 'number' | 'color';
 
-export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotationRefresh, originalFileName, isUploading = false, showReturnButton = true, stickyActionBar = false, compactLayout = 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('');
@@ -46,6 +43,10 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
   const [customClass, setCustomClass] = useState('');
   const [classNote, setClassNote] = useState('');
   const [hasSubclass, setHasSubclass] = useState(false);
+  const [bulletData, setBulletData] = useState<BulletAnnotationData | undefined>(undefined);
+  const [cartridgeCaseData, setCartridgeCaseData] = useState<CartridgeCaseAnnotationData | undefined>(undefined);
+  const [shotshellData, setShotshellData] = useState<ShotshellAnnotationData | undefined>(undefined);
+  const [isClassDetailsOpen, setIsClassDetailsOpen] = useState(false);
 
   // Index state
   const [indexType, setIndexType] = useState<IndexType>('color');
@@ -65,14 +66,18 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
   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 {
@@ -92,6 +97,9 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
           setCustomClass(existingNotes.customClass || '');
           setClassNote(existingNotes.classNote || '');
           setHasSubclass(existingNotes.hasSubclass ?? false);
+          setBulletData(existingNotes.bulletData);
+          setCartridgeCaseData(existingNotes.cartridgeCaseData);
+          setShotshellData(existingNotes.shotshellData);
           setIndexType(existingNotes.indexType || 'color');
           setIndexNumber(existingNotes.indexNumber || '');
           setIndexColor(existingNotes.indexColor || '');
@@ -128,9 +136,6 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
       return;
     }
 
-    setSaveError(undefined);
-    setSaveSuccess(false);
-
     let existingData: AnnotationData | null = null;
     
     try {
@@ -139,7 +144,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;
       }
       
@@ -158,6 +163,9 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
         customClass: customClass,
         classNote: classNote || undefined,
         hasSubclass: hasSubclass,
+        bulletData: bulletData,
+        cartridgeCaseData: cartridgeCaseData,
+        shotshellData: shotshellData,
         
         // Index Information
         indexType: indexType,
@@ -193,13 +201,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) {
@@ -210,9 +217,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
@@ -223,7 +230,7 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
           existingData,
           null, // Failed save, no new value
           currentCase,
-          'notes-sidebar',
+          'notes-editor-form',
           imageId,
           originalFileName
         );
@@ -234,7 +241,7 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
   };
 
   return (
-    <div className={`${styles.notesSidebar} ${compactLayout ? styles.compactLayout : ''}`}>
+    <div className={`${styles.notesEditorForm} ${styles.editorLayout}`}>
       {isLoading ? (
         <div className={styles.loading}>Loading notes...</div>
       ) : loadError ? (
@@ -247,10 +254,6 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
         </div>
       )}
 
-      {saveError && (
-        <div className={styles.errorMessage}>{saveError}</div>
-      )}
-
       <div className={styles.section}>
         <button
           type="button"
@@ -297,17 +300,7 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
                 disabled={areInputsDisabled}
               />
             </div>
-            {compactLayout && (
-              <div className={styles.caseInput}>
-                <label htmlFor="colorSelect">Font</label>
-                <ColorSelector
-                  selectedColor={caseFontColor}
-                  onColorSelect={setCaseFontColor}
-                />
-              </div>
-            )}
           </div>
-          {!compactLayout && <hr />}
           {/* Right side inputs */}
           <div className={styles.inputGroup}>
             <div className={styles.caseInput}>
@@ -342,21 +335,20 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
             </div>            
           </div>
         </div>
-        {!compactLayout && (
-          <>
-            <label htmlFor="colorSelect">Font</label>
-            <ColorSelector
-              selectedColor={caseFontColor}
-              onColorSelect={setCaseFontColor}
-            />
-          </>
-        )}
+        <hr />
+        <div className={styles.fontColorRow}>
+          <label htmlFor="colorSelect">Font</label>
+          <ColorSelector
+            selectedColor={caseFontColor}
+            onColorSelect={setCaseFontColor}
+          />
+        </div>
           </>
         )}
       </div>
 
-      <div className={compactLayout ? styles.compactSectionGrid : undefined}>
-      <div className={`${styles.section} ${compactLayout ? styles.compactFullSection : ''}`}>
+      <div className={styles.compactSectionGrid}>
+      <div className={`${styles.section} ${styles.compactFullSection}`}>
         <button
           type="button"
           className={styles.sectionToggle}
@@ -368,7 +360,7 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
         </button>
         {isClassOpen && (
           <>
-            <div className={compactLayout ? styles.classCharacteristicsColumns : undefined}>
+            <div className={styles.classCharacteristicsColumns}>
               <div className={styles.classCharacteristicsMain}>
                 <div className={styles.classCharacteristics}>
                   <select
@@ -382,6 +374,7 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
                     <option value="">Select class type...</option>
                     <option value="Bullet">Bullet</option>
                     <option value="Cartridge Case">Cartridge Case</option>
+                    <option value="Shotshell">Shotshell</option>
                     <option value="Other">Other</option>
                   </select>
 
@@ -415,18 +408,22 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
                 </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 className={styles.classDetailsPanel}>
+                <button
+                  type="button"
+                  onClick={() => setIsClassDetailsOpen(true)}
+                  className={styles.classDetailsButton}
+                  disabled={areInputsDisabled}
+                >
+                  Enter Class Characteristic Details
+                </button>
+              </div>
             </div>
           </>
         )}
       </div>
 
-      <div className={`${styles.section} ${compactLayout ? styles.compactHalfSection : ''}`}>
+      <div className={`${styles.section} ${styles.compactHalfSection}`}>
         <button
           type="button"
           className={styles.sectionToggle}
@@ -477,7 +474,7 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
         )}
       </div>
 
-      <div className={`${styles.section} ${compactLayout ? styles.compactHalfSection : ''}`}>
+      <div className={`${styles.section} ${styles.compactHalfSection}`}>
         <button
           type="button"
           className={styles.sectionToggle}
@@ -538,7 +535,7 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
           </button>
         </div>
 
-        <div className={`${styles.notesActionBar} ${stickyActionBar ? styles.notesActionBarSticky : ''}`}>
+        <div className={`${styles.notesActionBar} ${styles.notesActionBarSticky}`}>
           <button 
               onClick={handleSave}
               className={styles.saveButton}
@@ -547,28 +544,32 @@ export const NotesSidebar = ({ currentCase, onReturn, user, imageId, onAnnotatio
             >
               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>
-          )}
-      <NotesModal
+      <AddlNotesModal
         isOpen={isModalOpen}
         onClose={() => setIsModalOpen(false)}
         notes={additionalNotes}
         onSave={setAdditionalNotes}
+        showNotification={notificationHandler}
+      />
+      <ClassDetailsModal
+        isOpen={isClassDetailsOpen}
+        onClose={() => setIsClassDetailsOpen(false)}
+        classType={classType}
+        bulletData={bulletData}
+        cartridgeCaseData={cartridgeCaseData}
+        shotshellData={shotshellData}
+        onSave={(b, c, s) => {
+          if (b !== undefined) setBulletData(b);
+          if (c !== undefined) setCartridgeCaseData(c);
+          if (s !== undefined) setShotshellData(s);
+          const summary = buildClassDetailsSummary(b, c, s, classType);
+          if (summary) {
+            setAdditionalNotes((prev) => prev ? `${prev}\n${summary}` : summary);
+          }
+        }}
+        showNotification={notificationHandler}
+        isReadOnly={areInputsDisabled}
       />
       </>
         )}

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

@@ -1,6 +1,6 @@
 import type { User } from 'firebase/auth';
 import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
-import { NotesSidebar } from './notes-sidebar';
+import { NotesEditorForm } from './notes-editor-form';
 import styles from './notes-editor-modal.module.css';
 
 interface NotesEditorModalProps {
@@ -12,6 +12,7 @@ interface NotesEditorModalProps {
   originalFileName?: string;
   onAnnotationRefresh?: () => void;
   isUploading?: boolean;
+  showNotification?: (message: string, type: 'success' | 'error' | 'warning') => void;
 }
 
 export const NotesEditorModal = ({
@@ -23,9 +24,9 @@ export const NotesEditorModal = ({
   originalFileName,
   onAnnotationRefresh,
   isUploading = false,
+  showNotification,
 }: NotesEditorModalProps) => {
   const {
-    requestClose,
     overlayProps,
     getCloseButtonProps,
   } = useOverlayDismiss({
@@ -47,17 +48,14 @@ export const NotesEditorModal = ({
           </button>
         </div>
         <div className={styles.content}>
-          <NotesSidebar
+          <NotesEditorForm
             currentCase={currentCase}
-            onReturn={requestClose}
             user={user}
             imageId={imageId}
             onAnnotationRefresh={onAnnotationRefresh}
             originalFileName={originalFileName}
             isUploading={isUploading}
-            showReturnButton={false}
-            stickyActionBar={true}
-            compactLayout={true}
+            showNotification={showNotification}
           />
         </div>
       </div>