Case Sidebar Component (case-sidebar.tsx)

Types

CaseSidebarProps

Props for the CaseSidebar component, including:

• user: The current authenticated user.

• onImageSelect: Callback for when an image is selected.

• onCaseChange: Callback for when the case changes.

• imageLoaded, setImageLoaded: Image loading state and setter.

• onNotesClick: Callback to open the notes sidebar.

• files, setFiles: List of files and setter.

• caseNumber, setCaseNumber: Current input for case number and setter.

• currentCase, setCurrentCase: The currently selected case and setter.

• error, setError: Error message and setter.

• successAction, setSuccessAction: Tracks the last successful action and setter.

FileData

Represents a file associated with a case:

• id: File identifier.

• originalFilename: Original file name.

• uploadedAt: Upload timestamp.

---

Component

CaseSidebar(props: CaseSidebarProps)

A sidebar UI for case and file management.

State:

• isDeletingCase: Whether a case is being deleted.

• isRenaming: Whether a case is being renamed.

• isLoading: Whether a case or files are loading.

• isModalOpen: Whether the case list modal is open.

• isUploadingFile: Whether a file is being uploaded.

• uploadProgress: Progress percentage for file upload.

• fileError: Error message for file upload/delete.

• newCaseName: Input for renaming a case.

Effects:

• Loads files for the selected case when currentCase changes.

Main Features:

• Case Management:

  • Create or load a case by entering a case number.

  • List all cases in a modal.

  • Rename or delete the current case.

• File Management:

  • Upload image files (PNG, GIF, JPEG, WEBP, SVG, max 10MB).

  • View, select, and delete files for the current case.

  • Shows upload progress and error messages.

• Notes Access:

  • Button to open the notes sidebar for the selected image.

• Feedback:

  • Displays error and success messages for user actions.

Accessibility:

• File upload and delete actions are accessible via keyboard and screen readers.