@striae-org/striae 4.2.1 → 4.3.0

package/app/components/navbar/case-modals/archive-case-modal.module.css

@@ -1,52 +1,5 @@
-.overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.45);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 120;
-}
-
 .modal {
-  position: relative;
   width: min(560px, calc(100vw - 2rem));
-  background: #ffffff;
-  border-radius: 12px;
-  border: 1px solid #d9e0e7;
-  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
-  padding: 1.1rem;
-}
-
-.title {
-  margin: 0;
-  color: #212529;
-  font-size: 1.02rem;
-}
-
-.subtitle {
-  margin: 0.4rem 0 0.9rem;
-  color: #6c757d;
-  font-size: 0.85rem;
-}
-
-.warningPanel {
-  border: 1px solid color-mix(in lab, #dc3545 25%, transparent);
-  background: color-mix(in lab, #dc3545 7%, #ffffff);
-  border-radius: 10px;
-  padding: 0.75rem;
-  margin-bottom: 0.8rem;
-}
-
-.warningPanel p {
-  margin: 0;
-  color: #3f2a2e;
-  font-size: 0.86rem;
-  line-height: 1.35;
-}
-
-.warningPanel p + p {
-  margin-top: 0.45rem;
 }
 
 .reasonLabel {
@@ -74,37 +27,8 @@
   box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.2);
 }
 
-.actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.65rem;
-  margin-top: 1rem;
-}
-
-.cancelButton,
-.confirmButton {
-  border: 1px solid transparent;
-  border-radius: 8px;
-  padding: 0.55rem 0.9rem;
-  font-size: 0.86rem;
-  font-weight: 500;
-  cursor: pointer;
-}
-
-.cancelButton {
-  background: #f3f4f6;
-  color: #3c4651;
-  border-color: #d6dce2;
-}
-
 .confirmButton {
   background: #dc3545;
   color: #ffffff;
   border-color: #c82333;
 }
-
-.cancelButton:disabled,
-.confirmButton:disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}

package/app/components/navbar/case-modals/archive-case-modal.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
+import sharedStyles from './case-modal-shared.module.css';
 import styles from './archive-case-modal.module.css';
 
 interface ArchiveCaseModalProps {
@@ -65,18 +66,18 @@ export const ArchiveCaseModal = ({
 
   return (
     <div
-      className={styles.overlay}
+      className={sharedStyles.overlay}
       aria-label="Close archive case dialog"
       {...overlayProps}
     >
-      <div className={styles.modal} role="dialog" aria-modal="true" aria-label="Archive Case">
+      <div className={`${sharedStyles.modal} ${styles.modal}`} role="dialog" aria-modal="true" aria-label="Archive Case">
         <button {...getCloseButtonProps({ ariaLabel: 'Close archive case dialog' })}>
           ×
         </button>
-        <h3 className={styles.title}>Archive Case</h3>
-        <p className={styles.subtitle}>Case: {currentCase}</p>
+        <h3 className={sharedStyles.title}>Archive Case</h3>
+        <p className={sharedStyles.subtitle}>Case: {currentCase}</p>
 
-        <div className={styles.warningPanel}>
+        <div className={sharedStyles.warningPanel}>
           <p>
             Archiving a case permanently renders it read-only.
           </p>
@@ -103,10 +104,10 @@ export const ArchiveCaseModal = ({
           rows={3}
         />
 
-        <div className={styles.actions}>
+        <div className={sharedStyles.actions}>
           <button
             type="button"
-            className={styles.cancelButton}
+            className={sharedStyles.cancelButton}
             onClick={requestClose}
             disabled={isCloseBlocked}
           >
@@ -114,7 +115,7 @@ export const ArchiveCaseModal = ({
           </button>
           <button
             type="button"
-            className={styles.confirmButton}
+            className={`${sharedStyles.confirmButton} ${styles.confirmButton}`}
             onClick={() => {
               void handleSubmit();
             }}

package/app/components/navbar/case-modals/case-modal-shared.module.css

@@ -0,0 +1,94 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 120;
+}
+
+.modal {
+  position: relative;
+  background: #ffffff;
+  border-radius: var(--spaceXS);
+  overflow: hidden;
+  border: 1px solid #d9e0e7;
+  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
+  padding: 1.1rem;
+}
+
+.title {
+  margin: 0;
+  color: #212529;
+  font-size: 1.02rem;
+}
+
+.subtitle {
+  margin: 0.4rem 0 0.9rem;
+  color: #6c757d;
+  font-size: 0.85rem;
+}
+
+.input {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid #cdd5dd;
+  border-radius: 8px;
+  padding: 0.6rem 0.75rem;
+  font-size: 0.92rem;
+}
+
+.input:focus {
+  outline: none;
+  border-color: #1f6feb;
+  box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.2);
+}
+
+.warningPanel {
+  border: 1px solid color-mix(in lab, #dc3545 25%, transparent);
+  background: color-mix(in lab, #dc3545 7%, #ffffff);
+  border-radius: 10px;
+  padding: 0.75rem;
+  margin-bottom: 0.8rem;
+}
+
+.warningPanel p {
+  margin: 0;
+  color: #3f2a2e;
+  font-size: 0.86rem;
+  line-height: 1.35;
+}
+
+.warningPanel p + p {
+  margin-top: 0.45rem;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.65rem;
+  margin-top: 1rem;
+}
+
+.cancelButton,
+.confirmButton {
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 0.55rem 0.9rem;
+  font-size: 0.86rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.cancelButton {
+  background: #f3f4f6;
+  color: #3c4651;
+  border-color: #d6dce2;
+}
+
+.cancelButton:disabled,
+.confirmButton:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}

package/app/components/navbar/case-modals/delete-case-modal.module.css

@@ -0,0 +1,9 @@
+.modal {
+  width: min(560px, calc(100vw - 2rem));
+}
+
+.confirmButton {
+  background: #dc3545;
+  color: #ffffff;
+  border-color: #c82333;
+}

package/app/components/navbar/case-modals/delete-case-modal.tsx

@@ -0,0 +1,79 @@
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
+import sharedStyles from './case-modal-shared.module.css';
+import styles from './delete-case-modal.module.css';
+
+interface DeleteCaseModalProps {
+  isOpen: boolean;
+  currentCase: string;
+  isSubmitting?: boolean;
+  onClose: () => void;
+  onSubmit: () => Promise<void>;
+}
+
+export const DeleteCaseModal = ({
+  isOpen,
+  currentCase,
+  isSubmitting = false,
+  onClose,
+  onSubmit,
+}: DeleteCaseModalProps) => {
+  const isCloseBlocked = isSubmitting;
+
+  const {
+    requestClose,
+    overlayProps,
+    getCloseButtonProps,
+  } = useOverlayDismiss({
+    isOpen,
+    onClose,
+    canDismiss: !isCloseBlocked,
+  });
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div
+      className={sharedStyles.overlay}
+      aria-label="Close delete case dialog"
+      {...overlayProps}
+    >
+      <div className={`${sharedStyles.modal} ${styles.modal}`} role="dialog" aria-modal="true" aria-label="Delete Case">
+        <button {...getCloseButtonProps({ ariaLabel: 'Close delete case dialog' })}>
+          ×
+        </button>
+
+        <h3 className={sharedStyles.title}>Delete Case</h3>
+        <p className={sharedStyles.subtitle}>Case: {currentCase}</p>
+
+        <div className={sharedStyles.warningPanel}>
+          <p>This action permanently deletes the case and all associated files.</p>
+          <p>This operation cannot be undone.</p>
+          <p>Any image assets that are already missing will be skipped automatically.</p>
+        </div>
+
+        <div className={sharedStyles.actions}>
+          <button
+            type="button"
+            className={sharedStyles.cancelButton}
+            onClick={requestClose}
+            disabled={isCloseBlocked}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            className={`${sharedStyles.confirmButton} ${styles.confirmButton}`}
+            onClick={() => {
+              void onSubmit();
+            }}
+            disabled={isSubmitting}
+          >
+            {isSubmitting ? 'Deleting...' : 'Confirm Delete'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

package/app/components/navbar/case-modals/open-case-modal.module.css

@@ -12,7 +12,8 @@
   position: relative;
   width: min(460px, calc(100vw - 2rem));
   background: #ffffff;
-  border-radius: 12px;
+  border-radius: var(--spaceXS);
+  overflow: hidden;
   border: 1px solid #d9e0e7;
   box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
   padding: 1.1rem;

package/app/components/navbar/case-modals/rename-case-modal.module.css

@@ -1,71 +1,5 @@
-.overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.45);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 120;
-}
-
 .modal {
-  position: relative;
   width: min(460px, calc(100vw - 2rem));
-  background: #ffffff;
-  border-radius: 12px;
-  border: 1px solid #d9e0e7;
-  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
-  padding: 1.1rem;
-}
-
-.title {
-  margin: 0;
-  color: #212529;
-  font-size: 1.02rem;
-}
-
-.subtitle {
-  margin: 0.4rem 0 0.9rem;
-  color: #6c757d;
-  font-size: 0.85rem;
-}
-
-.input {
-  width: 100%;
-  box-sizing: border-box;
-  border: 1px solid #cdd5dd;
-  border-radius: 8px;
-  padding: 0.6rem 0.75rem;
-  font-size: 0.92rem;
-}
-
-.input:focus {
-  outline: none;
-  border-color: #1f6feb;
-  box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.2);
-}
-
-.actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.65rem;
-  margin-top: 1rem;
-}
-
-.cancelButton,
-.confirmButton {
-  border: 1px solid transparent;
-  border-radius: 8px;
-  padding: 0.55rem 0.9rem;
-  font-size: 0.86rem;
-  font-weight: 500;
-  cursor: pointer;
-}
-
-.cancelButton {
-  background: #f3f4f6;
-  color: #3c4651;
-  border-color: #d6dce2;
 }
 
 .confirmButton {
@@ -73,9 +7,3 @@
   color: #3f2f00;
   border-color: #e8b103;
 }
-
-.cancelButton:disabled,
-.confirmButton:disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}

package/app/components/navbar/case-modals/rename-case-modal.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
+import sharedStyles from './case-modal-shared.module.css';
 import styles from './rename-case-modal.module.css';
 
 interface RenameCaseModalProps {
@@ -59,22 +60,22 @@ export const RenameCaseModal = ({
 
   return (
     <div
-      className={styles.overlay}
+      className={sharedStyles.overlay}
       aria-label="Close rename case dialog"
       {...overlayProps}
     >
-      <div className={styles.modal} role="dialog" aria-modal="true" aria-label="Rename Case">
+      <div className={`${sharedStyles.modal} ${styles.modal}`} role="dialog" aria-modal="true" aria-label="Rename Case">
         <button {...getCloseButtonProps({ ariaLabel: 'Close rename case dialog' })}>
           ×
         </button>
-        <h3 className={styles.title}>Rename Case</h3>
-        <p className={styles.subtitle}>Current case: {currentCase}</p>
+        <h3 className={sharedStyles.title}>Rename Case</h3>
+        <p className={sharedStyles.subtitle}>Current case: {currentCase}</p>
         <input
           ref={inputRef}
           type="text"
           value={newCaseName}
           onChange={(event) => setNewCaseName(event.target.value)}
-          className={styles.input}
+          className={sharedStyles.input}
           placeholder="New case number"
           disabled={isSubmitting}
           onKeyDown={(event) => {
@@ -83,10 +84,10 @@ export const RenameCaseModal = ({
             }
           }}
         />
-        <div className={styles.actions}>
+        <div className={sharedStyles.actions}>
           <button
             type="button"
-            className={styles.cancelButton}
+            className={sharedStyles.cancelButton}
             onClick={requestClose}
             disabled={isCloseBlocked}
           >
@@ -94,7 +95,7 @@ export const RenameCaseModal = ({
           </button>
           <button
             type="button"
-            className={styles.confirmButton}
+            className={`${sharedStyles.confirmButton} ${styles.confirmButton}`}
             onClick={() => void handleSubmit()}
             disabled={isSubmitting || !newCaseName.trim()}
           >

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

@@ -1,8 +1,10 @@
 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';
 import { ImageUploadZone } from '../upload/image-upload-zone';
+import { exportConfirmationData } from '../../actions/confirm-export';
 import {
   fetchFiles,
   deleteFile,
@@ -25,12 +27,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;
+  onExportNotification?: (message: string, type: 'success' | 'error') => void;
 }
 
 export const CaseSidebar = ({ 
@@ -44,18 +48,21 @@ export const CaseSidebar = ({
   setFiles,
   currentCase,
   isReadOnly = false,
+  isArchivedCase = false,
   isConfirmed = false,
   confirmationSaveVersion = 0,
   selectedFileId,
   isUploading = false,
   onUploadStatusChange,
-  onUploadComplete
+  onUploadComplete,
+  onExportNotification
 }: CaseSidebarProps) => {
   
   const [, setFileError] = useState('');
   const [canUploadNewFile, setCanUploadNewFile] = useState(true);
   const [uploadFileError, setUploadFileError] = useState('');
   const [isFilesModalOpen, setIsFilesModalOpen] = useState(false);
+  const [isExportingConfirmations, setIsExportingConfirmations] = useState(false);
   const [deletingFileId, setDeletingFileId] = useState<string | null>(null);
   const [fileConfirmationStatus, setFileConfirmationStatus] = useState<{
     [fileId: string]: { includeConfirmation: boolean; isConfirmed: boolean }
@@ -223,6 +230,26 @@ const handleImageSelect = (file: FileData) => {
     setImageLoaded(false);
   };
 
+  const handleExportConfirmations = useCallback(async () => {
+    if (!currentCase || !isReadOnly || !isArchivedCase) {
+      return;
+    }
+
+    try {
+      setIsExportingConfirmations(true);
+      await exportConfirmationData(user, currentCase);
+      onExportNotification?.(`Confirmation export for case ${currentCase} downloaded successfully.`, 'success');
+    } catch (error) {
+      console.error('Failed to export confirmations:', error);
+      onExportNotification?.(
+        error instanceof Error ? error.message : 'Failed to export confirmation data.',
+        'error'
+      );
+    } finally {
+      setIsExportingConfirmations(false);
+    }
+  }, [currentCase, isArchivedCase, isReadOnly, onExportNotification, user]);
+
   const selectedFileConfirmationState = selectedFileId
     ? fileConfirmationStatus[selectedFileId]
     : undefined;
@@ -253,6 +280,14 @@ const handleImageSelect = (file: FileData) => {
     ? 'Select an image first'
     : undefined;
 
+  const showExportConfirmationsButton = Boolean(currentCase && isReadOnly && !isArchivedCase);
+
+  const exportConfirmationsTitle = isUploading
+    ? 'Cannot export confirmations while uploading'
+    : !currentCase
+    ? 'Load a case first'
+    : undefined;
+
 return (
     <>
     <div className={styles.caseSection}>
@@ -371,14 +406,25 @@ return (
       )}
     </div>
     <div className={styles.sidebarToggle}>
-    <button
+      {showExportConfirmationsButton ? (
+        <button
+          className={styles.confirmationExportButton}
+          onClick={() => void handleExportConfirmations()}
+          disabled={isUploading || !currentCase || isExportingConfirmations}
+          title={exportConfirmationsTitle}
+        >
+          {isExportingConfirmations ? 'Exporting...' : 'Export Confirmations'}
+        </button>
+      ) : (
+        <button
           onClick={onNotesClick}
           disabled={isImageNotesDisabled}
           title={imageNotesTitle}
         >
           Image Notes
         </button>
-        </div>
+      )}
+    </div>
       </div>
     </>
   );