@striae-org/striae 4.2.0 → 4.2.1

package/LICENSE

@@ -175,7 +175,7 @@
 
    END OF TERMS AND CONDITIONS  
 
-   Striae © 2025. All rights reserved.
+   © 2025 Stephen J. Lu
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

package/app/components/actions/case-manage.ts

@@ -11,9 +11,10 @@ import {
   deleteCaseData,
   duplicateCaseData,
   deleteFileAnnotations,
-  signForensicManifest
+  signForensicManifest,
+  removeCaseConfirmationSummary
 } from '~/utils/data';
-import { type CaseData, type ReadOnlyCaseData, type FileData, type AuditTrail } from '~/types';
+import { type CaseData, type ReadOnlyCaseData, type FileData, type AuditTrail, type CaseExportData } from '~/types';
 import { auditService } from '~/services/audit';
 import { fetchImageApi } from '~/utils/api';
 import { exportCaseData, formatDateForFilename } from '~/components/actions/case-export';
@@ -569,6 +570,13 @@ export const deleteCase = async (user: User, caseNumber: string): Promise<Delete
       // Delete case data using centralized function (skip validation since user no longer has access)
       await deleteCaseData(user, caseNumber, { skipValidation: true });
 
+      // Clean up confirmation status metadata for this case
+      try {
+        await removeCaseConfirmationSummary(user, caseNumber);
+      } catch (summaryError) {
+        console.warn(`Failed to remove confirmation summary for case ${caseNumber}:`, summaryError);
+      }
+
       // Add a small delay before audit logging to reduce rate limiting
       await new Promise(resolve => setTimeout(resolve, 100));
 
@@ -593,6 +601,13 @@ export const deleteCase = async (user: User, caseNumber: string): Promise<Delete
     // Delete case data using centralized function (skip validation since user no longer has access)
     await deleteCaseData(user, caseNumber, { skipValidation: true });
 
+    // Clean up confirmation status metadata for this case
+    try {
+      await removeCaseConfirmationSummary(user, caseNumber);
+    } catch (summaryError) {
+      console.warn(`Failed to remove confirmation summary for case ${caseNumber}:`, summaryError);
+    }
+
     // Add a small delay before audit logging to reduce rate limiting
     await new Promise(resolve => setTimeout(resolve, 100));
 
@@ -736,22 +751,19 @@ export const archiveCase = async (
       isReadOnly: true,
     } as CaseData;
 
-    await updateCaseData(user, caseNumber, archiveData);
-
-    await auditService.logCaseArchive(
-      user,
-      caseNumber,
-      caseNumber,
-      archiveReason?.trim() || 'No reason provided',
-      'success',
-      [],
-      archiveData.files?.length || 0,
-      archivedAt,
-      Date.now() - startTime
-    );
-
     const exportData = await exportCaseData(user, caseNumber, { includeMetadata: true });
-    const caseJsonContent = JSON.stringify(exportData, null, 2);
+    const archivedExportData: CaseExportData = {
+      ...exportData,
+      metadata: {
+        ...exportData.metadata,
+        archived: true,
+        archivedAt,
+        archivedBy: user.uid,
+        archivedByDisplay,
+        archiveReason: archiveReason?.trim() || undefined,
+      },
+    };
+    const caseJsonContent = JSON.stringify(archivedExportData, null, 2);
 
     const JSZip = (await import('jszip')).default;
     const zip = new JSZip();
@@ -876,6 +888,27 @@ export const archiveCase = async (
       compressionOptions: { level: 6 },
     });
 
+    await updateCaseData(user, caseNumber, archiveData);
+
+    // Clean up confirmation status metadata for this archived case
+    try {
+      await removeCaseConfirmationSummary(user, caseNumber);
+    } catch (summaryError) {
+      console.warn(`Failed to remove confirmation summary for case ${caseNumber}:`, summaryError);
+    }
+
+    await auditService.logCaseArchive(
+      user,
+      caseNumber,
+      caseNumber,
+      archiveReason?.trim() || 'No reason provided',
+      'success',
+      [],
+      archiveData.files?.length || 0,
+      archivedAt,
+      Date.now() - startTime
+    );
+
     const downloadUrl = URL.createObjectURL(zipBlob);
     const archiveFileName = `striae-case-${caseNumber}-archive-${formatDateForFilename(new Date())}.zip`;
     const anchor = document.createElement('a');

package/app/components/audit/viewer/audit-entries-list.tsx

@@ -15,8 +15,11 @@ export const AuditEntriesList = ({ entries }: AuditEntriesListProps) => {
           <p>No activities match the current filters.</p>
         </div>
       ) : (
-        entries.map((entry, index) => (
-          <div key={index} className={`${styles.entry} ${styles[entry.result]}`}>
+        entries.map((entry) => (
+          <div
+            key={`${entry.timestamp}-${entry.userId}-${entry.action}-${entry.details.fileName || ''}`}
+            className={`${styles.entry} ${styles[entry.result]}`}
+          >
             <div className={styles.entryHeader}>
               <div className={styles.entryIcons}>
                 <span className={styles.actionIcon}>{getAuditActionIcon(entry.action)}</span>

package/app/components/audit/viewer/use-audit-viewer-data.ts

@@ -112,10 +112,13 @@ export const useAuditViewerData = ({
 
       if (effectiveCaseNumber) {
         const caseData = await getCaseData(user, effectiveCaseNumber);
-        const archivedReadOnlyCase = Boolean(caseData?.isReadOnly && caseData.archived === true);
-        setIsArchivedReadOnlyCase(archivedReadOnlyCase);
+        const isArchiveBundleCase = Boolean(
+          caseData?.archived === true &&
+          caseData?.bundledAuditTrail?.source === 'archive-bundle'
+        );
+        setIsArchivedReadOnlyCase(isArchiveBundleCase);
 
-        if (archivedReadOnlyCase && !caseData?.bundledAuditTrail?.entries?.length) {
+        if (isArchiveBundleCase && !Array.isArray(caseData?.bundledAuditTrail?.entries)) {
           setBundledAuditWarning(
             'This imported archived case does not include bundled audit trail data. No audit entries are available for this case.'
           );

package/app/components/audit/viewer/use-audit-viewer-export.ts

@@ -48,7 +48,7 @@ export const useAuditViewerExport = ({
     const filename = auditExportService.generateFilename(
       exportContextData.scopeType,
       exportContextData.identifier,
-      'csv'
+      'json'
     );
 
     try {

package/app/components/canvas/confirmation/confirmation.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useContext } from 'react';
+import { useState, useEffect, useContext, useRef } from 'react';
 import { type ConfirmationData } from '~/types/annotations';
 import { AuthContext } from '~/contexts/auth.context';
 import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
@@ -33,6 +33,7 @@ export const ConfirmationModal = ({ isOpen, onClose, onConfirm, company, default
   const [badgeId, setBadgeId] = useState('');
   const [error, setError] = useState('');
   const [isConfirming, setIsConfirming] = useState(false);
+  const wasOpenRef = useRef(false);
   
   const fullName = user?.displayName || user?.email || 'Unknown User';
   const userEmail = user?.email || 'No email available';
@@ -54,7 +55,10 @@ export const ConfirmationModal = ({ isOpen, onClose, onConfirm, company, default
 
   // Reset form when modal opens
   useEffect(() => {
-    if (isOpen) {
+    const justOpened = isOpen && !wasOpenRef.current;
+    wasOpenRef.current = isOpen;
+
+    if (justOpened) {
       if (existingConfirmation) {
         setBadgeId(existingConfirmation.badgeId);
       } else {

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

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
+  width: fit-content;
 }
 
 .colorHeader {
@@ -26,7 +27,7 @@
 }
 
 .colorWheel {
-  width: 100%;
+  width: 180px;
   height: 40px;
   padding: 0;
   border: 2px solid #ced4da;
@@ -55,5 +56,5 @@
 
 .colorSwatch.selected {
   border-color: #0d6efd;
-  box-shadow: 0 0 0 2px rgba(13,110,253,.25);
-}
+  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
+}

package/app/components/navbar/navbar.tsx

@@ -114,6 +114,7 @@ export const Navbar = ({
   }, [isCaseMenuOpen, isFileMenuOpen]);
 
   const caseActionsDisabled = false;
+  const disableLongRunningCaseActions = isUploading;
   const isCaseManagementActive = true;
   const isFileManagementActive = isFileMenuOpen || hasLoadedImage;
   const canOpenImageNotes = hasLoadedImage && !isCurrentImageConfirmed;
@@ -139,7 +140,7 @@ export const Navbar = ({
               aria-haspopup="menu"
               disabled={caseActionsDisabled}
               onClick={() => setIsCaseMenuOpen((prev) => !prev)}
-              title={isUploading ? 'Cannot access case actions while uploading' : undefined}
+              title={isUploading ? 'Some case actions are unavailable while files are uploading' : undefined}
             >
               Case Management
             </button>
@@ -173,8 +174,14 @@ export const Navbar = ({
                   type="button"
                   role="menuitem"
                   className={`${styles.caseMenuItem} ${styles.caseMenuItemExport}`}
-                  disabled={!hasLoadedCase}
-                  title={!hasLoadedCase ? 'Load a case to export case data' : undefined}
+                  disabled={!hasLoadedCase || disableLongRunningCaseActions}
+                  title={
+                    !hasLoadedCase
+                      ? 'Load a case to export case data'
+                      : disableLongRunningCaseActions
+                        ? 'Export is unavailable while files are uploading'
+                        : undefined
+                  }
                   onClick={() => {
                     onOpenCaseExport?.();
                     setIsCaseMenuOpen(false);
@@ -203,8 +210,14 @@ export const Navbar = ({
                     type="button"
                     role="menuitem"
                     className={`${styles.caseMenuItem} ${styles.caseMenuItemRename}`}
-                    disabled={!hasLoadedCase}
-                    title={!hasLoadedCase ? 'Load a case to rename it' : undefined}
+                    disabled={!hasLoadedCase || disableLongRunningCaseActions}
+                    title={
+                      !hasLoadedCase
+                        ? 'Load a case to rename it'
+                        : disableLongRunningCaseActions
+                          ? 'Rename is unavailable while files are uploading'
+                          : undefined
+                    }
                     onClick={() => {
                       onOpenRenameCase?.();
                       setIsCaseMenuOpen(false);
@@ -218,8 +231,14 @@ export const Navbar = ({
                     type="button"
                     role="menuitem"
                     className={`${styles.caseMenuItem} ${styles.caseMenuItemDelete}`}
-                    disabled={!hasLoadedCase}
-                    title={!hasLoadedCase ? 'Load a case to delete it' : undefined}
+                    disabled={!hasLoadedCase || disableLongRunningCaseActions}
+                    title={
+                      !hasLoadedCase
+                        ? 'Load a case to delete it'
+                        : disableLongRunningCaseActions
+                          ? 'Delete is unavailable while files are uploading'
+                          : undefined
+                    }
                     onClick={() => {
                       onDeleteCase?.();
                       setIsCaseMenuOpen(false);
@@ -233,8 +252,14 @@ export const Navbar = ({
                     type="button"
                     role="menuitem"
                     className={`${styles.caseMenuItem} ${styles.caseMenuItemArchive}`}
-                    disabled={!hasLoadedCase}
-                    title={!hasLoadedCase ? 'Load a case to archive it' : undefined}
+                    disabled={!hasLoadedCase || disableLongRunningCaseActions}
+                    title={
+                      !hasLoadedCase
+                        ? 'Load a case to archive it'
+                        : disableLongRunningCaseActions
+                          ? 'Archive is unavailable while files are uploading'
+                          : undefined
+                    }
                     onClick={() => {
                       onArchiveCase?.();
                       setIsCaseMenuOpen(false);

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

@@ -9,13 +9,15 @@ import {
 } from '../../actions/image-manage';
 import { 
   canUploadFile, 
-  getFileAnnotations
+  ensureCaseConfirmationSummary,
+  getCaseConfirmationSummary
 } from '~/utils/data';
 import { type FileData } from '~/types';
 
 interface CaseSidebarProps {
   user: User;
   onImageSelect: (file: FileData) => void;
+  onOpenCase: () => void;
   imageLoaded: boolean;
   setImageLoaded: (loaded: boolean) => void;
   onNotesClick: () => void;
@@ -34,6 +36,7 @@ interface CaseSidebarProps {
 export const CaseSidebar = ({ 
   user, 
   onImageSelect, 
+  onOpenCase,
   imageLoaded,
   setImageLoaded,
   onNotesClick,
@@ -67,21 +70,6 @@ export const CaseSidebar = ({
     [files]
   );
 
-  const calculateCaseConfirmationStatus = useCallback((
-    statuses: { [fileId: string]: { includeConfirmation: boolean; isConfirmed: boolean } }
-  ) => {
-    const filesRequiringConfirmation = files
-      .map((file) => statuses[file.id] || { includeConfirmation: false, isConfirmed: false })
-      .filter((status) => status.includeConfirmation);
-
-    const allConfirmedFiles = filesRequiringConfirmation.every((status) => status.isConfirmed);
-
-    return {
-      includeConfirmation: filesRequiringConfirmation.length > 0,
-      isConfirmed: filesRequiringConfirmation.length > 0 ? allConfirmedFiles : false,
-    };
-  }, [files]);
-
   // Function to check file upload permissions (extracted for reuse)
   const checkFileUploadPermissions = useCallback(async (fileCount?: number) => {
     if (currentCase) {
@@ -135,43 +123,24 @@ export const CaseSidebar = ({
         return;
       }
 
-      // Fetch all annotations in parallel
-      const annotationPromises = files.map(async (file) => {
-        try {
-          const annotations = await getFileAnnotations(user, currentCase, file.id);
-          return {
-            fileId: file.id,
-            includeConfirmation: annotations?.includeConfirmation ?? false,
-            isConfirmed: !!annotations?.confirmationData,
-          };
-        } catch (err) {
-          console.error(`Error fetching annotations for file ${file.id}:`, err);
-          return {
-            fileId: file.id,
-            includeConfirmation: false,
-            isConfirmed: false,
-          };
-        }
+      const caseSummary = await ensureCaseConfirmationSummary(user, currentCase, files).catch((error) => {
+        console.error(`Error fetching confirmation summary for case ${currentCase}:`, error);
+        return null;
       });
 
-      // Wait for all fetches to complete
-      const results = await Promise.all(annotationPromises);
-
-      // Build the statuses map from results
-      const statuses: { [fileId: string]: { includeConfirmation: boolean; isConfirmed: boolean } } = {};
-      results.forEach((result) => {
-        statuses[result.fileId] = {
-          includeConfirmation: result.includeConfirmation,
-          isConfirmed: result.isConfirmed,
-        };
-      });
+      if (!caseSummary) {
+        return;
+      }
 
       if (isCancelled) {
         return;
       }
 
-      setFileConfirmationStatus(statuses);
-      setCaseConfirmationStatus(calculateCaseConfirmationStatus(statuses));
+      setFileConfirmationStatus(caseSummary.filesById);
+      setCaseConfirmationStatus({
+        includeConfirmation: caseSummary.includeConfirmation,
+        isConfirmed: caseSummary.isConfirmed
+      });
     };
 
     fetchConfirmationStatuses();
@@ -179,7 +148,7 @@ export const CaseSidebar = ({
     return () => {
       isCancelled = true;
     };
-  }, [currentCase, fileIdsKey, user, files, calculateCaseConfirmationStatus]);
+  }, [currentCase, fileIdsKey, user, files]);
 
   // Refresh only selected file confirmation status after confirmation-related data is persisted
   useEffect(() => {
@@ -191,24 +160,18 @@ export const CaseSidebar = ({
       }
 
       try {
-        const annotations = await getFileAnnotations(user, currentCase, selectedFileId);
-        const selectedStatus = {
-          includeConfirmation: annotations?.includeConfirmation ?? false,
-          isConfirmed: !!annotations?.confirmationData,
-        };
+        const caseSummary =
+          await getCaseConfirmationSummary(user, currentCase) ||
+          await ensureCaseConfirmationSummary(user, currentCase, files);
 
         if (isCancelled) {
           return;
         }
 
-        setFileConfirmationStatus((previous) => {
-          const next = {
-            ...previous,
-            [selectedFileId]: selectedStatus,
-          };
-
-          setCaseConfirmationStatus(calculateCaseConfirmationStatus(next));
-          return next;
+        setFileConfirmationStatus(caseSummary.filesById);
+        setCaseConfirmationStatus({
+          includeConfirmation: caseSummary.includeConfirmation,
+          isConfirmed: caseSummary.isConfirmed
         });
       } catch (err) {
         console.error(`Error refreshing confirmation status for file ${selectedFileId}:`, err);
@@ -220,7 +183,7 @@ export const CaseSidebar = ({
     return () => {
       isCancelled = true;
     };
-  }, [currentCase, fileIdsKey, user, selectedFileId, confirmationSaveVersion, files.length, calculateCaseConfirmationStatus]);
+  }, [currentCase, fileIdsKey, user, selectedFileId, confirmationSaveVersion, files]);
 
   const handleFileDelete = async (fileId: string) => {
     // Don't allow file deletion for read-only cases
@@ -303,19 +266,30 @@ return (
         setFiles={setFiles}
         isReadOnly={isReadOnly}
         selectedFileId={selectedFileId}
+        confirmationSaveVersion={confirmationSaveVersion}
       />
       
         <div className={styles.filesSection}>
         <div className={currentCase ? (isReadOnly ? styles.readOnlyContainer : styles.caseHeader) : styles.emptyCaseHeader}>
-        <h4 className={`${styles.caseNumber} ${
-          currentCase && caseConfirmationStatus.includeConfirmation 
-            ? caseConfirmationStatus.isConfirmed 
-              ? styles.caseConfirmed 
-              : styles.caseNotConfirmed
-            : ''
-        }`}>
-          {currentCase || 'No Case Selected'}
-        </h4>
+        {currentCase ? (
+          <h4 className={`${styles.caseNumber} ${
+            caseConfirmationStatus.includeConfirmation 
+              ? caseConfirmationStatus.isConfirmed 
+                ? styles.caseConfirmed 
+                : styles.caseNotConfirmed
+              : ''
+          }`}>
+            {currentCase}
+          </h4>
+        ) : (
+          <button
+            type="button"
+            className={styles.openCaseButton}
+            onClick={onOpenCase}
+          >
+            Open Case
+          </button>
+        )}
       </div>
       {currentCase && (
         <ImageUploadZone

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

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import type { User } from 'firebase/auth';
 import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 import { listCases } from '~/components/actions/case-manage';
-import { getFileAnnotations } from '~/utils/data';
+import { ensureCaseConfirmationSummary, getConfirmationSummaryDocument } from '~/utils/data';
 import { fetchFiles } from '~/components/actions/image-manage';
 import styles from './cases-modal.module.css';
 
@@ -12,9 +12,17 @@ interface CasesModalProps {
   onSelectCase: (caseNum: string) => void;
   currentCase: string;
   user: User;
+  confirmationSaveVersion?: number;
 }
 
-export const CasesModal = ({ isOpen, onClose, onSelectCase, currentCase, user }: CasesModalProps) => {
+export const CasesModal = ({
+  isOpen,
+  onClose,
+  onSelectCase,
+  currentCase,
+  user,
+  confirmationSaveVersion = 0
+}: CasesModalProps) => {
   const [cases, setCases] = useState<string[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string>('');
@@ -70,6 +78,43 @@ export const CasesModal = ({ isOpen, onClose, onSelectCase, currentCase, user }:
 
   // Fetch confirmation status only for currently visible paginated cases
   useEffect(() => {
+    let isCancelled = false;
+
+    const loadConfirmationSummary = async () => {
+      if (!isOpen) {
+        return;
+      }
+
+      const summary = await getConfirmationSummaryDocument(user).catch((err) => {
+        console.error('Failed to load confirmation summary:', err);
+        return null;
+      });
+
+      if (!summary || isCancelled) {
+        return;
+      }
+
+      const statuses: { [caseNum: string]: { includeConfirmation: boolean; isConfirmed: boolean } } = {};
+      for (const [caseNum, entry] of Object.entries(summary.cases)) {
+        statuses[caseNum] = {
+          includeConfirmation: entry.includeConfirmation,
+          isConfirmed: entry.isConfirmed
+        };
+      }
+
+      setCaseConfirmationStatus(statuses);
+    };
+
+    loadConfirmationSummary();
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [isOpen, user, confirmationSaveVersion]);
+
+  useEffect(() => {
+    let isCancelled = false;
+
     const fetchCaseConfirmationStatuses = async () => {
       const visibleCases = cases.slice(
         currentPage * CASES_PER_PAGE,
@@ -80,34 +125,21 @@ export const CasesModal = ({ isOpen, onClose, onSelectCase, currentCase, user }:
         return;
       }
 
-      // Fetch case statuses in parallel for only visible cases
-      const caseStatusPromises = visibleCases.map(async (caseNum) => {
+      const missingCaseNumbers = visibleCases.filter((caseNum) => !caseConfirmationStatus[caseNum]);
+      if (missingCaseNumbers.length === 0) {
+        return;
+      }
+
+      const caseStatusPromises = missingCaseNumbers.map(async (caseNum) => {
         try {
           const files = await fetchFiles(user, caseNum, { skipValidation: true });
-          
-          // Fetch annotations for each file in the case (in parallel)
-          const fileStatuses = await Promise.all(
-            files.map(async (file) => {
-              try {
-                const annotations = await getFileAnnotations(user, caseNum, file.id);
-                return {
-                  includeConfirmation: annotations?.includeConfirmation ?? false,
-                  isConfirmed: !!(annotations?.includeConfirmation && annotations?.confirmationData),
-                };
-              } catch {
-                return { includeConfirmation: false, isConfirmed: false };
-              }
-            })
-          );
-
-          // Calculate case status
-          const filesRequiringConfirmation = fileStatuses.filter(s => s.includeConfirmation);
-          const allConfirmedFiles = filesRequiringConfirmation.every(s => s.isConfirmed);
+
+          const caseSummary = await ensureCaseConfirmationSummary(user, caseNum, files);
 
           return {
             caseNum,
-            includeConfirmation: filesRequiringConfirmation.length > 0,
-            isConfirmed: filesRequiringConfirmation.length > 0 ? allConfirmedFiles : false,
+            includeConfirmation: caseSummary.includeConfirmation,
+            isConfirmed: caseSummary.isConfirmed,
           };
         } catch (err) {
           console.error(`Error fetching confirmation status for case ${caseNum}:`, err);
@@ -122,20 +154,29 @@ export const CasesModal = ({ isOpen, onClose, onSelectCase, currentCase, user }:
       // Wait for all case status fetches to complete
       const results = await Promise.all(caseStatusPromises);
 
-      // Build the statuses map from results
-      const statuses: { [caseNum: string]: { includeConfirmation: boolean; isConfirmed: boolean } } = {};
-      results.forEach((result) => {
-        statuses[result.caseNum] = {
-          includeConfirmation: result.includeConfirmation,
-          isConfirmed: result.isConfirmed,
-        };
-      });
+      if (isCancelled) {
+        return;
+      }
 
-      setCaseConfirmationStatus(statuses);
+      setCaseConfirmationStatus((previous) => {
+        const next = { ...previous };
+        results.forEach((result) => {
+          next[result.caseNum] = {
+            includeConfirmation: result.includeConfirmation,
+            isConfirmed: result.isConfirmed,
+          };
+        });
+
+        return next;
+      });
     };
 
     fetchCaseConfirmationStatuses();
-  }, [isOpen, currentPage, cases, user]);
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [isOpen, currentPage, cases, user, caseConfirmationStatus]);
 
   if (!isOpen) return null;
 

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

@@ -204,6 +204,24 @@
   margin-top: 0.75rem;
 }
 
+.openCaseButton {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  background-color: var(--primary);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  font-size: 0.95rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-sizing: border-box;
+}
+
+.openCaseButton:hover {
+  background-color: color-mix(in lab, var(--primary) 85%, var(--black));
+}
+
 .fileListPlaceholder {
   display: flex;
   align-items: center;
@@ -678,6 +696,7 @@
 /* Case Header Container */
 .caseHeader {
   /* Normal case header styling (no background) */
+  margin-top: 0.75rem;
 }
 
 .readOnlyContainer {
@@ -685,6 +704,7 @@
   border: 1px solid #ffeaa7;
   border-radius: 4px;
   padding: 0.625rem 0.75rem;
+  margin-top: 0.75rem;
   margin-bottom: 0;
 }