@striae-org/striae 6.0.1 → 6.1.0

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

@@ -13,6 +13,7 @@ interface NotesEditorModalProps {
   originalFileName?: string;
   onAnnotationRefresh?: () => void;
   isUploading?: boolean;
+  isReadOnly?: boolean;
   showNotification?: (message: string, type: 'success' | 'error' | 'warning') => void;
 }
 
@@ -25,6 +26,7 @@ export const NotesEditorModal = ({
   originalFileName,
   onAnnotationRefresh,
   isUploading = false,
+  isReadOnly = false,
   showNotification,
 }: NotesEditorModalProps) => {
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
@@ -186,6 +188,7 @@ export const NotesEditorModal = ({
             onAnnotationRefresh={onAnnotationRefresh}
             originalFileName={originalFileName}
             isUploading={isUploading}
+            isReadOnly={isReadOnly}
             showNotification={showNotification}
             onDirtyChange={handleDirtyChange}
             onRegisterSaveHandler={handleRegisterSaveHandler}

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

@@ -54,6 +54,26 @@
   padding-top: 1.25rem;
 }
 
+.itemSelectorRow {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.itemSelectorRow label {
+  font-weight: 500;
+  font-size: 0.875rem;
+}
+
+.itemSelectorRow select {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  background-color: white;
+  font-size: 0.875rem;
+}
+
 @media (max-width: 980px) {
   .editorLayout .caseNumbers,
   .compactSectionGrid {
@@ -249,14 +269,14 @@ textarea:focus {
 
 /* Class Details Panel — replaces placeholder in right column */
 
-.classDetailsPanel {
+.itemDetailsPanel {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   min-height: 150px;
 }
 
-.classDetailsButton {
+.itemDetailsButton {
   width: 100%;
   padding: 0.65rem 1rem;
   background: transparent;
@@ -270,18 +290,18 @@ textarea:focus {
   text-align: center;
 }
 
-.classDetailsButton:hover:not(:disabled) {
+.itemDetailsButton:hover:not(:disabled) {
   background-color: color-mix(in lab, var(--primary) 10%, transparent);
 }
 
-.classDetailsButton:disabled {
+.itemDetailsButton:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
 /* Class Details Modal */
 
-.classDetailsModal {
+.itemDetailsModal {
   max-width: 680px;
   max-height: 80vh;
   display: flex;
@@ -289,7 +309,7 @@ textarea:focus {
   gap: 1rem;
 }
 
-.classDetailsContent {
+.itemDetailsContent {
   overflow-y: auto;
   flex: 1;
   min-height: 0;
@@ -301,13 +321,13 @@ textarea:focus {
   scrollbar-width: thin;
 }
 
-.classDetailsSection {
+.itemDetailsSection {
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }
 
-.classDetailsSectionHeader {
+.itemDetailsSectionHeader {
   margin: 0;
   font-size: 0.95rem;
   font-weight: 700;
@@ -316,29 +336,29 @@ textarea:focus {
   border-bottom: 1.5px solid #dee2e6;
 }
 
-.classDetailsFieldGrid {
+.itemDetailsFieldGrid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0.85rem 1.25rem;
 }
 
-.classDetailsField {
+.itemDetailsField {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
 }
 
-.classDetailsFieldFull {
+.itemDetailsFieldFull {
   grid-column: 1 / -1;
 }
 
-.classDetailsLabel {
+.itemDetailsLabel {
   font-size: 0.8rem;
   font-weight: 600;
   color: #495057;
 }
 
-.classDetailsInput {
+.itemDetailsInput {
   padding: 0.5rem 0.65rem;
   border: 1.5px solid #ced4da;
   border-radius: 6px;
@@ -348,23 +368,23 @@ textarea:focus {
   box-sizing: border-box;
 }
 
-.classDetailsInput:focus {
+.itemDetailsInput:focus {
   border-color: var(--primary);
   outline: none;
 }
 
-.classDetailsInput:disabled {
+.itemDetailsInput:disabled {
   background-color: #f8f9fa;
   cursor: not-allowed;
 }
 
-.classDetailsCheckboxGroup {
+.itemDetailsCheckboxGroup {
   display: flex;
   flex-wrap: wrap;
   gap: 0.4rem 1.25rem;
 }
 
-.classDetailsCheckboxLabel {
+.itemDetailsCheckboxLabel {
   display: flex;
   align-items: center;
   gap: 0.4rem;
@@ -373,11 +393,11 @@ textarea:focus {
   cursor: pointer;
 }
 
-.classDetailsCheckboxLabel input[type="checkbox"] {
+.itemDetailsCheckboxLabel input[type="checkbox"] {
   cursor: pointer;
 }
 
-.classDetailsCheckboxLabel input[type="checkbox"]:disabled {
+.itemDetailsCheckboxLabel input[type="checkbox"]:disabled {
   cursor: not-allowed;
 }
 
@@ -697,7 +717,7 @@ textarea:focus {
   justify-content: center;
 }
 
-.classDetailsModalButtons .classDetailsModalAction {
+.itemDetailsModalButtons .itemDetailsModalAction {
   min-height: 42px;
   margin: 0;
   display: inline-flex;

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

@@ -24,6 +24,7 @@ interface SidebarContainerProps {
   setShowNotes: (show: boolean) => void;
   onAnnotationRefresh?: () => void;
   isReadOnly?: boolean;
+  isReviewOnlyCase?: boolean;
   isArchivedCase?: boolean;
   isConfirmed?: boolean;
   confirmationSaveVersion?: number;

package/app/components/sidebar/sidebar.tsx

@@ -20,6 +20,7 @@ interface SidebarProps {
   setShowNotes: (show: boolean) => void;
   onAnnotationRefresh?: () => void;
   isReadOnly?: boolean;
+  isReviewOnlyCase?: boolean;
   isArchivedCase?: boolean;
   isConfirmed?: boolean;
   confirmationSaveVersion?: number;
@@ -40,6 +41,7 @@ export const Sidebar = ({
   setFiles,
   setShowNotes,
   isReadOnly = false,
+  isReviewOnlyCase = false,
   isArchivedCase = false,
   isConfirmed = false,
   confirmationSaveVersion = 0,
@@ -89,6 +91,7 @@ export const Sidebar = ({
         setFiles={setFiles}
         onNotesClick={() => setShowNotes(true)}
         isReadOnly={isReadOnly}
+        isReviewOnlyCase={isReviewOnlyCase}
         isArchivedCase={isArchivedCase}
         isConfirmed={isConfirmed}
         confirmationSaveVersion={confirmationSaveVersion}

package/app/components/toolbar/toolbar.tsx

@@ -3,7 +3,7 @@ import { Button } from '../button/button';
 import { ToolbarColorSelector } from './toolbar-color-selector';
 import styles from './toolbar.module.css';
 
-type ToolId = 'number' | 'class' | 'index' | 'id' | 'notes' | 'print' | 'visibility' | 'box';
+type ToolId = 'number' | 'item' | 'index' | 'id' | 'notes' | 'print' | 'visibility' | 'box';
 
 interface ToolbarProps {
   onToolSelect?: (toolId: ToolId, active: boolean) => void;
@@ -125,10 +125,10 @@ export const Toolbar = ({
         ariaLabel="Case & Item Numbers"
       />
       <Button
-        iconId="class"
-        isActive={activeTools.has('class')}
-        onClick={() => handleToolClick('class')}
-        ariaLabel="Class Characteristics"
+        iconId="item"
+        isActive={activeTools.has('item')}
+        onClick={() => handleToolClick('item')}
+        ariaLabel="Item Type"
       />
       <Button
         iconId="index"

package/app/hooks/useFileListPreferences.ts

@@ -3,7 +3,7 @@ import {
   type FilesModalPreferences,
   type FilesModalSortBy,
   type FilesModalConfirmationFilter,
-  type FilesModalClassTypeFilter,
+  type FilesModalItemTypeFilter,
 } from '~/utils/data/file-filters';
 
 const FILES_MODAL_PREFERENCES_STORAGE_KEY = 'striae.filesModal.preferences';
@@ -11,7 +11,7 @@ const FILES_MODAL_PREFERENCES_STORAGE_KEY = 'striae.filesModal.preferences';
 export const DEFAULT_FILES_MODAL_PREFERENCES: FilesModalPreferences = {
   sortBy: 'recent',
   confirmationFilter: 'all',
-  classTypeFilter: 'all',
+  itemTypeFilter: 'all',
 };
 
 function parseStoredPreferences(value: string | null): FilesModalPreferences {
@@ -25,7 +25,7 @@ function parseStoredPreferences(value: string | null): FilesModalPreferences {
     const sortBy: FilesModalSortBy =
       parsed.sortBy === 'filename' ||
       parsed.sortBy === 'confirmation' ||
-      parsed.sortBy === 'classType' ||
+      parsed.sortBy === 'itemType' ||
       parsed.sortBy === 'recent'
         ? parsed.sortBy
         : DEFAULT_FILES_MODAL_PREFERENCES.sortBy;
@@ -38,21 +38,26 @@ function parseStoredPreferences(value: string | null): FilesModalPreferences {
         ? parsed.confirmationFilter
         : DEFAULT_FILES_MODAL_PREFERENCES.confirmationFilter;
 
-    const classTypeFilter: FilesModalClassTypeFilter =
-      parsed.classTypeFilter === 'Bullet' ||
-      parsed.classTypeFilter === 'Cartridge Case' ||
-      parsed.classTypeFilter === 'Shotshell' ||
-      parsed.classTypeFilter === 'Other' ||
-      parsed.classTypeFilter === 'all'
-        ? parsed.classTypeFilter
-        : parsed.classTypeFilter === 'unset'
-          ? 'Other'
-        : DEFAULT_FILES_MODAL_PREFERENCES.classTypeFilter;
+    // Support both new 'itemTypeFilter' and legacy 'classTypeFilter' properties
+    const itemTypeFilter: FilesModalItemTypeFilter =
+      parsed.itemTypeFilter === 'Bullet' ||
+      parsed.itemTypeFilter === 'Cartridge Case' ||
+      parsed.itemTypeFilter === 'Shotshell' ||
+      parsed.itemTypeFilter === 'Other' ||
+      parsed.itemTypeFilter === 'all'
+        ? parsed.itemTypeFilter
+        : parsed.classTypeFilter === 'Bullet' ||
+          parsed.classTypeFilter === 'Cartridge Case' ||
+          parsed.classTypeFilter === 'Shotshell' ||
+          parsed.classTypeFilter === 'Other' ||
+          parsed.classTypeFilter === 'all'
+          ? parsed.classTypeFilter
+          : 'all';
 
     return {
       sortBy,
       confirmationFilter,
-      classTypeFilter,
+      itemTypeFilter,
     };
   } catch {
     return DEFAULT_FILES_MODAL_PREFERENCES;
@@ -88,8 +93,8 @@ export function useFileListPreferences() {
     setPreferences((current) => ({ ...current, confirmationFilter }));
   };
 
-  const setClassTypeFilter = (classTypeFilter: FilesModalClassTypeFilter) => {
-    setPreferences((current) => ({ ...current, classTypeFilter }));
+  const setItemTypeFilter = (itemTypeFilter: FilesModalItemTypeFilter) => {
+    setPreferences((current) => ({ ...current, itemTypeFilter }));
   };
 
   const resetPreferences = () => {
@@ -100,7 +105,7 @@ export function useFileListPreferences() {
     preferences,
     setSortBy,
     setConfirmationFilter,
-    setClassTypeFilter,
+    setItemTypeFilter,
     resetPreferences,
   };
 }

package/app/routes/striae/striae.tsx

@@ -677,24 +677,16 @@ export const Striae = ({ user }: StriaePage) => {
         const notes = await getNotes(user, currentCase, imageId);
         if (notes) {
           setAnnotationData({
+            ...notes,
             leftCase: notes.leftCase || '',
             rightCase: notes.rightCase || '',
             leftItem: notes.leftItem || '',
             rightItem: notes.rightItem || '',
             caseFontColor: notes.caseFontColor || '#FFDE21',
-            classType: notes.classType || 'Other',
-            customClass: notes.customClass,
-            classNote: notes.classNote, // Optional - pass as-is
             indexType: notes.indexType || 'number',
-            indexNumber: notes.indexNumber,
-            indexColor: notes.indexColor,
             supportLevel: notes.supportLevel || 'Inconclusive',
-            hasSubclass: notes.hasSubclass,
-            includeConfirmation: notes.includeConfirmation ?? false, // Required
-            confirmationData: notes.confirmationData, // Add imported confirmation data
-            additionalNotes: notes.additionalNotes, // Optional - pass as-is
+            includeConfirmation: notes.includeConfirmation ?? false,
             boxAnnotations: notes.boxAnnotations || [],
-            earliestAnnotationTimestamp: notes.earliestAnnotationTimestamp,
             updatedAt: notes.updatedAt || new Date().toISOString()
           });
         } else {
@@ -874,6 +866,7 @@ export const Striae = ({ user }: StriaePage) => {
           setShowNotes={setShowNotes}
           onAnnotationRefresh={refreshAnnotationData}
           isReadOnly={isReadOnlyCase}
+          isReviewOnlyCase={isReviewOnlyCase}
           isArchivedCase={archiveDetails.archived}
           isConfirmed={!!annotationData?.confirmationData}
           confirmationSaveVersion={confirmationSaveVersion}
@@ -954,6 +947,7 @@ export const Striae = ({ user }: StriaePage) => {
         onAnnotationRefresh={refreshAnnotationData}
         originalFileName={files.find(file => file.id === imageId)?.originalFilename}
         isUploading={isUploading}
+        isReadOnly={isReadOnlyCase}
         showNotification={showNotification}
       />
       <UserAuditViewer

package/app/types/annotations.ts

@@ -1,5 +1,7 @@
 // Annotation-related types and interfaces
 
+export type ItemType = 'Bullet' | 'Cartridge Case' | 'Shotshell' | 'Other';
+
 export interface BoxAnnotation {
   id: string;
   x: number;
@@ -72,19 +74,40 @@ export interface AnnotationData {
   leftItem: string;
   rightItem: string;
   caseFontColor?: string;
-  classType?: 'Bullet' | 'Cartridge Case' | 'Shotshell' | 'Other';
+  // Left item class characteristics
+  leftItemType?: ItemType;
+  leftCustomClass?: string;
+  leftClassNote?: string;
+  leftBulletData?: BulletAnnotationData;
+  leftCartridgeCaseData?: CartridgeCaseAnnotationData;
+  leftShotshellData?: ShotshellAnnotationData;
+  leftHasSubclass?: boolean;
+  // Right item class characteristics
+  rightItemType?: ItemType;
+  rightCustomClass?: string;
+  rightClassNote?: string;
+  rightBulletData?: BulletAnnotationData;
+  rightCartridgeCaseData?: CartridgeCaseAnnotationData;
+  rightShotshellData?: ShotshellAnnotationData;
+  rightHasSubclass?: boolean;
+  // Deprecated (kept for backward compatibility): use leftItemType, rightItemType, etc.
+  itemType?: ItemType;
+  /** @deprecated Pre-split legacy field; use leftItemType / rightItemType instead. */
+  classType?: string;
   customClass?: string;
   classNote?: string;
-  indexType?: 'number' | 'color';
-  indexNumber?: string;
-  indexColor?: string;
-  supportLevel?: 'ID' | 'Exclusion' | 'Inconclusive';
   bulletData?: BulletAnnotationData;
   cartridgeCaseData?: CartridgeCaseAnnotationData;
   shotshellData?: ShotshellAnnotationData;
   hasSubclass?: boolean;
+  indexType?: 'number' | 'color';
+  indexNumber?: string;
+  indexColor?: string;
+  supportLevel?: 'ID' | 'Exclusion' | 'Inconclusive';
   includeConfirmation: boolean;
   confirmationData?: ConfirmationData;
+  leftAdditionalNotes?: string;
+  rightAdditionalNotes?: string;
   additionalNotes?: string;
   boxAnnotations?: BoxAnnotation[];
   updatedAt: string;

package/app/utils/data/confirmation-summary/summary-core.ts

@@ -1,11 +1,13 @@
 import type { User } from 'firebase/auth';
-import { type AnnotationData } from '~/types';
+import { type AnnotationData, type ItemType } from '~/types';
 
 export interface FileConfirmationSummary {
   includeConfirmation: boolean;
   isConfirmed: boolean;
   updatedAt: string;
-  classType?: 'Bullet' | 'Cartridge Case' | 'Shotshell' | 'Other';
+  itemType?: ItemType;
+  leftItemType?: ItemType;
+  rightItemType?: ItemType;
 }
 
 export interface CaseConfirmationSummary {
@@ -195,8 +197,17 @@ function normalizeFileConfirmationSummary(value: unknown): FileConfirmationSumma
     };
   }
 
-  const classType = value.classType;
-  const normalizedClassType = typeof classType === 'string' && ['Bullet', 'Cartridge Case', 'Shotshell', 'Other'].includes(classType) ? (classType as 'Bullet' | 'Cartridge Case' | 'Shotshell' | 'Other') : undefined;
+  // Support both new 'itemType' and legacy 'classType' properties
+  const itemType = value.itemType ?? value.classType;
+  const normalizedItemType = typeof itemType === 'string' && ['Bullet', 'Cartridge Case', 'Shotshell', 'Other'].includes(itemType) ? (itemType as ItemType) : undefined;
+  const normalizedLeftItemType =
+    typeof value.leftItemType === 'string' && ['Bullet', 'Cartridge Case', 'Shotshell', 'Other'].includes(value.leftItemType)
+      ? (value.leftItemType as ItemType)
+      : undefined;
+  const normalizedRightItemType =
+    typeof value.rightItemType === 'string' && ['Bullet', 'Cartridge Case', 'Shotshell', 'Other'].includes(value.rightItemType)
+      ? (value.rightItemType as ItemType)
+      : undefined;
 
   const summary: FileConfirmationSummary = {
     includeConfirmation: value.includeConfirmation === true,
@@ -204,8 +215,16 @@ function normalizeFileConfirmationSummary(value: unknown): FileConfirmationSumma
     updatedAt: typeof value.updatedAt === 'string' && value.updatedAt.length > 0 ? value.updatedAt : getIsoNow()
   };
 
-  if (normalizedClassType) {
-    summary.classType = normalizedClassType;
+  if (normalizedItemType) {
+    summary.itemType = normalizedItemType;
+  }
+
+  if (normalizedLeftItemType) {
+    summary.leftItemType = normalizedLeftItemType;
+  }
+
+  if (normalizedRightItemType) {
+    summary.rightItemType = normalizedRightItemType;
   }
 
   return summary;
@@ -237,6 +256,8 @@ export function computeCaseConfirmationAggregate(filesById: Record<string, FileC
 
 export function toFileConfirmationSummary(annotationData: AnnotationData | null): FileConfirmationSummary {
   const includeConfirmation = annotationData?.includeConfirmation === true;
+  const leftItemType = annotationData?.leftItemType || annotationData?.itemType || (annotationData?.classType as ItemType | undefined);
+  const rightItemType = annotationData?.rightItemType;
 
   const summary: FileConfirmationSummary = {
     includeConfirmation,
@@ -244,8 +265,19 @@ export function toFileConfirmationSummary(annotationData: AnnotationData | null)
     updatedAt: getIsoNow()
   };
 
-  if (annotationData?.classType) {
-    summary.classType = annotationData.classType;
+  if (leftItemType) {
+    summary.leftItemType = leftItemType;
+  }
+
+  if (rightItemType) {
+    summary.rightItemType = rightItemType;
+  }
+
+  // Keep legacy single-value item type for existing consumers.
+  if (leftItemType) {
+    summary.itemType = leftItemType;
+  } else if (rightItemType) {
+    summary.itemType = rightItemType;
   }
 
   return summary;

package/app/utils/data/file-filters.ts

@@ -1,7 +1,7 @@
 import type { FileData } from '~/types';
 import type { FileConfirmationSummary } from '~/utils/data';
 
-export type FilesModalSortBy = 'recent' | 'filename' | 'confirmation' | 'classType';
+export type FilesModalSortBy = 'recent' | 'filename' | 'confirmation' | 'itemType';
 
 export type FilesModalConfirmationFilter =
   | 'all'
@@ -9,17 +9,22 @@ export type FilesModalConfirmationFilter =
   | 'confirmed'
   | 'none-requested';
 
-export type FilesModalClassTypeFilter =
+export type FilesModalItemTypeFilter =
   | 'all'
   | 'Bullet'
   | 'Cartridge Case'
   | 'Shotshell'
   | 'Other';
 
+// Backwards compatibility alias
+export type FilesModalClassTypeFilter = FilesModalItemTypeFilter;
+
 export interface FilesModalPreferences {
   sortBy: FilesModalSortBy;
   confirmationFilter: FilesModalConfirmationFilter;
-  classTypeFilter: FilesModalClassTypeFilter;
+  itemTypeFilter: FilesModalItemTypeFilter;
+  // Backwards compatibility: legacy classTypeFilter will be migrated to itemTypeFilter
+  classTypeFilter?: FilesModalItemTypeFilter;
 }
 
 export type FileConfirmationById = Record<string, FileConfirmationSummary>;
@@ -34,6 +39,21 @@ function getFileConfirmationState(fileId: string, statusById: FileConfirmationBy
   return statusById[fileId] || DEFAULT_CONFIRMATION_SUMMARY;
 }
 
+function getSummaryItemTypes(summary: FileConfirmationSummary): Array<NonNullable<FileConfirmationSummary['itemType']>> {
+  const types = [
+    summary.leftItemType,
+    summary.rightItemType,
+    summary.itemType,
+  ].filter((value): value is NonNullable<FileConfirmationSummary['itemType']> => Boolean(value));
+
+  return Array.from(new Set(types));
+}
+
+function getPrimaryItemType(summary: FileConfirmationSummary): FileConfirmationSummary['itemType'] {
+  const [first] = getSummaryItemTypes(summary);
+  return first;
+}
+
 function getConfirmationRank(summary: FileConfirmationSummary): number {
   if (summary.includeConfirmation && !summary.isConfirmed) {
     return 0;
@@ -46,20 +66,20 @@ function getConfirmationRank(summary: FileConfirmationSummary): number {
   return 2;
 }
 
-function getClassTypeRank(classType: FileConfirmationSummary['classType']): number {
-  if (classType === 'Bullet') {
+function getItemTypeRank(itemType: FileConfirmationSummary['itemType']): number {
+  if (itemType === 'Bullet') {
     return 0;
   }
 
-  if (classType === 'Cartridge Case') {
+  if (itemType === 'Cartridge Case') {
     return 1;
   }
 
-  if (classType === 'Shotshell') {
+  if (itemType === 'Shotshell') {
     return 2;
   }
 
-  if (classType === 'Other') {
+  if (itemType === 'Other') {
     return 3;
   }
 
@@ -90,20 +110,22 @@ function matchesConfirmationFilter(
   return !summary.includeConfirmation;
 }
 
-function matchesClassTypeFilter(
+function matchesItemTypeFilter(
   summary: FileConfirmationSummary,
-  classTypeFilter: FilesModalClassTypeFilter
+  itemTypeFilter: FilesModalItemTypeFilter
 ): boolean {
-  if (classTypeFilter === 'all') {
+  if (itemTypeFilter === 'all') {
     return true;
   }
 
-  if (classTypeFilter === 'Other') {
-    // Treat legacy/unset class types as Other for filtering.
-    return summary.classType === 'Other' || !summary.classType;
+  const itemTypes = getSummaryItemTypes(summary);
+
+  if (itemTypeFilter === 'Other') {
+    // Treat legacy/unset item types as Other for filtering.
+    return itemTypes.length === 0 || itemTypes.includes('Other');
   }
 
-  return summary.classType === classTypeFilter;
+  return itemTypes.includes(itemTypeFilter);
 }
 
 function matchesSearch(file: FileData, query: string): boolean {
@@ -127,7 +149,7 @@ export function filterFilesForModal(
     return (
       matchesSearch(file, searchQuery) &&
       matchesConfirmationFilter(summary, preferences.confirmationFilter) &&
-      matchesClassTypeFilter(summary, preferences.classTypeFilter)
+      matchesItemTypeFilter(summary, preferences.itemTypeFilter)
     );
   });
 }
@@ -177,7 +199,7 @@ export function sortFilesForModal(
   return next.sort((left, right) => {
     const leftSummary = getFileConfirmationState(left.id, statusById);
     const rightSummary = getFileConfirmationState(right.id, statusById);
-    const difference = getClassTypeRank(leftSummary.classType) - getClassTypeRank(rightSummary.classType);
+    const difference = getItemTypeRank(getPrimaryItemType(leftSummary)) - getItemTypeRank(getPrimaryItemType(rightSummary));
 
     if (difference !== 0) {
       return difference;