@striae-org/striae 6.0.1 → 6.1.1

package/app/components/actions/case-export/core-export.ts

@@ -63,17 +63,26 @@ export async function exportCaseData(
       try {
         annotations = await getNotes(user, caseNumber, file.id) || undefined;
         
-        // Check if file has any annotation data beyond just defaults
+        // Check if file has any annotation data beyond just defaults.
+        // Includes left/right split fields and legacy single-value fields as fallbacks.
         hasAnnotations = !!(annotations && (
           annotations.additionalNotes ||
+          annotations.leftAdditionalNotes ||
+          annotations.rightAdditionalNotes ||
           annotations.classNote ||
+          annotations.leftClassNote ||
+          annotations.rightClassNote ||
           annotations.customClass ||
+          annotations.leftCustomClass ||
+          annotations.rightCustomClass ||
           annotations.leftCase ||
           annotations.rightCase ||
           annotations.leftItem ||
           annotations.rightItem ||
+          annotations.leftItemType ||
+          annotations.rightItemType ||
           annotations.supportLevel ||
-          annotations.classType ||
+          annotations.itemType ||
           (annotations.boxAnnotations && annotations.boxAnnotations.length > 0)
         ));
 

package/app/components/actions/case-export/download-handlers.ts

@@ -95,10 +95,12 @@ export async function downloadCaseAsZip(
         exportData.metadata.exportedByName ||
         exportData.metadata.exportedBy ||
         'Unknown';
+      // Don't add forensic warning comment to encrypted content; it will break JSON parsing on decryption.
+      // The archive package already includes forensic metadata in README.txt and FORENSIC_MANIFEST.json.
       const caseJsonContent = await generateJSONContent(
         exportData,
         options.includeUserInfo,
-        protectForensicData
+        false
       );
 
       const archivePackage = await buildArchivePackage({

package/app/components/canvas/canvas.module.css

@@ -187,7 +187,7 @@
   letter-spacing: 0.5px;
 }
 
-/* Class Characteristics Display */
+/* Item Type Display */
 .classCharacteristics {
   position: absolute;
   bottom: calc(100% + 0.5rem);

package/app/components/canvas/canvas.tsx

@@ -167,7 +167,8 @@ export const Canvas = ({
   }, [imageUrl, resetImageLoadState]);
   
   useEffect(() => {
-    if (!activeAnnotations?.has('class') || !annotationData?.hasSubclass) {
+    const hasAnySubclass = annotationData?.leftHasSubclass || annotationData?.rightHasSubclass || annotationData?.hasSubclass;
+    if (!activeAnnotations?.has('item') || !hasAnySubclass) {
       const flashResetTimer = window.setTimeout(() => {
         clearFlashingState();
       }, 0);
@@ -187,7 +188,7 @@ export const Canvas = ({
     }, 60000);
 
     return () => clearInterval(flashInterval);
-  }, [activeAnnotations, annotationData?.hasSubclass, clearFlashingState]);
+  }, [activeAnnotations, annotationData?.leftHasSubclass, annotationData?.rightHasSubclass, annotationData?.hasSubclass, clearFlashingState]);
 
   const getErrorMessage = () => {
     if (error) return error;
@@ -302,15 +303,35 @@ export const Canvas = ({
         <div className={styles.imageAndNotesContainer}>
           <div className={styles.imageContainer}>
             <div className={styles.imageWrapper}>
-            {/* Class Characteristics - Above Image */}
-            {activeAnnotations?.has('class') && annotationData && (annotationData.customClass || annotationData.classType) && (
-              <div className={styles.classCharacteristics}>
-                <div className={styles.classText}>
-                  {annotationData.customClass || annotationData.classType}
-                  {annotationData.classNote && ` (${annotationData.classNote})`}
+            {/* Item Type - Above Image */}
+            {activeAnnotations?.has('item') && annotationData && (() => {
+              // Resolve display values from left/right fields, falling back to legacy single-set fields.
+              // When both sides are populated and differ, combine them as "Left / Right".
+              // classType is a legacy field kept for backward compat with older annotations (also handled in PDF generation).
+              const leftValue = annotationData.leftCustomClass || annotationData.leftItemType;
+              const rightValue = annotationData.rightCustomClass || annotationData.rightItemType;
+              const legacyValue = annotationData.customClass || annotationData.itemType || annotationData.classType;
+              const displayValue =
+                leftValue && rightValue && leftValue !== rightValue
+                  ? `${leftValue} / ${rightValue}`
+                  : leftValue || rightValue || legacyValue;
+              const leftClassNote = annotationData.leftClassNote?.trim();
+              const rightClassNote = annotationData.rightClassNote?.trim();
+              const legacyClassNote = annotationData.classNote?.trim();
+              const displayClassNote =
+                leftClassNote && rightClassNote && leftClassNote !== rightClassNote
+                  ? `${leftClassNote} / ${rightClassNote}`
+                  : leftClassNote || rightClassNote || legacyClassNote;
+              if (!displayValue) return null;
+              return (
+                <div className={styles.classCharacteristics}>
+                  <div className={styles.classText}>
+                    {displayValue}
+                    {displayClassNote && ` (${displayClassNote})`}
+                  </div>
                 </div>
-              </div>
-            )}
+              );
+            })()}
             
             <img 
             ref={imageRef}
@@ -440,7 +461,7 @@ export const Canvas = ({
       )}
       
       {/* Subclass Warning - Bottom Right of Canvas */}
-      {activeAnnotations?.has('class') && annotationData?.hasSubclass && (
+      {activeAnnotations?.has('item') && annotationData && (annotationData.leftHasSubclass || annotationData.rightHasSubclass || annotationData.hasSubclass) && (
         <div className={`${styles.subclassWarning} ${isFlashing ? styles.flashing : ''}`}>
           <div className={styles.subclassText}>
             POTENTIAL SUBCLASS

package/app/components/colors/colors.module.css

@@ -26,6 +26,11 @@
   border-color: #adb5bd;
 }
 
+.toggleButton:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
 .colorWheel {
   width: 180px;
   height: 40px;
@@ -35,6 +40,11 @@
   cursor: pointer;
 }
 
+.colorWheel:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
 .colorGrid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
@@ -54,6 +64,15 @@
   transform: scale(1.1);
 }
 
+.colorSwatch:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.colorSwatch:disabled:hover {
+  transform: none;
+}
+
 .colorSwatch.selected {
   border-color: #0d6efd;
   box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);

package/app/components/colors/colors.tsx

@@ -4,6 +4,7 @@ import styles from './colors.module.css';
 interface ColorSelectorProps {
   selectedColor: string;
   onColorSelect: (color: string) => void;
+  disabled?: boolean;
 }
 
 interface ColorOption {
@@ -24,7 +25,7 @@ const commonColors: ColorOption[] = [
   { value: '#ffffff', label: 'White' }
 ];
 
-export const ColorSelector = ({ selectedColor, onColorSelect }: ColorSelectorProps) => {
+export const ColorSelector = ({ selectedColor, onColorSelect, disabled = false }: ColorSelectorProps) => {
   const [showColorWheel, setShowColorWheel] = useState(false);
 
   return (
@@ -34,6 +35,7 @@ export const ColorSelector = ({ selectedColor, onColorSelect }: ColorSelectorPro
         <button 
           onClick={() => setShowColorWheel(!showColorWheel)}
           className={styles.toggleButton}
+          disabled={disabled}
         >
           {showColorWheel ? 'Presets' : 'Color Wheel'}
         </button>
@@ -47,6 +49,7 @@ export const ColorSelector = ({ selectedColor, onColorSelect }: ColorSelectorPro
             onChange={(e) => onColorSelect(e.target.value)}
             className={styles.colorWheel}
             title="Choose a color"
+            disabled={disabled}
           />
         </>
       ) : (
@@ -59,6 +62,7 @@ export const ColorSelector = ({ selectedColor, onColorSelect }: ColorSelectorPro
             onClick={() => onColorSelect(color.value)}
             aria-label={`Select ${color.label}`}
             title={color.label}
+            disabled={disabled}
           />
         ))}
       </div>

package/app/components/icon/icons.svg

@@ -3,7 +3,7 @@
     <symbol id="number" viewBox="0 0 24 24">
       <path d="M1,9h24M1,17h24M10,1l-3,24M19,1l-3,24" style="stroke:#1e1e1e; stroke-linecap:round; stroke-linejoin:round; stroke-width:2px;" />
     </symbol>
-    <symbol id="class" viewBox="0 0 24 24">
+    <symbol id="item" viewBox="0 0 24 24">
       <path d="M12,24c-1.66,0-3.22-.31-4.68-.95-1.46-.63-2.73-1.48-3.81-2.56s-1.94-2.35-2.57-3.81c-.63-1.46-.94-3.02-.94-4.68s.31-3.22.94-4.68,1.49-2.73,2.57-3.81,2.35-1.94,3.81-2.57,3.02-.94,4.68-.94,3.22.31,4.68.94c1.46.63,2.73,1.49,3.81,2.57s1.94,2.35,2.56,3.81c.63,1.46.95,3.02.95,4.68s-.31,3.22-.95,4.68c-.63,1.46-1.48,2.73-2.56,3.81s-2.35,1.94-3.81,2.56c-1.46.63-3.02.95-4.68.95ZM12,21.6c2.68,0,4.95-.93,6.81-2.79s2.79-4.13,2.79-6.81-.93-4.95-2.79-6.81-4.13-2.79-6.81-2.79-4.95.93-6.81,2.79-2.79,4.13-2.79,6.81.93,4.95,2.79,6.81,4.13,2.79,6.81,2.79Z" />
       <path d="M12.29,15.89c-.5,0-.97-.09-1.4-.28-.44-.19-.82-.45-1.14-.77-.32-.32-.58-.71-.77-1.14-.19-.44-.28-.91-.28-1.4s.09-.97.28-1.4c.19-.44.45-.82.77-1.14.32-.32.7-.58,1.14-.77.44-.19.91-.28,1.4-.28s.97.09,1.4.28c.44.19.82.45,1.14.77.32.32.58.7.77,1.14.19.44.28.91.28,1.4s-.09.97-.28,1.4c-.19.44-.45.82-.77,1.14-.32.32-.71.58-1.14.77-.44.19-.91.28-1.4.28ZM12.29,15.17c.8,0,1.49-.28,2.04-.84s.84-1.24.84-2.04-.28-1.48-.84-2.04-1.24-.84-2.04-.84-1.48.28-2.04.84-.84,1.24-.84,2.04.28,1.49.84,2.04,1.24.84,2.04.84Z" />
     </symbol>

package/app/components/icon/manifest.json

@@ -3,7 +3,7 @@
     "width": 24,
     "height": 24
   },
-  "class": {
+  "item": {
     "width": 24,
     "height": 24
   },

package/app/components/navbar/navbar.tsx

@@ -4,7 +4,7 @@ import { SignOut } from '../actions/signout';
 import { ManageProfile } from '../user/manage-profile';
 import { CaseImport } from './case-import/case-import';
 import { AuthContext } from '~/contexts/auth.context';
-import { getUserData } from '~/utils/data';
+import { getUserData, getNotesViewPermission, getNotesButtonTooltip } from '~/utils/data';
 import { type ImportResult, type ConfirmationImportResult } from '~/types';
 
 interface NavbarProps {
@@ -117,11 +117,29 @@ export const Navbar = ({
   const disableLongRunningCaseActions = isUploading;
   const isCaseManagementActive = true;
   const isFileManagementActive = isFileMenuOpen || hasLoadedImage;
-  const canOpenImageNotes = hasLoadedImage && !isCurrentImageConfirmed && !isReadOnly;
-  const isImageNotesActive = canOpenImageNotes;
   const canDeleteCurrentFile = hasLoadedImage && !isReadOnly;
-  const isArchivedRegularReadOnly = Boolean(isReadOnly && archiveDetails?.archived && !isReviewOnlyCase);
-  const caseExportLabel = isArchivedRegularReadOnly
+  const isArchivedCase = Boolean(isReadOnly && archiveDetails?.archived);
+  
+  // Use centralized permission helper for notes
+  const notesPermission = getNotesViewPermission({
+    imageLoaded: hasLoadedImage,
+    isUploading: isUploading || false,
+    isCheckingConfirmation: false, // Navbar doesn't track this granularly
+    isReadOnlyCase: isReadOnly || false,
+    isArchivedCase: isArchivedCase,
+    isConfirmedImage: isCurrentImageConfirmed || false
+  });
+  
+  const imageNotesTitle = getNotesButtonTooltip(notesPermission, {
+    isReadOnlyCase: isReadOnly,
+    isArchivedCase: isArchivedCase,
+    isConfirmedImage: isCurrentImageConfirmed
+  });
+
+  const canOpenImageNotes = notesPermission.canOpen;
+  const isImageNotesActive = canOpenImageNotes;
+
+  const caseExportLabel = isArchivedCase
     ? 'Export Archive'
     : isReadOnly
       ? 'Export Confirmations'
@@ -184,13 +202,15 @@ export const Navbar = ({
                   type="button"
                   role="menuitem"
                   className={`${styles.caseMenuItem} ${styles.caseMenuItemExport}`}
-                  disabled={!hasLoadedCase || disableLongRunningCaseActions}
+                  disabled={!hasLoadedCase || disableLongRunningCaseActions || (isArchivedCase && isReviewOnlyCase)}
                   title={
                     !hasLoadedCase
                       ? 'Load a case to export case data'
                       : disableLongRunningCaseActions
                         ? 'Export is unavailable while files are uploading'
-                        : undefined
+                        : isArchivedCase && isReviewOnlyCase
+                          ? 'Cannot export imported archive packages'
+                          : undefined
                   }
                   onClick={() => {
                     onOpenCaseExport?.();
@@ -362,16 +382,12 @@ export const Navbar = ({
             className={`${styles.navSectionButton} ${isImageNotesActive ? styles.navSectionButtonActive : ''}`}
             disabled={!canOpenImageNotes}
             aria-pressed={isImageNotesActive}
-            title={
-              !hasLoadedImage
-                ? 'Load an image to enable image notes'
-                : isCurrentImageConfirmed
-                  ? 'Confirmed images are read-only and viewable via toolbar only'
-                  : isReadOnly
-                    ? 'Image notes are disabled for read-only cases'
-                    : undefined
-            }
+            title={imageNotesTitle}
             onClick={() => {
+              if (!notesPermission.canOpen) {
+                return;
+              }
+
               onOpenImageNotes?.();
             }}
           >

package/app/components/sidebar/cases/case-sidebar.tsx

@@ -11,7 +11,9 @@ import {
 import { 
   canUploadFile, 
   ensureCaseConfirmationSummary,
-  getCaseConfirmationSummary
+  getCaseConfirmationSummary,
+  getNotesViewPermission,
+  getNotesButtonTooltip
 } from '~/utils/data';
 import { type FileData } from '~/types';
 
@@ -26,8 +28,8 @@ interface CaseSidebarProps {
   setFiles: React.Dispatch<React.SetStateAction<FileData[]>>;
   currentCase: string | null;
   isReadOnly?: boolean;
+  isReviewOnlyCase?: boolean;
   isArchivedCase?: boolean;
-  isConfirmed?: boolean;
   confirmationSaveVersion?: number;
   selectedFileId?: string;
   isUploading?: boolean;
@@ -47,8 +49,8 @@ export const CaseSidebar = ({
   setFiles,
   currentCase,
   isReadOnly = false,
+  isReviewOnlyCase = false,
   isArchivedCase = false,
-  isConfirmed = false,
   confirmationSaveVersion = 0,
   selectedFileId,
   isUploading = false,
@@ -236,35 +238,35 @@ const handleImageSelect = (file: FileData) => {
     selectedFileId && !selectedFileConfirmationState
   );
 
-  const isSelectedFileConfirmed =
-    isConfirmed || !!selectedFileConfirmationState?.isConfirmed;
-
-  const isImageNotesDisabled =
-    !imageLoaded ||
-    isReadOnly ||
-    isSelectedFileConfirmed ||
-    isUploading ||
-    isCheckingSelectedFileConfirmation;
-
-  const imageNotesTitle = isUploading
-    ? 'Cannot edit notes while uploading'
-    : isCheckingSelectedFileConfirmation
-    ? 'Checking confirmation status...'
-    : isSelectedFileConfirmed
-    ? 'Cannot edit notes for confirmed images'
-    : isReadOnly
-    ? 'Cannot edit notes for read-only cases'
-    : !imageLoaded
-    ? 'Select an image first'
-    : undefined;
+  const isSelectedFileConfirmed = !!selectedFileConfirmationState?.isConfirmed;
+
+  // Use centralized permission helper
+  const notesPermission = getNotesViewPermission({
+    imageLoaded,
+    isUploading,
+    isCheckingConfirmation: isCheckingSelectedFileConfirmation,
+    isReadOnlyCase: isReadOnly,
+    isArchivedCase: isArchivedCase,
+    isConfirmedImage: isSelectedFileConfirmed
+  });
+
+  const isImageNotesDisabled = !notesPermission.canOpen;
+  const imageNotesTitle = getNotesButtonTooltip(notesPermission, {
+    isReadOnlyCase: isReadOnly,
+    isArchivedCase: isArchivedCase,
+    isConfirmedImage: isSelectedFileConfirmed
+  });
 
   const showCaseExportButton = Boolean(currentCase && isReadOnly);
   const caseExportButtonLabel = isArchivedCase ? 'Export Archive' : 'Export Confirmations';
+  const isImportedArchive = isArchivedCase && isReviewOnlyCase;
 
   const exportCaseTitle = isUploading
     ? 'Cannot export while uploading'
     : !currentCase
     ? 'Load a case first'
+    : isImportedArchive
+    ? 'Cannot export imported archive packages'
     : undefined;
 
 return (
@@ -389,7 +391,7 @@ return (
         <button
           className={styles.confirmationExportButton}
           onClick={onOpenCaseExport}
-          disabled={isUploading || !currentCase}
+          disabled={isUploading || !currentCase || isImportedArchive}
           title={exportCaseTitle}
         >
           {caseExportButtonLabel}

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

@@ -9,7 +9,7 @@ import {
 import {
   type FilesModalSortBy,
   type FilesModalConfirmationFilter,
-  type FilesModalClassTypeFilter,
+  type FilesModalItemTypeFilter,
   getFilesForModal,
 } from '~/utils/data/file-filters';
 import { deleteFile } from '~/components/actions/image-manage';
@@ -61,12 +61,24 @@ function formatDate(dateString: string): string {
   return new Date(parsed).toLocaleDateString();
 }
 
-function getClassTypeLabel(classType?: FileConfirmationSummary['classType']): string {
-  if (!classType) {
+function getItemTypeLabel(summary: FileConfirmationSummary): string {
+  const itemTypes = [
+    summary.leftItemType,
+    summary.rightItemType,
+    summary.itemType,
+  ].filter((value): value is NonNullable<FileConfirmationSummary['itemType']> => Boolean(value));
+
+  const uniqueItemTypes = Array.from(new Set(itemTypes));
+
+  if (uniqueItemTypes.length === 0) {
     return 'Unset';
   }
 
-  return classType;
+  if (uniqueItemTypes.length === 1) {
+    return uniqueItemTypes[0];
+  }
+
+  return `${uniqueItemTypes[0]} / ${uniqueItemTypes[1]}`;
 }
 
 function getConfirmationLabel(summary: FileConfirmationSummary): string {
@@ -110,7 +122,7 @@ export const FilesModal = ({
     preferences,
     setSortBy,
     setConfirmationFilter,
-    setClassTypeFilter,
+    setItemTypeFilter,
     resetPreferences,
   } = useFileListPreferences();
   const {
@@ -125,7 +137,7 @@ export const FilesModal = ({
   const hasCustomPreferences =
     preferences.sortBy !== DEFAULT_FILES_MODAL_PREFERENCES.sortBy ||
     preferences.confirmationFilter !== DEFAULT_FILES_MODAL_PREFERENCES.confirmationFilter ||
-    preferences.classTypeFilter !== DEFAULT_FILES_MODAL_PREFERENCES.classTypeFilter;
+    preferences.itemTypeFilter !== DEFAULT_FILES_MODAL_PREFERENCES.itemTypeFilter;
 
   const existingFileIdSet = useMemo(
     () => new Set(files.map((file) => file.id)),
@@ -162,6 +174,9 @@ export const FilesModal = ({
     (effectiveCurrentPage + 1) * FILES_PER_PAGE
   );
 
+  const shouldForceItemTypeSummaryRefresh =
+    preferences.sortBy === 'itemType' || preferences.itemTypeFilter !== 'all';
+
   useEffect(() => {
     let isCancelled = false;
 
@@ -173,7 +188,9 @@ export const FilesModal = ({
         return;
       }
 
-      const caseSummary = await ensureCaseConfirmationSummary(user, currentCase, files).catch((err) => {
+      const caseSummary = await ensureCaseConfirmationSummary(user, currentCase, files, {
+        forceRefresh: shouldForceItemTypeSummaryRefresh,
+      }).catch((err) => {
         console.error(`Error fetching confirmation summary for case ${currentCase}:`, err);
         return null;
       });
@@ -190,7 +207,14 @@ export const FilesModal = ({
     return () => {
       isCancelled = true;
     };
-  }, [isOpen, currentCase, files, user, confirmationSaveVersion]);
+  }, [
+    isOpen,
+    currentCase,
+    files,
+    user,
+    confirmationSaveVersion,
+    shouldForceItemTypeSummaryRefresh,
+  ]);
 
   const toggleDeleteSelection = (fileId: string) => {
     setDeleteSelectedFileIds((previous) => {
@@ -339,7 +363,7 @@ export const FilesModal = ({
                     <option value="recent">Date Uploaded</option>
                     <option value="filename">File Name</option>
                     <option value="confirmation">Confirmation Status</option>
-                    <option value="classType">Class Type</option>
+                    <option value="itemType">Item Type</option>
                   </select>
                 </div>
 
@@ -361,12 +385,12 @@ export const FilesModal = ({
                 </div>
 
                 <div className={styles.controlGroup}>
-                  <label htmlFor="files-class-filter">Class Type</label>
+                  <label htmlFor="files-item-filter">Item Type</label>
                   <select
-                    id="files-class-filter"
-                    value={preferences.classTypeFilter}
+                    id="files-item-filter"
+                    value={preferences.itemTypeFilter}
                     onChange={(event) => {
-                      setClassTypeFilter(event.target.value as FilesModalClassTypeFilter);
+                      setItemTypeFilter(event.target.value as FilesModalItemTypeFilter);
                       setCurrentPage(0);
                     }}
                   >
@@ -434,7 +458,7 @@ export const FilesModal = ({
                     const isOpenSelected = effectiveOpenSelectedFileId === file.id;
                     const isDeleteSelected = effectiveDeleteSelectedFileIds.has(file.id);
                     const confirmationLabel = getConfirmationLabel(summary);
-                    const classTypeLabel = getClassTypeLabel(summary.classType);
+                    const itemTypeLabel = getItemTypeLabel(summary);
 
                     let confirmationClass = '';
                     if (summary.includeConfirmation) {
@@ -472,7 +496,7 @@ export const FilesModal = ({
                             </div>
                             <div className={styles.fileMetaRow}>
                               <span className={styles.fileDate}>Uploaded: {formatDate(file.uploadedAt)}</span>
-                              <span className={styles.classTypeBadge}>Class: {classTypeLabel}</span>
+                              <span className={styles.classTypeBadge}>Item: {itemTypeLabel}</span>
                             </div>
                           </div>
 

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

@@ -7,10 +7,11 @@ interface AddlNotesModalProps {
   onClose: () => void;
   notes: string;
   onSave: (notes: string) => void;
+  isReadOnly?: boolean;
   showNotification?: (message: string, type: 'success' | 'error' | 'warning') => void;
 }
 
-export const AddlNotesModal = ({ isOpen, onClose, notes, onSave, showNotification }: AddlNotesModalProps) => {
+export const AddlNotesModal = ({ isOpen, onClose, notes, onSave, isReadOnly = false, showNotification }: AddlNotesModalProps) => {
   const [tempNotes, setTempNotes] = useState(notes);
   const [isSaving, setIsSaving] = useState(false);
 
@@ -31,6 +32,11 @@ export const AddlNotesModal = ({ isOpen, onClose, notes, onSave, showNotificatio
   if (!isOpen) return null;  
 
   const handleSave = async () => {
+    if (isReadOnly) {
+      showNotification?.('This case is read-only. Notes cannot be modified.', 'error');
+      return;
+    }
+
     setIsSaving(true);
     try {
       await Promise.resolve(onSave(tempNotes));
@@ -58,12 +64,13 @@ export const AddlNotesModal = ({ isOpen, onClose, notes, onSave, showNotificatio
           onChange={(e) => setTempNotes(e.target.value)}
           className={styles.modalTextarea}
           placeholder="Enter additional notes..."
+          disabled={isReadOnly}
         />
         <div className={styles.modalButtons}>
           <button 
             onClick={handleSave} 
             className={styles.saveButton}
-            disabled={isSaving}
+            disabled={isSaving || isReadOnly}
             aria-busy={isSaving}
           >
             {isSaving ? 'Saving...' : 'Save'}

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import styles from '../notes.module.css';
-import { CUSTOM, handleSelectWithCustom } from './class-details-shared';
+import { CUSTOM, handleSelectWithCustom } from './item-details-shared';
 
 interface BaseFieldProps {
   label: string;
@@ -37,7 +37,7 @@ interface CheckboxFieldProps {
 }
 
 const fieldClassName = (fullWidth = false): string =>
-  fullWidth ? `${styles.classDetailsField} ${styles.classDetailsFieldFull}` : styles.classDetailsField;
+  fullWidth ? `${styles.itemDetailsField} ${styles.itemDetailsFieldFull}` : styles.itemDetailsField;
 
 export const TextField = ({
   label,
@@ -50,14 +50,14 @@ export const TextField = ({
   min,
 }: TextFieldProps) => (
   <div className={fieldClassName(fullWidth)}>
-    <span className={styles.classDetailsLabel}>{label}</span>
+    <span className={styles.itemDetailsLabel}>{label}</span>
     <input
       type={type}
       min={min}
       aria-label={label}
       value={value}
       onChange={(event) => onChange(event.target.value)}
-      className={styles.classDetailsInput}
+      className={styles.itemDetailsInput}
       disabled={disabled}
       placeholder={placeholder}
     />
@@ -74,12 +74,12 @@ export const SelectField = ({
   fullWidth = false,
 }: SelectFieldProps) => (
   <div className={fieldClassName(fullWidth)}>
-    <span className={styles.classDetailsLabel}>{label}</span>
+    <span className={styles.itemDetailsLabel}>{label}</span>
     <select
       aria-label={label}
       value={value}
       onChange={(event) => onChange(event.target.value)}
-      className={styles.classDetailsInput}
+      className={styles.itemDetailsInput}
       disabled={disabled}
     >
       <option value="">{placeholder}</option>
@@ -101,12 +101,12 @@ export const SelectWithCustomField = ({
   fullWidth = false,
 }: SelectWithCustomFieldProps) => (
   <div className={fieldClassName(fullWidth)}>
-    <span className={styles.classDetailsLabel}>{label}</span>
+    <span className={styles.itemDetailsLabel}>{label}</span>
     <select
       aria-label={label}
       value={isCustom ? CUSTOM : value}
       onChange={(event) => handleSelectWithCustom(event.target.value, onChange, onCustomChange)}
-      className={styles.classDetailsInput}
+      className={styles.itemDetailsInput}
       disabled={disabled}
     >
       <option value="">{placeholder}</option>
@@ -119,7 +119,7 @@ export const SelectWithCustomField = ({
         aria-label={label}
         value={value}
         onChange={(event) => onChange(event.target.value)}
-        className={styles.classDetailsInput}
+        className={styles.itemDetailsInput}
         disabled={disabled}
         placeholder={customPlaceholder}
       />
@@ -133,7 +133,7 @@ export const CheckboxField = ({
   onChange,
   disabled,
 }: CheckboxFieldProps) => (
-  <label className={styles.classDetailsCheckboxLabel}>
+  <label className={styles.itemDetailsCheckboxLabel}>
     <input
       type="checkbox"
       aria-label={label}