@striae-org/striae 4.1.0 → 4.2.0

package/app/components/canvas/canvas.module.css

@@ -12,12 +12,21 @@
 }
 
 .imageContainer {
-  position: relative;
+  flex: 1;
+  min-width: 0;
   display: flex;
   justify-content: center;
   align-items: center;
+  overflow: visible;
+}
+
+/* Tight wrapper sized to the rendered image — all overlays position relative to this */
+.imageWrapper {
+  position: relative;
+  display: inline-block;
+  line-height: 0;
   max-width: 100%;
-  max-height: 100%;
+  max-height: 80vh;
 }
 
 .toolbarWrapper {
@@ -34,7 +43,7 @@
   top: 1rem;
   z-index: 15;
   color: #e0e0e0;
-  font-family: 'Inter', sans-serif;
+  font-family: "Inter", sans-serif;
   font-size: 1rem;
   font-weight: 500;
   pointer-events: none;
@@ -47,7 +56,7 @@
 
 .confirmationIncluded {
   font-size: 0.8rem;
-  color: #FFDE21;
+  color: #ffde21;
 }
 
 .confirmationConfirmed {
@@ -103,31 +112,15 @@
   box-shadow: 0 2px 6px rgba(0, 123, 255, 0.4);
 }
 
-/* Company Display */
-.companyDisplay {
-  position: absolute;
-  right: 2rem;
-  top: 1rem;
-  z-index: 15;
-  color: #e0e0e0;
-  font-family: 'Inter', sans-serif;
-  font-size: 1.5rem;
-  font-weight: 500;
-  pointer-events: none;
-  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: calc(100vw - 16rem);
-}
-
 .image {
+  display: block;
   max-width: 100%;
   max-height: 80vh;
   object-fit: contain;
 }
 
-.placeholder, .loading {
+.placeholder,
+.loading {
   color: #e0e0e0;
   font-size: 1.1rem;
   text-align: center;
@@ -155,7 +148,7 @@
 .leftAnnotation,
 .rightAnnotation {
   position: absolute;
-  padding: 0.75rem 1rem;
+  padding: 1rem 1.4rem;
   background: rgba(0, 0, 0, 0.7);
   border-radius: 6px;
   backdrop-filter: blur(4px);
@@ -177,7 +170,7 @@
   position: absolute;
   bottom: 1rem;
   left: 1rem;
-  padding: 0.75rem 1rem;
+  padding: 1rem 1.4rem;
   background: rgba(0, 0, 0, 0.7);
   border-radius: 6px;
   backdrop-filter: blur(4px);
@@ -186,7 +179,7 @@
 }
 
 .caseText {
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
   font-size: 1.1rem;
   font-weight: 700;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
@@ -197,7 +190,7 @@
 /* Class Characteristics Display */
 .classCharacteristics {
   position: absolute;
-  top: -3rem;
+  bottom: calc(100% + 0.5rem);
   left: 50%;
   transform: translateX(-50%);
   z-index: 15;
@@ -205,14 +198,14 @@
 }
 
 .classText {
-  padding: 0.75rem 1.5rem;
+  padding: 1rem 2rem;
   background: rgba(0, 0, 0, 0.8);
   color: #ffffff;
   border-radius: 8px;
   backdrop-filter: blur(6px);
   border: 2px solid rgba(255, 255, 255, 0.2);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
-  font-family: 'Inter', sans-serif;
+  font-family: "Inter", sans-serif;
   font-size: 1.1rem;
   font-weight: 600;
   text-align: center;
@@ -237,7 +230,7 @@
   backdrop-filter: blur(6px);
   border: 2px solid rgba(255, 255, 255, 0.2);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
-  font-family: 'Inter', sans-serif;
+  font-family: "Inter", sans-serif;
   font-size: 1.1rem;
   font-weight: 700;
   text-align: center;
@@ -249,8 +242,8 @@
 /* Subclass Warning Display */
 .subclassWarning {
   position: absolute;
-  bottom: 1rem; 
-  right: 2rem; 
+  bottom: 1rem;
+  right: 2rem;
   z-index: 20;
   pointer-events: none;
 }
@@ -263,7 +256,7 @@
   backdrop-filter: blur(6px);
   border: 2px solid rgba(255, 255, 255, 0.3);
   box-shadow: 0 4px 16px rgba(220, 53, 69, 0.4);
-  font-family: 'Inter', sans-serif;
+  font-family: "Inter", sans-serif;
   font-size: 1rem;
   font-weight: 700;
   text-align: center;
@@ -282,33 +275,50 @@
 /* Image and Notes Container */
 .imageAndNotesContainer {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-  max-width: 100%;
-  max-height: 100%;
+  flex-direction: row;
+  align-items: stretch;
+  align-self: stretch;
+  width: 100%;
 }
 
-/* Additional Notes Display */
-.additionalNotesContainer {
+/* Notes Panel - fixed-width right-side column */
+.notesPanel {
+  width: 260px;
+  flex-shrink: 0;
+  /* Opt out of stretch so the explicit height takes effect, stopping the panel
+     before the Subclass badge (bottom:1rem, ~2.5rem tall = 3.5rem from canvas bottom).
+     calc(100% - 4rem) lands ~4rem from the canvas bottom, clearing the badge. */
+  align-self: flex-start;
+  height: calc(100% - 4rem);
   display: flex;
-  justify-content: center;
-  width: 100%;
-  max-width: 600px;
+  flex-direction: column;
+  background: rgba(20, 20, 20, 0.55);
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+}
+
+.notesPanelHeader {
+  padding: 0.625rem 1rem;
+  color: #adb5bd;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  flex-shrink: 0;
+  font-family: "Inter", sans-serif;
 }
 
 .additionalNotesBox {
-  background: #ffffff;
-  color: #000000;
-  padding: 1rem 1.5rem;
-  border-radius: 8px;
-  border: 2px solid #d0d0d0;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  font-family: 'Inter', sans-serif;
-  font-size: 0.95rem;
-  line-height: 1.4;
+  flex: 1;
+  overflow-y: auto;
+  background: transparent;
+  color: #e0e0e0;
+  padding: 1rem;
+  font-family: "Inter", sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.5;
   text-align: left;
   white-space: pre-wrap;
   word-wrap: break-word;
-  max-width: 100%;
-}
+}

package/app/components/canvas/canvas.tsx

@@ -19,6 +19,7 @@ interface CanvasProps {
   isBoxAnnotationMode?: boolean;
   boxAnnotationColor?: string;
   isReadOnly?: boolean;
+  isArchivedCase?: boolean;
   // Confirmation data for storing case-level confirmations
   caseNumber: string; // Required for audit logging
   currentImageId?: string;
@@ -32,7 +33,7 @@ type ImageLoadError = {
 export const Canvas = ({ 
   imageUrl, 
   filename, 
-  company, 
+  company,
   badgeId,
   firstName, 
   error, 
@@ -42,6 +43,7 @@ export const Canvas = ({
   isBoxAnnotationMode = false,
   boxAnnotationColor = '#FF0000',
   isReadOnly = false,
+  isArchivedCase = false,
   caseNumber,
   currentImageId
 }: CanvasProps) => {
@@ -276,7 +278,7 @@ export const Canvas = ({
                   <div className={styles.confirmationIncluded}>
                     {isReadOnly ? 'Confirmation Requested' : 'Confirmation Field Included'}
                   </div>
-                  {isReadOnly && (
+                  {isReadOnly && !isArchivedCase && (
                     <button 
                       className={styles.confirmButton}
                       onClick={() => setIsConfirmationModalOpen(true)}
@@ -291,13 +293,6 @@ export const Canvas = ({
         </div>
       )}
       
-      {/* Company Display - Upper Right */}
-      {company && (
-        <div className={styles.companyDisplay}>
-          {isReadOnly ? 'CASE REVIEW ONLY' : company}
-        </div>
-      )}
-      
       {(loadError || error) ? (
         <p className={styles.error}>{getErrorMessage()}</p>
       ) : isLoading ? (
@@ -305,6 +300,7 @@ export const Canvas = ({
       ) : imageUrl && imageUrl !== '/clear.jpg' ? (
         <div className={styles.imageAndNotesContainer}>
           <div className={styles.imageContainer}>
+            <div className={styles.imageWrapper}>
             {/* Class Characteristics - Above Image */}
             {activeAnnotations?.has('class') && annotationData && (annotationData.customClass || annotationData.classType) && (
               <div className={styles.classCharacteristics}>
@@ -333,7 +329,7 @@ export const Canvas = ({
             draggable={false}
           />
           
-          {/* Box Annotations Component - Show when box tool is active for visibility */}
+          {/* Box Annotations Component - contained within imageWrapper */}
           {activeAnnotations?.has('box') && (
             <BoxAnnotations
               imageRef={imageRef}
@@ -350,7 +346,7 @@ export const Canvas = ({
             />
           )}
           
-          {/* Annotations Overlay */}
+          {/* Annotations Overlay - contained within imageWrapper */}
           {activeAnnotations?.has('number') && annotationData && (
             <div className={styles.annotationsOverlay}>
               {/* Left side case and item numbers */}
@@ -385,7 +381,7 @@ export const Canvas = ({
             </div>
           )}
           
-          {/* Index Number Overlay */}
+          {/* Index Number Overlay - contained within imageWrapper */}
           {activeAnnotations?.has('index') && annotationData?.indexType === 'number' && annotationData?.indexNumber && (
             <div className={styles.annotationsOverlay}>
               <div 
@@ -402,15 +398,17 @@ export const Canvas = ({
               </div>
             </div>
           )}
-        </div>
+            </div>{/* end imageWrapper */}
+        </div>{/* end imageContainer */}
         
-        {/* Additional Notes - Below Image */}
+        {/* Additional Notes - Right Panel */}
         {activeAnnotations?.has('notes') && annotationData?.additionalNotes && (
-          <div className={styles.additionalNotesContainer}>
+          <aside className={styles.notesPanel} aria-label="Additional notes">
+            <div className={styles.notesPanelHeader}>Notes</div>
             <div className={styles.additionalNotesBox}>
               {annotationData.additionalNotes}
             </div>
-          </div>
+          </aside>
         )}
         </div>
       ) : (

package/app/components/canvas/confirmation/confirmation.module.css

@@ -11,6 +11,7 @@
 }
 
 .modal {
+  position: relative;
   background: var(--backgroundLight);
   border-radius: var(--spaceXS);
   width: 90%;

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

@@ -41,8 +41,9 @@ export const ConfirmationModal = ({ isOpen, onClose, onConfirm, company, default
   const confirmationId = generateConfirmationId();
 
   const {
-    handleOverlayMouseDown,
-    handleOverlayKeyDown
+    requestClose,
+    overlayProps,
+    getCloseButtonProps
   } = useOverlayDismiss({
     isOpen,
     onClose
@@ -100,22 +101,15 @@ export const ConfirmationModal = ({ isOpen, onClose, onConfirm, company, default
   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>
@@ -186,7 +180,7 @@ export const ConfirmationModal = ({ isOpen, onClose, onConfirm, company, default
         <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;
+}