@striae-org/striae 4.2.1 → 4.3.1

package/app/components/navbar/navbar.module.css

@@ -384,6 +384,17 @@
   background: color-mix(in lab, #0d9488 20%, #ffffff);
 }
 
+.caseMenuItemClearRO {
+  background: color-mix(in lab, #fd7e14 16%, #ffffff);
+  color: #7c3f00;
+  border-color: color-mix(in lab, #fd7e14 30%, transparent);
+}
+
+.caseMenuItemClearRO:hover {
+  background: color-mix(in lab, #fd7e14 22%, #ffffff);
+  border-color: color-mix(in lab, #fd7e14 36%, transparent);
+}
+
 .caseMenuCaption {
   margin-top: 0.25rem;
   padding: 0.3rem 0.45rem 0.1rem;

package/app/components/navbar/navbar.tsx

@@ -26,6 +26,7 @@ interface NavbarProps {
   onOpenRenameCase?: () => void;
   onDeleteCase?: () => void;
   onArchiveCase?: () => void;
+  onClearROCase?: () => void;
   onOpenViewAllFiles?: () => void;
   onDeleteCurrentFile?: () => void;
   onOpenImageNotes?: () => void;
@@ -55,6 +56,7 @@ export const Navbar = ({
   onOpenRenameCase,
   onDeleteCase,
   onArchiveCase,
+  onClearROCase,
   onOpenViewAllFiles,
   onDeleteCurrentFile,
   onOpenImageNotes,
@@ -151,6 +153,8 @@ export const Navbar = ({
                   type="button"
                   role="menuitem"
                   className={`${styles.caseMenuItem} ${styles.caseMenuItemOpen}`}
+                  disabled={isReadOnly}
+                  title={isReadOnly ? 'Clear the read-only case first to open or switch cases' : undefined}
                   onClick={() => {
                     onOpenCase?.();
                     setIsCaseMenuOpen(false);
@@ -162,6 +166,8 @@ export const Navbar = ({
                   type="button"
                   role="menuitem"
                   className={`${styles.caseMenuItem} ${styles.caseMenuItemList}`}
+                  disabled={isReadOnly}
+                  title={isReadOnly ? 'Clear the read-only case first to list all cases' : undefined}
                   onClick={() => {
                     onOpenListAllCases?.();
                     setIsCaseMenuOpen(false);
@@ -202,8 +208,21 @@ export const Navbar = ({
                 >
                   Case Audit Trail
                 </button>
-                {(!isReadOnly || archiveDetails?.archived) && (
-                  <div className={styles.caseMenuSectionLabel}>Maintenance</div>
+                <div className={styles.caseMenuSectionLabel}>Maintenance</div>
+                {isReadOnly && (
+                  <button
+                    type="button"
+                    role="menuitem"
+                    className={`${styles.caseMenuItem} ${styles.caseMenuItemClearRO}`}
+                    disabled={!hasLoadedCase}
+                    title={!hasLoadedCase ? 'No read-only case is loaded' : undefined}
+                    onClick={() => {
+                      onClearROCase?.();
+                      setIsCaseMenuOpen(false);
+                    }}
+                  >
+                    Clear RO Case
+                  </button>
                 )}
                 {!isReadOnly && (
                   <button
@@ -226,27 +245,27 @@ export const Navbar = ({
                     Rename Case
                   </button>
                 )}
-                {(!isReadOnly || archiveDetails?.archived) && (
-                  <button
-                    type="button"
-                    role="menuitem"
-                    className={`${styles.caseMenuItem} ${styles.caseMenuItemDelete}`}
-                    disabled={!hasLoadedCase || disableLongRunningCaseActions}
-                    title={
-                      !hasLoadedCase
+                <button
+                  type="button"
+                  role="menuitem"
+                  className={`${styles.caseMenuItem} ${styles.caseMenuItemDelete}`}
+                  disabled={!hasLoadedCase || disableLongRunningCaseActions || isReadOnly}
+                  title={
+                    isReadOnly
+                      ? 'Clear the read-only case first before deleting'
+                      : !hasLoadedCase
                         ? 'Load a case to delete it'
                         : disableLongRunningCaseActions
                           ? 'Delete is unavailable while files are uploading'
                           : undefined
-                    }
-                    onClick={() => {
-                      onDeleteCase?.();
-                      setIsCaseMenuOpen(false);
-                    }}
-                  >
-                    Delete Case
-                  </button>
-                )}
+                  }
+                  onClick={() => {
+                    onDeleteCase?.();
+                    setIsCaseMenuOpen(false);
+                  }}
+                >
+                  Delete Case
+                </button>
                 {!isReadOnly && (
                   <button
                     type="button"

package/app/components/sidebar/case-import/hooks/useImportExecution.ts

@@ -117,6 +117,8 @@ export const useImportExecution = ({
           }
           
           setSuccess(message);
+
+          onImportComplete?.(result);
           
           // No auto-close for confirmation imports - let user read the details and close manually
           

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

@@ -1,4 +1,5 @@
 import type { User } from 'firebase/auth';
+import type React from 'react';
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import styles from './cases.module.css';
 import { FilesModal } from '../files/files-modal';
@@ -25,12 +26,14 @@ interface CaseSidebarProps {
   setFiles: React.Dispatch<React.SetStateAction<FileData[]>>;
   currentCase: string | null;
   isReadOnly?: boolean;
+  isArchivedCase?: boolean;
   isConfirmed?: boolean;
   confirmationSaveVersion?: number;
   selectedFileId?: string;
   isUploading?: boolean;
   onUploadStatusChange?: (isUploading: boolean) => void;
   onUploadComplete?: (result: { successCount: number; failedFiles: string[] }) => void;
+  onOpenCaseExport?: () => void;
 }
 
 export const CaseSidebar = ({ 
@@ -44,12 +47,14 @@ export const CaseSidebar = ({
   setFiles,
   currentCase,
   isReadOnly = false,
+  isArchivedCase = false,
   isConfirmed = false,
   confirmationSaveVersion = 0,
   selectedFileId,
   isUploading = false,
   onUploadStatusChange,
-  onUploadComplete
+  onUploadComplete,
+  onOpenCaseExport
 }: CaseSidebarProps) => {
   
   const [, setFileError] = useState('');
@@ -253,6 +258,14 @@ const handleImageSelect = (file: FileData) => {
     ? 'Select an image first'
     : undefined;
 
+  const showCaseExportButton = Boolean(currentCase && isReadOnly && !isArchivedCase);
+
+  const exportCaseTitle = isUploading
+    ? 'Cannot export while uploading'
+    : !currentCase
+    ? 'Load a case first'
+    : undefined;
+
 return (
     <>
     <div className={styles.caseSection}>
@@ -371,14 +384,25 @@ return (
       )}
     </div>
     <div className={styles.sidebarToggle}>
-    <button
+      {showCaseExportButton ? (
+        <button
+          className={styles.confirmationExportButton}
+          onClick={onOpenCaseExport}
+          disabled={isUploading || !currentCase}
+          title={exportCaseTitle}
+        >
+          Export Confirmations
+        </button>
+      ) : (
+        <button
           onClick={onNotesClick}
           disabled={isImageNotesDisabled}
           title={imageNotesTitle}
         >
           Image Notes
         </button>
-        </div>
+      )}
+    </div>
       </div>
     </>
   );

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

@@ -14,6 +14,7 @@
   position: relative;
   background: var(--backgroundLight);
   border-radius: var(--spaceXS);
+  overflow: hidden;
   width: 90%;
   max-width: var(--maxWidthL);
   max-height: 80vh;
@@ -41,6 +42,9 @@
   overflow-y: auto;
   flex: 1;
   min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceM);
 }
 
 .closeButton {
@@ -57,46 +61,300 @@
   color: var(--text);
 }
 
+.controlsSection {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--spaceM);
+  align-items: end;
+}
+
+.controlGroup {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceXS);
+}
+
+.controlGroup label {
+  color: var(--textTitle);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+}
+
+.controlGroup select {
+  width: 100%;
+  border: 1px solid color-mix(in lab, var(--text) 15%, transparent);
+  border-radius: var(--spaceXS);
+  background: var(--backgroundLight);
+  color: var(--textBody);
+  padding: var(--spaceS) var(--spaceM);
+  font-size: var(--fontSizeBodyS);
+}
+
+.controlGroup select:focus {
+  outline: 2px solid color-mix(in lab, var(--primary) 30%, transparent);
+  outline-offset: 1px;
+}
+
+.archiveToggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spaceS);
+  color: var(--textBody);
+  font-size: var(--fontSizeBodyS);
+}
+
+.archiveToggle input {
+  width: var(--spaceM);
+  height: var(--spaceM);
+  accent-color: var(--primary);
+}
+
+.resetButton {
+  border: 1px solid color-mix(in lab, var(--text) 15%, transparent);
+  border-radius: var(--spaceXS);
+  background: var(--backgroundLight);
+  color: var(--textBody);
+  padding: var(--spaceS) var(--spaceM);
+  font-size: var(--fontSizeBodyS);
+  cursor: pointer;
+}
+
+.resetButton:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.caseCount {
+  margin: 0;
+  font-size: var(--fontSizeBodyS);
+  color: var(--textLight);
+}
+
+.searchSection {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceXS);
+}
+
+.searchSection label {
+  color: var(--textTitle);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+}
+
+.searchInput {
+  width: 100%;
+  border: 1px solid color-mix(in lab, var(--text) 15%, transparent);
+  border-radius: var(--spaceXS);
+  background: var(--backgroundLight);
+  color: var(--textBody);
+  padding: var(--spaceS) var(--spaceM);
+  font-size: var(--fontSizeBodyS);
+}
+
+.searchInput:focus {
+  outline: 2px solid color-mix(in lab, var(--primary) 30%, transparent);
+  outline-offset: 1px;
+}
+
+.actionNotice {
+  margin: 0;
+  border-radius: var(--spaceXS);
+  padding: var(--spaceS) var(--spaceM);
+  font-size: var(--fontSizeBodyS);
+  border: 1px solid transparent;
+}
+
+.actionNoticeSuccess {
+  background: color-mix(in lab, var(--success) 15%, var(--backgroundLight));
+  color: var(--textBody);
+  border-color: color-mix(in lab, var(--success) 35%, transparent);
+}
+
+.actionNoticeWarning {
+  background: color-mix(in lab, var(--warning) 18%, var(--backgroundLight));
+  color: var(--textBody);
+  border-color: color-mix(in lab, var(--warning) 40%, transparent);
+}
+
+.actionNoticeError {
+  background: color-mix(in lab, var(--error) 16%, var(--backgroundLight));
+  color: var(--error);
+  border-color: color-mix(in lab, var(--error) 30%, transparent);
+}
+
 .casesList {
   list-style: none;
   padding: 0;
   margin: 0;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: var(--spaceL);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceM);
 }
 
 .caseItem {
   width: 100%;
-  padding: var(--spaceM) var(--spaceL);
-  border: 1px solid #e9ecef;
+  padding: var(--spaceM);
+  border: 1px solid color-mix(in lab, var(--text) 15%, transparent);
   border-radius: var(--spaceXS);
-  text-align: left;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: var(--spaceM);
   background: var(--backgroundLight);
   cursor: pointer;
   color: var(--textBody);
-  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  transition:
+    border-color var(--durationS) var(--bezierFastoutSlowin),
+    background-color var(--durationS) var(--bezierFastoutSlowin),
+    box-shadow var(--durationS) var(--bezierFastoutSlowin);
 }
 
 .caseItem:hover {
   background-color: color-mix(in lab, var(--background) 95%, transparent);
 }
 
+.caseItem:focus {
+  outline: none;
+  border-color: color-mix(in lab, var(--primary) 60%, transparent);
+  box-shadow: 0 0 0 2px color-mix(in lab, var(--primary) 18%, transparent);
+}
+
 .caseItem.active {
-  background-color: color-mix(in lab, var(--background) 90%, transparent);
+  border-color: color-mix(in lab, var(--primary) 55%, transparent);
+  box-shadow:
+    inset 4px 0 0 color-mix(in lab, var(--primary) 55%, transparent),
+    0 0 0 1px color-mix(in lab, var(--primary) 16%, transparent);
+}
+
+.caseDetails {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceXS);
+}
+
+.caseNumberInput {
+  width: 100%;
+  border: 1px solid color-mix(in lab, var(--text) 15%, transparent);
+  border-radius: var(--spaceXS);
+  background: var(--backgroundLight);
+  color: var(--textBody);
+  font-size: var(--fontSizeBodyM);
+  padding: var(--spaceS) var(--spaceM);
+}
+
+.caseMetaText {
+  color: var(--textLight);
+  font-size: var(--fontSizeBodyS);
+}
+
+.confirmationBadge {
+  justify-self: end;
+  border-radius: var(--spaceXS);
+  padding: var(--spaceXS) var(--spaceS);
+  font-size: var(--fontSizeBodyS);
   font-weight: var(--fontWeightMedium);
+  color: var(--textBody);
+  border: 1px solid color-mix(in lab, var(--text) 15%, transparent);
+  white-space: nowrap;
 }
 
-.pagination {
+.footerActions {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: var(--spaceM);
   padding: var(--spaceL);
   border-top: 1px solid color-mix(in lab, var(--text) 10%, transparent);
   background: var(--backgroundLight);
   flex-shrink: 0;
 }
 
+.maintenanceActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spaceS);
+}
+
+.secondaryActionButton {
+  border: 1px solid color-mix(in lab, var(--text) 15%, transparent);
+  border-radius: var(--spaceXS);
+  background: var(--backgroundLight);
+  color: var(--textBody);
+  padding: var(--spaceS) var(--spaceM);
+  font-size: var(--fontSizeBodyS);
+  cursor: pointer;
+  transition: background-color var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.secondaryActionButton:hover:not(:disabled) {
+  background: color-mix(in lab, var(--background) 94%, transparent);
+}
+
+.secondaryActionButton:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.renameActionButton {
+  background: color-mix(in lab, #ffc107 16%, #ffffff);
+  color: #7a5a00;
+  border-color: color-mix(in lab, #ffc107 30%, transparent);
+}
+
+.renameActionButton:hover:not(:disabled) {
+  background: color-mix(in lab, #ffc107 22%, #ffffff);
+  border-color: color-mix(in lab, #ffc107 36%, transparent);
+}
+
+.archiveActionButton {
+  background: color-mix(in lab, #6c757d 15%, #ffffff);
+  color: #495057;
+  border-color: color-mix(in lab, #6c757d 28%, transparent);
+}
+
+.archiveActionButton:hover:not(:disabled) {
+  background: color-mix(in lab, #6c757d 21%, #ffffff);
+}
+
+.deleteActionButton {
+  border-color: color-mix(in lab, var(--error) 25%, transparent);
+  color: var(--error);
+}
+
+.deleteActionButton:hover:not(:disabled) {
+  background: color-mix(in lab, var(--error) 12%, var(--backgroundLight));
+}
+
+.openSelectedButton {
+  background: var(--primary);
+  color: var(--white);
+  border: none;
+  border-radius: var(--spaceXS);
+  padding: var(--spaceS) var(--spaceL);
+  font-size: var(--fontSizeBodyS);
+  cursor: pointer;
+  transition: background-color var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.openSelectedButton:hover:not(:disabled) {
+  background: color-mix(in lab, var(--primary) 85%, var(--black));
+}
+
+.openSelectedButton:disabled {
+  background: color-mix(in lab, var(--text) 20%, transparent);
+  color: var(--textLight);
+  cursor: not-allowed;
+}
+
+.pagination {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--spaceM);
+}
+
 .pagination button {
   background: var(--primary);
   color: var(--white);
@@ -128,7 +386,7 @@
 .error,
 .emptyState {
   text-align: center;
-  padding: var(--space2XL);
+  padding: var(--spaceXL);
   color: var(--textLight);
 }
 
@@ -145,6 +403,14 @@
   );
 }
 
+.confirmationBadge.caseItemNotConfirmed {
+  background-color: color-mix(
+    in lab,
+    var(--warning) 22%,
+    var(--backgroundLight)
+  );
+}
+
 .caseItemNotConfirmed:hover {
   background-color: color-mix(
     in lab,
@@ -177,6 +443,14 @@
   );
 }
 
+.confirmationBadge.caseItemConfirmed {
+  background-color: color-mix(
+    in lab,
+    var(--success) 28%,
+    var(--backgroundLight)
+  );
+}
+
 .caseItemConfirmed:hover {
   background-color: color-mix(
     in lab,
@@ -200,3 +474,31 @@
     var(--backgroundLight)
   );
 }
+
+@media (max-width: 900px) {
+  .controlsSection {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .caseItem {
+    grid-template-columns: 1fr;
+  }
+
+  .confirmationBadge {
+    grid-column: 1 / -1;
+    justify-self: start;
+  }
+
+  .footerActions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .maintenanceActions {
+    width: 100%;
+  }
+
+  .pagination {
+    justify-content: space-between;
+  }
+}