@striae-org/striae 4.0.3 → 4.2.0

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

@@ -1,6 +1,7 @@
 import { useState, useEffect, useContext } from 'react';
 import { type ConfirmationData } from '~/types/annotations';
 import { AuthContext } from '~/contexts/auth.context';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 import { generateConfirmationId } from '~/utils/common';
 import styles from './confirmation.module.css';
 
@@ -9,6 +10,7 @@ interface ConfirmationModalProps {
   onClose: () => void;
   onConfirm?: (confirmationData: ConfirmationData) => void;
   company?: string;
+  defaultBadgeId?: string;
   existingConfirmation?: ConfirmationData | null;
 }
 
@@ -26,7 +28,7 @@ const formatTimestamp = (): string => {
   });
 };
 
-export const ConfirmationModal = ({ isOpen, onClose, onConfirm, company, existingConfirmation }: ConfirmationModalProps) => {
+export const ConfirmationModal = ({ isOpen, onClose, onConfirm, company, defaultBadgeId, existingConfirmation }: ConfirmationModalProps) => {
   const { user } = useContext(AuthContext);
   const [badgeId, setBadgeId] = useState('');
   const [error, setError] = useState('');
@@ -38,38 +40,30 @@ export const ConfirmationModal = ({ isOpen, onClose, onConfirm, company, existin
   const timestamp = formatTimestamp();
   const confirmationId = generateConfirmationId();
 
+  const {
+    requestClose,
+    overlayProps,
+    getCloseButtonProps
+  } = useOverlayDismiss({
+    isOpen,
+    onClose
+  });
+
   // Check if this is an existing confirmation
   const hasExistingConfirmation = !!existingConfirmation;
 
-  // Handle Escape key to close modal
-  useEffect(() => {
-    const handleEscapeKey = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && isOpen) {
-        onClose();
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('keydown', handleEscapeKey);
-    }
-
-    return () => {
-      document.removeEventListener('keydown', handleEscapeKey);
-    };
-  }, [isOpen, onClose]);
-
   // Reset form when modal opens
   useEffect(() => {
     if (isOpen) {
       if (existingConfirmation) {
         setBadgeId(existingConfirmation.badgeId);
       } else {
-        setBadgeId('');
+        setBadgeId(defaultBadgeId || '');
       }
       setError('');
       setIsConfirming(false);
     }
-  }, [isOpen, existingConfirmation]);
+  }, [isOpen, defaultBadgeId, existingConfirmation]);
 
   if (!isOpen) return null;
 
@@ -104,42 +98,18 @@ export const ConfirmationModal = ({ isOpen, onClose, onConfirm, company, existin
     }
   };
 
-  const handleOverlayMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (e.target === e.currentTarget) {
-      onClose();
-    }
-  };
-
-  const handleOverlayKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    if (e.target !== e.currentTarget) {
-      return;
-    }
-
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      onClose();
-    }
-  };
-
   return (
     <div
       className={styles.overlay}
-      onMouseDown={handleOverlayMouseDown}
-      onKeyDown={handleOverlayKeyDown}
-      role="button"
-      tabIndex={0}
       aria-label="Close confirmation dialog"
+      {...overlayProps}
     >
       <div className={styles.modal}>
         <div className={styles.header}>
           <h2 className={styles.title}>
             {hasExistingConfirmation ? 'Confirmation Details' : 'Confirm Identification'}
           </h2>
-          <button 
-            className={styles.closeButton}
-            onClick={onClose}
-            aria-label="Close modal"
-          >
+          <button {...getCloseButtonProps({ ariaLabel: 'Close confirmation dialog' })}>
             ×
           </button>
         </div>
@@ -210,7 +180,7 @@ export const ConfirmationModal = ({ isOpen, onClose, onConfirm, company, existin
         <div className={styles.footer}>
           <button
             className={styles.cancelButton}
-            onClick={onClose}
+            onClick={requestClose}
             disabled={isConfirming}
           >
             {hasExistingConfirmation ? 'Close' : 'Cancel'}

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

@@ -0,0 +1,110 @@
+.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 {
+  display: block;
+  margin-bottom: 0.35rem;
+  color: #495057;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+.reasonInput {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid #cdd5dd;
+  border-radius: 8px;
+  padding: 0.6rem 0.75rem;
+  font-size: 0.9rem;
+  font-family: inherit;
+  resize: vertical;
+}
+
+.reasonInput: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 {
+  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

@@ -0,0 +1,129 @@
+import { useEffect, useRef, useState } from 'react';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
+import styles from './archive-case-modal.module.css';
+
+interface ArchiveCaseModalProps {
+  isOpen: boolean;
+  currentCase: string;
+  isSubmitting?: boolean;
+  onClose: () => void;
+  onSubmit: (archiveReason: string) => Promise<void>;
+}
+
+export const ArchiveCaseModal = ({
+  isOpen,
+  currentCase,
+  isSubmitting = false,
+  onClose,
+  onSubmit,
+}: ArchiveCaseModalProps) => {
+  const [archiveReason, setArchiveReason] = useState('');
+  const reasonRef = useRef<HTMLTextAreaElement>(null);
+  const isCloseBlocked = isSubmitting;
+
+  const handleClose = () => {
+    if (isSubmitting) {
+      return;
+    }
+
+    setArchiveReason('');
+    onClose();
+  };
+
+  const {
+    requestClose,
+    overlayProps,
+    getCloseButtonProps,
+  } = useOverlayDismiss({
+    isOpen,
+    onClose: handleClose,
+    canDismiss: !isCloseBlocked,
+  });
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const focusId = window.requestAnimationFrame(() => {
+      reasonRef.current?.focus();
+    });
+
+    return () => {
+      window.cancelAnimationFrame(focusId);
+    };
+  }, [isOpen]);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  const handleSubmit = async () => {
+    await onSubmit(archiveReason.trim());
+    setArchiveReason('');
+  };
+
+  return (
+    <div
+      className={styles.overlay}
+      aria-label="Close archive case dialog"
+      {...overlayProps}
+    >
+      <div className={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>
+
+        <div className={styles.warningPanel}>
+          <p>
+            Archiving a case permanently renders it read-only.
+          </p>
+          <p>
+            The archive will be in JSON format and include all images.
+          </p>
+          <p>
+            The full audit trail is packaged with Striae&apos;s current public key and forensic signatures.
+          </p>
+          <p>
+            You can import the archived package back into Striae for future review.
+          </p>
+        </div>
+
+        <label htmlFor="archiveReason" className={styles.reasonLabel}>Archive reason (recommended)</label>
+        <textarea
+          id="archiveReason"
+          ref={reasonRef}
+          value={archiveReason}
+          onChange={(event) => setArchiveReason(event.target.value)}
+          className={styles.reasonInput}
+          placeholder="Optional chain-of-custody note"
+          disabled={isSubmitting}
+          rows={3}
+        />
+
+        <div className={styles.actions}>
+          <button
+            type="button"
+            className={styles.cancelButton}
+            onClick={requestClose}
+            disabled={isCloseBlocked}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            className={styles.confirmButton}
+            onClick={() => {
+              void handleSubmit();
+            }}
+            disabled={isSubmitting}
+          >
+            {isSubmitting ? 'Archiving...' : 'Confirm Archive'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,81 @@
+.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;
+}
+
+.helperText {
+  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 {
+  background: #198754;
+  color: #ffffff;
+  border-color: #157347;
+}
+
+.cancelButton:disabled,
+.confirmButton:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}

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

@@ -0,0 +1,120 @@
+import { useEffect, useRef, useState } from 'react';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
+import styles from './open-case-modal.module.css';
+
+interface OpenCaseModalProps {
+  isOpen: boolean;
+  isSubmitting?: boolean;
+  title?: string;
+  helperText?: string;
+  onClose: () => void;
+  onSubmit: (caseNumber: string) => Promise<void>;
+}
+
+export const OpenCaseModal = ({
+  isOpen,
+  isSubmitting = false,
+  title = 'Open Case',
+  helperText,
+  onClose,
+  onSubmit,
+}: OpenCaseModalProps) => {
+  const [caseNumber, setCaseNumber] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+  const isCloseBlocked = isSubmitting;
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const focusId = window.requestAnimationFrame(() => {
+      inputRef.current?.focus();
+    });
+
+    return () => {
+      window.cancelAnimationFrame(focusId);
+    };
+  }, [isOpen]);
+
+  const handleClose = () => {
+    if (isCloseBlocked) {
+      return;
+    }
+
+    setCaseNumber('');
+    onClose();
+  };
+
+  const {
+    requestClose,
+    overlayProps,
+    getCloseButtonProps,
+  } = useOverlayDismiss({
+    isOpen,
+    onClose: handleClose,
+    canDismiss: !isCloseBlocked,
+  });
+
+  const handleSubmit = async () => {
+    const trimmedCaseNumber = caseNumber.trim();
+    if (!trimmedCaseNumber || isSubmitting) {
+      return;
+    }
+
+    await onSubmit(trimmedCaseNumber);
+    setCaseNumber('');
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className={styles.overlay}
+      aria-label="Close open case dialog"
+      {...overlayProps}
+    >
+      <div className={styles.modal} role="dialog" aria-modal="true" aria-label="Open Case">
+        <button {...getCloseButtonProps({ ariaLabel: 'Close open case dialog' })}>
+          ×
+        </button>
+        <h3 className={styles.title}>{title}</h3>
+        {helperText ? <p className={styles.helperText}>{helperText}</p> : null}
+        <input
+          ref={inputRef}
+          type="text"
+          className={styles.input}
+          value={caseNumber}
+          onChange={(event) => setCaseNumber(event.target.value)}
+          placeholder="Case #"
+          disabled={isSubmitting}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              void handleSubmit();
+            }
+          }}
+        />
+        <div className={styles.actions}>
+          <button
+            type="button"
+            className={styles.cancelButton}
+            onClick={requestClose}
+            disabled={isCloseBlocked}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            className={styles.confirmButton}
+            onClick={() => {
+              void handleSubmit();
+            }}
+            disabled={isSubmitting || !caseNumber.trim()}
+          >
+            {isSubmitting ? 'Opening...' : 'Load/Create Case'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,81 @@
+.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 {
+  background: #ffc107;
+  color: #3f2f00;
+  border-color: #e8b103;
+}
+
+.cancelButton:disabled,
+.confirmButton:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}