@striae-org/striae 4.2.1 → 4.3.1

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-editor-form.tsx

@@ -2,8 +2,10 @@ import { useState, useEffect } from 'react';
 import type { User } from 'firebase/auth';
 import { ColorSelector } from '~/components/colors/colors';
 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';
@@ -19,7 +21,7 @@ interface NotesEditorFormProps {
 }
 
 type SupportLevel = 'ID' | 'Exclusion' | 'Inconclusive';
-type ClassType = 'Bullet' | 'Cartridge Case' | 'Other';
+type ClassType = 'Bullet' | 'Cartridge Case' | 'Shotshell' | 'Other';
 type IndexType = 'number' | 'color';
 
 export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefresh, originalFileName, isUploading = false, showNotification: externalShowNotification }: NotesEditorFormProps) => {
@@ -41,6 +43,10 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
   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');
@@ -91,6 +97,9 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
           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 || '');
@@ -154,6 +163,9 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
         customClass: customClass,
         classNote: classNote || undefined,
         hasSubclass: hasSubclass,
+        bulletData: bulletData,
+        cartridgeCaseData: cartridgeCaseData,
+        shotshellData: shotshellData,
         
         // Index Information
         indexType: indexType,
@@ -362,6 +374,7 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
                     <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>
 
@@ -395,9 +408,15 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
                 </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 className={styles.classDetailsPanel}>
+                <button
+                  type="button"
+                  onClick={() => setIsClassDetailsOpen(true)}
+                  className={styles.classDetailsButton}
+                  disabled={areInputsDisabled}
+                >
+                  Enter Class Characteristic Details
+                </button>
               </div>
             </div>
           </>
@@ -533,6 +552,25 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
         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}
+      />
       </>
         )}
     </div>

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

@@ -61,10 +61,7 @@
   }
 
   .editorLayout .caseNumbers > .inputGroup + .inputGroup,
-  .editorLayout
-    .compactSectionGrid
-    > .compactHalfSection
-    + .compactHalfSection,
+  .editorLayout .compactSectionGrid > .compactHalfSection + .compactHalfSection,
   .classCharacteristicsColumns > .characteristicsPlaceholder {
     border-left: none;
     padding-left: 0;
@@ -250,6 +247,241 @@ textarea:focus {
   line-height: 1.4;
 }
 
+/* Class Details Panel — replaces placeholder in right column */
+
+.classDetailsPanel {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-height: 150px;
+}
+
+.classDetailsButton {
+  width: 100%;
+  padding: 0.65rem 1rem;
+  background: transparent;
+  color: var(--primary);
+  border: 1.5px solid var(--primary);
+  border-radius: 6px;
+  font-size: 0.88rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-align: center;
+}
+
+.classDetailsButton:hover:not(:disabled) {
+  background-color: color-mix(in lab, var(--primary) 10%, transparent);
+}
+
+.classDetailsButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Class Details Modal */
+
+.classDetailsModal {
+  max-width: 680px;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.classDetailsContent {
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  padding-right: 0.25rem;
+  padding-bottom: 0.5rem;
+  scrollbar-width: thin;
+}
+
+.classDetailsSection {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.classDetailsSectionHeader {
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: #343a40;
+  padding-bottom: 0.4rem;
+  border-bottom: 1.5px solid #dee2e6;
+}
+
+.classDetailsFieldGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.85rem 1.25rem;
+}
+
+.classDetailsField {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.classDetailsFieldFull {
+  grid-column: 1 / -1;
+}
+
+.classDetailsLabel {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #495057;
+}
+
+.classDetailsInput {
+  padding: 0.5rem 0.65rem;
+  border: 1.5px solid #ced4da;
+  border-radius: 6px;
+  font-size: 0.88rem;
+  transition: border-color 0.2s;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.classDetailsInput:focus {
+  border-color: var(--primary);
+  outline: none;
+}
+
+.classDetailsInput:disabled {
+  background-color: #f8f9fa;
+  cursor: not-allowed;
+}
+
+.classDetailsCheckboxGroup {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem 1.25rem;
+}
+
+.classDetailsCheckboxLabel {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.85rem;
+  color: #495057;
+  cursor: pointer;
+}
+
+.classDetailsCheckboxLabel input[type="checkbox"] {
+  cursor: pointer;
+}
+
+.classDetailsCheckboxLabel input[type="checkbox"]:disabled {
+  cursor: not-allowed;
+}
+
+.lgWidthsSection {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.lgWidthsLayout {
+  display: flex;
+  gap: 1.25rem;
+}
+
+.lgWidthsColumn {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+}
+
+.calculatedDiameterWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.calculatedDiameterDisplay {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.85rem 1rem;
+  border: 1px solid #dee2e6;
+  border-radius: 8px;
+  background: #f8f9fa;
+}
+
+.calculatedDiameterValue {
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: #343a40;
+}
+
+.calcExplanationToggle {
+  all: unset;
+  cursor: pointer;
+  font-size: 0.8rem;
+  color: var(--color-primary, #4f6ef7);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  padding: 0.1rem 0;
+  align-self: flex-start;
+}
+
+.calcExplanationToggle:hover {
+  color: var(--color-primary-hover, #3a56d4);
+}
+
+.calcExplanationPanel {
+  padding: 0.85rem 1rem;
+  border: 1px solid #dee2e6;
+  border-radius: 8px;
+  background: #f8f9fa;
+  font-size: 0.82rem;
+  color: #495057;
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+
+.calcExplanationFormula {
+  margin: 0;
+  font-family: monospace;
+  font-size: 0.88rem;
+  font-weight: 600;
+  color: #343a40;
+  letter-spacing: 0.01em;
+}
+
+.calcExplanationList {
+  margin: 0;
+  padding-left: 1.15rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.calcExplanationList li {
+  line-height: 1.5;
+}
+
+.calcExplanationNote {
+  margin: 0;
+  color: #6c757d;
+  font-style: italic;
+}
+
+.calcExplanationExample {
+  margin: 0;
+  padding-top: 0.35rem;
+  border-top: 1px solid #dee2e6;
+}
+
 .classCharacteristics input {
   width: 100%;
   padding: 0.75rem;