@striae-org/striae 6.0.1 → 6.1.1

package/app/components/sidebar/notes/{class-details/class-details-modal.tsx → item-details/item-details-modal.tsx}

@@ -3,18 +3,16 @@ import type {
   BulletAnnotationData,
   CartridgeCaseAnnotationData,
   ShotshellAnnotationData,
+  ItemType,
 } from '~/types/annotations';
-import {
-  type ClassType,
-} from './class-details-shared';
-import { BulletSection, CartridgeCaseSection, ShotshellSection } from './class-details-sections';
-import { useClassDetailsState } from './use-class-details-state';
+import { BulletSection, CartridgeCaseSection, ShotshellSection } from './item-details-sections';
+import { useItemDetailsState } from './use-item-details-state';
 import styles from '../notes.module.css';
 
-interface ClassDetailsModalProps {
+interface ItemDetailsModalProps {
   isOpen: boolean;
   onClose: () => void;
-  classType: ClassType | '';
+  itemType: ItemType | '';
   bulletData?: BulletAnnotationData;
   cartridgeCaseData?: CartridgeCaseAnnotationData;
   shotshellData?: ShotshellAnnotationData;
@@ -27,17 +25,17 @@ interface ClassDetailsModalProps {
   isReadOnly?: boolean;
 }
 
-const ClassDetailsModalContent = ({
+const ItemDetailsModalContent = ({
   isOpen,
   onClose,
-  classType,
+  itemType,
   bulletData,
   cartridgeCaseData,
   shotshellData,
   onSave,
   showNotification,
   isReadOnly = false,
-}: ClassDetailsModalProps) => {
+}: ItemDetailsModalProps) => {
   const {
     bullet,
     cartridgeCase,
@@ -45,7 +43,7 @@ const ClassDetailsModalContent = ({
     isSaving,
     setIsSaving,
     buildSaveData,
-  } = useClassDetailsState({
+  } = useItemDetailsState({
     bulletData,
     cartridgeCaseData,
     shotshellData,
@@ -55,10 +53,10 @@ const ClassDetailsModalContent = ({
 
   if (!isOpen) return null;
 
-  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 showBullet = itemType === 'Bullet' || itemType === 'Other' || itemType === '';
+  const showCartridge = itemType === 'Cartridge Case' || itemType === 'Other' || itemType === '';
+  const showShotshell = itemType === 'Shotshell' || itemType === 'Other' || itemType === '';
+  const showHeaders = itemType === 'Other' || itemType === '';
 
   const handleSave = async () => {
     setIsSaving(true);
@@ -90,10 +88,10 @@ const ClassDetailsModalContent = ({
       aria-label="Close class details dialog"
       {...overlayProps}
     >
-      <div className={`${styles.modal} ${styles.classDetailsModal}`}>
+      <div className={`${styles.modal} ${styles.itemDetailsModal}`}>
         <button {...getCloseButtonProps({ ariaLabel: 'Close class details dialog' })}>×</button>
         <h5 className={styles.modalTitle}>Class Characteristic Details</h5>
-        <div className={styles.classDetailsContent}>
+        <div className={styles.itemDetailsContent}>
           {showBullet && (
             <BulletSection
               showHeader={showHeaders}
@@ -118,10 +116,10 @@ const ClassDetailsModalContent = ({
             />
           )}
         </div>
-        <div className={`${styles.modalButtons} ${styles.classDetailsModalButtons}`}>
+        <div className={`${styles.modalButtons} ${styles.itemDetailsModalButtons}`}>
           <button
             onClick={handleSave}
-            className={`${styles.saveButton} ${styles.classDetailsModalAction}`}
+            className={`${styles.saveButton} ${styles.itemDetailsModalAction}`}
             disabled={isSaving || isReadOnly}
             aria-busy={isSaving}
           >
@@ -129,7 +127,7 @@ const ClassDetailsModalContent = ({
           </button>
           <button
             onClick={requestClose}
-            className={`${styles.cancelButton} ${styles.classDetailsModalAction}`}
+            className={`${styles.cancelButton} ${styles.itemDetailsModalAction}`}
             disabled={isSaving}
           >
             Cancel
@@ -140,8 +138,8 @@ const ClassDetailsModalContent = ({
   );
 };
 
-export const ClassDetailsModal = (props: ClassDetailsModalProps) => {
+export const ItemDetailsModal = (props: ItemDetailsModalProps) => {
   if (!props.isOpen) return null;
 
-  return <ClassDetailsModalContent {...props} />;
+  return <ItemDetailsModalContent {...props} />;
 };

package/app/components/sidebar/notes/{class-details/class-details-sections.tsx → item-details/item-details-sections.tsx}

@@ -16,9 +16,9 @@ import {
   SHOTSHELL_GAUGES,
   SHOTSHELL_STEEL_WATERFOWL_OPTIONS,
   formatCalculatedDiameter,
-} from './class-details-shared';
-import { CheckboxField, SelectField, SelectWithCustomField, TextField } from './class-details-fields';
-import type { BulletDetailsState, CartridgeCaseDetailsState, ShotshellDetailsState } from './use-class-details-state';
+} from './item-details-shared';
+import { CheckboxField, SelectField, SelectWithCustomField, TextField } from './item-details-fields';
+import type { BulletDetailsState, CartridgeCaseDetailsState, ShotshellDetailsState } from './use-item-details-state';
 
 interface BulletSectionProps {
   showHeader: boolean;
@@ -294,14 +294,14 @@ export const BulletSection = ({
       ];
 
   return (
-    <div className={styles.classDetailsSection}>
-      {showHeader && <h6 className={styles.classDetailsSectionHeader}>Bullet</h6>}
-      <div className={styles.classDetailsFieldGrid}>
+    <div className={styles.itemDetailsSection}>
+      {showHeader && <h6 className={styles.itemDetailsSectionHeader}>Bullet</h6>}
+      <div className={styles.itemDetailsFieldGrid}>
         {bulletFields.map((field) => renderConfiguredField(field, isReadOnly))}
       </div>
       {bullet.lgCount > 0 && (
         <div className={styles.lgWidthsSection}>
-          <h6 className={styles.classDetailsSectionHeader}>L / G Widths</h6>
+          <h6 className={styles.itemDetailsSectionHeader}>L / G Widths</h6>
           <div className={styles.lgWidthsLayout}>
             <div className={styles.lgWidthsColumn}>
               {Array.from({ length: bullet.lgCount }, (_, index) => (
@@ -331,7 +331,7 @@ export const BulletSection = ({
           {bullet.calculatedDiameter !== null && (
             <div className={styles.calculatedDiameterWrapper}>
               <div className={styles.calculatedDiameterDisplay}>
-                <span className={styles.classDetailsLabel}>Calculated Diameter</span>
+                <span className={styles.itemDetailsLabel}>Calculated Diameter</span>
                 <span className={styles.calculatedDiameterValue}>{formatCalculatedDiameter(bullet.calculatedDiameter)}</span>
               </div>
               <button
@@ -448,12 +448,12 @@ export const CartridgeCaseSection = ({
       ];
 
   return (
-    <div className={styles.classDetailsSection}>
-      {showHeader && <h6 className={styles.classDetailsSectionHeader}>Cartridge Case</h6>}
-      <div className={styles.classDetailsFieldGrid}>
+    <div className={styles.itemDetailsSection}>
+      {showHeader && <h6 className={styles.itemDetailsSectionHeader}>Cartridge Case</h6>}
+      <div className={styles.itemDetailsFieldGrid}>
         {cartridgeFields.map((field) => renderConfiguredField(field, isReadOnly))}
       </div>
-      <div className={styles.classDetailsCheckboxGroup}>
+      <div className={styles.itemDetailsCheckboxGroup}>
         {renderCheckboxes([
           { key: 'fpDrag', label: 'FP Drag', checked: cartridgeCase.hasFpDrag, onChange: cartridgeCase.setHasFpDrag },
           { key: 'extractor', label: 'Extractor Marks', checked: cartridgeCase.hasExtractorMarks, onChange: cartridgeCase.setHasExtractorMarks },
@@ -544,12 +544,12 @@ export const ShotshellSection = ({
       ];
 
   return (
-    <div className={styles.classDetailsSection}>
-      {showHeader && <h6 className={styles.classDetailsSectionHeader}>Shotshell</h6>}
-      <div className={styles.classDetailsFieldGrid}>
+    <div className={styles.itemDetailsSection}>
+      {showHeader && <h6 className={styles.itemDetailsSectionHeader}>Shotshell</h6>}
+      <div className={styles.itemDetailsFieldGrid}>
         {shotshellFields.map((field) => renderConfiguredField(field, isReadOnly))}
       </div>
-      <div className={styles.classDetailsCheckboxGroup}>
+      <div className={styles.itemDetailsCheckboxGroup}>
         {renderCheckboxes([
           { key: 'extractor', label: 'Extractor Marks', checked: shotshell.hasExtractorMarks, onChange: shotshell.setHasExtractorMarks },
           { key: 'ejector', label: 'Ejector Marks', checked: shotshell.hasEjectorMarks, onChange: shotshell.setHasEjectorMarks },

package/app/components/sidebar/notes/{class-details/class-details-shared.ts → item-details/item-details-shared.ts}

@@ -1,6 +1,7 @@
-import type { BulletAnnotationData, CartridgeCaseAnnotationData, ShotshellAnnotationData } from '~/types/annotations';
+import type { BulletAnnotationData, CartridgeCaseAnnotationData, ShotshellAnnotationData, ItemType } from '~/types/annotations';
 
-export type ClassType = 'Bullet' | 'Cartridge Case' | 'Shotshell' | 'Other';
+// Re-export ItemType from annotations for backwards compatibility
+export type ClassType = ItemType;
 
 export const CUSTOM = '__custom__';
 
@@ -133,7 +134,7 @@ const avgWidth = (widths: string[] | undefined): number | null => {
   return vals.reduce((a, b) => a + b, 0) / vals.length;
 };
 
-export const buildClassDetailsSummary = (
+export const buildItemDetailsSummary = (
   bulletData: BulletAnnotationData | undefined,
   cartridgeCaseData: CartridgeCaseAnnotationData | undefined,
   shotshellData: ShotshellAnnotationData | undefined,

package/app/components/sidebar/notes/{class-details/use-class-details-state.ts → item-details/use-item-details-state.ts}

@@ -18,9 +18,9 @@ import {
   calculateBulletDiameter,
   formatCalculatedDiameter,
   isCustomValue,
-} from './class-details-shared';
+} from './item-details-shared';
 
-interface UseClassDetailsStateParams {
+interface UseItemDetailsStateParams {
   bulletData?: BulletAnnotationData;
   cartridgeCaseData?: CartridgeCaseAnnotationData;
   shotshellData?: ShotshellAnnotationData;
@@ -139,11 +139,11 @@ export interface ShotshellDetailsState {
   setHasChamberMarks: (value: boolean) => void;
 }
 
-export const useClassDetailsState = ({
+export const useItemDetailsState = ({
   bulletData,
   cartridgeCaseData,
   shotshellData,
-}: UseClassDetailsStateParams) => {
+}: UseItemDetailsStateParams) => {
   const [bCaliber, setBCaliber] = useState(() => bulletData?.caliber || '');
   const [bCaliberIsCustom, setBCaliberIsCustom] = useState(() => isCustomValue(bulletData?.caliber, ALL_CALIBERS));
   const [bMass, setBMass] = useState(() => bulletData?.mass || '');