@striae-org/striae 6.1.0 → 6.1.2

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/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,28 @@ export const Navbar = ({
   const disableLongRunningCaseActions = isUploading;
   const isCaseManagementActive = true;
   const isFileManagementActive = isFileMenuOpen || hasLoadedImage;
-  const canOpenImageNotes = hasLoadedImage;
-  const isImageNotesReadOnly = isReadOnly || isCurrentImageConfirmed || isUploading;
-  const isImageNotesActive = canOpenImageNotes;
   const canDeleteCurrentFile = hasLoadedImage && !isReadOnly;
   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
@@ -365,14 +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'
-                : isImageNotesReadOnly
-                  ? 'Image notes are view-only in this state'
-                    : 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';
 
@@ -28,7 +30,6 @@ interface CaseSidebarProps {
   isReadOnly?: boolean;
   isReviewOnlyCase?: boolean;
   isArchivedCase?: boolean;
-  isConfirmed?: boolean;
   confirmationSaveVersion?: number;
   selectedFileId?: string;
   isUploading?: boolean;
@@ -50,7 +51,6 @@ export const CaseSidebar = ({
   isReadOnly = false,
   isReviewOnlyCase = false,
   isArchivedCase = false,
-  isConfirmed = false,
   confirmationSaveVersion = 0,
   selectedFileId,
   isUploading = false,
@@ -238,27 +238,24 @@ 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';

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

@@ -5,7 +5,7 @@ import { AddlNotesModal } from './addl-notes-modal';
 import { ItemDetailsModal } from './item-details/item-details-modal';
 import { buildItemDetailsSummary } from './item-details/item-details-shared';
 import { getNotes, saveNotes } from '~/components/actions/notes-manage';
-import { type AnnotationData, type BulletAnnotationData, type CartridgeCaseAnnotationData, type ShotshellAnnotationData, type ItemType } from '~/types/annotations';
+import { type AnnotationData, type BulletAnnotationData, type CartridgeCaseAnnotationData, type ShotshellAnnotationData, type ItemType, type SupportLevel, type IndexType } from '~/types/annotations';
 import { resolveEarliestAnnotationTimestamp } from '~/utils/ui';
 import { auditService } from '~/services/audit';
 import styles from './notes.module.css';
@@ -23,9 +23,6 @@ interface NotesEditorFormProps {
   onRegisterSaveHandler?: (saveHandler: (() => Promise<boolean>) | null) => void;
 }
 
-type SupportLevel = 'ID' | 'Exclusion' | 'Inconclusive';
-type IndexType = 'number' | 'color';
-
 interface NotesFormSnapshot {
   leftCase: string;
   rightCase: string;
@@ -154,7 +151,9 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
   const [savedSnapshot, setSavedSnapshot] = useState<string>('');
   const [hasLoadedSnapshot, setHasLoadedSnapshot] = useState(false);
   const [isDirty, setIsDirty] = useState(false);
-  const areInputsDisabled = isUploading || isConfirmedImage || isReadOnly;
+  const areEditsDisabled = isUploading || isReadOnly || isConfirmedImage;
+  const isReadOnlyMode = isConfirmedImage || isReadOnly;
+  const canOpenModals = !isUploading;
 
   const notificationHandler = useCallback((message: string, type: 'success' | 'error' | 'warning' = 'success') => {
     if (externalShowNotification) {
@@ -687,7 +686,7 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
                 type="text"
                 value={leftCase}
                 onChange={(e) => setLeftCase(e.target.value)}
-                disabled={useCurrentCaseLeft || areInputsDisabled}                
+                disabled={useCurrentCaseLeft || areEditsDisabled}                
               />
             </div>
             <label className={`${styles.checkboxLabel} mb-4`}>
@@ -696,7 +695,7 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
                 checked={useCurrentCaseLeft}
                 onChange={(e) => setUseCurrentCaseLeft(e.target.checked)}
                 className={styles.checkbox}
-                disabled={areInputsDisabled}
+                disabled={areEditsDisabled}
               />
               <span>Use current case number</span>
             </label>            
@@ -707,7 +706,7 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
                 type="text"
                 value={leftItem}
                 onChange={(e) => setLeftItem(e.target.value)}
-                disabled={areInputsDisabled}
+                disabled={areEditsDisabled}
               />
             </div>
           </div>
@@ -720,7 +719,7 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
                 type="text"
                 value={rightCase}
                 onChange={(e) => setRightCase(e.target.value)}
-                disabled={useCurrentCaseRight || areInputsDisabled}                
+                disabled={useCurrentCaseRight || areEditsDisabled}                
               />
             </div>
             <label className={`${styles.checkboxLabel} mb-4`}>
@@ -729,7 +728,7 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
                 checked={useCurrentCaseRight}
                 onChange={(e) => setUseCurrentCaseRight(e.target.checked)}
                 className={styles.checkbox}
-                disabled={areInputsDisabled}
+                disabled={areEditsDisabled}
               />
               <span>Use current case number</span>
             </label>
@@ -740,7 +739,7 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
                 type="text"
                 value={rightItem}
                 onChange={(e) => setRightItem(e.target.value)}
-                disabled={areInputsDisabled}
+                disabled={areEditsDisabled}
               />
             </div>            
           </div>
@@ -751,6 +750,7 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
           <ColorSelector
             selectedColor={caseFontColor}
             onColorSelect={setCaseFontColor}
+            disabled={areEditsDisabled}
           />
         </div>
           </>
@@ -795,7 +795,7 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
                     value={getSelectedItemData().itemType}
                     onChange={(e) => setSelectedItemData({ itemType: e.target.value as ItemType })}
                     className={styles.select}
-                    disabled={areInputsDisabled}
+                    disabled={areEditsDisabled}
                   >
                     <option value="">Select item type...</option>
                     <option value="Bullet">Bullet</option>
@@ -810,7 +810,7 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
                       value={getSelectedItemData().customClass}
                       onChange={(e) => setSelectedItemData({ customClass: e.target.value })}
                       placeholder="Specify object type"
-                      disabled={areInputsDisabled}
+                      disabled={areEditsDisabled}
                     />
                   )}
 
@@ -819,7 +819,7 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
                     onChange={(e) => setSelectedItemData({ classNote: e.target.value })}
                     placeholder="Enter item details..."
                     className={styles.textarea}
-                    disabled={areInputsDisabled}
+                    disabled={areEditsDisabled}
                   />
                 </div>
             </div>
@@ -838,7 +838,7 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
                     checked={getSelectedItemData().hasSubclass}
                     onChange={(e) => setSelectedItemData({ hasSubclass: e.target.checked })}
                     className={styles.checkbox}
-                    disabled={areInputsDisabled}
+                    disabled={areEditsDisabled}
                   />
                   <span>Potential subclass?</span>
                 </label>
@@ -866,7 +866,7 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
                 type="radio"
                 checked={indexType === 'color'}
                 onChange={() => setIndexType('color')}
-                disabled={areInputsDisabled}
+                disabled={areEditsDisabled}
               />
               <span>Color</span>
             </label>
@@ -875,7 +875,7 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
                 type="radio"
                 checked={indexType === 'number'}
                 onChange={() => setIndexType('number')}
-                disabled={areInputsDisabled}
+                disabled={areEditsDisabled}
               />
               <span>Number/Letter</span>
             </label>
@@ -887,12 +887,13 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
               value={indexNumber}
               onChange={(e) => setIndexNumber(e.target.value)}
               placeholder="Enter index number"
-              disabled={areInputsDisabled}
+              disabled={areEditsDisabled}
             />
           ) : indexType === 'color' ? (            
             <ColorSelector
               selectedColor={indexColor}
               onColorSelect={setIndexColor}
+              disabled={areEditsDisabled}
             />            
           ) : null}
         </div>
@@ -926,7 +927,7 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
                   }
                 }}
                 className={styles.select}
-                disabled={areInputsDisabled}
+                disabled={areEditsDisabled}
               >
                 <option value="">Select support level...</option>
                 <option value="ID">Identification</option>
@@ -939,7 +940,7 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
                   checked={includeConfirmation}
                   onChange={(e) => setIncludeConfirmation(e.target.checked)}
                   className={styles.checkbox}
-                  disabled={areInputsDisabled}
+                  disabled={areEditsDisabled}
                 />
                 <span>Include confirmation field</span>
               </label>
@@ -953,7 +954,8 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
           <button 
             onClick={() => setIsModalOpen(true)}
             className={styles.notesButton}
-            title={isConfirmedImage ? "Cannot edit notes for confirmed images" : isUploading ? "Cannot add notes while uploading" : undefined}
+            disabled={!canOpenModals}
+            title={isUploading ? "Cannot open notes while uploading" : undefined}
           >
             Additional Notes
           </button>
@@ -963,8 +965,8 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
           <button 
               onClick={handleSave}
               className={styles.saveButton}
-              disabled={areInputsDisabled}
-              title={isConfirmedImage ? "Cannot save notes for confirmed images" : isUploading ? "Cannot save notes while uploading" : undefined}
+              disabled={areEditsDisabled}
+              title={isConfirmedImage ? "Cannot save notes - image is confirmed" : isUploading ? "Cannot save notes while uploading" : isReadOnly ? "Cannot save notes - case is read-only" : undefined}
             >
               Save Notes
             </button>
@@ -974,13 +976,13 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
         onClose={() => setIsModalOpen(false)}
         notes={additionalNotes}
         onSave={(notes) => {
-          if (areInputsDisabled) {
+          if (areEditsDisabled) {
             return;
           }
 
           setAdditionalNotes(notes);
         }}
-        isReadOnly={areInputsDisabled}
+        isReadOnly={isReadOnlyMode}
         showNotification={notificationHandler}
       />
       <ItemDetailsModal
@@ -991,7 +993,7 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
         cartridgeCaseData={getSelectedItemData().cartridgeCaseData}
         shotshellData={getSelectedItemData().shotshellData}
         onSave={(b, c, s) => {
-          if (areInputsDisabled) {
+          if (areEditsDisabled) {
             return;
           }
 
@@ -1010,7 +1012,7 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
           }
         }}
         showNotification={notificationHandler}
-        isReadOnly={areInputsDisabled}
+        isReadOnly={isReadOnlyMode}
       />
       </>
         )}

package/app/components/sidebar/sidebar-container.tsx

@@ -26,7 +26,6 @@ interface SidebarContainerProps {
   isReadOnly?: boolean;
   isReviewOnlyCase?: boolean;
   isArchivedCase?: boolean;
-  isConfirmed?: boolean;
   confirmationSaveVersion?: number;
   isUploading?: boolean;
   onUploadStatusChange?: (isUploading: boolean) => void;

package/app/components/sidebar/sidebar.tsx

@@ -22,7 +22,6 @@ interface SidebarProps {
   isReadOnly?: boolean;
   isReviewOnlyCase?: boolean;
   isArchivedCase?: boolean;
-  isConfirmed?: boolean;
   confirmationSaveVersion?: number;
   isUploading?: boolean;
   onUploadStatusChange?: (isUploading: boolean) => void;
@@ -43,7 +42,6 @@ export const Sidebar = ({
   isReadOnly = false,
   isReviewOnlyCase = false,
   isArchivedCase = false,
-  isConfirmed = false,
   confirmationSaveVersion = 0,
   isUploading: initialIsUploading = false,
   onUploadStatusChange,
@@ -93,7 +91,6 @@ export const Sidebar = ({
         isReadOnly={isReadOnly}
         isReviewOnlyCase={isReviewOnlyCase}
         isArchivedCase={isArchivedCase}
-        isConfirmed={isConfirmed}
         confirmationSaveVersion={confirmationSaveVersion}
         selectedFileId={imageId}
         isUploading={isUploading}

package/app/routes/striae/striae.tsx

@@ -746,10 +746,10 @@ export const Striae = ({ user }: StriaePage) => {
   const isCurrentImageConfirmed = hasLoadedImage && !!annotationData?.confirmationData;
 
   useEffect(() => {
-    if (showNotes && (!hasLoadedImage || isCurrentImageConfirmed)) {
+    if (showNotes && !hasLoadedImage) {
       setShowNotes(false);
     }
-  }, [showNotes, hasLoadedImage, isCurrentImageConfirmed]);
+  }, [showNotes, hasLoadedImage]);
 
   // Automatic save handler for annotation updates
   const handleAnnotationUpdate = async (data: AnnotationData) => {
@@ -868,7 +868,6 @@ export const Striae = ({ user }: StriaePage) => {
           isReadOnly={isReadOnlyCase}
           isReviewOnlyCase={isReviewOnlyCase}
           isArchivedCase={archiveDetails.archived}
-          isConfirmed={!!annotationData?.confirmationData}
           confirmationSaveVersion={confirmationSaveVersion}
           isUploading={isUploading}
           onUploadStatusChange={setIsUploading}

package/app/types/annotations.ts

@@ -1,6 +1,7 @@
 // Annotation-related types and interfaces
 
-export type ItemType = 'Bullet' | 'Cartridge Case' | 'Shotshell' | 'Other';
+import type { ItemType, SupportLevel, IndexType } from '../../shared/types/annotation-literals';
+export type { ItemType, SupportLevel, IndexType };
 
 export interface BoxAnnotation {
   id: string;
@@ -100,10 +101,10 @@ export interface AnnotationData {
   cartridgeCaseData?: CartridgeCaseAnnotationData;
   shotshellData?: ShotshellAnnotationData;
   hasSubclass?: boolean;
-  indexType?: 'number' | 'color';
+  indexType?: IndexType;
   indexNumber?: string;
   indexColor?: string;
-  supportLevel?: 'ID' | 'Exclusion' | 'Inconclusive';
+  supportLevel?: SupportLevel;
   includeConfirmation: boolean;
   confirmationData?: ConfirmationData;
   leftAdditionalNotes?: string;

package/app/utils/data/permissions.ts

@@ -26,6 +26,16 @@ export interface CaseMetadata {
   createdAt: string;
 }
 
+/**
+ * Result for notes viewing permissions
+ * Determines if notes can be viewed and in what mode (edit or view-only)
+ */
+export interface NotesViewPermission {
+  canOpen: boolean;        // Can the notes panel be opened
+  isReadOnly: boolean;     // Are notes in read-only mode (can view but not edit)
+  reason?: string;         // Reason if notes cannot be opened
+}
+
 /**
  * Get user data from KV store
  */
@@ -565,4 +575,117 @@ export const removeUserCase = async (user: User, caseNumber: string): Promise<vo
     console.error('Error removing case from user:', error);
     throw error;
   }
+};
+
+// ============================================================================
+// NOTES VIEW PERMISSIONS
+// ============================================================================
+
+/**
+ * Determine if notes can be opened and viewed, and whether they should be in read-only mode
+ * 
+ * Notes can be viewed in the following scenarios:
+ * - Normal active case with unconfirmed image: Can edit and save
+ * - Active case with confirmed image: Can view only (read-only)
+ * - Read-only case (review/confirmation case): Can view only (read-only)
+ * - Archived case: Can view only (read-only)
+ * 
+ * Notes cannot be opened when:
+ * - Files are uploading
+ * - Confirmation status is still being checked
+ * - No image is loaded
+ * 
+ * @param config Configuration object with state flags
+ * @returns NotesViewPermission object indicating if notes can be opened and if they're read-only
+ */
+export const getNotesViewPermission = (config: {
+  imageLoaded: boolean;
+  isUploading: boolean;
+  isCheckingConfirmation: boolean;
+  isReadOnlyCase?: boolean;
+  isArchivedCase?: boolean;
+  isConfirmedImage?: boolean;
+}): NotesViewPermission => {
+  const {
+    imageLoaded,
+    isUploading,
+    isCheckingConfirmation,
+    isReadOnlyCase = false,
+    isArchivedCase = false,
+    isConfirmedImage = false
+  } = config;
+
+  // Cannot open if uploading files
+  if (isUploading) {
+    return {
+      canOpen: false,
+      isReadOnly: false,
+      reason: 'Cannot open notes while uploading'
+    };
+  }
+
+  // Cannot open if checking confirmation status
+  if (isCheckingConfirmation) {
+    return {
+      canOpen: false,
+      isReadOnly: false,
+      reason: 'Checking confirmation status...'
+    };
+  }
+
+  // Cannot open if no image is loaded
+  if (!imageLoaded) {
+    return {
+      canOpen: false,
+      isReadOnly: false,
+      reason: 'Select an image first'
+    };
+  }
+
+  // Can open, determine if read-only
+  const isReadOnly = isConfirmedImage || isReadOnlyCase || isArchivedCase;
+
+  return {
+    canOpen: true,
+    isReadOnly
+  };
+};
+
+/**
+ * Get a user-friendly tooltip message for the Image Notes button
+ * 
+ * This centralizes all the tooltip logic that appears in the navbar and sidebar
+ * 
+ * @param permission NotesViewPermission object from getNotesViewPermission
+ * @param additionalContext Optional context for more specific messages
+ * @returns Tooltip string, or undefined if button has no specific tooltip
+ */
+export const getNotesButtonTooltip = (
+  permission: NotesViewPermission,
+  additionalContext?: {
+    isReadOnlyCase?: boolean;
+    isArchivedCase?: boolean;
+    isConfirmedImage?: boolean;
+  }
+): string | undefined => {
+  // If cannot open, return the reason
+  if (!permission.canOpen) {
+    return permission.reason;
+  }
+
+  // Can open - provide context-specific read-only messages
+  if (permission.isReadOnly && additionalContext) {
+    if (additionalContext.isConfirmedImage) {
+      return 'Image notes: viewing only (image is confirmed)';
+    }
+    if (additionalContext.isReadOnlyCase) {
+      return 'Image notes: viewing only (case is read-only)';
+    }
+    if (additionalContext.isArchivedCase) {
+      return 'Image notes: viewing only (case is archived)';
+    }
+  }
+
+  // No tooltip needed for normal edit mode
+  return undefined;
 };

package/package.json

@@ -1,140 +1,141 @@
-{
-  "name": "@striae-org/striae",
-  "version": "6.1.0",
-  "private": false,
-  "description": "Striae is a specialized, cloud-native platform designed to streamline forensic firearms identification by providing an intuitive environment for digital comparison image annotation, authenticated confirmations, and automated report generation.",
-  "license": "Apache-2.0",
-  "homepage": "https://github.com/striae-org/striae/wiki",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/striae-org/striae.git"
-  },
-  "funding": {
-    "type": "github",
-    "url": "https://github.com/sponsors/striae-org"
-  },
-  "bugs": {
-    "url": "https://github.com/striae-org/striae/issues"
-  },
-  "keywords": [
-    "forensics",
-    "firearms",
-    "annotation",
-    "react",
-    "cloudflare-workers",
-    "authenticated",
-    "confirmations",
-    "chain-of-custody",
-    "audit-trail"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "files": [
-    "app/",
-    "!app/config",
-    "!app/routes/auth/login.tsx",
-    "!app/routes/auth/login.module.css",
-    "react-router.config.ts",
-    "load-context.ts",
-    "scripts/",
-    "functions/",
-    "public/",
-    "workers/",
-    "!workers/*/.wrangler",
-    "!workers/*/package-lock.json",
-    "!workers/*/worker-configuration.d.ts",
-    "!workers/*/wrangler.jsonc",
-    "!workers/*/src/**/*worker.ts",
-    "!workers/pdf-worker/src/assets/**/*",
-    "workers/pdf-worker/src/assets/generated-assets.example.ts",
-    "!workers/pdf-worker/src/formats/**/*",
-    "workers/pdf-worker/src/formats/format-striae.ts",
-    ".env.example",
-    "firebase.json",
-    "tsconfig.json",
-    "vite.config.ts",
-    "/worker-configuration.d.ts",
-    "wrangler.toml.example",
-    "LICENSE"
-  ],
-  "sideEffects": false,
-  "type": "module",
-  "scripts": {
-    "deploy:all": "bash ./scripts/deploy-all.sh",
-    "emulators": "firebase emulators:start --only auth",
-    "dev": "node ./scripts/dev.cjs && react-router dev",
-    "build": "node ./scripts/dev.cjs && react-router build",
-    "clean": "rm -rf build node_modules/.cache .cache",
-    "clean:build": "npm run clean && npm run build",
-    "deploy": "npm run build && wrangler pages deploy",
-    "publish:npm": "npm publish --access public --registry=https://registry.npmjs.org --@striae-org:registry=https://registry.npmjs.org",
-    "publish:npm:dry-run": "npm publish --dry-run --access public --registry=https://registry.npmjs.org --@striae-org:registry=https://registry.npmjs.org",
-    "publish:github": "npm publish --registry=https://npm.pkg.github.com --@striae-org:registry=https://npm.pkg.github.com",
-    "publish:github:dry-run": "npm publish --dry-run --registry=https://npm.pkg.github.com --@striae-org:registry=https://npm.pkg.github.com",
-    "publish:all": "npm run publish:npm && npm run publish:github",
-    "publish:all:dry-run": "npm run publish:npm:dry-run && npm run publish:github:dry-run",
-    "lint": "node ./scripts/run-eslint.cjs",
-    "start": "node ./scripts/dev.cjs && wrangler pages dev",
-    "typecheck": "react-router typegen && tsc",
-    "typegen": "wrangler types",
-    "preview": "npm run build && wrangler pages dev",
-    "cf-typegen": "wrangler types",
-    "enable-totp-mfa": "node ./scripts/enable-totp-mfa.mjs",
-    "unenroll-totp-mfa": "node ./scripts/unenroll-totp-mfa.mjs",
-    "update-versions": "node ./scripts/update-markdown-versions.cjs",
-    "update-compatibility-dates": "node ./scripts/update-compatibility-dates.cjs",
-    "deploy-config": "bash ./scripts/deploy-config.sh",
-    "update-env": "bash ./scripts/deploy-config.sh --update-env",
-    "install-workers": "bash ./scripts/install-workers.sh",
-    "deploy-workers": "npm run deploy-workers:audit && npm run deploy-workers:data && npm run deploy-workers:image && npm run deploy-workers:pdf && npm run deploy-workers:user",
-    "deploy-workers:secrets": "bash ./scripts/deploy-worker-secrets.sh",
-    "deploy-pages:secrets": "bash ./scripts/deploy-pages-secrets.sh",
-    "deploy-pages": "bash ./scripts/deploy-pages.sh",
-    "deploy-primershear": "bash ./scripts/deploy-primershear-emails.sh",
-    "deploy-members": "bash ./scripts/deploy-members-emails.sh",
-    "deploy-workers:audit": "cd workers/audit-worker && npm run deploy",
-    "deploy-workers:data": "cd workers/data-worker && npm run deploy",
-    "deploy-workers:image": "cd workers/image-worker && npm run deploy",
-    "deploy-workers:pdf": "cd workers/pdf-worker && npm run deploy",
-    "deploy-workers:user": "cd workers/user-worker && npm run deploy"
-  },
-  "dependencies": {
-    "@react-router/cloudflare": "^7.14.1",
-    "firebase": "^12.12.0",
-    "isbot": "^5.1.38",
-    "jszip": "^3.10.1",
-    "qrcode": "^1.5.4",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
-    "react-router": "^7.14.1"
-  },
-  "devDependencies": {
-    "@react-router/dev": "^7.14.1",
-    "@react-router/fs-routes": "^7.14.1",
-    "@types/qrcode": "^1.5.6",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.58.2",
-    "@typescript-eslint/parser": "^8.58.2",
-    "eslint": "^9.39.4",
-    "eslint-import-resolver-typescript": "^4.4.4",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "firebase-admin": "^13.8.0",
-    "modern-normalize": "^3.0.1",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.2",
-    "vite-tsconfig-paths": "^6.1.1",
-    "wrangler": "^4.82.2"
-  },
-  "overrides": {
-    "@tootallnate/once": "3.0.1"
-  },
-  "engines": {
-    "node": ">=20.19.0"
-  },
-  "packageManager": "npm@11.12.0"
+{
+  "name": "@striae-org/striae",
+  "version": "6.1.2",
+  "private": false,
+  "description": "Striae is a specialized, cloud-native platform designed to streamline forensic firearms identification by providing an intuitive environment for digital comparison image annotation, authenticated confirmations, and automated report generation.",
+  "license": "Apache-2.0",
+  "homepage": "https://github.com/striae-org/striae/wiki",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/striae-org/striae.git"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/striae-org"
+  },
+  "bugs": {
+    "url": "https://github.com/striae-org/striae/issues"
+  },
+  "keywords": [
+    "forensics",
+    "firearms",
+    "annotation",
+    "react",
+    "cloudflare-workers",
+    "authenticated",
+    "confirmations",
+    "chain-of-custody",
+    "audit-trail"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "app/",
+    "!app/config",
+    "!app/routes/auth/login.tsx",
+    "!app/routes/auth/login.module.css",
+    "react-router.config.ts",
+    "load-context.ts",
+    "scripts/",
+    "functions/",
+    "public/",
+    "workers/",
+    "shared/",
+    "!workers/*/.wrangler",
+    "!workers/*/package-lock.json",
+    "!workers/*/worker-configuration.d.ts",
+    "!workers/*/wrangler.jsonc",
+    "!workers/*/src/**/*worker.ts",
+    "!workers/pdf-worker/src/assets/**/*",
+    "workers/pdf-worker/src/assets/generated-assets.example.ts",
+    "!workers/pdf-worker/src/formats/**/*",
+    "workers/pdf-worker/src/formats/format-striae.ts",
+    ".env.example",
+    "firebase.json",
+    "tsconfig.json",
+    "vite.config.ts",
+    "/worker-configuration.d.ts",
+    "wrangler.toml.example",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "deploy:all": "bash ./scripts/deploy-all.sh",
+    "emulators": "firebase emulators:start --only auth",
+    "dev": "node ./scripts/dev.cjs && react-router dev",
+    "build": "node ./scripts/dev.cjs && react-router build",
+    "clean": "rm -rf build node_modules/.cache .cache",
+    "clean:build": "npm run clean && npm run build",
+    "deploy": "npm run build && wrangler pages deploy",
+    "publish:npm": "npm publish --access public --registry=https://registry.npmjs.org --@striae-org:registry=https://registry.npmjs.org",
+    "publish:npm:dry-run": "npm publish --dry-run --access public --registry=https://registry.npmjs.org --@striae-org:registry=https://registry.npmjs.org",
+    "publish:github": "npm publish --registry=https://npm.pkg.github.com --@striae-org:registry=https://npm.pkg.github.com",
+    "publish:github:dry-run": "npm publish --dry-run --registry=https://npm.pkg.github.com --@striae-org:registry=https://npm.pkg.github.com",
+    "publish:all": "npm run publish:npm && npm run publish:github",
+    "publish:all:dry-run": "npm run publish:npm:dry-run && npm run publish:github:dry-run",
+    "lint": "node ./scripts/run-eslint.cjs",
+    "start": "node ./scripts/dev.cjs && wrangler pages dev",
+    "typecheck": "react-router typegen && tsc",
+    "typegen": "wrangler types",
+    "preview": "npm run build && wrangler pages dev",
+    "cf-typegen": "wrangler types",
+    "enable-totp-mfa": "node ./scripts/enable-totp-mfa.mjs",
+    "unenroll-totp-mfa": "node ./scripts/unenroll-totp-mfa.mjs",
+    "update-versions": "node ./scripts/update-markdown-versions.cjs",
+    "update-compatibility-dates": "node ./scripts/update-compatibility-dates.cjs",
+    "deploy-config": "bash ./scripts/deploy-config.sh",
+    "update-env": "bash ./scripts/deploy-config.sh --update-env",
+    "install-workers": "bash ./scripts/install-workers.sh",
+    "deploy-workers": "npm run deploy-workers:audit && npm run deploy-workers:data && npm run deploy-workers:image && npm run deploy-workers:pdf && npm run deploy-workers:user",
+    "deploy-workers:secrets": "bash ./scripts/deploy-worker-secrets.sh",
+    "deploy-pages:secrets": "bash ./scripts/deploy-pages-secrets.sh",
+    "deploy-pages": "bash ./scripts/deploy-pages.sh",
+    "deploy-primershear": "bash ./scripts/deploy-primershear-emails.sh",
+    "deploy-members": "bash ./scripts/deploy-members-emails.sh",
+    "deploy-workers:audit": "cd workers/audit-worker && npm run deploy",
+    "deploy-workers:data": "cd workers/data-worker && npm run deploy",
+    "deploy-workers:image": "cd workers/image-worker && npm run deploy",
+    "deploy-workers:pdf": "cd workers/pdf-worker && npm run deploy",
+    "deploy-workers:user": "cd workers/user-worker && npm run deploy"
+  },
+  "dependencies": {
+    "@react-router/cloudflare": "^7.14.1",
+    "firebase": "^12.12.0",
+    "isbot": "^5.1.38",
+    "jszip": "^3.10.1",
+    "qrcode": "^1.5.4",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-router": "^7.14.1"
+  },
+  "devDependencies": {
+    "@react-router/dev": "^7.14.1",
+    "@react-router/fs-routes": "^7.14.1",
+    "@types/qrcode": "^1.5.6",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.58.2",
+    "@typescript-eslint/parser": "^8.58.2",
+    "eslint": "^9.39.4",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "firebase-admin": "^13.8.0",
+    "modern-normalize": "^3.0.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.2",
+    "vite-tsconfig-paths": "^6.1.1",
+    "wrangler": "^4.83.0"
+  },
+  "overrides": {
+    "@tootallnate/once": "3.0.1"
+  },
+  "engines": {
+    "node": ">=20.19.0"
+  },
+  "packageManager": "npm@11.12.0"
 }

package/shared/types/annotation-literals.ts

@@ -0,0 +1,5 @@
+// Shared annotation literal unions used by app and workers.
+
+export type ItemType = 'Bullet' | 'Cartridge Case' | 'Shotshell' | 'Other';
+export type SupportLevel = 'ID' | 'Exclusion' | 'Inconclusive';
+export type IndexType = 'number' | 'color';

package/workers/audit-worker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "audit-worker",
-  "version": "6.1.0",
+  "version": "6.1.2",
   "private": true,
   "scripts": {
     "deploy": "wrangler deploy",
@@ -8,6 +8,6 @@
     "start": "wrangler dev"
   },
   "devDependencies": {
-    "wrangler": "^4.82.2"
+    "wrangler": "^4.83.0"
   }
 }

package/workers/audit-worker/wrangler.jsonc.example

@@ -7,7 +7,7 @@
   "name": "AUDIT_WORKER_NAME",
   "account_id": "ACCOUNT_ID",
   "main": "src/audit-worker.ts",
-  "compatibility_date": "2026-04-14",
+  "compatibility_date": "2026-04-15",
   "compatibility_flags": [
     "nodejs_compat"
   ], 

package/workers/data-worker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "data-worker",
-  "version": "6.1.0",
+  "version": "6.1.2",
   "private": true,
   "scripts": {
     "deploy": "wrangler deploy",
@@ -8,6 +8,6 @@
     "start": "wrangler dev"
   },
   "devDependencies": {
-    "wrangler": "^4.82.2"
+    "wrangler": "^4.83.0"
   }
 }

package/workers/data-worker/wrangler.jsonc.example

@@ -5,7 +5,7 @@
   "name": "DATA_WORKER_NAME",
   "account_id": "ACCOUNT_ID",
   "main": "src/data-worker.ts",
-  "compatibility_date": "2026-04-14",
+  "compatibility_date": "2026-04-15",
   "compatibility_flags": [
     "nodejs_compat"
   ], 

package/workers/image-worker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "image-worker",
-  "version": "6.1.0",
+  "version": "6.1.2",
   "private": true,
   "scripts": {
     "deploy": "wrangler deploy",
@@ -8,6 +8,6 @@
     "start": "wrangler dev"
   },
   "devDependencies": {
-    "wrangler": "^4.82.2"
+    "wrangler": "^4.83.0"
   }
 }

package/workers/image-worker/wrangler.jsonc.example

@@ -2,7 +2,7 @@
   "name": "IMAGES_WORKER_NAME",
   "account_id": "ACCOUNT_ID",
   "main": "src/image-worker.ts",
-  "compatibility_date": "2026-04-14",
+  "compatibility_date": "2026-04-15",
   "compatibility_flags": [
     "nodejs_compat"
   ], 

package/workers/pdf-worker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pdf-worker",
-  "version": "6.1.0",
+  "version": "6.1.2",
   "private": true,
   "scripts": {
     "generate:assets": "node scripts/generate-assets.js",
@@ -9,6 +9,6 @@
     "start": "wrangler dev"
   },
   "devDependencies": {
-    "wrangler": "^4.82.2"
+    "wrangler": "^4.83.0"
   }
 }

package/workers/pdf-worker/src/report-types.ts

@@ -1,3 +1,5 @@
+import type { IndexType, SupportLevel } from '../../../shared/types/annotation-literals';
+
 export interface BoxAnnotation {
   x: number;
   y: number;
@@ -16,7 +18,7 @@ export interface ConfirmationData {
 
 export interface AnnotationData {
   // Index annotations
-  indexType?: 'number' | 'color';
+  indexType?: IndexType;
   indexNumber?: string;
   indexColor?: string;
 
@@ -31,7 +33,7 @@ export interface AnnotationData {
   boxAnnotations?: BoxAnnotation[];
 
   // ID/Support level annotations
-  supportLevel?: 'ID' | 'Exclusion' | 'Inconclusive';
+  supportLevel?: SupportLevel;
 
   // Class annotations (left/right per-item)
   leftItemType?: string;

package/workers/pdf-worker/wrangler.jsonc.example

@@ -2,7 +2,7 @@
   "name": "PDF_WORKER_NAME",
   "account_id": "ACCOUNT_ID",
   "main": "src/pdf-worker.ts",
-  "compatibility_date": "2026-04-14",
+  "compatibility_date": "2026-04-15",
   "compatibility_flags": [
     "nodejs_compat"
   ],

package/workers/user-worker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "user-worker",
-  "version": "6.1.0",
+  "version": "6.1.2",
   "private": true,
   "scripts": {
     "deploy": "wrangler deploy",
@@ -8,6 +8,6 @@
     "start": "wrangler dev"
   },
   "devDependencies": {
-    "wrangler": "^4.82.2"
+    "wrangler": "^4.83.0"
   }
 }

package/workers/user-worker/wrangler.jsonc.example

@@ -2,7 +2,7 @@
   "name": "USER_WORKER_NAME",
   "account_id": "ACCOUNT_ID",
   "main": "src/user-worker.ts",
-  "compatibility_date": "2026-04-14",
+  "compatibility_date": "2026-04-15",
   "compatibility_flags": [
     "nodejs_compat"
   ], 

package/wrangler.toml.example

@@ -1,6 +1,6 @@
 #:schema node_modules/wrangler/config-schema.json
 name = "PAGES_PROJECT_NAME"
-compatibility_date = "2026-04-14"
+compatibility_date = "2026-04-15"
 compatibility_flags = ["nodejs_compat"]
 pages_build_output_dir = "./build/client"